2016-05-14 12:04:00 +02:00
|
|
|
import {Feature} from '../feature';
|
2015-12-08 12:53:12 +01:00
|
|
|
import Dom from '../dom';
|
2016-05-15 04:56:12 +02:00
|
|
|
import {isEmpty, isFn} from '../types';
|
2016-05-07 13:59:42 +02:00
|
|
|
import {NONE} from '../const';
|
2015-12-08 12:53:12 +01:00
|
|
|
|
|
|
|
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;
|
|
|
|
|
2015-12-09 07:24:45 +01:00
|
|
|
this.content = f.content || 'No results';
|
2015-12-08 12:53:12 +01:00
|
|
|
this.customContainer = f.custom_container || null;
|
|
|
|
this.customContainerId = f.custom_container_id || null;
|
2016-05-15 04:56:12 +02:00
|
|
|
this.isExternal = !isEmpty(this.customContainer) ||
|
|
|
|
!isEmpty(this.customContainerId);
|
2015-12-08 12:53:12 +01:00
|
|
|
this.cssClass = f.css_class || 'no-results';
|
|
|
|
|
|
|
|
this.cont = null;
|
|
|
|
|
|
|
|
//callback before message is displayed
|
2016-05-15 04:56:12 +02:00
|
|
|
this.onBeforeShowMsg = isFn(f.on_before_show_msg) ?
|
2015-12-08 12:53:12 +01:00
|
|
|
f.on_before_show_msg : null;
|
|
|
|
//callback after message is displayed
|
2016-05-15 04:56:12 +02:00
|
|
|
this.onAfterShowMsg = isFn(f.on_after_show_msg) ?
|
2015-12-08 12:53:12 +01:00
|
|
|
f.on_after_show_msg : null;
|
2015-12-08 13:13:18 +01:00
|
|
|
//callback before message is hidden
|
2016-05-15 04:56:12 +02:00
|
|
|
this.onBeforeHideMsg = isFn(f.on_before_hide_msg) ?
|
2015-12-08 13:13:18 +01:00
|
|
|
f.on_before_hide_msg : null;
|
|
|
|
//callback after message is hidden
|
2016-05-15 04:56:12 +02:00
|
|
|
this.onAfterHideMsg = isFn(f.on_after_hide_msg) ?
|
2015-12-08 13:13:18 +01:00
|
|
|
f.on_after_hide_msg : null;
|
2015-12-08 12:53:12 +01:00
|
|
|
|
|
|
|
this.prfxNoResults = 'nores_';
|
|
|
|
}
|
|
|
|
|
|
|
|
init(){
|
|
|
|
if(this.initialized){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let tf = this.tf;
|
|
|
|
let target = this.customContainer || Dom.id(this.customContainerId) ||
|
|
|
|
tf.tbl;
|
|
|
|
|
|
|
|
//container
|
2015-12-09 07:33:44 +01:00
|
|
|
let cont = Dom.create('div', ['id', this.prfxNoResults+tf.id]);
|
2015-12-08 12:53:12 +01:00
|
|
|
cont.className = this.cssClass;
|
2015-12-09 07:24:45 +01:00
|
|
|
cont.innerHTML = this.content;
|
2015-12-10 23:10:11 +01:00
|
|
|
|
|
|
|
if(this.isExternal){
|
|
|
|
target.appendChild(cont);
|
|
|
|
} else {
|
|
|
|
target.parentNode.insertBefore(cont, target.nextSibling);
|
|
|
|
}
|
2015-12-08 12:53:12 +01:00
|
|
|
|
|
|
|
this.cont = cont;
|
2015-12-28 07:53:03 +01:00
|
|
|
|
|
|
|
// subscribe to after-filtering event
|
2016-01-03 03:49:04 +01:00
|
|
|
this.emitter.on(['after-filtering'], ()=> this.toggle());
|
2015-12-28 07:53:03 +01:00
|
|
|
|
2015-12-08 12:53:12 +01:00
|
|
|
this.initialized = true;
|
2015-12-09 07:24:45 +01:00
|
|
|
this.hide();
|
2015-12-08 12:53:12 +01:00
|
|
|
}
|
|
|
|
|
2015-12-28 07:53:03 +01:00
|
|
|
toggle(){
|
|
|
|
if(this.tf.nbVisibleRows > 0){
|
|
|
|
this.hide();
|
|
|
|
} else {
|
|
|
|
this.show();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-12-08 12:53:12 +01:00
|
|
|
show(){
|
2015-12-08 13:13:18 +01:00
|
|
|
if(!this.initialized || !this.isEnabled()){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(this.onBeforeShowMsg){
|
|
|
|
this.onBeforeShowMsg.call(null, this.tf, this);
|
|
|
|
}
|
|
|
|
|
2015-12-08 12:53:12 +01:00
|
|
|
this.setWidth();
|
2015-12-09 07:24:45 +01:00
|
|
|
this.cont.style.display = 'block';
|
2015-12-08 13:13:18 +01:00
|
|
|
|
|
|
|
if(this.onAfterShowMsg){
|
|
|
|
this.onAfterShowMsg.call(null, this.tf, this);
|
|
|
|
}
|
2015-12-08 12:53:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
hide(){
|
2015-12-08 13:13:18 +01:00
|
|
|
if(!this.initialized || !this.isEnabled()){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(this.onBeforeHideMsg){
|
|
|
|
this.onBeforeHideMsg.call(null, this.tf, this);
|
|
|
|
}
|
|
|
|
|
2016-05-07 13:59:42 +02:00
|
|
|
this.cont.style.display = NONE;
|
2015-12-08 13:13:18 +01:00
|
|
|
|
|
|
|
if(this.onBeforeHideMsg){
|
|
|
|
this.onBeforeHideMsg.call(null, this.tf, this);
|
|
|
|
}
|
2015-12-08 12:53:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
setWidth(){
|
2015-12-08 13:13:18 +01:00
|
|
|
if(!this.initialized || this.isExternal || !this.isEnabled()){
|
2015-12-08 12:53:12 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-12-09 07:24:45 +01:00
|
|
|
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';
|
|
|
|
}
|
|
|
|
|
2015-12-08 12:53:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
destroy(){
|
|
|
|
if(!this.initialized){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
Dom.remove(this.cont);
|
|
|
|
this.cont = null;
|
2015-12-28 07:53:03 +01:00
|
|
|
// unsubscribe to after-filtering event
|
2016-01-03 03:49:04 +01:00
|
|
|
this.emitter.off(['after-filtering'], ()=> this.toggle());
|
|
|
|
|
2015-12-08 12:53:12 +01:00
|
|
|
this.initialized = false;
|
|
|
|
}
|
|
|
|
}
|