diff --git a/assets/js/utils/message.js b/assets/js/utils/message.js index 10fb8e77..450140be 100644 --- a/assets/js/utils/message.js +++ b/assets/js/utils/message.js @@ -15,6 +15,8 @@ * This module implements the functionality of messages. */ window.App.Utils.Message = (function () { + let messageModal = null; + /** * 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. */ function show(title, message, buttons = null) { + if (!title || !message) { + return; + } + if (!buttons) { buttons = [ { text: lang('close'), - click: function () { - $('#message-box').dialog('close'); - } - } + className: 'btn btn-outline-primary', + 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 = $(` + + `).appendTo('body'); - const $messageBox = $('
', { - 'id': 'message-box', - 'title': title, - 'html': [ - $('

', { - 'html': message - }) - ] - }).appendTo('body'); + buttons.forEach((button) => { + if (!button) { + return; + } - $messageBox.dialog({ - autoOpen: false, - modal: true, - resize: 'auto', - width: 'auto', - height: 'auto', - resizable: false, - buttons: buttons, - closeOnEscape: true + if (!button.className) { + button.className = 'btn btn-outline-primary'; + } + + const $button = $(` + + `).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'); - $('.ui-dialog .ui-dialog-buttonset button:last').addClass('btn btn-primary').focus(); - $('.ui-dialog .ui-dialog-buttonset button:last').prepend( - $('', { - 'class': 'fas fa-check-square me-2' - }) - ); + messageModal.show(); - $('#message-box .ui-dialog-titlebar-close').hide(); + $('#message-modal').css('z-index', '99999').next().css('z-index', '9999'); } return {