Switch to SUXUMI bootstrap4dialog lib

This commit is contained in:
Benjamin Renard 2022-04-24 16:52:44 +02:00
parent 153ebd4902
commit 9886cb0720
22 changed files with 1371 additions and 3816 deletions

View file

@ -88,10 +88,11 @@ function handle_search($request) {
$smarty -> assign('nbs_by_page', $nbs_by_page);
$smarty -> assign('status_list', $status_list);
add_css_file('lib/bootstrap4-dialog/bootstrap-dialog.min.css');
add_js_file('lib/bootstrap4-dialog/bootstrap-dialog.min.js');
add_js_file('lib/myconfirm.js');
add_js_file('js/search.js');
add_js_file(array(
'lib/bootstrap4dialog/dist/js/bootstrap4dialog.min.js',
'js/myconfirm.js',
'js/search.js'
));
display_template("search.tpl", _("Search"));
}
@ -111,9 +112,10 @@ function handle_show($request) {
$smarty->assign('item', $item);
// Dialog
add_css_file('lib/bootstrap4-dialog/bootstrap-dialog.min.css');
add_js_file('lib/bootstrap4-dialog/bootstrap-dialog.min.js');
add_js_file('lib/myconfirm.js');
add_js_file(array(
'lib/bootstrap4dialog/dist/js/bootstrap4dialog.min.js',
'js/myconfirm.js',
));
display_template("show.tpl", sprintf(_("Element %s"), (is_array($item)?$item['name']:"#".$request -> id)));
}

View file

@ -1,7 +1,7 @@
msgid ""
msgstr ""
"Project-Id-Version: \n"
"POT-Creation-Date: 2022-04-24 16:39+0200\n"
"POT-Creation-Date: 2022-04-24 16:47+0200\n"
"PO-Revision-Date: \n"
"Last-Translator: Benjamin Renard <brenard@easter-eggs.com>\n"
"Language-Team: \n"
@ -17,8 +17,8 @@ msgid "Invalid element identifier."
msgstr "Identifiant d'élément invalide."
#: /home/brenard/dev/eesyphp/includes/url-helpers.php:9
#: /home/brenard/dev/eesyphp/includes/url-public.php:203
#: /home/brenard/dev/eesyphp/includes/url-public.php:227
#: /home/brenard/dev/eesyphp/includes/url-public.php:205
#: /home/brenard/dev/eesyphp/includes/url-public.php:229
#, php-format
msgid "Item #% s not found."
msgstr "L'élément #%s est introuvable."
@ -52,25 +52,25 @@ msgstr ""
"Une erreur est survenue en listant les éléments. Si le problème persiste, "
"merci de prendre contact avec le support."
#: /home/brenard/dev/eesyphp/includes/url-public.php:96
#: /home/brenard/dev/eesyphp/includes/url-public.php:97
msgid "Search"
msgstr "Rechercher"
#: /home/brenard/dev/eesyphp/includes/url-public.php:118
#: /home/brenard/dev/eesyphp/includes/url-public.php:120
#, php-format
msgid "Element %s"
msgstr "Élément %s"
#: /home/brenard/dev/eesyphp/includes/url-public.php:130
#: /home/brenard/dev/eesyphp/includes/url-public.php:132
#, php-format
msgid "The element '% s' has been created."
msgstr "L'élément '%s' a bien été créé."
#: /home/brenard/dev/eesyphp/includes/url-public.php:134
#: /home/brenard/dev/eesyphp/includes/url-public.php:136
msgid "An error occurred while saving this item."
msgstr "Une erreur est survenue en enregistrant cet élément."
#: /home/brenard/dev/eesyphp/includes/url-public.php:140
#: /home/brenard/dev/eesyphp/includes/url-public.php:142
msgid ""
"There are errors preventing this item from being saved. Please correct them "
"before attempting to add this item."
@ -78,29 +78,29 @@ msgstr ""
"Des erreurs empêchent l'enregistrement de cet élément. Merci de les corriger "
"avant de tenter d'ajouter cet élément."
#: /home/brenard/dev/eesyphp/includes/url-public.php:146
#: /home/brenard/dev/eesyphp/includes/url-public.php:148
msgid "New"
msgstr "Nouveau"
#: /home/brenard/dev/eesyphp/includes/url-public.php:156
#: /home/brenard/dev/eesyphp/includes/url-public.php:158
msgid "You cannot edit this item."
msgstr "Vous ne pouvez pas modifier cet élément."
#: /home/brenard/dev/eesyphp/includes/url-public.php:169
#: /home/brenard/dev/eesyphp/includes/url-public.php:171
#, php-format
msgid "You have not made any changes to element '% s'."
msgstr "Vous n'avez apporté aucune modification à l'élément '%s'."
#: /home/brenard/dev/eesyphp/includes/url-public.php:173
#: /home/brenard/dev/eesyphp/includes/url-public.php:175
#, php-format
msgid "The element '% s' has been updated successfully."
msgstr "L'élément '%s' a bien été mise à jour."
#: /home/brenard/dev/eesyphp/includes/url-public.php:177
#: /home/brenard/dev/eesyphp/includes/url-public.php:179
msgid "An error occurred while updating this item."
msgstr "Une erreur est survenue en mettant à jour cet élément."
#: /home/brenard/dev/eesyphp/includes/url-public.php:184
#: /home/brenard/dev/eesyphp/includes/url-public.php:186
msgid ""
"There are errors preventing this item from being saved. Please correct them "
"before attempting to save your changes."
@ -108,38 +108,38 @@ msgstr ""
"Des erreurs empêchent l'enregistrement de cet élément. Merci de les corriger "
"avant de tenter d'enregistrer vos modifications."
#: /home/brenard/dev/eesyphp/includes/url-public.php:194
#: /home/brenard/dev/eesyphp/includes/url-public.php:196
#, php-format
msgid "Element %s: Modification"
msgstr "Élément %s : Modification"
#: /home/brenard/dev/eesyphp/includes/url-public.php:207
#: /home/brenard/dev/eesyphp/includes/url-public.php:209
msgid "This item is already archived."
msgstr "Cet élément est déjà archivé."
#: /home/brenard/dev/eesyphp/includes/url-public.php:210
#: /home/brenard/dev/eesyphp/includes/url-public.php:212
msgid "You cannot archive this item."
msgstr "Vous ne pouvez pas archiver cet élément."
#: /home/brenard/dev/eesyphp/includes/url-public.php:213
#: /home/brenard/dev/eesyphp/includes/url-public.php:215
#, php-format
msgid "The element '% s' has been archived successfully."
msgstr "L'élément '%s' a bien été archivé."
#: /home/brenard/dev/eesyphp/includes/url-public.php:216
#: /home/brenard/dev/eesyphp/includes/url-public.php:218
msgid "An error occurred while archiving this item."
msgstr "Une erreur est survenue en archivant cet élément."
#: /home/brenard/dev/eesyphp/includes/url-public.php:230
#: /home/brenard/dev/eesyphp/includes/url-public.php:232
msgid "You cannot delete this item."
msgstr "Vous ne pouvez pas supprimer cet élément."
#: /home/brenard/dev/eesyphp/includes/url-public.php:233
#: /home/brenard/dev/eesyphp/includes/url-public.php:235
#, php-format
msgid "The element '% s' has been deleted successfully."
msgstr "L'élément '%s' a bien été supprimé."
#: /home/brenard/dev/eesyphp/includes/url-public.php:236
#: /home/brenard/dev/eesyphp/includes/url-public.php:238
msgid "An error occurred while deleting this item."
msgstr "Une erreur est survenue en supprimant cet élément."

