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.
75 lines
2.9 KiB
75 lines
2.9 KiB
(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);
|
|
}
|
|
|
|
let bg_header_class = '',
|
|
fg_header_class = '',
|
|
fg_subtitle = 'text-muted',
|
|
fg_dismiss = '',
|
|
title = typeof opts === 'object' ? opts.title || '' : arguments[0] || 'Notice!',
|
|
subtitle = typeof opts === 'object' ? opts.subtitle || '' : arguments[1] || '',
|
|
content = typeof opts === 'object' ? opts.content || '' : arguments[2] || '',
|
|
type = typeof opts === 'object' ? opts.type || '' : arguments[3] || 'info',
|
|
delay = typeof opts === 'object' ? opts.delay || 3000 : arguments[4] || 3000;
|
|
|
|
switch (type) {
|
|
case 'info':
|
|
bg_header_class = 'bg-info';
|
|
fg_header_class = 'text-white';
|
|
fg_subtitle = 'text-white';
|
|
fg_dismiss = 'text-white';
|
|
break;
|
|
|
|
case 'success':
|
|
bg_header_class = 'bg-success';
|
|
fg_header_class = 'text-white';
|
|
fg_subtitle = 'text-white';
|
|
fg_dismiss = 'text-white';
|
|
break;
|
|
|
|
case 'warning':
|
|
case 'warn':
|
|
bg_header_class = 'bg-warning';
|
|
fg_header_class = 'text-white';
|
|
fg_subtitle = 'text-white';
|
|
fg_dismiss = 'text-white';
|
|
break;
|
|
|
|
case 'error':
|
|
case 'danger':
|
|
bg_header_class = 'bg-danger';
|
|
fg_header_class = 'text-white';
|
|
fg_subtitle = 'text-white';
|
|
fg_dismiss = 'text-white';
|
|
break;
|
|
}
|
|
|
|
let html = '';
|
|
html += '<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="' + delay + '">';
|
|
html += '<div class="toast-header ' + bg_header_class + ' ' + fg_header_class + '">';
|
|
html += '<strong class="mr-auto">' + title + '</strong>';
|
|
html += '<small class="' + fg_subtitle + '">' + 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 + '">×</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)); |