mirror of https://github.com/ColorlibHQ/AdminLTE
250 lines
6.5 KiB
JavaScript
250 lines
6.5 KiB
JavaScript
|
/**
|
||
|
* --------------------------------------------
|
||
|
* AdminLTE CardWidget.js
|
||
|
* License MIT
|
||
|
* --------------------------------------------
|
||
|
*/
|
||
|
|
||
|
const CardWidget = (($) => {
|
||
|
/**
|
||
|
* Constants
|
||
|
* ====================================================
|
||
|
*/
|
||
|
|
||
|
const NAME = 'CardWidget'
|
||
|
const DATA_KEY = 'lte.cardwidget'
|
||
|
const EVENT_KEY = `.${DATA_KEY}`
|
||
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||
|
|
||
|
const Event = {
|
||
|
EXPANDED: `expanded${EVENT_KEY}`,
|
||
|
COLLAPSED: `collapsed${EVENT_KEY}`,
|
||
|
MAXIMIZED: `maximized${EVENT_KEY}`,
|
||
|
MINIMIZED: `minimized${EVENT_KEY}`,
|
||
|
REMOVED: `removed${EVENT_KEY}`
|
||
|
}
|
||
|
|
||
|
const ClassName = {
|
||
|
CARD: 'card',
|
||
|
COLLAPSED: 'collapsed-card',
|
||
|
WAS_COLLAPSED: 'was-collapsed',
|
||
|
MAXIMIZED: 'maximized-card',
|
||
|
}
|
||
|
|
||
|
const Selector = {
|
||
|
DATA_REMOVE: '[data-card-widget="remove"]',
|
||
|
DATA_COLLAPSE: '[data-card-widget="collapse"]',
|
||
|
DATA_MAXIMIZE: '[data-card-widget="maximize"]',
|
||
|
CARD: `.${ClassName.CARD}`,
|
||
|
CARD_HEADER: '.card-header',
|
||
|
CARD_BODY: '.card-body',
|
||
|
CARD_FOOTER: '.card-footer',
|
||
|
COLLAPSED: `.${ClassName.COLLAPSED}`,
|
||
|
}
|
||
|
|
||
|
const Default = {
|
||
|
animationSpeed: 'normal',
|
||
|
collapseTrigger: Selector.DATA_COLLAPSE,
|
||
|
removeTrigger: Selector.DATA_REMOVE,
|
||
|
maximizeTrigger: Selector.DATA_MAXIMIZE,
|
||
|
collapseIcon: 'fa-minus',
|
||
|
expandIcon: 'fa-plus',
|
||
|
maximizeIcon: 'fa-expand',
|
||
|
minimizeIcon: 'fa-compress',
|
||
|
}
|
||
|
|
||
|
class CardWidget {
|
||
|
constructor(element, settings) {
|
||
|
this._element = element
|
||
|
this._parent = element.parents(Selector.CARD).first()
|
||
|
|
||
|
if (element.hasClass(ClassName.CARD)) {
|
||
|
this._parent = element
|
||
|
}
|
||
|
|
||
|
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(this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
|
||
|
.addClass(this._settings.expandIcon)
|
||
|
.removeClass(this._settings.collapseIcon)
|
||
|
|
||
|
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(this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
|
||
|
.addClass(this._settings.collapseIcon)
|
||
|
.removeClass(this._settings.expandIcon)
|
||
|
|
||
|
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()
|
||
|
}
|
||
|
|
||
|
maximize() {
|
||
|
this._element.children(this._settings.maximizeTrigger + ' .' + this._settings.maximizeIcon)
|
||
|
.addClass(this._settings.minimizeIcon)
|
||
|
.removeClass(this._settings.maximizeIcon)
|
||
|
this._parent.css({
|
||
|
'height': this._parent.height(),
|
||
|
'width': this._parent.width(),
|
||
|
'transition': 'all .15s'
|
||
|
}).delay(150).queue(function(){
|
||
|
$(this).addClass(ClassName.MAXIMIZED)
|
||
|
$('html').addClass(ClassName.MAXIMIZED)
|
||
|
if ($(this).hasClass(ClassName.COLLAPSED)) {
|
||
|
$(this).addClass(ClassName.WAS_COLLAPSED)
|
||
|
}
|
||
|
$(this).dequeue()
|
||
|
})
|
||
|
|
||
|
const maximized = $.Event(Event.MAXIMIZED)
|
||
|
|
||
|
this._element.trigger(maximized, this._parent)
|
||
|
}
|
||
|
|
||
|
minimize() {
|
||
|
this._element.children(this._settings.maximizeTrigger + ' .' + this._settings.minimizeIcon)
|
||
|
.addClass(this._settings.maximizeIcon)
|
||
|
.removeClass(this._settings.minimizeIcon)
|
||
|
this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
|
||
|
'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
|
||
|
).delay(10).queue(function(){
|
||
|
$(this).removeClass(ClassName.MAXIMIZED)
|
||
|
$('html').removeClass(ClassName.MAXIMIZED)
|
||
|
$(this).css({
|
||
|
'height': 'inherit',
|
||
|
'width': 'inherit'
|
||
|
})
|
||
|
if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
|
||
|
$(this).removeClass(ClassName.WAS_COLLAPSED)
|
||
|
}
|
||
|
$(this).dequeue()
|
||
|
})
|
||
|
|
||
|
const MINIMIZED = $.Event(Event.MINIMIZED)
|
||
|
|
||
|
this._element.trigger(MINIMIZED, this._parent)
|
||
|
}
|
||
|
|
||
|
toggleMaximize() {
|
||
|
if (this._parent.hasClass(ClassName.MAXIMIZED)) {
|
||
|
this.minimize()
|
||
|
return
|
||
|
}
|
||
|
|
||
|
this.maximize()
|
||
|
}
|
||
|
|
||
|
// Private
|
||
|
|
||
|
_init(card) {
|
||
|
this._parent = card
|
||
|
|
||
|
$(this).find(this._settings.collapseTrigger).click(() => {
|
||
|
this.toggle()
|
||
|
})
|
||
|
|
||
|
$(this).find(this._settings.maximizeTrigger).click(() => {
|
||
|
this.toggleMaximize()
|
||
|
})
|
||
|
|
||
|
$(this).find(this._settings.removeTrigger).click(() => {
|
||
|
this.remove()
|
||
|
})
|
||
|
}
|
||
|
|
||
|
// Static
|
||
|
|
||
|
static _jQueryInterface(config) {
|
||
|
let data = $(this).data(DATA_KEY)
|
||
|
|
||
|
if (!data) {
|
||
|
data = new CardWidget($(this), data)
|
||
|
$(this).data(DATA_KEY, typeof config === 'string' ? data: config)
|
||
|
}
|
||
|
|
||
|
if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/)) {
|
||
|
data[config]()
|
||
|
} else if (typeof config === 'object') {
|
||
|
data._init($(this))
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Data API
|
||
|
* ====================================================
|
||
|
*/
|
||
|
|
||
|
$(document).on('click', Selector.DATA_COLLAPSE, function (event) {
|
||
|
if (event) {
|
||
|
event.preventDefault()
|
||
|
}
|
||
|
|
||
|
CardWidget._jQueryInterface.call($(this), 'toggle')
|
||
|
})
|
||
|
|
||
|
$(document).on('click', Selector.DATA_REMOVE, function (event) {
|
||
|
if (event) {
|
||
|
event.preventDefault()
|
||
|
}
|
||
|
|
||
|
CardWidget._jQueryInterface.call($(this), 'remove')
|
||
|
})
|
||
|
|
||
|
$(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
|
||
|
if (event) {
|
||
|
event.preventDefault()
|
||
|
}
|
||
|
|
||
|
CardWidget._jQueryInterface.call($(this), 'toggleMaximize')
|
||
|
})
|
||
|
|
||
|
/**
|
||
|
* jQuery API
|
||
|
* ====================================================
|
||
|
*/
|
||
|
|
||
|
$.fn[NAME] = CardWidget._jQueryInterface
|
||
|
$.fn[NAME].Constructor = CardWidget
|
||
|
$.fn[NAME].noConflict = function () {
|
||
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||
|
return CardWidget._jQueryInterface
|
||
|
}
|
||
|
|
||
|
return CardWidget
|
||
|
})(jQuery)
|
||
|
|
||
|
export default CardWidget
|