174 lines
4 KiB
JavaScript
174 lines
4 KiB
JavaScript
/**
|
|
* --------------------------------------------
|
|
* AdminLTE Widget.js
|
|
* License MIT
|
|
* --------------------------------------------
|
|
*/
|
|
|
|
const Widget = (($) => {
|
|
/**
|
|
* Constants
|
|
* ====================================================
|
|
*/
|
|
|
|
const NAME = 'Widget'
|
|
const DATA_KEY = 'lte.widget'
|
|
const EVENT_KEY = `.${DATA_KEY}`
|
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
|
|
|
const Event = {
|
|
EXPANDED : `expanded${EVENT_KEY}`,
|
|
COLLAPSED: `collapsed${EVENT_KEY}`,
|
|
REMOVED : `removed${EVENT_KEY}`
|
|
}
|
|
|
|
const Selector = {
|
|
DATA_REMOVE : '[data-widget="remove"]',
|
|
DATA_COLLAPSE : '[data-widget="collapse"]',
|
|
CARD : '.card',
|
|
CARD_HEADER : '.card-header',
|
|
CARD_BODY : '.card-body',
|
|
CARD_FOOTER : '.card-footer',
|
|
COLLAPSED : '.collapsed-card',
|
|
COLLAPSE_ICON : '.fa-minus',
|
|
EXPAND_ICON : '.fa-plus'
|
|
}
|
|
|
|
const ClassName = {
|
|
COLLAPSED : 'collapsed-card',
|
|
COLLAPSE_ICON : 'fa-minus',
|
|
EXPAND_ICON : 'fa-plus'
|
|
}
|
|
|
|
const Default = {
|
|
animationSpeed : 'normal',
|
|
collapseTrigger: Selector.DATA_COLLAPSE,
|
|
removeTrigger : Selector.DATA_REMOVE
|
|
}
|
|
|
|
class Widget {
|
|
constructor(element, settings) {
|
|
this._element = element
|
|
this._parent = element.parents(Selector.CARD).first()
|
|
this._settings = $.extend({}, Default, settings)
|
|
}
|
|
|
|
collapse() {
|
|
this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
|
|
.slideUp(this._settings.animationSpeed, () => {
|
|
this._parent.addClass(ClassName.COLLAPSED)
|
|
})
|
|
|
|
this._element.children(Selector.COLLAPSE_ICON)
|
|
.addClass(ClassName.EXPAND_ICON)
|
|
.removeClass(ClassName.COLLAPSE_ICON)
|
|
|
|
const collapsed = $.Event(Event.COLLAPSED)
|
|
|
|
this._element.trigger(collapsed, this._parent)
|
|
}
|
|
|
|
expand() {
|
|
this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
|
|
.slideDown(this._settings.animationSpeed, () => {
|
|
this._parent.removeClass(ClassName.COLLAPSED)
|
|
})
|
|
|
|
this._element.children(Selector.EXPAND_ICON)
|
|
.addClass(ClassName.COLLAPSE_ICON)
|
|
.removeClass(ClassName.EXPAND_ICON)
|
|
|
|
const expanded = $.Event(Event.EXPANDED)
|
|
|
|
this._element.trigger(expanded, this._parent)
|
|
}
|
|
|
|
remove() {
|
|
this._parent.slideUp()
|
|
|
|
const removed = $.Event(Event.REMOVED)
|
|
|
|
this._element.trigger(removed, this._parent)
|
|
}
|
|
|
|
toggle() {
|
|
if (this._parent.hasClass(ClassName.COLLAPSED)) {
|
|
this.expand()
|
|
return
|
|
}
|
|
|
|
this.collapse()
|
|
}
|
|
|
|
// Private
|
|
|
|
_init(card) {
|
|
this._parent = card
|
|
|
|
$(this).find(this._settings.collapseTrigger).click(() => {
|
|
this.toggle()
|
|
})
|
|
|
|
$(this).find(this._settings.removeTrigger).click(() => {
|
|
this.remove()
|
|
})
|
|
}
|
|
|
|
// Static
|
|
|
|
static _jQueryInterface(config) {
|
|
return this.each(function () {
|
|
let data = $(this).data(DATA_KEY)
|
|
|
|
if (!data) {
|
|
data = new Widget($(this), data)
|
|
$(this).data(DATA_KEY, typeof config === 'string' ? data : config)
|
|
}
|
|
|
|
if (typeof config === 'string' && config.match(/remove|toggle/)) {
|
|
data[config]()
|
|
} else if (typeof config === 'object') {
|
|
data._init($(this))
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Data API
|
|
* ====================================================
|
|
*/
|
|
|
|
$(document).on('click', Selector.DATA_COLLAPSE, function (event) {
|
|
if (event) {
|
|
event.preventDefault()
|
|
}
|
|
|
|
Widget._jQueryInterface.call($(this), 'toggle')
|
|
})
|
|
|
|
$(document).on('click', Selector.DATA_REMOVE, function (event) {
|
|
if (event) {
|
|
event.preventDefault()
|
|
}
|
|
|
|
Widget._jQueryInterface.call($(this), 'remove')
|
|
})
|
|
|
|
/**
|
|
* jQuery API
|
|
* ====================================================
|
|
*/
|
|
|
|
$.fn[NAME] = Widget._jQueryInterface
|
|
$.fn[NAME].Constructor = Widget
|
|
$.fn[NAME].noConflict = function () {
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
return Widget._jQueryInterface
|
|
}
|
|
|
|
return Widget
|
|
})(jQuery)
|
|
|
|
export default Widget
|