2019-09-16 10:05:25 +00:00
|
|
|
/**
|
|
|
|
* --------------------------------------------
|
|
|
|
* AdminLTE Toasts.js
|
|
|
|
* License MIT
|
|
|
|
* --------------------------------------------
|
|
|
|
*/
|
|
|
|
|
2020-05-30 13:44:20 +00:00
|
|
|
const Toasts = ($ => {
|
2019-09-16 10:05:25 +00:00
|
|
|
/**
|
|
|
|
* Constants
|
|
|
|
* ====================================================
|
|
|
|
*/
|
|
|
|
|
2020-05-30 13:44:20 +00:00
|
|
|
const NAME = 'Toasts'
|
|
|
|
const DATA_KEY = 'lte.toasts'
|
|
|
|
const EVENT_KEY = `.${DATA_KEY}`
|
2019-09-16 10:05:25 +00:00
|
|
|
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}`
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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'
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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'
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const Position = {
|
|
|
|
TOP_RIGHT: 'topRight',
|
|
|
|
TOP_LEFT: 'topLeft',
|
|
|
|
BOTTOM_RIGHT: 'bottomRight',
|
2020-05-30 13:44:20 +00:00
|
|
|
BOTTOM_LEFT: 'bottomLeft'
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Class Definition
|
|
|
|
* ====================================================
|
|
|
|
*/
|
|
|
|
class Toasts {
|
|
|
|
constructor(element, config) {
|
2020-05-30 13:44:20 +00:00
|
|
|
this._config = config
|
|
|
|
this._prepareContainer()
|
2019-09-16 10:05:25 +00:00
|
|
|
|
2020-05-31 17:58:24 +00:00
|
|
|
$('body').trigger($.Event(Event.INIT))
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Public
|
|
|
|
|
|
|
|
create() {
|
2020-05-30 13:44:20 +00:00
|
|
|
const toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
|
2019-09-16 10:05:25 +00:00
|
|
|
|
|
|
|
toast.data('autohide', this._config.autohide)
|
|
|
|
toast.data('animation', this._config.fade)
|
2020-05-30 13:44:20 +00:00
|
|
|
|
2019-09-16 10:05:25 +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">')
|
2019-09-16 10:05:25 +00:00
|
|
|
|
|
|
|
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)
|
|
|
|
|
2019-09-16 10:05:25 +00:00
|
|
|
if (this._config.imageHeight != null) {
|
2020-05-30 13:44:20 +00:00
|
|
|
toastImage.height(this._config.imageHeight).width('auto')
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
2020-05-30 13:44:20 +00:00
|
|
|
toastHeader.append(toastImage)
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this._config.icon != null) {
|
2020-05-30 13:44:20 +00:00
|
|
|
toastHeader.append($('<i />').addClass('mr-2').addClass(this._config.icon))
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this._config.title != null) {
|
2020-05-30 13:44:20 +00:00
|
|
|
toastHeader.append($('<strong />').addClass('mr-auto').html(this._config.title))
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this._config.subtitle != null) {
|
2020-05-30 13:44:20 +00:00
|
|
|
toastHeader.append($('<small />').html(this._config.subtitle))
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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">×</span>')
|
|
|
|
|
2019-09-16 10:05:25 +00:00
|
|
|
if (this._config.title == null) {
|
2020-05-30 13:44:20 +00:00
|
|
|
toastClose.toggleClass('ml-2 ml-auto')
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
2020-05-30 13:44:20 +00:00
|
|
|
|
|
|
|
toastHeader.append(toastClose)
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
|
2020-05-30 13:44:20 +00:00
|
|
|
toast.append(toastHeader)
|
2019-09-16 10:05:25 +00:00
|
|
|
|
|
|
|
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))
|
2019-09-16 10:05:25 +00:00
|
|
|
|
|
|
|
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))
|
2019-09-16 10:05:25 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 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
|
2019-09-16 10:05:25 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_prepareContainer() {
|
|
|
|
if ($(this._getContainerId()).length === 0) {
|
2020-05-30 13:44:20 +00:00
|
|
|
const container = $('<div />').attr('id', this._getContainerId().replace('#', ''))
|
2019-09-16 10:05:25 +00:00
|
|
|
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)
|
2019-09-16 10:05:25 +00:00
|
|
|
|
|
|
|
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 () {
|
2019-09-16 10:05:25 +00:00
|
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
|
|
return Toasts._jQueryInterface
|
|
|
|
}
|
|
|
|
|
|
|
|
return Toasts
|
|
|
|
})(jQuery)
|
|
|
|
|
|
|
|
export default Toasts
|