View file

@ -1,7 +1,7 @@
msgid ""
msgstr ""
"POT-Creation-Date: 2022-04-24 16:39+0200\n"
"PO-Revision-Date: 2022-04-24 16:39+0200\n"
"POT-Creation-Date: 2022-04-24 16:47+0200\n"
"PO-Revision-Date: 2022-04-24 16:47+0200\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"

View file

@ -1,7 +1,7 @@
msgid ""
msgstr ""
"POT-Creation-Date: 2022-04-24 16:39+0200\n"
"PO-Revision-Date: 2022-04-24 16:39+0200\n"
"POT-Creation-Date: 2022-04-24 16:47+0200\n"
"PO-Revision-Date: 2022-04-24 16:47+0200\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
@ -11,8 +11,8 @@ msgid "Invalid element identifier."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-helpers.php:9
#: /home/brenard/dev/eesyphp/includes/url-public.php:203
#: /home/brenard/dev/eesyphp/includes/url-public.php:227
#: /home/brenard/dev/eesyphp/includes/url-public.php:205
#: /home/brenard/dev/eesyphp/includes/url-public.php:229
#, php-format
msgid "Item #% s not found."
msgstr ""
@ -44,90 +44,90 @@ msgid ""
"contact support."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:96
#: /home/brenard/dev/eesyphp/includes/url-public.php:97
msgid "Search"
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:118
#: /home/brenard/dev/eesyphp/includes/url-public.php:120
#, php-format
msgid "Element %s"
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:130
#: /home/brenard/dev/eesyphp/includes/url-public.php:132
#, php-format
msgid "The element '% s' has been created."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:134
#: /home/brenard/dev/eesyphp/includes/url-public.php:136
msgid "An error occurred while saving this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:140
#: /home/brenard/dev/eesyphp/includes/url-public.php:142
msgid ""
"There are errors preventing this item from being saved. Please correct them "
"before attempting to add this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:146
#: /home/brenard/dev/eesyphp/includes/url-public.php:148
msgid "New"
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:156
#: /home/brenard/dev/eesyphp/includes/url-public.php:158
msgid "You cannot edit this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:169
#: /home/brenard/dev/eesyphp/includes/url-public.php:171
#, php-format
msgid "You have not made any changes to element '% s'."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:173
#: /home/brenard/dev/eesyphp/includes/url-public.php:175
#, php-format
msgid "The element '% s' has been updated successfully."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:177
#: /home/brenard/dev/eesyphp/includes/url-public.php:179
msgid "An error occurred while updating this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:184
#: /home/brenard/dev/eesyphp/includes/url-public.php:186
msgid ""
"There are errors preventing this item from being saved. Please correct them "
"before attempting to save your changes."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:194
#: /home/brenard/dev/eesyphp/includes/url-public.php:196
#, php-format
msgid "Element %s: Modification"
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:207
#: /home/brenard/dev/eesyphp/includes/url-public.php:209
msgid "This item is already archived."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:210
#: /home/brenard/dev/eesyphp/includes/url-public.php:212
msgid "You cannot archive this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:213
#: /home/brenard/dev/eesyphp/includes/url-public.php:215
#, php-format
msgid "The element '% s' has been archived successfully."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:216
#: /home/brenard/dev/eesyphp/includes/url-public.php:218
msgid "An error occurred while archiving this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:230
#: /home/brenard/dev/eesyphp/includes/url-public.php:232
msgid "You cannot delete this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:233
#: /home/brenard/dev/eesyphp/includes/url-public.php:235
#, php-format
msgid "The element '% s' has been deleted successfully."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:236
#: /home/brenard/dev/eesyphp/includes/url-public.php:238
msgid "An error occurred while deleting this item."
msgstr ""

View file

@ -3,8 +3,8 @@ msgid "Invalid element identifier."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-helpers.php:9
#: /home/brenard/dev/eesyphp/includes/url-public.php:203
#: /home/brenard/dev/eesyphp/includes/url-public.php:227
#: /home/brenard/dev/eesyphp/includes/url-public.php:205
#: /home/brenard/dev/eesyphp/includes/url-public.php:229
#, php-format
msgid "Item #% s not found."
msgstr ""
@ -36,90 +36,90 @@ msgid ""
"contact support."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:96
#: /home/brenard/dev/eesyphp/includes/url-public.php:97
msgid "Search"
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:118
#: /home/brenard/dev/eesyphp/includes/url-public.php:120
#, php-format
msgid "Element %s"
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:130
#: /home/brenard/dev/eesyphp/includes/url-public.php:132
#, php-format
msgid "The element '% s' has been created."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:134
#: /home/brenard/dev/eesyphp/includes/url-public.php:136
msgid "An error occurred while saving this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:140
#: /home/brenard/dev/eesyphp/includes/url-public.php:142
msgid ""
"There are errors preventing this item from being saved. Please correct them "
"before attempting to add this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:146
#: /home/brenard/dev/eesyphp/includes/url-public.php:148
msgid "New"
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:156
#: /home/brenard/dev/eesyphp/includes/url-public.php:158
msgid "You cannot edit this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:169
#: /home/brenard/dev/eesyphp/includes/url-public.php:171
#, php-format
msgid "You have not made any changes to element '% s'."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:173
#: /home/brenard/dev/eesyphp/includes/url-public.php:175
#, php-format
msgid "The element '% s' has been updated successfully."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:177
#: /home/brenard/dev/eesyphp/includes/url-public.php:179
msgid "An error occurred while updating this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:184
#: /home/brenard/dev/eesyphp/includes/url-public.php:186
msgid ""
"There are errors preventing this item from being saved. Please correct them "
"before attempting to save your changes."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:194
#: /home/brenard/dev/eesyphp/includes/url-public.php:196
#, php-format
msgid "Element %s: Modification"
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:207
#: /home/brenard/dev/eesyphp/includes/url-public.php:209
msgid "This item is already archived."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:210
#: /home/brenard/dev/eesyphp/includes/url-public.php:212
msgid "You cannot archive this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:213
#: /home/brenard/dev/eesyphp/includes/url-public.php:215
#, php-format
msgid "The element '% s' has been archived successfully."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:216
#: /home/brenard/dev/eesyphp/includes/url-public.php:218
msgid "An error occurred while archiving this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:230
#: /home/brenard/dev/eesyphp/includes/url-public.php:232
msgid "You cannot delete this item."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:233
#: /home/brenard/dev/eesyphp/includes/url-public.php:235
#, php-format
msgid "The element '% s' has been deleted successfully."
msgstr ""
#: /home/brenard/dev/eesyphp/includes/url-public.php:236
#: /home/brenard/dev/eesyphp/includes/url-public.php:238
msgid "An error occurred while deleting this item."
msgstr ""

219
public_html/js/myconfirm.js Normal file
View file

@ -0,0 +1,219 @@
var myconfirm = function(opts) {
var confirm = false;
var dialog = Bootstrap4Dialog.show({
title: opts.title || _('Confirmation'),
message: opts.question || _('Do you confirm?'),
autodestroy: true,
type: opts.type || Bootstrap4Dialog.TYPE_LIGHT,
scrollable: opts.scrollable || false,
buttons: [
{
label: opts.cancel_label || _('Cancel'),
action: function(dialog) {
dialog.modal('hide');
}
},
{
label: opts.confirm_label || _('Validate'),
cssClass: 'btn-danger',
action: function(dialog) {
confirm = true;
dialog.modal('hide');
}
}
],
close: function() {
if (confirm) {
if (jQuery.type(opts.onconfirm) == 'function') {
opts.onconfirm(opts.data);
}
}
else {
if (jQuery.type(opts.oncancel) == 'function') {
opts.oncancel(opts.data);
}
}
}
});
return dialog;
};
var myalert = function(msg, title, opts) {
if (!opts) opts={};
var dialog = Bootstrap4Dialog.show({
title: title || opts.title || _('Error'),
message: msg,
autodestroy: true,
type: opts.type || Bootstrap4Dialog.TYPE_DANGER,
size: opts.size || Bootstrap4Dialog.SIZE_MEDIUM,
scrollable: opts.scrollable || false,
buttons: [
{
label: opts.btnLabel || _('OK'),
cssClass: opts.btnCssClass ||'btn-primary',
action: function(dialog) {
dialog.modal('hide');
}
},
],
close: function() {
if ($.type(opts.onclose) == 'function') {
opts.onclose(opts.data);
}
}
});
return dialog;
};
var myprompt = function(opts) {
if ($.type(opts) != "object") {
opts={};
}
var submited = false;
var onSubmitBtnClick = function(dialog) {
submited = true;
var val = dialog.getModalBody().find('input').val();
if (jQuery.type(opts.onsubmit) == 'function') {
if (!opts.onsubmit(val, opts.data)) {
if (jQuery.type(opts.onerror) == 'function') {
opts.onerror(val, opts.data);
}
if (!opts.closeonerror) {
return false;
}
}
}
dialog.modal('hide');
};
var dialog = Bootstrap4Dialog.show({
title: opts.title || _('Question'),
message: "<label for='myprompt_input'>"+(opts.label || _("Please enter your answer below:"))+"</label><input type='text' class='form-control' id='myprompt_input'/>",
autodestroy: true,
type: opts.type || Bootstrap4Dialog.TYPE_INFO,
size: opts.size || Bootstrap4Dialog.SIZE_MEDIUM,
data: {
oncancel: opts.oncancel,
onsubmit: opts.onsubmit,
onerror: opts.onerror,
closeonerror: opts.closeonerror || false,
default_answer: opts.default_answer,
onSubmitBtnClick: onSubmitBtnClick,
data: opts.data,
submited: false,
},
buttons: [
{
label: opts.cancel_label || _('Cancel'),
action: function(dialog) {
dialog.modal('hide');
}
},
{
label: opts.submit_label || _('Validate'),
cssClass: 'btn-danger',
action: onSubmitBtnClick
}
],
open: function() {
var input = dialog.getModalBody().find('input');
input.on('keyup', function (e) {
if (e.keyCode == 13) {
opts.onSubmitBtnClick(dialog);
}
});
if (opts.default_answer) {
input.val(opts.default_answer);
}
},
close: function() {
if (!submited && jQuery.type(opts.oncancel) == 'function') {
opts.oncancel(opts.data);
}
}
});
};
var myloadingalert = function(opts) {
if (!opts) opts={};
var opened = false;
var closed = false;
var dialog = Bootstrap4Dialog.show({
title: opts.title || _('Please wait'),
message: opts.message || _('Please wait while your request is being processed.'),
autodestroy: true,
type: opts.type || Bootstrap4Dialog.TYPE_INFO,
size: opts.size || Bootstrap4Dialog.SIZE_NORMAL,
centered: opts.centered || true,
closable: opts.closable || false,
open: function () {
if (closed)
dialog.modal('hide');
opened = true;
}
});
return {
'modal': dialog,
'close': function() {
if (opened)
dialog.modal('hide');
closed = true;
}
};
};
$( document ).ready(function () {
// Manage .myconfirm-link
$('.myconfirm-link').click(function(event) {
event.preventDefault();
myconfirm({
title: $(this).data("myconfirm-title") || _("Confirmation"),
question: "<p><strong>"+($(this).data("myconfirm-question") || _("Are you sure?"))+"</strong></p>",
onconfirm: function(data) {
window.location = data.confirm_url;
},
data: {
confirm_url: $(this).data('myconfirm-url')
}
});
});
// Manage .myloading-link
$('.myloading-link').click(function(event) {
event.preventDefault();
myloadingalert({
title: $(this).data("myloading-title"),
message: $(this).data("myloading-message"),
});
window.location = $(this).data('myloading-url');
});
// Manage .myconfirm-btn
$('.myconfirm-btn').click(function(event) {
if ($(this).data('myconfirm-btn-confirmed') == '1') {
$(this).data('myconfirm-btn-confirmed', '');
return true;
}
event.preventDefault();
myconfirm({
title: $(this).data("myconfirm-title") || _("Confirmation"),
question: "<p><strong>"+($(this).data("myconfirm-question") || _("Are you sure?"))+"</strong></p>",
onconfirm: function(data) {
data.btn.data('myconfirm-btn-confirmed', 1);
data.btn.click();
},
data: {
btn: $(this)
}
});
});
// Manage .myloading-btn
$('.myloading-btn').click(function(event) {
myloadingalert({
title: $(this).data("myloading-title"),
message: $(this).data("myloading-message"),
});
});
});

View file

@ -1 +0,0 @@
.bootstrap-dialog .modal-header{border-top-left-radius:4px;border-top-right-radius:4px}.bootstrap-dialog .bootstrap-dialog-title{color:#fff;display:inline-block;font-size:16px}.bootstrap-dialog .bootstrap-dialog-message{font-size:14px}.bootstrap-dialog .bootstrap-dialog-button-icon{margin-right:3px}.bootstrap-dialog .bootstrap-dialog-close-button{font-size:20px;float:right;opacity:.9;filter:alpha(opacity=90)}.bootstrap-dialog .bootstrap-dialog-close-button:hover{cursor:pointer;opacity:1;filter:alpha(opacity=100)}.bootstrap-dialog.type-default .modal-header{background-color:#fff}.bootstrap-dialog.type-default .bootstrap-dialog-title{color:#333}.bootstrap-dialog.type-info .modal-header{background-color:#5bc0de}.bootstrap-dialog.type-primary .modal-header{background-color:#337ab7}.bootstrap-dialog.type-success .modal-header{background-color:#5cb85c}.bootstrap-dialog.type-warning .modal-header{background-color:#f0ad4e}.bootstrap-dialog.type-danger .modal-header{background-color:#d9534f}.bootstrap-dialog.size-large .bootstrap-dialog-title{font-size:24px}.bootstrap-dialog.size-large .bootstrap-dialog-close-button{font-size:30px}.bootstrap-dialog.size-large .bootstrap-dialog-message{font-size:18px}.bootstrap-dialog .icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}

File diff suppressed because one or more lines are too long

View file

@ -1,111 +0,0 @@
.bootstrap-dialog {
/* dialog types */
/**
* Icon animation
* Copied from font-awesome: http://fontawesome.io/
**/
/** End of icon animation **/
}
.bootstrap-dialog .modal-header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.bootstrap-dialog .bootstrap-dialog-title {
color: #fff;
display: inline-block;
font-size: 16px;
}
.bootstrap-dialog .bootstrap-dialog-message {
font-size: 14px;
}
.bootstrap-dialog .bootstrap-dialog-button-icon {
margin-right: 3px;
}
.bootstrap-dialog .bootstrap-dialog-close-button {
font-size: 20px;
float: right;
opacity: 0.9;
filter: alpha(opacity=90);
}
.bootstrap-dialog .bootstrap-dialog-close-button:hover {
cursor: pointer;
opacity: 1;
filter: alpha(opacity=100);
}
.bootstrap-dialog.type-default .modal-header {
background-color: #fff;
}
.bootstrap-dialog.type-default .bootstrap-dialog-title {
color: #333;
}
.bootstrap-dialog.type-info .modal-header {
background-color: #5bc0de;
}
.bootstrap-dialog.type-primary .modal-header {
background-color: #337ab7;
}
.bootstrap-dialog.type-success .modal-header {
background-color: #5cb85c;
}
.bootstrap-dialog.type-warning .modal-header {
background-color: #f0ad4e;
}
.bootstrap-dialog.type-danger .modal-header {
background-color: #d9534f;
}
.bootstrap-dialog.size-large .bootstrap-dialog-title {
font-size: 24px;
}
.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
font-size: 30px;
}
.bootstrap-dialog.size-large .bootstrap-dialog-message {
font-size: 18px;
}
.bootstrap-dialog .icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

