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';
|
2016-06-02 06:13:56 +02:00
|
|
|
import {addEvt} from '../event';
|
2017-07-09 07:11:51 +02:00
|
|
|
import {defaultsStr} from '../settings';
|
2017-10-06 05:07:55 +02:00
|
|
|
import {isNull} from '../types';
|
2017-10-08 12:14:25 +02:00
|
|
|
import {RIGHT} from './toolbar';
|
2015-02-19 06:28:50 +01:00
|
|
|
|
2016-07-02 06:06:12 +02:00
|
|
|
/**
|
|
|
|
* Clear button UI component
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
export class ClearButton extends Feature {
|
2015-02-19 06:28:50 +01:00
|
|
|
|
|
|
|
/**
|
2016-07-02 06:06:12 +02:00
|
|
|
* Creates an instance of ClearButton
|
|
|
|
* @param {TableFilter} tf TableFilter instance
|
2015-02-19 06:28:50 +01:00
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
constructor(tf) {
|
2019-02-09 14:27:55 +01:00
|
|
|
super(tf, ClearButton);
|
2015-11-15 11:20:40 +01:00
|
|
|
|
2017-12-07 12:32:21 +01:00
|
|
|
let f = this.config.btn_reset || {};
|
2015-02-19 06:28:50 +01:00
|
|
|
|
2016-07-02 06:06:12 +02:00
|
|
|
/**
|
|
|
|
* Container element ID
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-12-07 12:32:21 +01:00
|
|
|
this.targetId = defaultsStr(f.target_id, null);
|
2016-07-02 06:06:12 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Text for the clear button
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-12-07 12:32:21 +01:00
|
|
|
this.text = defaultsStr(f.text, null);
|
2016-07-02 06:06:12 +02:00
|
|
|
|
2016-09-01 10:07:24 +02:00
|
|
|
/**
|
|
|
|
* Css class for reset button
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-12-07 12:32:21 +01:00
|
|
|
this.cssClass = defaultsStr(f.css_class, 'reset');
|
2016-09-01 10:07:24 +02:00
|
|
|
|
2016-07-02 06:06:12 +02:00
|
|
|
/**
|
|
|
|
* Tooltip text for the clear button
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-12-07 12:32:21 +01:00
|
|
|
this.tooltip = f.tooltip || 'Clear filters';
|
2016-07-02 06:06:12 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Custom Html string for the clear button
|
|
|
|
* @type {String}
|
|
|
|
*/
|
2017-12-07 12:32:21 +01:00
|
|
|
this.html = defaultsStr(f.html,
|
|
|
|
(!tf.enableIcons || this.text ? null :
|
2016-09-01 10:07:24 +02:00
|
|
|
'<input type="button" value="" class="' + this.cssClass +
|
2017-07-09 07:11:51 +02:00
|
|
|
'" ' + 'title="' + this.tooltip + '" />'));
|
2017-10-08 12:14:25 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Default position in toolbar ('left'|'center'|'right')
|
|
|
|
* @type {String}
|
|
|
|
*/
|
|
|
|
this.toolbarPosition = defaultsStr(f.toolbar_position, RIGHT);
|
2017-12-07 12:32:21 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Clear button container element
|
|
|
|
* @type {DOMElement}
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
this.container = null;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Clear button element
|
|
|
|
* @type {DOMElement}
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
this.element = null;
|
2015-02-19 06:28:50 +01:00
|
|
|
}
|
|
|
|
|
2016-07-02 06:06:12 +02:00
|
|
|
/**
|
|
|
|
* Click event handler for clear button
|
|
|
|
* @private
|
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
onClick() {
|
|
|
|
if (!this.isEnabled()) {
|
2015-11-15 11:20:40 +01:00
|
|
|
return;
|
|
|
|
}
|
2015-02-21 04:39:09 +01:00
|
|
|
this.tf.clearFilters();
|
2015-02-19 06:28:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2016-07-02 06:06:12 +02:00
|
|
|
* Initialize clear button component
|
2015-02-19 06:28:50 +01:00
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
init() {
|
|
|
|
let tf = this.tf;
|
2015-02-19 06:28:50 +01:00
|
|
|
|
2016-05-24 10:42:11 +02:00
|
|
|
if (this.initialized) {
|
2015-02-19 06:28:50 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-10-08 12:14:25 +02:00
|
|
|
this.emitter.emit('initializing-feature', this, !isNull(this.targetId));
|
|
|
|
|
2016-10-31 12:18:21 +01:00
|
|
|
let cont = createElm('span');
|
2015-02-19 06:28:50 +01:00
|
|
|
|
2017-10-08 12:56:12 +02:00
|
|
|
let targetEl = !this.targetId ?
|
|
|
|
tf.feature('toolbar').container(this.toolbarPosition) :
|
2017-10-08 12:14:25 +02:00
|
|
|
elm(this.targetId);
|
2016-10-31 12:18:21 +01:00
|
|
|
targetEl.appendChild(cont);
|
2015-02-19 06:28:50 +01:00
|
|
|
|
2016-07-02 06:06:12 +02:00
|
|
|
if (!this.html) {
|
2016-09-03 05:19:55 +02:00
|
|
|
let fltReset = createElm('a', ['href', 'javascript:void(0);']);
|
|
|
|
fltReset.className = this.cssClass;
|
|
|
|
fltReset.appendChild(createText(this.text));
|
2016-10-31 12:18:21 +01:00
|
|
|
cont.appendChild(fltReset);
|
2016-09-03 05:19:55 +02:00
|
|
|
addEvt(fltReset, 'click', () => this.onClick());
|
2015-02-19 06:28:50 +01:00
|
|
|
} else {
|
2016-10-31 12:18:21 +01:00
|
|
|
cont.innerHTML = this.html;
|
|
|
|
let resetEl = cont.firstChild;
|
2016-06-02 06:13:56 +02:00
|
|
|
addEvt(resetEl, 'click', () => this.onClick());
|
2015-02-19 06:28:50 +01:00
|
|
|
}
|
2016-10-31 12:18:21 +01:00
|
|
|
this.element = cont.firstChild;
|
|
|
|
this.container = cont;
|
2015-11-15 11:20:40 +01:00
|
|
|
|
2016-10-31 12:18:21 +01:00
|
|
|
/** @inherited */
|
2015-11-15 11:20:40 +01:00
|
|
|
this.initialized = true;
|
2017-10-06 05:07:55 +02:00
|
|
|
|
|
|
|
this.emitter.emit('feature-initialized', this);
|
2015-02-19 06:28:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2016-07-02 06:06:12 +02:00
|
|
|
* Destroy ClearButton instance
|
2015-02-19 06:28:50 +01:00
|
|
|
*/
|
2016-05-24 10:42:11 +02:00
|
|
|
destroy() {
|
|
|
|
if (!this.initialized) {
|
2015-02-19 06:28:50 +01:00
|
|
|
return;
|
|
|
|
}
|
2016-10-31 12:18:21 +01:00
|
|
|
removeElm(this.element);
|
|
|
|
removeElm(this.container);
|
2016-07-02 06:06:12 +02:00
|
|
|
this.element = null;
|
2016-10-31 12:18:21 +01:00
|
|
|
this.container = null;
|
2015-11-15 11:20:40 +01:00
|
|
|
this.initialized = false;
|
2015-02-19 06:28:50 +01:00
|
|
|
}
|
|
|
|
}
|
2019-01-15 13:29:13 +01:00
|
|
|
|
|
|
|
// TODO: remove as soon as feature name is fixed
|
2019-02-09 14:27:55 +01:00
|
|
|
ClearButton.meta = {altName: 'btnReset'};
|