36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
|
class AjaxLoadingSpinner {
|
||
|
|
static init() {
|
||
|
|
const $elements = $('.js-ajax-loading-spinner');
|
||
|
|
|
||
|
|
$elements.on('ajax:beforeSend', AjaxLoadingSpinner.ajaxBeforeSend);
|
||
|
|
$elements.on('ajax:complete', AjaxLoadingSpinner.ajaxComplete);
|
||
|
|
}
|
||
|
|
|
||
|
|
static ajaxBeforeSend(e) {
|
||
|
|
e.target.setAttribute('disabled', '');
|
||
|
|
const iconElement = e.target.querySelector('i');
|
||
|
|
// get first fa- icon
|
||
|
|
const originalIcon = iconElement.className.match(/(fa-)([^\s]+)/g).first();
|
||
|
|
iconElement.dataset.icon = originalIcon;
|
||
|
|
AjaxLoadingSpinner.toggleLoadingIcon(iconElement);
|
||
|
|
$(e.target).off('ajax:beforeSend', AjaxLoadingSpinner.ajaxBeforeSend);
|
||
|
|
}
|
||
|
|
|
||
|
|
static ajaxComplete(e) {
|
||
|
|
e.target.removeAttribute('disabled');
|
||
|
|
const iconElement = e.target.querySelector('i');
|
||
|
|
AjaxLoadingSpinner.toggleLoadingIcon(iconElement);
|
||
|
|
$(e.target).off('ajax:complete', AjaxLoadingSpinner.ajaxComplete);
|
||
|
|
}
|
||
|
|
|
||
|
|
static toggleLoadingIcon(iconElement) {
|
||
|
|
const classList = iconElement.classList;
|
||
|
|
classList.toggle(iconElement.dataset.icon);
|
||
|
|
classList.toggle('fa-spinner');
|
||
|
|
classList.toggle('fa-spin');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.gl = window.gl || {};
|
||
|
|
gl.AjaxLoadingSpinner = AjaxLoadingSpinner;
|