Replace the toast function with a bootstrap equivalent
This commit is contained in:
parent
229a2aec90
commit
280c9d0ebb
1 changed files with 26 additions and 30 deletions
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue