Replace the show message function with a bootstrap equivalent (no jquery ui used any more)
This commit is contained in:
parent
2298533426
commit
229a2aec90
1 changed files with 59 additions and 34 deletions
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue