Plugin Confirm

confirm-versao-anterior.js

;(function () {
    'use strict';

    $.plugins = $.plugins || {};

    $.plugins.confirm = function () {
        // -----------------------------------------------------------------------------------
        // possibilidades de uso:
        //
        // 1 -> mensagem        'mensagem'
        // 2 -> btn_cancelar    [f_click, titulo, classe] || f_click || 'titulo'  (opcional)
        // 3 -> btn_ok_1        [f_click, titulo, classe] || f_click || 'titulo'
        // 4 -> btn_ok_2        [f_click, titulo, classe]   (opcional)
        //
        // ou ainda
        //
        // 1 -> mensagem        'mensagem'
        // 2 -> btn_ok_1        [f_click, titulo, classe] || f_click || 'titulo'
        // -----------------------------------------------------------------------------------

        let mensagem = '';
        let btn_cancelar = {
            classe: 'btn bg-soft-secondary',
            titulo: '<i class="mdi mdi-close"></i> Cancelar',
            fn_click: $.noop()
        };
        let btn_ok_1 = {
            classe: 'btn btn-primary',
            titulo: '<i class="mdi mdi-check"></i> Prosseguir',
            f_click: $.noop()
        };
        let btn_ok_2 = {
            classe: 'btn btn-warning',
            titulo: '',
            f_click: $.noop()
        };

        let BTN_CANCELAR = 1;
        let BTN_OK_1 = 2;
        let BTN_OK_2 = 3;

        mensagem = arguments[0] || mensagem;

        // o cancelar pode ter sido OMIITDO - não obrigatório
        if (arguments.length < 3) {
            BTN_CANCELAR = -1;
            BTN_OK_1 = 1;
            BTN_OK_2 = -1;
        }

        // botão cancelar
        if (typeof arguments[BTN_CANCELAR] === 'object') {
            btn_cancelar.fn_click = arguments[BTN_CANCELAR][0] || btn_cancelar.fn_click;
            btn_cancelar.titulo = arguments[BTN_CANCELAR][1] || btn_cancelar.titulo;
            btn_cancelar.classe = arguments[BTN_CANCELAR][2] || btn_cancelar.classe;
        } else if (typeof arguments[BTN_CANCELAR] === 'function') {
            btn_cancelar.fn_click = arguments[BTN_CANCELAR] || btn_cancelar.fn_click;
        } else if (typeof arguments[BTN_CANCELAR] === 'string') {
            btn_cancelar.titulo = arguments[BTN_CANCELAR] || btn_cancelar.titulo;
        }

        // botão ok 1
        if (typeof arguments[BTN_OK_1] === 'object') {
            btn_ok_1.fn_click = arguments[BTN_OK_1][0] || btn_ok_1.fn_click;
            btn_ok_1.titulo = arguments[BTN_OK_1][1] || btn_ok_1.titulo;
            btn_ok_1.classe = arguments[BTN_OK_1][2] || btn_ok_1.classe;
        } else if (typeof arguments[BTN_OK_1] === 'function') {
            btn_ok_1.fn_click = arguments[BTN_OK_1] || btn_ok_1.fn_click;
        } else if (typeof arguments[BTN_OK_1] === 'string') {
            btn_ok_1.titulo = arguments[BTN_OK_1] || btn_ok_1.titulo;
        }

        // botão ok 2 [opcional]
        if (typeof arguments[BTN_OK_2] === 'object') {
            btn_ok_2.fn_click = arguments[BTN_OK_2][0] || btn_ok_2.fn_click;
            btn_ok_2.titulo = arguments[BTN_OK_2][1] || btn_ok_2.titulo;
            btn_ok_2.classe = arguments[BTN_OK_2][2] || btn_ok_2.classe;
        }

        // modal template
        const $template = $(`
            <div class="modal fade in" data-toggle="modal" data-bs-backdrop="static" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="text-center">
                                <div class="mb-2">
                                    <i class="mdi mdi-progress-question display-1 text-success"></i>
                                </div>
                                <div data-mensagem></div>
                            </div>
                        </div>
                        <div class="modal-footer"></div>
                    </div>
                </div>
            </div>
        `).appendTo('body');

        // caso a mensagem inicie com alguma tag html
        if (!/^<\w+/.test(mensagem)) {
            mensagem = $('<h3>').append(mensagem.replace(/\n/g, '<br>'));
        }
        $template.find('[data-mensagem]').append(mensagem);

        // botões cancelar e ok_1 - obrigatório
        $template
            .find('.modal-footer')
            .append(
                $('<button type="button" data-bs-dismiss="modal">')
                    .addClass(btn_cancelar.classe)
                    .append(btn_cancelar.titulo)
                    .on('click', $.proxy(btn_cancelar.fn_click, this))
                ,

                $('<button type="button" data-bs-dismiss="modal">')
                    .addClass(btn_ok_1.classe)
                    .append(btn_ok_1.titulo)
                    .on('click', $.proxy(btn_ok_1.fn_click, this))
            );

        // botão ok 2 - opcional
        if (btn_ok_2.titulo) {
            $template
                .find('.modal-footer')
                .append(
                    $('<button type="button" data-bs-dismiss="modal">')
                        .addClass(btn_ok_2.classe)
                        .append(btn_ok_2.titulo)
                        .on('click', $.proxy(btn_ok_2.fn_click, this))
                )
        }

        $template
            .on('hide.bs.modal', function () {
                $(this).remove()
            })
            .modal('show');
    }
})();

confirm.js

;(function () {
    'use strict';

    $.plugins = $.plugins || {};

    $.plugins.confirm = function ({ mensagem, btn_cancelar, btn_ok, btn_adicional, ...extras }) {
        const defaults = {
            btn_cancelar: {
                classe: 'btn bg-soft-secondary',
                titulo: '<i class="mdi mdi-close"></i> Cancelar',
                fn_click: $.noop()
            },
            btn_ok: {
                classe: 'btn btn-primary',
                titulo: '<i class="mdi mdi-check"></i> Prosseguir',
                fn_click: $.noop()
            },
        }

        //
        // btn OK
        //

        if (typeof btn_ok === 'object') {
            btn_ok.fn_click = btn_ok.fn_click || defaults.btn_ok.fn_click;
            btn_ok.titulo = btn_ok.titulo || defaults.btn_ok.titulo;
            btn_ok.classe = btn_ok.classe || defaults.btn_ok.classe;
        } else if (typeof btn_ok === 'function') {
            btn_ok = { ...defaults.btn_ok, fn_click: btn_ok || defaults.btn_ok.fn_click };
        } else if (typeof btn_ok === 'string') {
            btn_ok = { ...defaults.btn_ok, titulo: btn_ok || defaults.btn_ok.titulo };
        }

        //
        // btn Cancelar
        //

        if (typeof btn_cancelar === 'object') {
            btn_cancelar.fn_click = btn_cancelar.fn_click || btn_cancelar.btn_cancelar.fn_click;
            btn_cancelar.titulo = btn_cancelar.titulo || btn_cancelar.btn_cancelar.titulo;
            btn_cancelar.classe = btn_cancelar.classe || btn_cancelar.btn_cancelar.classe;
        } else if (typeof btn_cancelar === 'function') {
            btn_cancelar = defaults.btn_cancelar;
            btn_cancelar.fn_click = btn_cancelar || defaults.btn_cancelar.fn_click;
        } else if (typeof btn_cancelar === 'string') {
            btn_cancelar = defaults.btn_cancelar;
            btn_cancelar.titulo = btn_cancelar || defaults.btn_cancelar.titulo;
        } else {
            btn_cancelar = defaults.btn_cancelar;
        }

        //
        // btn Adicional
        //

        if (typeof btn_adicional === 'object') {
            btn_adicional.fn_click = btn_adicional.fn_click || $.noop();
            btn_adicional.titulo = btn_adicional.titulo || '';
            btn_adicional.classe = btn_adicional.classe || '';
        }

        // opções extras para modal
        const modal_size = extras['modal_size'] || 'modal-lg';

        //
        // modal template
        //

        const $template = $(`
            <div class="modal fade in" data-toggle="modal" data-bs-backdrop="static" role="dialog">
                <div class="modal-dialog ${modal_size}">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="text-center">
                                <div class="mb-2">
                                    <i class="mdi mdi-progress-question display-1 text-success"></i>
                                </div>
                                <div data-mensagem></div>
                            </div>
                        </div>
                        <div class="modal-footer"></div>
                    </div>
                </div>
            </div>
        `).appendTo('body');

        // caso a mensagem inicie com alguma tag html
        if (!/^<\w+/.test(mensagem)) {
            mensagem = $('<h3>').append(mensagem.replace(/\n/g, '<br>'));
        }
        $template.find('[data-mensagem]').empty().append(mensagem);

        //
        // botões cancelar e ok
        //

        $template
            .find('.modal-footer')
            .empty()
            .append(
                $('<button type="button" data-bs-dismiss="modal">')
                    .addClass(btn_cancelar.classe)
                    .append(btn_cancelar.titulo)
                    .on('click', function () {
                        btn_cancelar.fn_click()
                    })
                ,

                $('<button type="button" data-bs-dismiss="modal">')
                    .addClass(btn_ok.classe)
                    .append(btn_ok.titulo)
                    .on('click', btn_ok.fn_click)
            );

        //
        // botão adicional
        //

        if (btn_adicional) {
            $template
                .find('.modal-footer')
                .append(
                    $('<button type="button" data-bs-dismiss="modal">')
                        .addClass(btn_adicional.classe)
                        .append(btn_adicional.titulo)
                        .on('click', $.proxy(btn_adicional.fn_click, this))
                )
        }

        $template
            .on('hide.bs.modal', function () {
                $(this).remove()
            })
            .modal('show');
    }
})();