mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-08 08:52:32 +02:00
137 lines
3.6 KiB
JavaScript
137 lines
3.6 KiB
JavaScript
import {Feature} from '../feature';
|
|
import {createElm, elm, removeElm} from '../dom';
|
|
import {isEmpty, isFn} from '../types';
|
|
import {NONE} from '../const';
|
|
|
|
export class NoResults extends Feature {
|
|
|
|
/**
|
|
* No results message UI component
|
|
* @param {Object} tf TableFilter instance
|
|
*/
|
|
constructor(tf) {
|
|
super(tf, 'noResults');
|
|
|
|
//configuration object
|
|
let f = this.config.no_results_message;
|
|
|
|
this.content = f.content || 'No results';
|
|
this.customContainer = f.custom_container || null;
|
|
this.customContainerId = f.custom_container_id || null;
|
|
this.isExternal = !isEmpty(this.customContainer) ||
|
|
!isEmpty(this.customContainerId);
|
|
this.cssClass = f.css_class || 'no-results';
|
|
|
|
this.cont = null;
|
|
|
|
//callback before message is displayed
|
|
this.onBeforeShowMsg = isFn(f.on_before_show_msg) ?
|
|
f.on_before_show_msg : null;
|
|
//callback after message is displayed
|
|
this.onAfterShowMsg = isFn(f.on_after_show_msg) ?
|
|
f.on_after_show_msg : null;
|
|
//callback before message is hidden
|
|
this.onBeforeHideMsg = isFn(f.on_before_hide_msg) ?
|
|
f.on_before_hide_msg : null;
|
|
//callback after message is hidden
|
|
this.onAfterHideMsg = isFn(f.on_after_hide_msg) ?
|
|
f.on_after_hide_msg : null;
|
|
|
|
this.prfxNoResults = 'nores_';
|
|
}
|
|
|
|
init() {
|
|
if (this.initialized) {
|
|
return;
|
|
}
|
|
let tf = this.tf;
|
|
let target = this.customContainer || elm(this.customContainerId) ||
|
|
tf.tbl;
|
|
|
|
//container
|
|
let cont = createElm('div', ['id', this.prfxNoResults + tf.id]);
|
|
cont.className = this.cssClass;
|
|
cont.innerHTML = this.content;
|
|
|
|
if (this.isExternal) {
|
|
target.appendChild(cont);
|
|
} else {
|
|
target.parentNode.insertBefore(cont, target.nextSibling);
|
|
}
|
|
|
|
this.cont = cont;
|
|
|
|
// subscribe to after-filtering event
|
|
this.emitter.on(['after-filtering'], () => this.toggle());
|
|
|
|
this.initialized = true;
|
|
this.hide();
|
|
}
|
|
|
|
toggle() {
|
|
if (this.tf.getValidRowsNb() > 0) {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
}
|
|
|
|
show() {
|
|
if (!this.initialized || !this.isEnabled()) {
|
|
return;
|
|
}
|
|
|
|
if (this.onBeforeShowMsg) {
|
|
this.onBeforeShowMsg.call(null, this.tf, this);
|
|
}
|
|
|
|
this.setWidth();
|
|
this.cont.style.display = 'block';
|
|
|
|
if (this.onAfterShowMsg) {
|
|
this.onAfterShowMsg.call(null, this.tf, this);
|
|
}
|
|
}
|
|
|
|
hide() {
|
|
if (!this.initialized || !this.isEnabled()) {
|
|
return;
|
|
}
|
|
|
|
if (this.onBeforeHideMsg) {
|
|
this.onBeforeHideMsg.call(null, this.tf, this);
|
|
}
|
|
|
|
this.cont.style.display = NONE;
|
|
|
|
if (this.onBeforeHideMsg) {
|
|
this.onBeforeHideMsg.call(null, this.tf, this);
|
|
}
|
|
}
|
|
|
|
setWidth() {
|
|
if (!this.initialized || this.isExternal || !this.isEnabled()) {
|
|
return;
|
|
}
|
|
if (this.tf.gridLayout) {
|
|
let gridLayout = this.tf.feature('gridLayout');
|
|
this.cont.style.width = gridLayout.tblCont.clientWidth + 'px';
|
|
} else {
|
|
this.cont.style.width = this.tf.tbl.clientWidth + 'px';
|
|
}
|
|
|
|
}
|
|
|
|
destroy() {
|
|
if (!this.initialized) {
|
|
return;
|
|
}
|
|
removeElm(this.cont);
|
|
this.cont = null;
|
|
// unsubscribe to after-filtering event
|
|
this.emitter.off(['after-filtering'], () => this.toggle());
|
|
|
|
this.initialized = false;
|
|
}
|
|
}
|