betterConfirm.js

/**
 * Better confirm.<br>
 * It requires jQuery and bootstrap v5.
 *
 * <pre>
 * Use as Promise: betterConfirm('title').then(function)
 * Or as jQuery event: .on('action', {
 *      title: string,
 *      callback: function,
 *      confirm: string,
 *      cancel: string
 * }, betterConfirm)
 * If you use jQuery and title/confirm/cancel are omitted then function is also looking at element attributes data-confirm-title/data-confirm-ok/data-confirm-nok
 * </pre>
 *
 * @author Michal Stefanak
 * @this {HTMLElement}
 * @param {Object|string} titleOrEvent
 * @param {string} [ok]
 * @param {string} [nok]
 * @return {Promise|void}
 */
function betterConfirm(titleOrEvent, ok, nok) {
    if (titleOrEvent === undefined) return;

    let id = '#confirm-modal',
        confirm = 'Ok',
        cancel = 'Cancel',
        title = 'Are you sure?';

    const lang = $('html').attr('lang');
    if (confirm_l10n[lang]) {
        confirm = confirm_l10n[lang].confirm;
        cancel = confirm_l10n[lang].cancel;
        title = confirm_l10n[lang].title;
    }

    if (typeof titleOrEvent === "object") {
        titleOrEvent.preventDefault();
        confirm = titleOrEvent.data.confirm || $(this).data('confirm-ok') || confirm;
        cancel = titleOrEvent.data.cancel || $(this).data('confirm-nok') || cancel;
        title = titleOrEvent.data.title || $(this).data('confirm-title') || title;
    } else {
        if (titleOrEvent.length > 0)
            title = titleOrEvent;
        if (ok.length > 0)
            confirm = ok;
        if (nok.length > 0)
            cancel = nok;
    }

    if ($(id).length === 0) {
        $('body').append(
            '<div id="confirm-modal" class="modal fade" tabindex="-1"> \
                <div class="modal-dialog modal-dialog-centered"> \
                    <div class="modal-content"> \
                        <div class="modal-header"> \
                            <h5 class="modal-title">' + title + '</h5> \
                        </div> \
                        <div class="modal-footer"> \
                            <button type="button" class="btn btn-success btn-icon-split" data-bs-dismiss="modal"> \
                                <span class="icon"><i class="fas fa-check"></i></span> \
                                <span class="text">' + confirm + '</span> \
                            </button> \
                            <button type="button" class="btn btn-secondary btn-icon-split" data-bs-dismiss="modal"> \
                                <span class="icon"><i class="fas fa-times"></i></span> \
                                <span class="text">' + cancel + '</span> \
                            </button> \
                        </div> \
                    </div> \
                </div> \
            </div>'
        );

        new bootstrap.Modal($(id)[0], {
            backdrop: 'static'
        });
        $(id).on('hidden.bs.modal', function () {
            $('.btn-success, .btn-secondary', id).off('click.callback');
        });
    } else {
        $('h5', id).text(title);
        $('button.btn-success .text', id).text(confirm);
        $('button.btn-secondary .text', id).text(cancel);
    }

    bootstrap.Modal.getInstance($(id)[0]).show();

    if (typeof titleOrEvent === "object" && typeof (titleOrEvent.data.callback || null) === "function") {
        let t = this;
        $('.btn-success', id).one('click.callback', function () {
            titleOrEvent.data.callback.call(t);
        });
    } else {
        return new Promise(function (resolve, reject) {
            $('.btn-success', id).one('click.callback', function () {
                resolve();
            });
            $('.btn-secondary', id).one('click.callback', function () {
                reject();
            });
        });
    }
}

const confirm_l10n = {
    cs: {
        confirm: 'Potvrdit',
        cancel: 'Zrušit',
        title: 'Jste si jistý?'
    },
    de: {
        confirm: 'Bestätigen',
        cancel: 'Stornieren',
        title: 'Bist du sicher?'
    },
    sk: {
        confirm: 'Potvrdiť',
        cancel: 'Zrušiť',
        title: 'Ste si istý?'
    }
};

/**
 * Automatically use confirm action on all elements with .confirm-event class
 */
$(function () {
    $('body')
        .on('click.confirm', '.confirm-event', {
            callback: function () {
                $(this).removeClass('confirm-event')
                this.click();
            }
        }, betterConfirm);
});