mirror of https://github.com/exacti/Toast.git
Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
https://github.com/exacti/Toast
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
3.5 KiB
96 lines
3.5 KiB
/**
|
|
* @author Script47 (https://github.com/Script47/Toast)
|
|
* @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
|
|
* @version 0.6.0
|
|
**/
|
|
(function ($) {
|
|
const TOAST_CONTAINER_HTML = '<div id="toast-container" aria-live="polite" aria-atomic="true"></div>';
|
|
const TOAST_WRAPPER_HTML = '<div id="toast-wrapper"></div>';
|
|
|
|
$.toast = function (opts) {
|
|
if (!$('#toast-container').length) {
|
|
$('body').prepend(TOAST_CONTAINER_HTML);
|
|
$('#toast-container').append(TOAST_WRAPPER_HTML);
|
|
|
|
$('body').on('hidden.bs.toast', '.toast', function () {
|
|
$(this).remove();
|
|
});
|
|
}
|
|
|
|
let bg_header_class = '',
|
|
fg_header_class = '',
|
|
fg_subtitle_class = 'text-muted',
|
|
fg_dismiss_class = '',
|
|
title = opts.title || 'Notice!',
|
|
subtitle = opts.subtitle || '',
|
|
content = opts.content || '',
|
|
type = opts.type || 'info',
|
|
delay = opts.delay || -1,
|
|
img = opts.img;
|
|
|
|
switch (type) {
|
|
case 'info':
|
|
bg_header_class = 'bg-info';
|
|
fg_header_class = 'text-white';
|
|
fg_subtitle_class = 'text-white';
|
|
fg_dismiss_class = 'text-white';
|
|
break;
|
|
|
|
case 'success':
|
|
bg_header_class = 'bg-success';
|
|
fg_header_class = 'text-white';
|
|
fg_subtitle_class = 'text-white';
|
|
fg_dismiss_class = 'text-white';
|
|
break;
|
|
|
|
case 'warning':
|
|
case 'warn':
|
|
bg_header_class = 'bg-warning';
|
|
fg_header_class = 'text-white';
|
|
fg_subtitle_class = 'text-white';
|
|
fg_dismiss_class = 'text-white';
|
|
break;
|
|
|
|
case 'error':
|
|
case 'danger':
|
|
bg_header_class = 'bg-danger';
|
|
fg_header_class = 'text-white';
|
|
fg_subtitle_class = 'text-white';
|
|
fg_dismiss_class = 'text-white';
|
|
break;
|
|
}
|
|
|
|
let delay_or_autohide = '';
|
|
|
|
if (delay === -1) {
|
|
delay_or_autohide = 'data-autohide="false"';
|
|
} else {
|
|
delay_or_autohide = 'data-delay="' + delay + '"';
|
|
}
|
|
|
|
let html = '<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" ' + delay_or_autohide + '>';
|
|
html += '<div class="toast-header ' + bg_header_class + ' ' + fg_header_class + '">';
|
|
|
|
if (typeof img !== 'undefined') {
|
|
html += '<img src="' + img.src + '" class="' + (img.class || '') + ' mr-2" alt="' + (img.alt || 'Image') + '" ' + (typeof img.title !== 'undefined' ? 'data-toggle="tooltip" title="' + img.title + '"' : '') + '>';
|
|
}
|
|
|
|
html += '<strong class="mr-auto">' + title + '</strong>';
|
|
html += '<small class="' + fg_subtitle_class + '">' + subtitle + '</small>';
|
|
html += '<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';
|
|
html += '<span aria-hidden="true" class="' + fg_dismiss_class + '">×</span>';
|
|
html += '</button>';
|
|
html += '</div>';
|
|
|
|
if (content !== '') {
|
|
html += '<div class="toast-body">'
|
|
html += content
|
|
html += '</div>';
|
|
}
|
|
|
|
html += '</div>';
|
|
|
|
$('#toast-wrapper').append(html);
|
|
$('#toast-wrapper .toast:last').toast('show');
|
|
}
|
|
}(jQuery)); |