2016-05-14 12:04:00 +02:00
|
|
|
import {Feature} from '../feature';
|
2016-05-25 09:31:53 +02:00
|
|
|
import {createElm, createText, elm, removeElm} from '../dom';
|
2017-07-09 07:11:51 +02:00
|
|
|
import {EMPTY_FN} from '../types';
|
2016-05-08 07:26:52 +02:00
|
|
|
import {root} from '../root';
|
2016-05-07 13:59:42 +02:00
|
|
|
import {NONE} from '../const';
|
2017-07-09 07:11:51 +02:00
|
|
|
import {defaultsStr, defaultsFn} from '../settings';
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2018-10-27 12:46:27 +02:00
|
|
|
const BEFORE_ACTION_EVENTS = [
|
2016-10-27 04:33:42 +02:00
|
|
|
'before-filtering',
|
|
|
|
'before-populating-filter',
|
|
|
|
'before-page-change',
|
|
|
|
'before-clearing-filters',
|
|
|
|
'before-page-length-change',
|
|
|
|
'before-reset-page',
|
|
|
|
'before-reset-page-length',
|
|
|
|
'before-loading-extensions',
|
|
|
|
'before-loading-themes'
|
|
|
|
];
|
|
|
|
|
2018-10-27 12:46:27 +02:00
|
|
|
const AFTER_ACTION_EVENTS = [
|
|
|
|
'after-filtering',
|
|
|
|
'after-populating-filter',
|
|
|
|
'after-page-change',
|
|
|
|
'after-clearing-filters',
|
|
|
|
'after-page-length-change',
|
|
|
|
'after-reset-page',
|
|
|
|
'after-reset-page-length',
|
|
|
|
'after-loading-extensions',
|
|
|
|
'after-loading-themes'
|
|
|
|
];
|
|
|
|
|
2016-07-27 09:21:30 +02:00
|
|
|
/**
|
|
|
|
* Activity indicator
|
|
|
|
*
|
|
|
|
* @export
|
|
|
|
* @class Loader
|
|
|
|
* @extends {Feature}
|
|
|
|
*/
|
2016-05-07 13:59:42 +02:00
|
|
|
export class Loader extends Feature {
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2015-08-02 10:27:59 +02:00
|
|
|
/**
|
2016-07-27 09:21:30 +02:00
|
|
|
* Creates an instance of Loader.
|
|
|
|
*
|
|
|
|
* @param {TableFilter} tf TableFilter instance
|
2015-08-02 10:27:59 +02:00
|
|
|
*/
|
2016-01-02 15:33:31 +01:00
|
|
|
constructor(tf) {
|
2019-02-09 14:27:55 +01:00
|
|
|
super(tf, Loader);
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2017-05-18 05:49:11 +02:00
|
|
|
let f = this.config.loader || {};
|
2015-11-21 04:41:40 +01:00
|
|
|
|
2016-07-27 09:21:30 +02:00
|
|
|
/**
|
|
|
|
* ID of custom container element
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.targetId = defaultsStr(f.target_id, null);
|
2016-07-27 09:21:30 +02:00
|
|
|
|
2016-07-28 09:37:03 +02:00
|
|
|
/**
|
2016-07-27 09:21:30 +02:00
|
|
|
* Loader container DOM element
|
|
|
|
* @type {DOMElement}
|
|
|
|
*/
|
|
|
|
this.cont = null;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Text displayed when indicator is visible
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.text = defaultsStr(f.text, 'Loading...');
|
2016-07-27 09:21:30 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Custom HTML injected in Loader's container element
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.html = defaultsStr(f.html, null);
|
2016-07-27 09:21:30 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Css class for Loader's container element
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.cssClass = defaultsStr(f.css_class, 'loader');
|
2016-07-27 09:21:30 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Close delay in milliseconds
|
|
|
|
* @type {Number}
|
|
|
|
*/
|
|
|
|
this.closeDelay = 250;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback fired when loader is displayed
|
|
|
|
* @type {Function}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.onShow = defaultsFn(f.on_show_loader, EMPTY_FN);
|
2016-07-27 09:21:30 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback fired when loader is closed
|
|
|
|
* @type {Function}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.onHide = defaultsFn(f.on_hide_loader, EMPTY_FN);
|
2015-11-21 04:41:40 +01:00
|
|
|
}
|
|
|
|
|
2016-07-27 09:21:30 +02:00
|
|
|
/**
|
|
|
|
* Initializes Loader instance
|
|
|
|
*/
|
2015-11-21 04:41:40 +01:00
|
|
|
init() {
|
2016-05-07 13:59:42 +02:00
|
|
|
if (this.initialized) {
|
2015-11-21 04:41:40 +01:00
|
|
|
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-11-01 10:02:15 +01:00
|
|
|
let containerDiv = createElm('div');
|
2016-07-27 09:21:30 +02:00
|
|
|
containerDiv.className = this.cssClass;
|
2014-11-15 15:34:32 +01:00
|
|
|
|
2016-07-27 09:21:30 +02:00
|
|
|
let targetEl = !this.targetId ?
|
2017-04-14 11:30:58 +02:00
|
|
|
tf.dom().parentNode : elm(this.targetId);
|
2016-07-27 09:21:30 +02:00
|
|
|
if (!this.targetId) {
|
2017-04-14 11:30:58 +02:00
|
|
|
targetEl.insertBefore(containerDiv, tf.dom());
|
2014-11-15 15:34:32 +01:00
|
|
|
} else {
|
|
|
|
targetEl.appendChild(containerDiv);
|
|
|
|
}
|
2016-07-27 09:21:30 +02:00
|
|
|
this.cont = containerDiv;
|
|
|
|
if (!this.html) {
|
|
|
|
this.cont.appendChild(createText(this.text));
|
2014-11-15 15:34:32 +01:00
|
|
|
} else {
|
2016-07-27 09:21:30 +02:00
|
|
|
this.cont.innerHTML = this.html;
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
2015-11-21 04:41:40 +01:00
|
|
|
|
2016-05-07 13:59:42 +02:00
|
|
|
this.show(NONE);
|
2016-01-02 15:33:31 +01:00
|
|
|
|
|
|
|
// Subscribe to events
|
2018-10-27 12:46:27 +02:00
|
|
|
emitter.on(BEFORE_ACTION_EVENTS, () => this.show(''));
|
|
|
|
emitter.on(AFTER_ACTION_EVENTS, () => this.show(NONE));
|
2016-01-02 15:33:31 +01:00
|
|
|
|
2017-04-14 11:30:58 +02:00
|
|
|
/** @inherited */
|
2015-11-21 04:41:40 +01:00
|
|
|
this.initialized = true;
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
|
|
|
|
2016-07-27 09:21:30 +02:00
|
|
|
/**
|
|
|
|
* Shows or hides activity indicator
|
|
|
|
* @param {String} Two possible values: '' or 'none'
|
|
|
|
*/
|
2014-11-15 15:34:32 +01:00
|
|
|
show(p) {
|
2016-05-07 13:59:42 +02:00
|
|
|
if (!this.isEnabled()) {
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-10-27 12:46:27 +02:00
|
|
|
function displayLoader() {
|
2016-07-27 09:21:30 +02:00
|
|
|
if (!this.cont) {
|
2014-11-15 15:34:32 +01:00
|
|
|
return;
|
|
|
|
}
|
2016-12-22 12:01:59 +01:00
|
|
|
if (p !== NONE) {
|
|
|
|
this.onShow(this);
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
2016-07-27 09:21:30 +02:00
|
|
|
this.cont.style.display = p;
|
2016-12-22 12:01:59 +01:00
|
|
|
if (p === NONE) {
|
|
|
|
this.onHide(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-07-27 09:21:30 +02:00
|
|
|
let t = p === NONE ? this.closeDelay : 1;
|
2018-10-27 12:46:27 +02:00
|
|
|
root.setTimeout(displayLoader.bind(this), t);
|
2014-11-15 15:34:32 +01:00
|
|
|
}
|
|
|
|
|
2016-07-27 09:21:30 +02:00
|
|
|
/**
|
|
|
|
* Removes feature
|
|
|
|
*/
|
2016-01-02 15:33:31 +01:00
|
|
|
destroy() {
|
2016-05-07 13:59:42 +02: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;
|
|
|
|
|
2016-07-27 09:21:30 +02:00
|
|
|
removeElm(this.cont);
|
|
|
|
this.cont = null;
|
2016-01-02 15:33:31 +01:00
|
|
|
|
|
|
|
// Unsubscribe to events
|
2018-10-27 12:46:27 +02:00
|
|
|
emitter.off(BEFORE_ACTION_EVENTS, () => this.show(''));
|
|
|
|
emitter.off(AFTER_ACTION_EVENTS, () => 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
|
|
|
}
|
|
|
|
}
|