Replace the toast function with a bootstrap equivalent

This commit is contained in:
Alex Tselegidis 2023-01-27 15:54:59 +01:00
parent 229a2aec90
commit 280c9d0ebb

View file

@ -47,42 +47,38 @@ window.App.Layouts.Backend = (function () {
* @param {Array} [actions] An array with custom actions that will be available to the user. Every array item is an
* object that contains the 'label' and 'function' key values.
*/
function displayNotification(message = '- No message provided for this notification -', actions = null) {
if (!actions) {
actions = [];
setTimeout(() => {
$notification.fadeOut();
}, 5000);
function displayNotification(message, actions = []) {
if (!message) {
return;
}
$notification.empty();
const $toast = $(`
<div class="toast bg-dark d-flex align-items-center mb-2 fade show position-fixed p-1 m-4 bottom-0 end-0 backend-notification" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body w-100 text-white">
${message}
</div>
<button type="button" class="btn-close btn-close-white me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`).appendTo('body');
const $instance = $('<div/>', {
'class': 'notification alert alert-dismissible fade show',
'html': [
$('<strong/>', {
'html': message
}),
$('<button/>', {
'type': 'button',
'class': 'btn-close',
'data-bs-dismiss': 'alert'
})
]
}).appendTo($notification);
actions.forEach((action) => {
actions.forEach(function (action) {
$('<button/>', {
'class': 'btn btn-outline-secondary btn-xs',
'text': action.label,
'on': {
'click': action.function
}
}).prependTo($instance);
class: 'btn btn-light btn-xs ms-2',
text: action.label,
on: {
click: action.function,
},
}).prependTo($toast);
});
$notification.show('fade');
const toast = new bootstrap.Toast($toast[0]);
toast.show();
setTimeout(() => {
toast.dispose();
$toast.remove();
}, 5000);
}
/**