View file

@ -1 +0,0 @@
.bootstrap-dialog .modal-header{border-top-left-radius:4px;border-top-right-radius:4px}.bootstrap-dialog .bootstrap-dialog-title{color:#fff;display:inline-block;font-size:16px}.bootstrap-dialog .bootstrap-dialog-message{font-size:14px}.bootstrap-dialog .bootstrap-dialog-button-icon{margin-right:3px}.bootstrap-dialog .bootstrap-dialog-close-button{font-size:20px;float:right;opacity:.9;filter:alpha(opacity=90)}.bootstrap-dialog .bootstrap-dialog-close-button:hover{cursor:pointer;opacity:1;filter:alpha(opacity=100)}.bootstrap-dialog.type-default .modal-header{background-color:#fff}.bootstrap-dialog.type-default .bootstrap-dialog-title{color:#333}.bootstrap-dialog.type-info .modal-header{background-color:#5bc0de}.bootstrap-dialog.type-primary .modal-header{background-color:#337ab7}.bootstrap-dialog.type-success .modal-header{background-color:#5cb85c}.bootstrap-dialog.type-warning .modal-header{background-color:#f0ad4e}.bootstrap-dialog.type-danger .modal-header{background-color:#d9534f}.bootstrap-dialog.size-large .bootstrap-dialog-title{font-size:24px}.bootstrap-dialog.size-large .bootstrap-dialog-close-button{font-size:30px}.bootstrap-dialog.size-large .bootstrap-dialog-message{font-size:18px}.bootstrap-dialog .icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,72 @@
Bootstrap4Dialog
================
## Description
Create <a href="https://getbootstrap.com/" target="_blank">Bootstrap 4 / Bootstrap 5</a> Dialog Modals Easily.
[![Latest release](https://img.shields.io/github/release/SUXUMI/bootstrap4dialog.svg)](https://github.com/SUXUMI/bootstrap4dialog/releases/latest)
================
### Installation
``npm i gr-bootstrap4dialog``
### Usage
Simple sample:
```
Bootstrap4Dialog.show({
title: 'Title'
})
```
Sample without title:
```
Bootstrap4Dialog.show({
message: 'Message',
duration: 5
})
```
Sample with multiple options:
```
Bootstrap4Dialog.show({
title: 'Title',
message: 'Message text goes here',
backdrop: Bootstrap4Dialog.BACKDROP_STATIC,
type: Bootstrap4Dialog.TYPE_DANGER,
centered: true,
scrollable: true,
duration: 5, // display seconds
open: function() {
Bootstrap4Dialog.show({
title: 'Dialog displayed',
size: Bootstrap4Dialog.SIZE_SMALL,
type: Bootstrap4Dialog.TYPE_LIGHT,
duration: 0.5
})
$('#btn-cancel').focus();
},
close: function() {
Bootstrap4Dialog.show({
message: 'Dialog closed',
size: Bootstrap4Dialog.SIZE_SMALL,
type: Bootstrap4Dialog.TYPE_LIGHT,
backdrop: Bootstrap4Dialog.BACKDROP_NO,
duration: 0.5
})
},
buttons: [
{
id: 'btn-cancel',
label: 'Cancel',
cssClass: 'btn btn-light',
action: function(dialog) {
dialog.modal('hide');
}
}
]
})
```

View file

@ -0,0 +1,322 @@
/**
* Bootstrap Modal for Bootstrap 4.*
*
* @author GR <admin@admin.ge>, https://github.com/SUXUMI
* @source https://github.com/SUXUMI/bootstrab4dialog
* @description Bootstrap Modal for Bootstrap 4.*
* @license MIT
*/
(function (root, factory) {
"use strict";
// https://github.com/umdjs/umd
if (typeof module !== "undefined" && module.exports) {
module.exports = factory(require("jquery"), require("bootstrap"));
}
else if (typeof define === "function" && define.amd) {
define("bootstrap4dialog", ["jquery", "bootstrap"], function ($) {
return factory($);
});
} else {
root.Bootstrap4Dialog = factory(root.jQuery);
}
})(this ? this : window, function ($) {
/**
* Set default global options
*
* @param {} options
*/
var Bootstrap4Dialog = function (options) {
$.extend(true, this.defaultOptions, options);
};
/**
* Constants
*/
Bootstrap4Dialog.TYPE_PRIMARY = "primary";
Bootstrap4Dialog.TYPE_SECONDARY = "secondary";
Bootstrap4Dialog.TYPE_SUCCESS = "success";
Bootstrap4Dialog.TYPE_DANGER = "danger";
Bootstrap4Dialog.TYPE_WARNING = "warning";
Bootstrap4Dialog.TYPE_INFO = "info";
Bootstrap4Dialog.TYPE_LIGHT = "light";
Bootstrap4Dialog.TYPE_DARK = "dark";
Bootstrap4Dialog.SIZE_SMALL = "modal-sm";
Bootstrap4Dialog.SIZE_MEDIUM = "";
Bootstrap4Dialog.SIZE_LARGE = "modal-lg";
Bootstrap4Dialog.SIZE_EXTRA_LARGE = "modal-xl";
Bootstrap4Dialog.BACKDROP_YES = "true";
Bootstrap4Dialog.BACKDROP_NO = "";
Bootstrap4Dialog.BACKDROP_STATIC = "static";
/**
* Default options
*/
Bootstrap4Dialog.defaultOptions = {
title: '',
message: '',
type: Bootstrap4Dialog.TYPE_PRIMARY,
size: Bootstrap4Dialog.SIZE_MEDIUM,
keyboard: true,
focus: true,
scrollable: false, // modal-dialog-scrollable
centered: false, // modal-dialog-centered
backdrop: Bootstrap4Dialog.BACKDROP_YES,
duration: 0, // SECONDS - how long the dialog should be displayed
autodestroy: true,
open: null,
close: null,
buttons: [],
// draggable: false,
// animate: true,
// tabindex: -1,
};
/**
* Prepares the dialog
*
* @param {type} options
* @returns the created dialog instance
*/
Bootstrap4Dialog.dialog = function(options) {
var dialog;
var _options = $.extend(false, this.defaultOptions, options);
_options['show'] = false;
try {
if (!_options['title'] && !_options['message'] && (!_options['buttons'] || !_options['buttons'].length)) {
return false;
}
var id = _options['id'] || 'modalWindow_' + uniqid();
var html =
'<div id="' + id + '" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">'
+ '<div class="modal-dialog" role="document">'
+ '<div class="modal-content">';
if (_options['title']) {
html +=
'<div class="modal-header rounded">'
+ '<h6 class="modal-title"></h6>'
+ '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'
+ '<span aria-hidden="true">&times;</span>'
+ '</button>'
+ '</div>'
}
if (_options['message']) {
html +=
'<div class="modal-body">'
+ '</div>'
}
if (_options['buttons'] && _options['buttons'].length) {
html +=
'<div class="modal-footer text-center">'
//+ '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>'
//+ '<button type="button" class="btn btn-primary">Save changes</button>'
+ '</div>'
}
+ '</div>'
+ '</div>'
+ '</div>'
;
$('body').append( html );
var _modal_container = $('#' + id);
// append title
if (_options['title'] && _options['title'].length) {
_modal_container.find('.modal-title').html( _options['title'] );
}
// append message
if (_options['message'] && _options['message'].length) {
_modal_container.find('.modal-body').html( _options['message'] );
}
if (_options['title'] && !_options['message'] && (!_options['buttons'] || !_options['buttons'].length)) {
_modal_container.find('.modal-header').css({'border-bottom':'0px'});
}
if (!_options['title'] && !_options['message'] && _options['buttons'] && _options['buttons'].length) {
_modal_container.find('.modal-footer').css({'border-top':'0px'});
}
if (_options['size'] && _options['size'].length) {
_modal_container.find('.modal-dialog').addClass(_options.size);
}
if (_options['centered']) {
_modal_container.find('.modal-dialog').addClass('modal-dialog-centered');
}
if (_options['scrollable']) {
_modal_container.find('.modal-dialog').addClass('modal-dialog-scrollable');
}
switch(true) {
case _options['type'] == 'primary':
_modal_container.find('.modal-header').addClass('bg-primary').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-primary');
break;
case _options['type'] == 'secondary':
_modal_container.find('.modal-header').addClass('bg-secondary').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-secondary');
break;
case _options['type'] == 'success':
_modal_container.find('.modal-header').addClass('bg-success').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-success');
break;
case _options['type'] == 'danger':
_modal_container.find('.modal-header').addClass('bg-danger').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-danger');
break;
case _options['type'] == 'warning':
_modal_container.find('.modal-header').addClass('bg-warning');
_modal_container.find('.modal-body').addClass('text-warning');
break;
case _options['type'] == 'info':
_modal_container.find('.modal-header').addClass('bg-info').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-info');
break;
case _options['type'] == 'light':
_modal_container.find('.modal-header').addClass('bg-light').find('.modal-title').addClass('text-black');
_modal_container.find('.modal-body').addClass('text-black');
break;
case _options['type'] == 'dark':
_modal_container.find('.modal-header').addClass('bg-dark').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-dark');
break;
}
dialog = _modal_container.modal(_options);
// try set buttons
try {
// fooder
var _footer = _modal_container.find('.modal-footer');
for(i in _options['buttons']) {
var _button = _options['buttons'][i];
// append the button
_footer.append('<button class="btn" />');
var _element_button = _footer.find('button').eq(i);
if (_button['id']) { _element_button.attr('id', _button['id']); }
if (_button['label']) { _element_button.html(_button['label']); }
if (_button['cssClass']) { _element_button.addClass(_button['cssClass']); }
// https://dzone.com/articles/why-does-javascript-loop-only-use-last-value
// https://stackoverflow.com/a/17750253/1565790
if (typeof(_button['action']) == 'function') {
(function(button, f, dialog) {
button.bind('click', function() { f(dialog, button); });
})(_element_button, _button['action'], dialog);
}
}
}
catch(e) {console.log(e.message);}
// set handlers
if (typeof(_options['open']) == 'function') {
dialog.on('shown.bs.modal', _options['open']);
}
if (typeof(_options['close']) == 'function') {
dialog.on('hidden.bs.modal', _options['close']);
}
if (_options['autodestroy']) {
dialog.on('hidden.bs.modal', function() { destroy(dialog) });
}
if (_options['duration']) {
dialog.on('shown.bs.modal', function() {
setTimeout(function() {
dialog.modal('hide');
}, parseFloat(_options['duration']) * 1000);
});
}
return dialog;
}
catch(e) {
console.warn(e.message);
}
}
/**
* Displays prepared dialog
*
* @param {type} options
* @returns the created dialog instance
*/
Bootstrap4Dialog.show = function(options) {
try {
return this.dialog(options).modal('show');
}
catch(e) {
console.warn(e.message);
}
}
/**
* Removes dialog DOM instance
*
* @param object dialog
*/
destroy = function(dialog) {
try {
setTimeout(function() {
dialog.remove();
}, 200);
}
catch(e) {
console.warn(e.message);
}
};
/**
* Generates uniqid
*
* @source - https://github.com/makeable/uuid-v4.js/blob/master/uuid-v4.js
*/
var uniqid = function () {
var dec2hex = [];
for (var i = 0; i <= 15; i++) {
dec2hex[i] = i.toString(16);
}
var uuid = "";
for (var i = 1; i <= 36; i++) {
if (i === 9 || i === 14 || i === 19 || i === 24) {
uuid += "-";
} else if (i === 15) {
uuid += 4;
} else if (i === 20) {
uuid += dec2hex[(Math.random() * 4) | (0 + 8)];
} else {
uuid += dec2hex[(Math.random() * 16) | 0];
}
}
return uuid;
};
return Bootstrap4Dialog;
});

View file

@ -0,0 +1 @@
!function(a,d){"use strict";"undefined"!=typeof module&&module.exports?module.exports=d(require("jquery"),require("bootstrap")):"function"==typeof define&&define.amd?define("bootstrap4dialog",["jquery","bootstrap"],function(a){return d(a)}):a.Bootstrap4Dialog=d(a.jQuery)}(this?this:window,function(a){var d=function(d){a.extend(!0,this.defaultOptions,d)};d.TYPE_PRIMARY="primary",d.TYPE_SECONDARY="secondary",d.TYPE_SUCCESS="success",d.TYPE_DANGER="danger",d.TYPE_WARNING="warning",d.TYPE_INFO="info",d.TYPE_LIGHT="light",d.TYPE_DARK="dark",d.SIZE_SMALL="modal-sm",d.SIZE_MEDIUM="",d.SIZE_LARGE="modal-lg",d.SIZE_EXTRA_LARGE="modal-xl",d.BACKDROP_YES="true",d.BACKDROP_NO="",d.BACKDROP_STATIC="static",d.defaultOptions={title:"",message:"",type:d.TYPE_PRIMARY,size:d.SIZE_MEDIUM,keyboard:!0,focus:!0,scrollable:!1,centered:!1,backdrop:d.BACKDROP_YES,duration:0,autodestroy:!0,open:null,close:null,buttons:[]},d.dialog=function(d){var t,o=a.extend(!1,this.defaultOptions,d);o.show=!1;try{if(!(o.title||o.message||o.buttons&&o.buttons.length))return!1;var s=o.id||"modalWindow_"+e(),n='<div id="'+s+'" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content">';o.title&&(n+='<div class="modal-header rounded"><h6 class="modal-title"></h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>'),o.message&&(n+='<div class="modal-body"></div>'),o.buttons&&o.buttons.length&&(n+='<div class="modal-footer text-center"></div>'),a("body").append(n);var l=a("#"+s);switch(o.title&&o.title.length&&l.find(".modal-title").html(o.title),o.message&&o.message.length&&l.find(".modal-body").html(o.message),!o.title||o.message||o.buttons&&o.buttons.length||l.find(".modal-header").css({"border-bottom":"0px"}),!o.title&&!o.message&&o.buttons&&o.buttons.length&&l.find(".modal-footer").css({"border-top":"0px"}),o.size&&o.size.length&&l.find(".modal-dialog").addClass(o.size),o.centered&&l.find(".modal-dialog").addClass("modal-dialog-centered"),o.scrollable&&l.find(".modal-dialog").addClass("modal-dialog-scrollable"),!0){case"primary"==o.type:l.find(".modal-header").addClass("bg-primary").find(".modal-title").addClass("text-white"),l.find(".modal-body").addClass("text-primary");break;case"secondary"==o.type:l.find(".modal-header").addClass("bg-secondary").find(".modal-title").addClass("text-white"),l.find(".modal-body").addClass("text-secondary");break;case"success"==o.type:l.find(".modal-header").addClass("bg-success").find(".modal-title").addClass("text-white"),l.find(".modal-body").addClass("text-success");break;case"danger"==o.type:l.find(".modal-header").addClass("bg-danger").find(".modal-title").addClass("text-white"),l.find(".modal-body").addClass("text-danger");break;case"warning"==o.type:l.find(".modal-header").addClass("bg-warning"),l.find(".modal-body").addClass("text-warning");break;case"info"==o.type:l.find(".modal-header").addClass("bg-info").find(".modal-title").addClass("text-white"),l.find(".modal-body").addClass("text-info");break;case"light"==o.type:l.find(".modal-header").addClass("bg-light").find(".modal-title").addClass("text-black"),l.find(".modal-body").addClass("text-black");break;case"dark"==o.type:l.find(".modal-header").addClass("bg-dark").find(".modal-title").addClass("text-white"),l.find(".modal-body").addClass("text-dark")}t=l.modal(o);try{var r=l.find(".modal-footer");for(i in o.buttons){var c=o.buttons[i];r.append('<button class="btn" />');var m=r.find("button").eq(i);c.id&&m.attr("id",c.id),c.label&&m.html(c.label),c.cssClass&&m.addClass(c.cssClass),"function"==typeof c.action&&function(a,d,e){a.bind("click",function(){d(e,a)})}(m,c.action,t)}}catch(a){console.log(a.message)}return"function"==typeof o.open&&t.on("shown.bs.modal",o.open),"function"==typeof o.close&&t.on("hidden.bs.modal",o.close),o.autodestroy&&t.on("hidden.bs.modal",function(){destroy(t)}),o.duration&&t.on("shown.bs.modal",function(){setTimeout(function(){t.modal("hide")},1e3*parseFloat(o.duration))}),t}catch(a){console.warn(a.message)}},d.show=function(a){try{return this.dialog(a).modal("show")}catch(a){console.warn(a.message)}},destroy=function(a){try{setTimeout(function(){a.remove()},200)}catch(a){console.warn(a.message)}};var e=function(){for(var a=[],d=0;d<=15;d++)a[d]=d.toString(16);var e="";for(d=1;d<=36;d++)e+=9===d||14===d||19===d||24===d?"-":15===d?4:20===d?a[4*Math.random()|8]:a[16*Math.random()|0];return e};return d});

View file

@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap4Dialog Examples</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="../src/js/bootstrap4dialog.js?<?=time()?>"></script>
<style>
html, body {min-height: 150vh;}
body {font-size: 0.9rem;}
pre {font-size: 0.8rem ; max-height: 200px; overflow: auto;}
.code-sample {border-bottom: 1px solid #dee2e6!important; margin-bottom: 1rem !important;}
</style>
<!-- php -S localhost:8080 -->
</head>
<body class="py-3">
<div class="container">
<div class="row">
<div class="col col-lg-8 offset-lg-2">
<div class="code-sample">
<h3>Dialog with Title & Message</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Sample Title 1',
message: 'Message text goes here'
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Static Danger Dialog with Title only</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Sample Title 2',
type: Bootstrap4Dialog.TYPE_DANGER,
backdrop: Bootstrap4Dialog.BACKDROP_STATIC
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Warning Centered Dialog Message only, with 2 seconds duration</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
message: 'Sample message will be hidden in 2 seconds',
type: Bootstrap4Dialog.TYPE_WARNING,
centered: true,
duration: 2
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Long Message Dialog without Backdrop</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Long message without backdrop',
type: Bootstrap4Dialog.TYPE_DANGER,
centered: true,
backdrop: Bootstrap4Dialog.BACKDROP_NO,
message: 'Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>'
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Long Scrollable Message Dialog</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Long message text will disappears in 2 seconds',
type: Bootstrap4Dialog.TYPE_DANGER,
scrollable: true,
message: 'Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>Lorem Ipsum dolor..<br>',
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Multiple overlapping Dialogs</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Title 1',
centered: true,
type: Bootstrap4Dialog.TYPE_SUCCESS,
});
Bootstrap4Dialog.show({
message: 'Message 2',
type: Bootstrap4Dialog.TYPE_INFO,
duration: 2
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Large Message Dialog with callbacks</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Title 1',
message: $('<div></div>').load('message.html'),
centered: true,
size: Bootstrap4Dialog.SIZE_LARGE,
type: Bootstrap4Dialog.TYPE_DARK,
open: function() {
Bootstrap4Dialog.show({
title: 'Dialog displayed',
size: Bootstrap4Dialog.SIZE_SMALL,
type: Bootstrap4Dialog.TYPE_LIGHT,
duration: 0.5
})
},
close: function() {
Bootstrap4Dialog.show({
message: 'Dialog closed',
size: Bootstrap4Dialog.SIZE_SMALL,
type: Bootstrap4Dialog.TYPE_LIGHT,
backdrop: Bootstrap4Dialog.BACKDROP_NO,
duration: 0.5
})
}
});
</code>
</pre>
</div>
<div class="code-sample">
<h3>Dialog with Buttons</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
Bootstrap4Dialog.show({
title: 'Sample Title',
message: 'Message text goes here',
backdrop: Bootstrap4Dialog.BACKDROP_STATIC,
open: function() {
$('#btn-cancel-2').focus();
},
buttons: [
{
id: 'btn-cancel-2',
label: 'Cancel',
cssClass: 'btn btn-light',
action: function(dialog) {
dialog.modal('hide');
}
},
{
id: 'btn-submit-2',
label: '<i class="fas fa-check"></i> Submit',
cssClass: 'btn btn-sm btn-danger',
action: function(dialog) {
alert('fake form submittion..');
dialog.modal('hide');
}
}
]
})
</code>
</pre>
</div>
<div class="code-sample">
<h3>Close the dialog manually from JavaScript</h3>
<div><a class="btn btn-primary run-code">Run code</a></div>
<pre>
<code>
var dialogForManualClose = Bootstrap4Dialog.show({
title: 'Sample Title 1',
message: 'Message text goes here'
})
setTimeout(function() {
dialogForManualClose.modal('hide');
}, 3000)
</code>
</pre>
</div>
</div>
</div>
</div>
<script>
$('.run-code').click(function() {
eval( $(this).parent().parent().find('code').html() )
})
</script>
</body>
</html>

View file

@ -0,0 +1,102 @@
<pre>
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
Lorem Ipsum dolor..
</pre>

View file

@ -0,0 +1,19 @@
"use strict";
const gulp = require("gulp");
const clean = require("gulp-clean");
const minify = require("gulp-minify");
gulp.task("clean", function() {
return gulp.src(["dist/**"]).pipe(clean({ allowEmpty: true }));
});
gulp.task("dist", gulp.series("clean", function() {
return gulp
.src(["src/js/bootstrap4dialog.js"])
.pipe(gulp.dest("dist/js"))
.pipe(minify({ noSource: true, ext: ".min.js" }))
.pipe(gulp.dest("dist/js"));
}));
gulp.task("default", gulp.series("dist"));

View file

@ -0,0 +1,18 @@
{
"name": "bootstrap4dialog",
"version": "1.0.0",
"description": "Bootstrap Modal for Bootstrap 4.*",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "GR <admin@admin.ge>",
"license": "MIT",
"dependencies": {
"g": "^2.0.1",
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-minify": "^3.1.0",
"gulp-rename": "^2.0.0"
}
}

View file

@ -0,0 +1,322 @@
/**
* Bootstrap Modal for Bootstrap 4.*
*
* @author GR <admin@admin.ge>, https://github.com/SUXUMI
* @source https://github.com/SUXUMI/bootstrab4dialog
* @description Bootstrap Modal for Bootstrap 4.*
* @license MIT
*/
(function (root, factory) {
"use strict";
// https://github.com/umdjs/umd
if (typeof module !== "undefined" && module.exports) {
module.exports = factory(require("jquery"), require("bootstrap"));
}
else if (typeof define === "function" && define.amd) {
define("bootstrap4dialog", ["jquery", "bootstrap"], function ($) {
return factory($);
});
} else {
root.Bootstrap4Dialog = factory(root.jQuery);
}
})(this ? this : window, function ($) {
/**
* Set default global options
*
* @param {} options
*/
var Bootstrap4Dialog = function (options) {
$.extend(true, this.defaultOptions, options);
};
/**
* Constants
*/
Bootstrap4Dialog.TYPE_PRIMARY = "primary";
Bootstrap4Dialog.TYPE_SECONDARY = "secondary";
Bootstrap4Dialog.TYPE_SUCCESS = "success";
Bootstrap4Dialog.TYPE_DANGER = "danger";
Bootstrap4Dialog.TYPE_WARNING = "warning";
Bootstrap4Dialog.TYPE_INFO = "info";
Bootstrap4Dialog.TYPE_LIGHT = "light";
Bootstrap4Dialog.TYPE_DARK = "dark";
Bootstrap4Dialog.SIZE_SMALL = "modal-sm";
Bootstrap4Dialog.SIZE_MEDIUM = "";
Bootstrap4Dialog.SIZE_LARGE = "modal-lg";
Bootstrap4Dialog.SIZE_EXTRA_LARGE = "modal-xl";
Bootstrap4Dialog.BACKDROP_YES = "true";
Bootstrap4Dialog.BACKDROP_NO = "";
Bootstrap4Dialog.BACKDROP_STATIC = "static";
/**
* Default options
*/
Bootstrap4Dialog.defaultOptions = {
title: '',
message: '',
type: Bootstrap4Dialog.TYPE_PRIMARY,
size: Bootstrap4Dialog.SIZE_MEDIUM,
keyboard: true,
focus: true,
scrollable: false, // modal-dialog-scrollable
centered: false, // modal-dialog-centered
backdrop: Bootstrap4Dialog.BACKDROP_YES,
duration: 0, // SECONDS - how long the dialog should be displayed
autodestroy: true,
open: null,
close: null,
buttons: [],
// draggable: false,
// animate: true,
// tabindex: -1,
};
/**
* Prepares the dialog
*
* @param {type} options
* @returns the created dialog instance
*/
Bootstrap4Dialog.dialog = function(options) {
var dialog;
var _options = $.extend(false, this.defaultOptions, options);
_options['show'] = false;
try {
if (!_options['title'] && !_options['message'] && (!_options['buttons'] || !_options['buttons'].length)) {
return false;
}
var id = _options['id'] || 'modalWindow_' + uniqid();
var html =
'<div id="' + id + '" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">'
+ '<div class="modal-dialog" role="document">'
+ '<div class="modal-content">';
if (_options['title']) {
html +=
'<div class="modal-header rounded">'
+ '<h6 class="modal-title"></h6>'
+ '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'
+ '<span aria-hidden="true">&times;</span>'
+ '</button>'
+ '</div>'
}
if (_options['message']) {
html +=
'<div class="modal-body">'
+ '</div>'
}
if (_options['buttons'] && _options['buttons'].length) {
html +=
'<div class="modal-footer text-center">'
//+ '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>'
//+ '<button type="button" class="btn btn-primary">Save changes</button>'
+ '</div>'
}
+ '</div>'
+ '</div>'
+ '</div>'
;
$('body').append( html );
var _modal_container = $('#' + id);
// append title
if (_options['title'] && _options['title'].length) {
_modal_container.find('.modal-title').html( _options['title'] );
}
// append message
if (_options['message'] && _options['message'].length) {
_modal_container.find('.modal-body').html( _options['message'] );
}
if (_options['title'] && !_options['message'] && (!_options['buttons'] || !_options['buttons'].length)) {
_modal_container.find('.modal-header').css({'border-bottom':'0px'});
}
if (!_options['title'] && !_options['message'] && _options['buttons'] && _options['buttons'].length) {
_modal_container.find('.modal-footer').css({'border-top':'0px'});
}
if (_options['size'] && _options['size'].length) {
_modal_container.find('.modal-dialog').addClass(_options.size);
}
if (_options['centered']) {
_modal_container.find('.modal-dialog').addClass('modal-dialog-centered');
}
if (_options['scrollable']) {
_modal_container.find('.modal-dialog').addClass('modal-dialog-scrollable');
}
switch(true) {
case _options['type'] == 'primary':
_modal_container.find('.modal-header').addClass('bg-primary').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-primary');
break;
case _options['type'] == 'secondary':
_modal_container.find('.modal-header').addClass('bg-secondary').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-secondary');
break;
case _options['type'] == 'success':
_modal_container.find('.modal-header').addClass('bg-success').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-success');
break;
case _options['type'] == 'danger':
_modal_container.find('.modal-header').addClass('bg-danger').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-danger');
break;
case _options['type'] == 'warning':
_modal_container.find('.modal-header').addClass('bg-warning');
_modal_container.find('.modal-body').addClass('text-warning');
break;
case _options['type'] == 'info':
_modal_container.find('.modal-header').addClass('bg-info').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-info');
break;
case _options['type'] == 'light':
_modal_container.find('.modal-header').addClass('bg-light').find('.modal-title').addClass('text-black');
_modal_container.find('.modal-body').addClass('text-black');
break;
case _options['type'] == 'dark':
_modal_container.find('.modal-header').addClass('bg-dark').find('.modal-title').addClass('text-white');
_modal_container.find('.modal-body').addClass('text-dark');
break;
}
dialog = _modal_container.modal(_options);
// try set buttons
try {
// fooder
var _footer = _modal_container.find('.modal-footer');
for(i in _options['buttons']) {
var _button = _options['buttons'][i];
// append the button
_footer.append('<button class="btn" />');
var _element_button = _footer.find('button').eq(i);
if (_button['id']) { _element_button.attr('id', _button['id']); }
if (_button['label']) { _element_button.html(_button['label']); }
if (_button['cssClass']) { _element_button.addClass(_button['cssClass']); }
// https://dzone.com/articles/why-does-javascript-loop-only-use-last-value
// https://stackoverflow.com/a/17750253/1565790
if (typeof(_button['action']) == 'function') {
(function(button, f, dialog) {
button.bind('click', function() { f(dialog, button); });
})(_element_button, _button['action'], dialog);
}
}
}
catch(e) {console.log(e.message);}
// set handlers
if (typeof(_options['open']) == 'function') {
dialog.on('shown.bs.modal', _options['open']);
}
if (typeof(_options['close']) == 'function') {
dialog.on('hidden.bs.modal', _options['close']);
}
if (_options['autodestroy']) {
dialog.on('hidden.bs.modal', function() { destroy(dialog) });
}
if (_options['duration']) {
dialog.on('shown.bs.modal', function() {
setTimeout(function() {
dialog.modal('hide');
}, parseFloat(_options['duration']) * 1000);
});
}
return dialog;
}
catch(e) {
console.warn(e.message);
}
}
/**
* Displays prepared dialog
*
* @param {type} options
* @returns the created dialog instance
*/
Bootstrap4Dialog.show = function(options) {
try {
return this.dialog(options).modal('show');
}
catch(e) {
console.warn(e.message);
}
}
/**
* Removes dialog DOM instance
*
* @param object dialog
*/
var destroy = function(dialog) {
try {
setTimeout(function() {
dialog.remove();
}, 200);
}
catch(e) {
console.warn(e.message);
}
};
/**
* Generates uniqid
*
* @source - https://github.com/makeable/uuid-v4.js/blob/master/uuid-v4.js
*/
var uniqid = function () {
var dec2hex = [];
for (var i = 0; i <= 15; i++) {
dec2hex[i] = i.toString(16);
}
var uuid = "";
for (var i = 1; i <= 36; i++) {
if (i === 9 || i === 14 || i === 19 || i === 24) {
uuid += "-";
} else if (i === 15) {
uuid += 4;
} else if (i === 20) {
uuid += dec2hex[(Math.random() * 4) | (0 + 8)];
} else {
uuid += dec2hex[(Math.random() * 16) | 0];
}
}
return uuid;
};
return Bootstrap4Dialog;
});

View file

@ -1,194 +0,0 @@
var myconfirm=function(opts) {
BootstrapDialog.show({
title: opts.title || 'Confirmation',
message: opts.question || 'Confirmez-vous ?',
autodestroy: true,
cssClass: opts.css_class || 'modal-warning',
type: opts.type || 'type-default',
data: {
oncancel: opts.oncancel,
onconfirm: opts.onconfirm,
data: opts.data,
confirm: false,
},
buttons: [
{
label: opts.cancel_label || 'Annuler',
action: function(dialog) {
dialog.close();
}
},
{
label: opts.confirm_label || 'Valider',
cssClass: 'btn-danger',
action: function(dialog) {
dialog.setData('confirm',true);
dialog.close();
}
}
],
onhidden: function(dialog) {
if (dialog.getData('confirm')) {
if (jQuery.type(dialog.getData('onconfirm')) == 'function') {
dialog.getData('onconfirm')(dialog.getData('data'));
}
}
else {
if (jQuery.type(dialog.getData('oncancel')) == 'function') {
dialog.getData('oncancel')(dialog.getData('data'));
}
}
}
});
}
var myalert=function(title,msg,opts) {
if ($.type(opts) != "object") {
opts={};
}
BootstrapDialog.show({
title: title || opts.title || 'Erreur',
message: msg,
autodestroy: true,
type: opts.type || 'type-danger',
size: opts.size || 'size-normal',
data: {
data: opts.data,
onclose: opts.onclose,
},
buttons: [
{
label: opts.btnLabel || 'OK',
cssClass: opts.btnCssClass ||'btn-primary',
action: function(dialog) {
dialog.close();
}
},
],
onhidden: function(dialog) {
if ($.type(dialog.getData('onclose')) == 'function') {
dialog.getData('onclose')(dialog.getData('data'));
}
}
});
}
var myprompt=function(opts) {
if ($.type(opts) != "object") {
opts={};
}
var onSubmitBtnClick = function(dialog) {
dialog.setData('submited',true);
var val = dialog.getModalBody().find('input').val();
if (jQuery.type(dialog.getData('onsubmit')) == 'function') {
if (!dialog.getData('onsubmit')(val, dialog.getData('data'))) {
if (jQuery.type(dialog.getData('onerror')) == 'function') {
dialog.getData('onerror')(val, dialog.getData('data'));
}
if (!dialog.getData('closeonerror')) {
return false;
}
}
}
dialog.close();
};
BootstrapDialog.show({
title: opts.title || 'Question',
message: "<label for='myprompt_input'>"+(opts.label || "Merci de saisir votre réponse ci-dessous :")+"</label><input type='text' class='form-control' id='myprompt_input'/>",
autodestroy: true,
type: opts.type || 'type-info',
size: opts.size || 'size-normal',
data: {
oncancel: opts.oncancel,
onsubmit: opts.onsubmit,
onerror: opts.onerror,
closeonerror: opts.closeonerror || false,
default_answer: opts.default_answer,
onSubmitBtnClick: onSubmitBtnClick,
data: opts.data,
submited: false,
},
buttons: [
{
label: opts.cancel_label || 'Annuler',
action: function(dialog) {
dialog.close();
}
},
{
label: opts.submit_label || 'Valider',
cssClass: 'btn-danger',
action: onSubmitBtnClick
}
],
onshow: function(dialog) {
var input = dialog.getModalBody().find('input');
input.on('keyup', function (e) {
if (e.keyCode == 13) {
dialog.getData('onSubmitBtnClick')(dialog);
}
});
if (dialog.getData('default_answer')) {
input.val(dialog.getData('default_answer'));
}
},
onhidden: function(dialog) {
if (!dialog.getData('submited') && jQuery.type(dialog.getData('oncancel')) == 'function') {
dialog.getData('oncancel')(dialog.getData('data'));
}
}
});
}
var myloadingalert=function(msg,opts) {
if ($.type(opts) != "object") {
opts={};
}
BootstrapDialog.show({
title: opts.title || 'Merci de patienter',
message: msg,
autodestroy: true,
type: opts.type || 'type-info',
size: opts.size || 'size-normal',
closable: opts.closable || false,
});
};
$( document ).ready(function () {
// Manage .myconfirm-link
$('.myconfirm-link').click(function(event) {
event.preventDefault();
myconfirm({
title: $(this).data("myconfirm-title") || "Confirmation",
question: "<p><strong>"+($(this).data("myconfirm-question") || "&Ecirc;tes-vous sûre ?")+"</strong></p>",
onconfirm: function(data) {
window.location = data.confirm_url;
},
data: {
confirm_url: $(this).data('myconfirm-url')
}
});
});
// Manage .myconfirm-btn
$('.myconfirm-btn').click(function(event) {
if ($(this).data('myconfirm-btn-confirmed') == '1') {
$(this).data('myconfirm-btn-confirmed', '');
return true;
}
event.preventDefault();
myconfirm({
title: $(this).data("myconfirm-title") || "Confirmation",
question: "<p><strong>"+($(this).data("myconfirm-question") || "&Ecirc;tes-vous sûre ?")+"</strong></p>",
onconfirm: function(data) {
data.btn.data('myconfirm-btn-confirmed', 1);
data.btn.click();
},
data: {
btn: $(this)
}
});
});
});