AdminLTE/build/js/Toasts.js

219 lines
5.6 KiB
JavaScript
Raw Normal View History

/**
* --------------------------------------------
* AdminLTE Toasts.js
* License MIT
* --------------------------------------------
*/
2020-05-30 13:44:20 +00:00
const Toasts = ($ => {
/**
* Constants
* ====================================================
*/
2020-05-30 13:44:20 +00:00
const NAME = 'Toasts'
const DATA_KEY = 'lte.toasts'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
INIT: `init${EVENT_KEY}`,
CREATED: `created${EVENT_KEY}`,
2020-05-30 13:44:20 +00:00
REMOVED: `removed${EVENT_KEY}`
}
const Selector = {
CONTAINER_TOP_RIGHT: '#toastsContainerTopRight',
CONTAINER_TOP_LEFT: '#toastsContainerTopLeft',
CONTAINER_BOTTOM_RIGHT: '#toastsContainerBottomRight',
2020-05-30 13:44:20 +00:00
CONTAINER_BOTTOM_LEFT: '#toastsContainerBottomLeft'
}
const ClassName = {
TOP_RIGHT: 'toasts-top-right',
TOP_LEFT: 'toasts-top-left',
BOTTOM_RIGHT: 'toasts-bottom-right',
2020-05-30 13:44:20 +00:00
BOTTOM_LEFT: 'toasts-bottom-left'
}
const Position = {
TOP_RIGHT: 'topRight',
TOP_LEFT: 'topLeft',
BOTTOM_RIGHT: 'bottomRight',
2020-05-30 13:44:20 +00:00
BOTTOM_LEFT: 'bottomLeft'
}
const Default = {
position: Position.TOP_RIGHT,
fixed: true,
autohide: false,
autoremove: true,
delay: 1000,
fade: true,
icon: null,
image: null,
imageAlt: null,
imageHeight: '25px',
title: null,
subtitle: null,
close: true,
body: null,
2020-05-30 13:44:20 +00:00
class: null
}
/**
* Class Definition
* ====================================================
*/
class Toasts {
constructor(element, config) {
2020-05-30 13:44:20 +00:00
this._config = config
this._prepareContainer()
2020-05-31 17:58:24 +00:00
$('body').trigger($.Event(Event.INIT))
}
// Public
create() {
2020-05-30 13:44:20 +00:00
const toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
toast.data('autohide', this._config.autohide)
toast.data('animation', this._config.fade)
2020-05-30 13:44:20 +00:00
if (this._config.class) {
toast.addClass(this._config.class)
}
if (this._config.delay && this._config.delay != 500) {
toast.data('delay', this._config.delay)
}
2020-05-30 13:44:20 +00:00
const toastHeader = $('<div class="toast-header">')
if (this._config.image != null) {
2020-05-30 13:44:20 +00:00
const toastImage = $('<img />').addClass('rounded mr-2').attr('src', this._config.image).attr('alt', this._config.imageAlt)
if (this._config.imageHeight != null) {
2020-05-30 13:44:20 +00:00
toastImage.height(this._config.imageHeight).width('auto')
}
2020-05-30 13:44:20 +00:00
toastHeader.append(toastImage)
}
if (this._config.icon != null) {
2020-05-30 13:44:20 +00:00
toastHeader.append($('<i />').addClass('mr-2').addClass(this._config.icon))
}
if (this._config.title != null) {
2020-05-30 13:44:20 +00:00
toastHeader.append($('<strong />').addClass('mr-auto').html(this._config.title))
}
if (this._config.subtitle != null) {
2020-05-30 13:44:20 +00:00
toastHeader.append($('<small />').html(this._config.subtitle))
}
if (this._config.close == true) {
2020-05-30 13:44:20 +00:00
const toastClose = $('<button data-dismiss="toast" />').attr('type', 'button').addClass('ml-2 mb-1 close').attr('aria-label', 'Close').append('<span aria-hidden="true">&times;</span>')
if (this._config.title == null) {
2020-05-30 13:44:20 +00:00
toastClose.toggleClass('ml-2 ml-auto')
}
2020-05-30 13:44:20 +00:00
toastHeader.append(toastClose)
}
2020-05-30 13:44:20 +00:00
toast.append(toastHeader)
if (this._config.body != null) {
toast.append($('<div class="toast-body" />').html(this._config.body))
}
$(this._getContainerId()).prepend(toast)
2020-05-31 17:58:24 +00:00
$('body').trigger($.Event(Event.CREATED))
toast.toast('show')
if (this._config.autoremove) {
toast.on('hidden.bs.toast', function () {
2020-05-30 13:44:20 +00:00
$(this).delay(200).remove()
2020-05-31 17:58:24 +00:00
$('body').trigger($.Event(Event.REMOVED))
})
}
}
// Static
_getContainerId() {
if (this._config.position == Position.TOP_RIGHT) {
2020-05-30 13:44:20 +00:00
return Selector.CONTAINER_TOP_RIGHT
}
if (this._config.position == Position.TOP_LEFT) {
return Selector.CONTAINER_TOP_LEFT
}
if (this._config.position == Position.BOTTOM_RIGHT) {
return Selector.CONTAINER_BOTTOM_RIGHT
}
if (this._config.position == Position.BOTTOM_LEFT) {
return Selector.CONTAINER_BOTTOM_LEFT
}
}
_prepareContainer() {
if ($(this._getContainerId()).length === 0) {
2020-05-30 13:44:20 +00:00
const container = $('<div />').attr('id', this._getContainerId().replace('#', ''))
if (this._config.position == Position.TOP_RIGHT) {
container.addClass(ClassName.TOP_RIGHT)
} else if (this._config.position == Position.TOP_LEFT) {
container.addClass(ClassName.TOP_LEFT)
} else if (this._config.position == Position.BOTTOM_RIGHT) {
container.addClass(ClassName.BOTTOM_RIGHT)
} else if (this._config.position == Position.BOTTOM_LEFT) {
container.addClass(ClassName.BOTTOM_LEFT)
}
$('body').append(container)
}
if (this._config.fixed) {
$(this._getContainerId()).addClass('fixed')
} else {
$(this._getContainerId()).removeClass('fixed')
}
}
// Static
static _jQueryInterface(option, config) {
return this.each(function () {
2019-11-17 10:53:47 +00:00
const _options = $.extend({}, Default, config)
2020-05-30 13:44:20 +00:00
const toast = new Toasts($(this), _options)
if (option === 'create') {
toast[option]()
}
})
}
}
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Toasts._jQueryInterface
$.fn[NAME].Constructor = Toasts
2020-05-30 13:44:20 +00:00
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Toasts._jQueryInterface
}
return Toasts
})(jQuery)
export default Toasts