2016-05-14 12:04:00 +02:00
|
|
|
import {Feature} from '../feature';
|
2016-05-25 09:31:53 +02:00
|
|
|
import {createElm, elm, removeElm} from '../dom';
|
2017-07-09 07:11:51 +02:00
|
|
|
import {isEmpty, EMPTY_FN} from '../types';
|
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';
|
2015-12-08 12:53:12 +01:00
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
|
|
|
* UI when filtering yields no matches
|
|
|
|
* @export
|
|
|
|
* @class NoResults
|
|
|
|
* @extends {Feature}
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
export class NoResults extends Feature {
|
2015-12-08 12:53:12 +01:00
|
|
|
|
|
|
|
/**
|
2016-07-30 08:45:58 +02:00
|
|
|
* Creates an instance of NoResults
|
|
|
|
* @param {TableFilter} tf TableFilter instance
|
2015-12-08 12:53:12 +01:00
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
constructor(tf) {
|
2019-02-09 14:27:55 +01:00
|
|
|
super(tf, NoResults);
|
2015-12-08 12:53:12 +01:00
|
|
|
|
|
|
|
//configuration object
|
2017-05-02 14:31:02 +02:00
|
|
|
let f = this.config.no_results_message || {};
|
2015-12-08 12:53:12 +01:00
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
|
|
|
* Text (accepts HTML)
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.content = defaultsStr(f.content, 'No results');
|
2016-07-30 08:45:58 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Custom container DOM element
|
|
|
|
* @type {DOMElement}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.customContainer = defaultsStr(f.custom_container, null);
|
2016-07-30 08:45:58 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* ID of custom container element
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.customContainerId = defaultsStr(f.custom_container_id, null);
|
2016-07-30 08:45:58 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Indicates if UI is contained in a external element
|
|
|
|
* @type {Boolean}
|
|
|
|
* @private
|
|
|
|
*/
|
2016-05-15 04:56:12 +02:00
|
|
|
this.isExternal = !isEmpty(this.customContainer) ||
|
|
|
|
!isEmpty(this.customContainerId);
|
2016-07-30 08:45:58 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Css class assigned to container element
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.cssClass = defaultsStr(f.css_class, 'no-results');
|
2015-12-08 12:53:12 +01:00
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
|
|
|
* Stores container DOM element
|
|
|
|
* @type {DOMElement}
|
|
|
|
*/
|
2015-12-08 12:53:12 +01:00
|
|
|
this.cont = null;
|
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
2016-07-31 13:49:38 +02:00
|
|
|
* Callback fired before the message is displayed
|
2016-07-30 08:45:58 +02:00
|
|
|
* @type {Function}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.onBeforeShow = defaultsFn(f.on_before_show_msg, EMPTY_FN);
|
2016-07-30 08:45:58 +02:00
|
|
|
|
|
|
|
/**
|
2016-07-31 13:49:38 +02:00
|
|
|
* Callback fired after the message is displayed
|
2016-07-30 08:45:58 +02:00
|
|
|
* @type {Function}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.onAfterShow = defaultsFn(f.on_after_show_msg, EMPTY_FN);
|
2016-07-30 08:45:58 +02:00
|
|
|
|
|
|
|
/**
|
2016-07-31 13:49:38 +02:00
|
|
|
* Callback fired before the message is hidden
|
2016-07-30 08:45:58 +02:00
|
|
|
* @type {Function}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.onBeforeHide = defaultsFn(f.on_before_hide_msg, EMPTY_FN);
|
2016-07-30 08:45:58 +02:00
|
|
|
|
|
|
|
/**
|
2016-07-31 13:49:38 +02:00
|
|
|
* Callback fired after the message is hidden
|
2016-07-30 08:45:58 +02:00
|
|
|
* @type {Function}
|
|
|
|
*/
|
2017-07-09 07:11:51 +02:00
|
|
|
this.onAfterHide = defaultsFn(f.on_after_hide_msg, EMPTY_FN);
|
2015-12-08 12:53:12 +01:00
|
|
|
}
|
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
|
|
|
* Initializes NoResults instance
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
init() {
|
|
|
|
if (this.initialized) {
|
2015-12-08 12:53:12 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
let tf = this.tf;
|
2016-05-25 09:31:53 +02:00
|
|
|
let target = this.customContainer || elm(this.customContainerId) ||
|
2017-04-14 11:30:58 +02:00
|
|
|
tf.dom();
|
2015-12-08 12:53:12 +01:00
|
|
|
|
|
|
|
//container
|
2016-11-01 10:02:15 +01:00
|
|
|
let cont = createElm('div');
|
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
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
if (this.isExternal) {
|
2015-12-10 23:10:11 +01:00
|
|
|
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
|
2018-02-10 12:12:16 +01:00
|
|
|
this.emitter.on(
|
|
|
|
['initialized', 'after-filtering'],
|
|
|
|
() => this.toggle()
|
|
|
|
);
|
2015-12-28 07:53:03 +01:00
|
|
|
|
2017-04-21 22:22:50 +02:00
|
|
|
/** @inherited */
|
2015-12-08 12:53:12 +01:00
|
|
|
this.initialized = true;
|
|
|
|
}
|
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
|
|
|
* Toggle no results message
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
toggle() {
|
2016-05-26 06:36:36 +02:00
|
|
|
if (this.tf.getValidRowsNb() > 0) {
|
2015-12-28 07:53:03 +01:00
|
|
|
this.hide();
|
|
|
|
} else {
|
|
|
|
this.show();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
|
|
|
* Show no results message
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
show() {
|
|
|
|
if (!this.initialized || !this.isEnabled()) {
|
2015-12-08 13:13:18 +01:00
|
|
|
return;
|
|
|
|
}
|
2016-12-22 12:01:59 +01:00
|
|
|
this.onBeforeShow(this.tf, this);
|
2015-12-08 13:13:18 +01:00
|
|
|
|
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
|
|
|
|
2016-12-22 12:01:59 +01:00
|
|
|
this.onAfterShow(this.tf, this);
|
2015-12-08 12:53:12 +01:00
|
|
|
}
|
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
|
|
|
* Hide no results message
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
hide() {
|
|
|
|
if (!this.initialized || !this.isEnabled()) {
|
2015-12-08 13:13:18 +01:00
|
|
|
return;
|
|
|
|
}
|
2016-12-22 12:01:59 +01:00
|
|
|
this.onBeforeHide(this.tf, this);
|
2015-12-08 13:13:18 +01:00
|
|
|
|
2016-05-07 13:59:42 +02:00
|
|
|
this.cont.style.display = NONE;
|
2015-12-08 13:13:18 +01:00
|
|
|
|
2016-12-22 12:01:59 +01:00
|
|
|
this.onAfterHide(this.tf, this);
|
2015-12-08 12:53:12 +01:00
|
|
|
}
|
|
|
|
|
2016-07-30 08:45:58 +02:00
|
|
|
/**
|
|
|
|
* Sets no results container width
|
|
|
|
* @private
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
setWidth() {
|
|
|
|
if (!this.initialized || this.isExternal || !this.isEnabled()) {
|
2015-12-08 12:53:12 +01:00
|
|
|
return;
|
|
|
|
}
|
2016-07-31 10:36:47 +02:00
|
|
|
let tf = this.tf;
|
|
|
|
if (tf.gridLayout) {
|
|
|
|
let gridLayout = tf.feature('gridLayout');
|
2017-07-29 03:08:13 +02:00
|
|
|
this.cont.style.width = gridLayout.headTbl.clientWidth + 'px';
|
2015-12-09 07:24:45 +01:00
|
|
|
} else {
|
2017-04-14 11:30:58 +02:00
|
|
|
this.cont.style.width = (tf.dom().tHead ?
|
|
|
|
tf.dom().tHead.clientWidth :
|
|
|
|
tf.dom().tBodies[0].clientWidth) + 'px';
|
2015-12-09 07:24:45 +01:00
|
|
|
}
|
2015-12-08 12:53:12 +01:00
|
|
|
}
|
|
|
|
|
2018-02-10 12:12:16 +01:00
|
|
|
/** Remove feature */
|
2016-05-24 10:42:11 +02:00
|
|
|
destroy() {
|
|
|
|
if (!this.initialized) {
|
2015-12-08 12:53:12 +01:00
|
|
|
return;
|
|
|
|
}
|
2016-05-24 10:42:11 +02:00
|
|
|
removeElm(this.cont);
|
2015-12-08 12:53:12 +01:00
|
|
|
this.cont = null;
|
2015-12-28 07:53:03 +01:00
|
|
|
// unsubscribe to after-filtering event
|
2016-05-24 10:42:11 +02:00
|
|
|
this.emitter.off(['after-filtering'], () => this.toggle());
|
2016-01-03 03:49:04 +01:00
|
|
|
|
2015-12-08 12:53:12 +01:00
|
|
|
this.initialized = false;
|
|
|
|
}
|
|
|
|
}
|