AdminLTE/build/js/CardRefresh.js

155 lines
3.6 KiB
JavaScript
Raw Normal View History

/**
* --------------------------------------------
* AdminLTE CardRefresh.js
* License MIT
* --------------------------------------------
*/
2020-06-02 15:23:22 +02:00
import $ from 'jquery'
2020-06-02 15:23:22 +02:00
/**
* Constants
* ====================================================
*/
2020-06-02 15:23:22 +02:00
const NAME = 'CardRefresh'
const DATA_KEY = 'lte.cardrefresh'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const EVENT_LOADED = `loaded${EVENT_KEY}`
const EVENT_OVERLAY_ADDED = `overlay.added${EVENT_KEY}`
const EVENT_OVERLAY_REMOVED = `overlay.removed${EVENT_KEY}`
2020-06-02 15:23:22 +02:00
const CLASS_NAME_CARD = 'card'
2020-06-02 15:23:22 +02:00
const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
const SELECTOR_DATA_REFRESH = '[data-card-widget="card-refresh"]'
2020-06-02 15:23:22 +02:00
const Default = {
source: '',
sourceSelector: '',
params: {},
trigger: SELECTOR_DATA_REFRESH,
2020-06-02 15:23:22 +02:00
content: '.card-body',
loadInContent: true,
loadOnInit: true,
responseType: '',
overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
onLoadStart() {
},
onLoadDone(response) {
return response
}
2020-06-02 15:23:22 +02:00
}
class CardRefresh {
constructor(element, settings) {
this._element = element
this._parent = element.parents(SELECTOR_CARD).first()
2020-06-02 15:23:22 +02:00
this._settings = $.extend({}, Default, settings)
this._overlay = $(this._settings.overlayTemplate)
if (element.hasClass(CLASS_NAME_CARD)) {
2020-06-02 15:23:22 +02:00
this._parent = element
}
if (this._settings.source === '') {
throw new Error('Source url was not defined. Please specify a url in your CardRefresh source option.')
}
}
2020-06-02 15:23:22 +02:00
load() {
this._addOverlay()
this._settings.onLoadStart.call($(this))
2020-06-02 15:23:22 +02:00
$.get(this._settings.source, this._settings.params, response => {
if (this._settings.loadInContent) {
if (this._settings.sourceSelector !== '') {
response = $(response).find(this._settings.sourceSelector).html()
}
2020-06-02 15:23:22 +02:00
this._parent.find(this._settings.content).html(response)
}
2020-06-02 15:23:22 +02:00
this._settings.onLoadDone.call($(this), response)
this._removeOverlay()
}, this._settings.responseType !== '' && this._settings.responseType)
$(this._element).trigger($.Event(EVENT_LOADED))
2020-06-02 15:23:22 +02:00
}
2020-06-02 15:23:22 +02:00
_addOverlay() {
this._parent.append(this._overlay)
$(this._element).trigger($.Event(EVENT_OVERLAY_ADDED))
2020-06-02 15:23:22 +02:00
}
2020-06-02 15:23:22 +02:00
_removeOverlay() {
this._parent.find(this._overlay).remove()
$(this._element).trigger($.Event(EVENT_OVERLAY_REMOVED))
2020-06-02 15:23:22 +02:00
}
2020-06-02 15:23:22 +02:00
// Private
2020-06-02 15:23:22 +02:00
_init() {
$(this).find(this._settings.trigger).on('click', () => {
this.load()
})
2020-06-02 15:23:22 +02:00
if (this._settings.loadOnInit) {
this.load()
2020-05-30 15:44:20 +02:00
}
2020-06-02 15:23:22 +02:00
}
2020-06-02 15:23:22 +02:00
// Static
2020-06-02 15:23:22 +02:00
static _jQueryInterface(config) {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
2020-06-02 15:23:22 +02:00
if (!data) {
data = new CardRefresh($(this), _options)
$(this).data(DATA_KEY, typeof config === 'string' ? data : config)
}
2020-06-02 15:23:22 +02:00
if (typeof config === 'string' && config.match(/load/)) {
data[config]()
} else {
data._init($(this))
}
}
2020-06-02 15:23:22 +02:00
}
2020-06-02 15:23:22 +02:00
/**
* Data API
* ====================================================
*/
$(document).on('click', SELECTOR_DATA_REFRESH, function (event) {
2020-06-02 15:23:22 +02:00
if (event) {
event.preventDefault()
}
2020-06-02 15:23:22 +02:00
CardRefresh._jQueryInterface.call($(this), 'load')
})
2020-06-02 15:23:22 +02:00
$(() => {
$(SELECTOR_DATA_REFRESH).each(function () {
2020-06-02 15:23:22 +02:00
CardRefresh._jQueryInterface.call($(this))
})
2020-06-02 15:23:22 +02:00
})
2020-06-02 15:23:22 +02:00
/**
* jQuery API
* ====================================================
*/
2020-06-02 15:23:22 +02:00
$.fn[NAME] = CardRefresh._jQueryInterface
$.fn[NAME].Constructor = CardRefresh
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return CardRefresh._jQueryInterface
}
export default CardRefresh