mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-12-26 16:42:27 +03:00
Code Issues Projects Releases Packages Wiki Activity

Replace the show message function with a bootstrap equivalent (no jquery ui used any more)

Browse source
This commit is contained in:
Alex Tselegidis 2023-01-27 15:54:45 +01:00
parent 2298533426
commit 229a2aec90
1 changed files with 59 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
assets/js/utils/message.js
View file

@ -15,6 +15,8 @@
* This module implements the functionality of messages. * This module implements the functionality of messages.
*/ */
window.App.Utils.Message = (function () { window.App.Utils.Message = (function () {
let messageModal = null;
/** /**
* Show a message box to the user. * Show a message box to the user.
* *
@ -26,55 +28,78 @@ window.App.Utils.Message = (function () {
* @param {Array} [buttons] Contains the dialog buttons along with their functions. * @param {Array} [buttons] Contains the dialog buttons along with their functions.
*/ */
function show(title, message, buttons = null) { function show(title, message, buttons = null) {
if (!title || !message) {
return;
}
if (!buttons) { if (!buttons) {
buttons = [ buttons = [
{ {
text: lang('close'), text: lang('close'),
click: function () { className: 'btn btn-outline-primary',
$('#message-box').dialog('close'); click: function (event, messageModal) {
} messageModal.dispose();
} },
},
]; ];
} }
// Destroy previous dialog instances. if (messageModal?.dispose && messageModal?._element) {
messageModal.dispose();
}
$('#message-box').dialog('destroy').remove(); $('#message-modal').remove();
// Create the HTML of the message box. const $messageModal = $(`
<div class="modal" id="message-modal">
<div class="modal-dialog center-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
${title}
</h5>
</div>
<div class="modal-body">
<p>
${message}
</p>
</div>
<div class="modal-footer">
<!-- * -->
</div>
</div>
</div>
</div>
`).appendTo('body');
const $messageBox = $('<div/>', { buttons.forEach((button) => {
'id': 'message-box', if (!button) {
'title': title, return;
'html': [ }
$('<p/>', {
'html': message
})
]
}).appendTo('body');
$messageBox.dialog({ if (!button.className) {
autoOpen: false, button.className = 'btn btn-outline-primary';
modal: true, }
resize: 'auto',
width: 'auto', const $button = $(`
height: 'auto', <button type="button" class="${button.className}" data-bs-dismiss="modal">
resizable: false, ${button.text}
buttons: buttons, </button>
closeOnEscape: true `).appendTo($messageModal.find('.modal-footer'));
if (button.click) {
$button.on('click', (event) => button.click(event, messageModal));
}
}); });
$messageBox.dialog('open'); messageModal = new bootstrap.Modal('#message-modal', {
keyboard: false,
backdrop: 'static',
});
$('.ui-dialog .ui-dialog-buttonset button:not(:last)').addClass('btn btn-secondary'); messageModal.show();
$('.ui-dialog .ui-dialog-buttonset button:last').addClass('btn btn-primary').focus();
$('.ui-dialog .ui-dialog-buttonset button:last').prepend(
$('<i/>', {
'class': 'fas fa-check-square me-2'
})
);
$('#message-box .ui-dialog-titlebar-close').hide(); $('#message-modal').css('z-index', '99999').next().css('z-index', '9999');
} }
return { return {