2016-05-14 12:04:00 +02:00
|
|
|
import {Feature} from '../feature';
|
2016-05-08 07:26:52 +02:00
|
|
|
import {root} from '../root';
|
2016-05-24 10:42:11 +02:00
|
|
|
import {createElm, createText, id, removeElm} from '../dom';
|
2016-05-15 04:56:12 +02:00
|
|
|
import {isFn} from '../types';
|
2015-02-20 14:46:57 +01:00
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
export class StatusBar extends Feature {
|
2015-02-20 14:46:57 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Status bar UI component
|
|
|
|
* @param {Object} tf TableFilter instance
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
constructor(tf) {
|
2015-11-21 06:48:03 +01:00
|
|
|
super(tf, 'statusBar');
|
|
|
|
|
2015-02-20 14:46:57 +01:00
|
|
|
// Configuration object
|
2016-01-02 15:33:31 +01:00
|
|
|
let f = this.config;
|
2015-02-20 14:46:57 +01:00
|
|
|
|
|
|
|
//id of custom container element
|
|
|
|
this.statusBarTgtId = f.status_bar_target_id || null;
|
|
|
|
//element containing status bar label
|
|
|
|
this.statusBarDiv = null;
|
|
|
|
//status bar
|
|
|
|
this.statusBarSpan = null;
|
|
|
|
//status bar label
|
|
|
|
this.statusBarSpanText = null;
|
|
|
|
//defines status bar text
|
|
|
|
this.statusBarText = f.status_bar_text || '';
|
|
|
|
//defines css class status bar
|
|
|
|
this.statusBarCssClass = f.status_bar_css_class || 'status';
|
|
|
|
//delay for status bar clearing
|
2016-02-16 08:41:47 +01:00
|
|
|
this.statusBarCloseDelay = 250;
|
2015-02-20 14:46:57 +01:00
|
|
|
|
|
|
|
//calls function before message is displayed
|
2016-05-15 04:56:12 +02:00
|
|
|
this.onBeforeShowMsg = isFn(f.on_before_show_msg) ?
|
2015-02-20 14:46:57 +01:00
|
|
|
f.on_before_show_msg : null;
|
|
|
|
//calls function after message is displayed
|
2016-05-15 04:56:12 +02:00
|
|
|
this.onAfterShowMsg = isFn(f.on_after_show_msg) ?
|
2015-02-20 14:46:57 +01:00
|
|
|
f.on_after_show_msg : null;
|
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
//status messages
|
|
|
|
this.msgFilter = f.msg_filter || 'Filtering data...';
|
|
|
|
//populating drop-downs
|
|
|
|
this.msgPopulate = f.msg_populate || 'Populating filter...';
|
|
|
|
//populating drop-downs
|
|
|
|
this.msgPopulateCheckList = f.msg_populate_checklist ||
|
|
|
|
'Populating list...';
|
|
|
|
//changing paging page
|
|
|
|
this.msgChangePage = f.msg_change_page || 'Collecting paging data...';
|
|
|
|
//clearing filters
|
|
|
|
this.msgClear = f.msg_clear || 'Clearing filters...';
|
|
|
|
//changing nb results/page
|
|
|
|
this.msgChangeResults = f.msg_change_results ||
|
|
|
|
'Changing results per page...';
|
|
|
|
//re-setting page
|
|
|
|
this.msgResetPage = f.msg_reset_page || 'Re-setting page...';
|
|
|
|
//re-setting page length
|
|
|
|
this.msgResetPageLength = f.msg_reset_page_length ||
|
|
|
|
'Re-setting page length...';
|
|
|
|
//table sorting
|
|
|
|
this.msgSort = f.msg_sort || 'Sorting data...';
|
|
|
|
//extensions loading
|
|
|
|
this.msgLoadExtensions = f.msg_load_extensions ||
|
|
|
|
'Loading extensions...';
|
|
|
|
//themes loading
|
|
|
|
this.msgLoadThemes = f.msg_load_themes || 'Loading theme(s)...';
|
|
|
|
|
2015-04-12 09:52:19 +02:00
|
|
|
// status bar div
|
|
|
|
this.prfxStatus = 'status_';
|
|
|
|
// status bar label
|
|
|
|
this.prfxStatusSpan = 'statusSpan_';
|
|
|
|
// text preceding status bar label
|
|
|
|
this.prfxStatusTxt = 'statusText_';
|
2015-02-20 14:46:57 +01:00
|
|
|
}
|
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
init() {
|
|
|
|
if (this.initialized) {
|
2015-02-20 14:46:57 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let tf = this.tf;
|
|
|
|
let emitter = this.emitter;
|
2015-11-21 06:48:03 +01:00
|
|
|
|
2015-02-20 14:46:57 +01:00
|
|
|
//status bar container
|
2016-05-24 10:42:11 +02:00
|
|
|
let statusDiv = createElm('div', ['id', this.prfxStatus + tf.id]);
|
2015-02-20 14:46:57 +01:00
|
|
|
statusDiv.className = this.statusBarCssClass;
|
|
|
|
|
|
|
|
//status bar label
|
2016-05-24 10:42:11 +02:00
|
|
|
let statusSpan = createElm('span', ['id', this.prfxStatusSpan + tf.id]);
|
2015-02-20 14:46:57 +01:00
|
|
|
//preceding text
|
2016-05-24 10:42:11 +02:00
|
|
|
let statusSpanText = createElm('span',
|
|
|
|
['id', this.prfxStatusTxt + tf.id]);
|
|
|
|
statusSpanText.appendChild(createText(this.statusBarText));
|
2015-02-20 14:46:57 +01:00
|
|
|
|
|
|
|
// target element container
|
2016-05-24 10:42:11 +02:00
|
|
|
if (!this.statusBarTgtId) {
|
2015-02-21 04:39:09 +01:00
|
|
|
tf.setToolbar();
|
2015-02-20 14:46:57 +01:00
|
|
|
}
|
2016-01-02 15:33:31 +01:00
|
|
|
let targetEl = (!this.statusBarTgtId) ?
|
2016-05-24 10:42:11 +02:00
|
|
|
tf.lDiv : id(this.statusBarTgtId);
|
2015-02-20 14:46:57 +01:00
|
|
|
|
|
|
|
//default container: 'lDiv'
|
2016-05-24 10:42:11 +02:00
|
|
|
if (!this.statusBarTgtId) {
|
2015-02-20 14:46:57 +01:00
|
|
|
statusDiv.appendChild(statusSpanText);
|
|
|
|
statusDiv.appendChild(statusSpan);
|
|
|
|
targetEl.appendChild(statusDiv);
|
|
|
|
} else {
|
|
|
|
// custom container, no need to append statusDiv
|
|
|
|
targetEl.appendChild(statusSpanText);
|
|
|
|
targetEl.appendChild(statusSpan);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.statusBarDiv = statusDiv;
|
|
|
|
this.statusBarSpan = statusSpan;
|
|
|
|
this.statusBarSpanText = statusSpanText;
|
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
// Subscribe to events
|
2016-05-24 10:42:11 +02:00
|
|
|
emitter.on(['before-filtering'], () => this.message(this.msgFilter));
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.on(['before-populating-filter'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgPopulate));
|
2016-03-16 08:08:26 +01:00
|
|
|
emitter.on(['before-page-change'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgChangePage));
|
|
|
|
emitter.on(['before-clearing-filters'], () =>
|
2016-01-03 03:49:04 +01:00
|
|
|
this.message(this.msgClear));
|
2016-03-16 08:08:26 +01:00
|
|
|
emitter.on(['before-page-length-change'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgChangeResults));
|
|
|
|
emitter.on(['before-reset-page'],
|
|
|
|
() => this.message(this.msgResetPage));
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.on(['before-reset-page-length'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgResetPageLength));
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.on(['before-loading-extensions'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgLoadExtensions));
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.on(['before-loading-themes'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgLoadThemes));
|
2016-01-03 03:49:04 +01:00
|
|
|
|
|
|
|
emitter.on([
|
2016-02-22 08:14:58 +01:00
|
|
|
'after-filtering',
|
|
|
|
'after-populating-filter',
|
2016-03-16 08:08:26 +01:00
|
|
|
'after-page-change',
|
2016-02-22 08:14:58 +01:00
|
|
|
'after-clearing-filters',
|
2016-03-16 08:08:26 +01:00
|
|
|
'after-page-length-change',
|
2016-02-22 08:14:58 +01:00
|
|
|
'after-reset-page',
|
|
|
|
'after-reset-page-length',
|
|
|
|
'after-loading-extensions',
|
|
|
|
'after-loading-themes'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message('')
|
2016-01-03 03:49:04 +01:00
|
|
|
);
|
2016-01-02 15:33:31 +01:00
|
|
|
|
2015-11-21 06:48:03 +01:00
|
|
|
this.initialized = true;
|
2015-02-20 14:46:57 +01:00
|
|
|
}
|
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
message(t = '') {
|
|
|
|
if (!this.isEnabled()) {
|
2015-02-20 14:46:57 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-11-21 06:48:03 +01:00
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
if (this.onBeforeShowMsg) {
|
2015-02-20 14:46:57 +01:00
|
|
|
this.onBeforeShowMsg.call(null, this.tf, t);
|
|
|
|
}
|
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
let d = t === '' ? this.statusBarCloseDelay : 1;
|
2016-05-08 07:26:52 +02:00
|
|
|
root.setTimeout(() => {
|
2016-05-24 10:42:11 +02:00
|
|
|
if (!this.initialized) {
|
2016-01-02 15:33:31 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-02-20 14:46:57 +01:00
|
|
|
this.statusBarSpan.innerHTML = t;
|
2016-05-24 10:42:11 +02:00
|
|
|
if (this.onAfterShowMsg) {
|
2015-02-20 14:46:57 +01:00
|
|
|
this.onAfterShowMsg.call(null, this.tf, t);
|
|
|
|
}
|
|
|
|
}, d);
|
|
|
|
}
|
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
destroy() {
|
|
|
|
if (!this.initialized) {
|
2015-02-20 14:46:57 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-01-02 15:33:31 +01:00
|
|
|
let emitter = this.emitter;
|
|
|
|
|
2015-02-20 14:46:57 +01:00
|
|
|
this.statusBarDiv.innerHTML = '';
|
2016-05-24 10:42:11 +02:00
|
|
|
if (!this.statusBarTgtId) {
|
|
|
|
removeElm(this.statusBarDiv);
|
2016-01-14 09:35:46 +01:00
|
|
|
}
|
2015-02-20 14:46:57 +01:00
|
|
|
this.statusBarSpan = null;
|
|
|
|
this.statusBarSpanText = null;
|
|
|
|
this.statusBarDiv = null;
|
2016-01-02 15:33:31 +01:00
|
|
|
|
|
|
|
// Unsubscribe to events
|
2016-05-24 10:42:11 +02:00
|
|
|
emitter.off(['before-filtering'], () => this.message(this.msgFilter));
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.off(['before-populating-filter'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgPopulate));
|
2016-03-16 08:08:26 +01:00
|
|
|
emitter.off(['before-page-change'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgChangePage));
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.off(['before-clearing-filters'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgClear));
|
2016-03-16 08:08:26 +01:00
|
|
|
emitter.off(['before-page-length-change'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgChangeResults));
|
|
|
|
emitter.off(['before-reset-page'], () =>
|
2016-01-03 03:49:04 +01:00
|
|
|
this.message(this.msgResetPage));
|
|
|
|
emitter.off(['before-reset-page-length'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgResetPageLength));
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.off(['before-loading-extensions'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgLoadExtensions));
|
2016-01-03 03:49:04 +01:00
|
|
|
emitter.off(['before-loading-themes'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message(this.msgLoadThemes));
|
2016-01-03 03:49:04 +01:00
|
|
|
|
|
|
|
emitter.off([
|
2016-02-22 08:14:58 +01:00
|
|
|
'after-filtering',
|
|
|
|
'after-populating-filter',
|
2016-03-16 08:08:26 +01:00
|
|
|
'after-page-change',
|
2016-02-22 08:14:58 +01:00
|
|
|
'after-clearing-filters',
|
2016-03-16 08:08:26 +01:00
|
|
|
'after-page-length-change',
|
2016-02-22 08:14:58 +01:00
|
|
|
'after-reset-page',
|
|
|
|
'after-reset-page-length',
|
|
|
|
'after-loading-extensions',
|
|
|
|
'after-loading-themes'],
|
2016-05-24 10:42:11 +02:00
|
|
|
() => this.message('')
|
2016-01-03 03:49:04 +01:00
|
|
|
);
|
2016-01-02 15:33:31 +01:00
|
|
|
|
2015-11-21 06:48:03 +01:00
|
|
|
this.initialized = false;
|
2015-02-20 14:46:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|