Beter data-confirm modals in Phoenix LiveView

// our dialog from the `root.html.heex`
const DANGER_DIALOG = document.getElementById(“danger_dialog“);

// Here we override the behaviour
document.body.addEventListener(‘phoenix.link.click‘, function (event) {
// we prevent the default handling of this by phoenix html
event.stopPropagation();

// grab the target
const { target: targetButton } = event;
const title = targetButton.getAttribute(“data-confirm“);

// if the target does not have `data-confirm` we simply ignore and continue
if (!title) { return true; }

// This is to enable re-triggering, which doesn’t show the modal just executes the click event. without showing the dialog
if (targetButton.hasAttribute(CONFIRM_ATTRIBUTE)) {
targetButton.removeAttribute(CONFIRM_ATTRIBUTE)
return true;
}

// We do this since window.confirm prevents all execution by default, so to recreate this behaviour we prevent the default and add an attribute which will allow us to re-trigger the click event without calling the dialog
event.preventDefault();
targetButton.setAttribute(CONFIRM_ATTRIBUTE, “”)

// Reset the `returnValue` as otherwise on keyboard `Esc` it will simply take the most recent `returnValue`
DANGER_DIALOG.returnValue = “cancel“;

// We change the title, which is nice we can have translated titles and so forth
// You can expand this and add `data-confirm-message` for a message `data-confirm-accept` to change the button text and so forth, imagination is your limit
// you could event have different dialogs data-success, data-prompt and so forth.
DANGER_DIALOG.querySelector(“[data-ref=’title’]“).innerText = title;

// we show the modal, dialog is a very cool element and provides a lot of cool things out of the box.
DANGER_DIALOG.showModal();

// Here we add the re-triggering logic
DANGER_DIALOG.addEventListener(‘close‘, ({ target }) => {
if (target.returnValue === “confirm“) {
// we re-trigger the click event, since we have the attribute set it will simply execute the click event without the dialog logic
targetButton.click();
} else {
// we need to remove the attribute as otherwise the next click would just execute the action
targetButton.removeAttribute(CONFIRM_ATTRIBUTE);
}
// once: true, automatically remove the listener after first execution
}, { once: true })

}, false)