mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-28 10:20:17 +02:00
130 lines
3.1 KiB
JavaScript
130 lines
3.1 KiB
JavaScript
import {Feature} from '../feature';
|
|
import {createElm, createText, elm, removeElm} from '../dom';
|
|
import {addEvt} from '../event';
|
|
import {defaultsStr} from '../settings';
|
|
|
|
/**
|
|
* Clear button UI component
|
|
*/
|
|
export class ClearButton extends Feature {
|
|
|
|
/**
|
|
* Creates an instance of ClearButton
|
|
* @param {TableFilter} tf TableFilter instance
|
|
*/
|
|
constructor(tf) {
|
|
super(tf, 'btnReset');
|
|
|
|
let f = this.config;
|
|
|
|
/**
|
|
* Container element ID
|
|
* @type {String}
|
|
*/
|
|
this.targetId = defaultsStr(f.btn_reset_target_id, null);
|
|
|
|
/**
|
|
* Clear button container element
|
|
* @type {DOMElement}
|
|
* @private
|
|
*/
|
|
this.container = null;
|
|
|
|
/**
|
|
* Clear button element
|
|
* @type {DOMElement}
|
|
* @private
|
|
*/
|
|
this.element = null;
|
|
|
|
/**
|
|
* Text for the clear button
|
|
* @type {String}
|
|
*/
|
|
this.text = defaultsStr(f.btn_reset_text, 'Reset');
|
|
|
|
/**
|
|
* Css class for reset button
|
|
* @type {String}
|
|
*/
|
|
this.cssClass = defaultsStr(f.btn_reset_css_class, 'reset');
|
|
|
|
/**
|
|
* Tooltip text for the clear button
|
|
* @type {String}
|
|
*/
|
|
this.tooltip = f.btn_reset_tooltip || 'Clear filters';
|
|
|
|
/**
|
|
* Custom Html string for the clear button
|
|
* @type {String}
|
|
*/
|
|
this.html = defaultsStr(f.btn_reset_html,
|
|
(!tf.enableIcons ? null :
|
|
'<input type="button" value="" class="' + this.cssClass +
|
|
'" ' + 'title="' + this.tooltip + '" />'));
|
|
}
|
|
|
|
/**
|
|
* Click event handler for clear button
|
|
* @private
|
|
*/
|
|
onClick() {
|
|
if (!this.isEnabled()) {
|
|
return;
|
|
}
|
|
this.tf.clearFilters();
|
|
}
|
|
|
|
/**
|
|
* Initialize clear button component
|
|
*/
|
|
init() {
|
|
let tf = this.tf;
|
|
|
|
if (this.initialized) {
|
|
return;
|
|
}
|
|
|
|
let cont = createElm('span');
|
|
|
|
// reset button is added to defined element
|
|
if (!this.targetId) {
|
|
tf.setToolbar();
|
|
}
|
|
let targetEl = !this.targetId ? tf.rDiv : elm(this.targetId);
|
|
targetEl.appendChild(cont);
|
|
|
|
if (!this.html) {
|
|
let fltReset = createElm('a', ['href', 'javascript:void(0);']);
|
|
fltReset.className = this.cssClass;
|
|
fltReset.appendChild(createText(this.text));
|
|
cont.appendChild(fltReset);
|
|
addEvt(fltReset, 'click', () => this.onClick());
|
|
} else {
|
|
cont.innerHTML = this.html;
|
|
let resetEl = cont.firstChild;
|
|
addEvt(resetEl, 'click', () => this.onClick());
|
|
}
|
|
this.element = cont.firstChild;
|
|
this.container = cont;
|
|
|
|
/** @inherited */
|
|
this.initialized = true;
|
|
}
|
|
|
|
/**
|
|
* Destroy ClearButton instance
|
|
*/
|
|
destroy() {
|
|
if (!this.initialized) {
|
|
return;
|
|
}
|
|
removeElm(this.element);
|
|
removeElm(this.container);
|
|
this.element = null;
|
|
this.container = null;
|
|
this.initialized = false;
|
|
}
|
|
}
|