How to add additional custom ContentSlots

[igorkasyanchuk]

Hi,

thank you for your library.
I wish it were an option to change the text for the "Cancel" button. I want to set it to "Close" in some cases.

I tried to create so something like this as a workaround, render another dialog and

<% dialog_id ||= "confirm" %>
<dialog id="<%= dialog_id %>" class="modal" data-controller="dialog" data-action="click@window->dialog#handleOutsideClick">

....

and call it like this

<%= button_to subscription_path(subscription),
              data: {
                turbo_method: :delete,
                turbo_confirm: "Cancel this subscription?",
                confirm_details: "Are you sure you want to cancel this subscription?",
                confirm_button: "11Yes, I'm sure",
                dialogSelector: "#confirmUnsubscribe",

but received

printWarning @ hotwire_dev_tools_content.js:115
(anonymous) @ hotwire_dev_tools_content.js:115
(anonymous) @ hotwire_dev_tools_content.js:115
_checkStimulusTargetsNesting @ hotwire_dev_tools_content.js:115
checkForWarnings @ hotwire_dev_tools_content.js:115
(anonymous) @ hotwire_dev_tools_content.js:115
r @ hotwire_dev_tools_content.js:2
setTimeout
(anonymous) @ hotwire_dev_tools_content.js:2
Wn @ hotwire_dev_tools_content.js:115
postMessage
t @ hotwire_dev_tools_inject_script.js:1
s @ hotwire_dev_tools_inject_script.js:1
(anonymous) @ hotwire_dev_tools_inject_script.js:1
(anonymous) @ hotwire_dev_tools_inject_script.js:1Understand this warning
utils.js:11 Uncaught (in promise) TurboConfirmError: No element matching dialogSelector: '#confirm'
    at TurboConfirmError.missingDialog (utils.js:11:12)
    at #storeInitialContent (ConfirmationController.js:74:31)
    at ConfirmationController.showConfirm (ConfirmationController.js:15:10)
    at TurboConfirm.confirmWithContent (TurboConfirm.js:56:29)

PS: if what I need is still possible, I wish the documentation contained more examples.

[OutlawAndy]

Hey @igorkasyanchuk!

You can do this using contentSlots. I realize the documentation could use some examples in this area, but it works like this:

You'll need to pass a config object into the start function:

import '@hotwired/turbo-rails'
import TC from '@rolemodel/turbo-confirm'

TC.start({
  contentSlots: {
    body: {
      contentAttribute: 'confirm-details',
      slotSelector: '#confirm-body'
    },
    acceptText: {
      contentAttribute: 'confirm-button',
      slotSelector: '#confirm-accept'
    },
    rejectText: {
      contentAttribute: 'confirm-cancel',
      slotSelector: '#confirm-cancel'
    }
  }
})

body & acceptText are already defined by default, but they'll be overridden by our custom contentSlots object so I've added them to it. If you don't use either of those, you can leave them off.

Taking a closer look at our new custom content slot:

    rejectText: {
      contentAttribute: 'confirm-cancel',
      slotSelector: '#confirm-cancel'
    }

The name rejectText is arbitrary. I chose it because it matches the existing patterns, but name it whatever you want. Having a unique name just slightly simplifies the code internally that processes these.

contentAttribute - this refers to the data attribute on your confirmation trigger.
slotSelector - this refers to the element in your confirmation dialog that should receive the new content.

So given the above example, we're telling TurboConfirm to look for a data-confirm-cancel attribute on our confirmation trigger and place it's value into whatever element is returned by calling dialog.querySelector('#confirm-cancel'). It will fail silently if no element is found, so make sure to double check your dialog HTML.

Tying this back to your original question & with the additional contentSlot defined, your original code can be updated to use it like this:

<%= button_to subscription_path(subscription),
              data: {
                turbo_method: :delete,
                turbo_confirm: "Cancel this subscription?",
                confirm_details: "Are you sure you want to cancel this subscription?",
                confirm_button: "Yes, I'm sure",
                confirm_cancel: "Close",
              }
  %>

Hope this helps!