149 lines
3.3 KiB
JavaScript
149 lines
3.3 KiB
JavaScript
|
window.scwNotificationPlugin = window.scwNotificationPlugin || {};
|
||
|
|
||
|
window.SEMICOLON_notificationInit = function( $notifyEl ){
|
||
|
|
||
|
$notifyEl = $notifyEl.filter(':not(.customjs)');
|
||
|
|
||
|
let element = $notifyEl,
|
||
|
elPosition = element.attr('data-notify-position') || 'top-right',
|
||
|
elType = element.attr('data-notify-type'),
|
||
|
elMsg = element.attr('data-notify-msg') || 'Please set a message!',
|
||
|
elTimeout = element.attr('data-notify-timeout') || 5000,
|
||
|
elClose = element.attr('data-notify-close') || 'true',
|
||
|
elAutoHide = element.attr('data-notify-autohide') || 'true',
|
||
|
elId = 'toast-' + Math.floor( Math.random() * 10000 ),
|
||
|
elTrigger = element.attr('data-notify-trigger') || 'self',
|
||
|
elTarget = element.attr('data-notify-target'),
|
||
|
elCloseHtml = '',
|
||
|
elPosClass, elTypeClass, elCloseClass;
|
||
|
|
||
|
switch( elType ){
|
||
|
|
||
|
case 'primary':
|
||
|
elTypeClass = 'text-white bg-primary border-0';
|
||
|
break;
|
||
|
|
||
|
case 'warning':
|
||
|
elTypeClass = 'text-dark bg-warning border-0';
|
||
|
break;
|
||
|
|
||
|
case 'error':
|
||
|
elTypeClass = 'text-white bg-danger border-0';
|
||
|
break;
|
||
|
|
||
|
case 'success':
|
||
|
elTypeClass = 'text-white bg-success border-0';
|
||
|
break;
|
||
|
|
||
|
case 'info':
|
||
|
elTypeClass = 'bg-info text-dark border-0';
|
||
|
break;
|
||
|
|
||
|
case 'dark':
|
||
|
elTypeClass = 'text-white bg-dark border-0';
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
elTypeClass = '';
|
||
|
break;
|
||
|
}
|
||
|
|
||
|
switch( elPosition ){
|
||
|
|
||
|
case 'top-left':
|
||
|
elPosClass = 'top-0 start-0';
|
||
|
break;
|
||
|
|
||
|
case 'top-center':
|
||
|
elPosClass = 'top-0 start-50 translate-middle-x';
|
||
|
break;
|
||
|
|
||
|
case 'middle-left':
|
||
|
elPosClass = 'top-50 start-0 translate-middle-y';
|
||
|
break;
|
||
|
|
||
|
case 'middle-center':
|
||
|
elPosClass = 'top-50 start-50 translate-middle';
|
||
|
break;
|
||
|
|
||
|
case 'middle-right':
|
||
|
elPosClass = 'top-50 end-0 translate-middle-y';
|
||
|
break;
|
||
|
|
||
|
case 'bottom-left':
|
||
|
elPosClass = 'bottom-0 start-0';
|
||
|
break;
|
||
|
|
||
|
case 'bottom-center':
|
||
|
elPosClass = 'bottom-0 start-50 translate-middle-x';
|
||
|
break;
|
||
|
|
||
|
case 'bottom-right':
|
||
|
elPosClass = 'bottom-0 end-0';
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
elPosClass = 'top-0 end-0';
|
||
|
break;
|
||
|
}
|
||
|
|
||
|
if( elType == 'info' || elType == 'warning' || !elType ) {
|
||
|
elCloseClass = '';
|
||
|
} else {
|
||
|
elCloseClass = 'btn-close-white';
|
||
|
}
|
||
|
|
||
|
if( elClose == 'true' ) {
|
||
|
elCloseHtml = '<button type="button" class="btn-close '+ elCloseClass +' btn-sm me-2 mt-2 ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>';
|
||
|
}
|
||
|
|
||
|
if( elAutoHide != 'true' ) {
|
||
|
elAutoHide = false;
|
||
|
} else {
|
||
|
elAutoHide = true;
|
||
|
}
|
||
|
|
||
|
let elTemplate = '<div class="position-fixed '+ elPosClass +' p-3" style="z-index: 999999;">'+
|
||
|
'<div id="'+ elId +'" class="toast p-2 hide '+ elTypeClass +'" role="alert" aria-live="assertive" aria-atomic="true">'+
|
||
|
'<div class="d-flex">'+
|
||
|
'<div class="toast-body">'+
|
||
|
elMsg +
|
||
|
'</div>'+
|
||
|
elCloseHtml +
|
||
|
'</div>'+
|
||
|
'</div>';
|
||
|
'</div>';
|
||
|
|
||
|
if( elTrigger == 'self' ) {
|
||
|
if( !elTarget ) {
|
||
|
element.attr( 'data-notify-target', '#'+elId );
|
||
|
|
||
|
$('body').append( elTemplate );
|
||
|
}
|
||
|
}
|
||
|
|
||
|
let toastElList = [].slice.call(document.querySelectorAll('.toast'));
|
||
|
let toastList = toastElList.map( function(toastEl){
|
||
|
return new bootstrap.Toast(toastEl);
|
||
|
});
|
||
|
|
||
|
toastList.forEach(toast => {
|
||
|
toast.hide();
|
||
|
});
|
||
|
|
||
|
let toastElement = element.attr('data-notify-target');
|
||
|
|
||
|
if( $(toastElement).length > 0 ) {
|
||
|
let toast = new bootstrap.Toast( $(toastElement).get(0), {
|
||
|
delay: Number(elTimeout),
|
||
|
autohide: elAutoHide,
|
||
|
});
|
||
|
|
||
|
toast.show();
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
|
||
|
};
|
||
|
|