Skip to content

Instantly share code, notes, and snippets.

@ozscosta

ozscosta/confirm-versao-anterior.js

Last active May 25, 2021 13:01
Show Gist options
  • Save ozscosta/748b41bdbdb40d65c382c9528090c20d to your computer and use it in GitHub Desktop.
Save ozscosta/748b41bdbdb40d65c382c9528090c20d to your computer and use it in GitHub Desktop.
Download ZIP
Plugin Confirm
Raw
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');
}
})();
Raw
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');
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment