2015-11-21 04:41:40 +01:00
|
|
|
import {Feature} from './feature';
|
2015-05-30 14:23:33 +02:00
|
|
|
import Dom from '../dom';
|
|
|
|
import Types from '../types';
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let global = window;
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2015-11-21 04:41:40 +01:00
|
|
|
export class Loader extends Feature{
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2015-08-02 10:27:59 +02:00
|
|
|
/**
|
|
|
|
* Loading message/spinner
|
|
|
|
* @param {Object} tf TableFilter instance
|
|
|
|
*/
|
2016-01-02 15:33:31 +01:00
|
|
|
constructor(tf) {
|
2015-11-21 04:41:40 +01:00
|
|
|
super(tf, 'loader');
|
2014-11-15 15:34:32 +01:00
|
|
|
|
|
|
|
// TableFilter configuration
|
2016-01-02 15:33:31 +01:00
|
|
|
let f = this.config;
|
2015-11-21 04:41:40 +01:00
|
|
|
|
2014-11-15 15:34:32 +01:00
|
|
|
//id of container element
|
2014-11-16 11:01:29 +01:00
|
|
|
this.loaderTgtId = f.loader_target_id || null;
|
2014-11-15 15:34:32 +01:00
|
|
|
//div containing loader
|
2014-11-16 11:01:29 +01:00
|
|
|
this.loaderDiv = null;
|
2014-11-15 15:34:32 +01:00
|
|
|
//defines loader text
|
2014-11-16 11:01:29 +01:00
|
|
|
this.loaderText = f.loader_text || 'Loading...';
|
2014-11-15 15:34:32 +01:00
|
|
|
//defines loader innerHtml
|
2014-11-16 11:01:29 +01:00
|
|
|
this.loaderHtml = f.loader_html || null;
|
2014-11-15 15:34:32 +01:00
|
|
|
//defines css class for loader div
|
2014-11-16 11:01:29 +01:00
|
|
|
this.loaderCssClass = f.loader_css_class || 'loader';
|
2014-11-15 15:34:32 +01:00
|
|
|
//delay for hiding loader
|
2016-01-02 15:33:31 +01:00
|
|
|
this.loaderCloseDelay = 250;
|
2014-11-15 15:34:32 +01:00
|
|
|
//callback function before loader is displayed
|
2014-11-16 11:01:29 +01:00
|
|
|
this.onShowLoader = Types.isFn(f.on_show_loader) ?
|
2014-11-15 15:34:32 +01:00
|
|
|
f.on_show_loader : null;
|
|
|
|
//callback function after loader is closed
|
2014-11-16 11:01:29 +01:00
|
|
|
this.onHideLoader = Types.isFn(f.on_hide_loader) ?
|
2014-11-15 15:34:32 +01:00
|
|
|
f.on_hide_loader : null;
|
2015-04-12 09:52:19 +02:00
|
|
|
//loader div
|
|
|
|
this.prfxLoader = 'load_';
|
2015-11-21 04:41:40 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
init() {
|
|
|
|
if(this.initialized){
|
|
|
|
return;
|
|
|
|
}
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let tf = this.tf;
|
|
|
|
let emitter = this.emitter;
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let containerDiv = Dom.create('div', ['id', this.prfxLoader+tf.id]);
|
2014-11-16 11:01:29 +01:00
|
|
|
containerDiv.className = this.loaderCssClass;
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let targetEl = !this.loaderTgtId ?
|
2014-11-22 15:01:29 +01:00
|
|
|
tf.tbl.parentNode : Dom.id(this.loaderTgtId);
|
2014-11-16 11:01:29 +01:00
|
|
|
if(!this.loaderTgtId){
|
2014-11-15 15:34:32 +01:00
|
|
|
targetEl.insertBefore(containerDiv, tf.tbl);
|
|
|
|
} else {
|
|
|
|
targetEl.appendChild(containerDiv);
|
|
|
|
}
|
2015-11-21 04:41:40 +01:00
|
|
|
this.loaderDiv = containerDiv;
|
2014-11-16 11:01:29 +01:00
|
|
|
if(!this.loaderHtml){
|
|
|
|
this.loaderDiv.appendChild(Dom.text(this.loaderText));
|
2014-11-15 15:34:32 +01:00
|
|
|
} else {
|
2014-11-16 11:01:29 +01:00
|
|
|
this.loaderDiv.innerHTML = this.loaderHtml;
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
2015-11-21 04:41:40 +01:00
|
|
|
|
|
|
|
this.show('none');
|
2016-01-02 15:33:31 +01:00
|
|
|
|
|
|
|
// Subscribe to events
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.on([
|
|
|
|
'before-filtering',
|
|
|
|
'before-populating-filter',
|
|
|
|
'before-changing-page',
|
|
|
|
'before-clearing-filters',
|
|
|
|
'before-changing-results-per-page',
|
|
|
|
'before-reset-page',
|
|
|
|
'before-reset-page-length',
|
|
|
|
'before-loading-extensions',
|
|
|
|
'before-loading-themes'
|
|
|
|
],
|
|
|
|
()=> this.show('')
|
|
|
|
);
|
|
|
|
emitter.on([
|
|
|
|
'after-filtering',
|
|
|
|
'after-populating-filter',
|
|
|
|
'after-changing-page',
|
|
|
|
'after-clearing-filters',
|
|
|
|
'after-changing-results-per-page',
|
|
|
|
'after-reset-page',
|
|
|
|
'after-reset-page-length',
|
|
|
|
'after-loading-extensions',
|
|
|
|
'after-loading-themes'
|
|
|
|
],
|
|
|
|
()=> this.show('none')
|
|
|
|
);
|
2016-01-02 15:33:31 +01:00
|
|
|
|
2015-11-21 04:41:40 +01:00
|
|
|
this.initialized = true;
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
show(p) {
|
2016-01-02 15:33:31 +01:00
|
|
|
if(!this.isEnabled() /*|| this.loaderDiv.style.display === p*/){
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let displayLoader = () => {
|
2014-11-16 11:01:29 +01:00
|
|
|
if(!this.loaderDiv){
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-11-21 04:41:40 +01:00
|
|
|
if(this.onShowLoader && p !== 'none'){
|
2014-11-16 11:01:29 +01:00
|
|
|
this.onShowLoader.call(null, this);
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
2014-11-16 11:01:29 +01:00
|
|
|
this.loaderDiv.style.display = p;
|
2015-11-21 04:41:40 +01:00
|
|
|
if(this.onHideLoader && p === 'none'){
|
2014-11-16 11:01:29 +01:00
|
|
|
this.onHideLoader.call(null, this);
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
2014-11-16 11:01:29 +01:00
|
|
|
};
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let t = p === 'none' ? this.loaderCloseDelay : 1;
|
2014-11-15 15:34:32 +01:00
|
|
|
global.setTimeout(displayLoader, t);
|
|
|
|
}
|
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
destroy() {
|
2015-11-21 04:41:40 +01:00
|
|
|
if(!this.initialized){
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-11-21 04:41:40 +01:00
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let emitter = this.emitter;
|
|
|
|
|
2015-12-05 14:37:59 +01:00
|
|
|
Dom.remove(this.loaderDiv);
|
2014-11-16 11:01:29 +01:00
|
|
|
this.loaderDiv = null;
|
2016-01-02 15:33:31 +01:00
|
|
|
|
|
|
|
// Unsubscribe to events
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.off([
|
|
|
|
'before-filtering',
|
|
|
|
'before-populating-filter',
|
|
|
|
'before-changing-page',
|
|
|
|
'before-clearing-filters',
|
|
|
|
'before-changing-results-per-page',
|
|
|
|
'before-reset-page',
|
|
|
|
'before-reset-page-length',
|
|
|
|
'before-loading-extensions',
|
|
|
|
'before-loading-themes'
|
|
|
|
],
|
|
|
|
()=> this.show('')
|
|
|
|
);
|
|
|
|
emitter.off([
|
|
|
|
'after-filtering',
|
|
|
|
'after-populating-filter',
|
|
|
|
'after-changing-page',
|
|
|
|
'after-clearing-filters',
|
|
|
|
'after-changing-results-per-page',
|
|
|
|
'after-reset-page',
|
|
|
|
'after-reset-page-length',
|
|
|
|
'after-loading-extensions',
|
|
|
|
'after-loading-themes'
|
|
|
|
],
|
|
|
|
()=> this.show('none')
|
|
|
|
);
|
2016-01-02 15:33:31 +01:00
|
|
|
|
2015-11-21 04:41:40 +01:00
|
|
|
this.initialized = false;
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
|
|
|
}
|