2015-06-06 12:06:15 +02:00
|
|
|
import Dom from '../../dom';
|
|
|
|
import Types from '../../types';
|
|
|
|
import Event from '../../event';
|
|
|
|
|
2016-04-24 17:12:45 +02:00
|
|
|
export default class FiltersVisibility {
|
2015-06-06 12:06:15 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Filters Row Visibility extension
|
|
|
|
* @param {Object} tf TableFilter instance
|
|
|
|
* @param {Object} f Config
|
|
|
|
*/
|
2016-04-24 17:12:45 +02:00
|
|
|
constructor(tf, f) {
|
2015-06-06 12:06:15 +02:00
|
|
|
|
|
|
|
this.initialized = false;
|
|
|
|
this.name = f.name;
|
|
|
|
this.desc = f.description || 'Filters row visibility manager';
|
|
|
|
|
|
|
|
// Path and image filenames
|
|
|
|
this.stylesheet = f.stylesheet || 'filtersVisibility.css';
|
|
|
|
this.icnExpand = f.expand_icon_name || 'icn_exp.png';
|
|
|
|
this.icnCollapse = f.collapse_icon_name || 'icn_clp.png';
|
|
|
|
|
|
|
|
//expand/collapse filters span element
|
|
|
|
this.contEl = null;
|
|
|
|
//expand/collapse filters btn element
|
|
|
|
this.btnEl = null;
|
|
|
|
|
2016-04-24 17:12:45 +02:00
|
|
|
this.icnExpandHtml = '<img src="' + tf.themesPath + this.icnExpand +
|
2015-06-06 12:06:15 +02:00
|
|
|
'" alt="Expand filters" >';
|
2016-04-24 17:12:45 +02:00
|
|
|
this.icnCollapseHtml = '<img src="' + tf.themesPath + this.icnCollapse +
|
2015-06-06 12:06:15 +02:00
|
|
|
'" alt="Collapse filters" >';
|
2015-06-06 15:44:10 +02:00
|
|
|
this.defaultText = 'Toggle filters';
|
2015-06-06 12:06:15 +02:00
|
|
|
|
|
|
|
//id of container element
|
2016-02-16 08:41:47 +01:00
|
|
|
this.targetId = f.target_id || null;
|
2015-06-06 12:06:15 +02:00
|
|
|
//enables/disables expand/collapse icon
|
2016-04-24 17:12:45 +02:00
|
|
|
this.enableIcon = f.enable_icon === false ? false : true;
|
2015-06-06 12:06:15 +02:00
|
|
|
this.btnText = f.btn_text || '';
|
|
|
|
|
|
|
|
//defines expand/collapse filters text
|
|
|
|
this.collapseBtnHtml = this.enableIcon ?
|
|
|
|
this.icnCollapseHtml + this.btnText :
|
|
|
|
this.btnText || this.defaultText;
|
2016-02-16 08:41:47 +01:00
|
|
|
this.expandBtnHtml = this.enableIcon ?
|
2015-06-06 12:06:15 +02:00
|
|
|
this.icnExpandHtml + this.btnText :
|
|
|
|
this.btnText || this.defaultText;
|
|
|
|
|
|
|
|
//defines expand/collapse filters button innerHtml
|
|
|
|
this.btnHtml = f.btn_html || null;
|
|
|
|
//defines css class for expand/collapse filters button
|
|
|
|
this.btnCssClass = f.btn_css_class || 'btnExpClpFlt';
|
|
|
|
//defines css class span containing expand/collapse filters
|
|
|
|
this.contCssClass = f.cont_css_class || 'expClpFlt';
|
|
|
|
this.filtersRowIndex = !Types.isUndef(f.filters_row_index) ?
|
2016-04-24 17:12:45 +02:00
|
|
|
f.filters_row_index : tf.getFiltersRowIndex();
|
2015-06-06 12:06:15 +02:00
|
|
|
|
|
|
|
this.visibleAtStart = !Types.isUndef(f.visible_at_start) ?
|
|
|
|
Boolean(f.visible_at_start) : true;
|
|
|
|
|
|
|
|
// Prefix
|
|
|
|
this.prfx = 'fltsVis_';
|
|
|
|
|
|
|
|
//callback before filters row is shown
|
|
|
|
this.onBeforeShow = Types.isFn(f.on_before_show) ?
|
|
|
|
f.on_before_show : null;
|
|
|
|
//callback after filters row is shown
|
|
|
|
this.onAfterShow = Types.isFn(f.on_after_show) ?
|
|
|
|
f.on_after_show : null;
|
|
|
|
//callback before filters row is hidden
|
|
|
|
this.onBeforeHide = Types.isFn(f.on_before_hide) ?
|
|
|
|
f.on_before_hide : null;
|
|
|
|
//callback after filters row is hidden
|
|
|
|
this.onAfterHide = Types.isFn(f.on_after_hide) ? f.on_after_hide : null;
|
|
|
|
|
|
|
|
//Loads extension stylesheet
|
2016-04-24 17:12:45 +02:00
|
|
|
tf.import(f.name + 'Style', tf.stylePath + this.stylesheet, null,
|
|
|
|
'link');
|
2015-06-06 12:06:15 +02:00
|
|
|
|
|
|
|
this.tf = tf;
|
2016-04-24 17:12:45 +02:00
|
|
|
this.emitter = tf.emitter;
|
2015-06-06 12:06:15 +02:00
|
|
|
}
|
|
|
|
|
2015-06-06 14:22:13 +02:00
|
|
|
/**
|
|
|
|
* Initialise extension
|
|
|
|
*/
|
2016-04-24 17:12:45 +02:00
|
|
|
init() {
|
|
|
|
if (this.initialized) {
|
2015-06-06 12:06:15 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.buildUI();
|
|
|
|
this.initialized = true;
|
2016-04-24 18:47:01 +02:00
|
|
|
this.emitter.on(['show-filters'], (tf, visible) => this.show(visible));
|
2016-04-24 17:12:45 +02:00
|
|
|
this.emitter.emit('filters-visibility-initialized', tf, this);
|
2015-06-06 12:06:15 +02:00
|
|
|
}
|
|
|
|
|
2015-06-06 14:22:13 +02:00
|
|
|
/**
|
|
|
|
* Build UI elements
|
|
|
|
*/
|
2016-04-24 17:12:45 +02:00
|
|
|
buildUI() {
|
2015-06-06 12:06:15 +02:00
|
|
|
let tf = this.tf;
|
2016-04-24 17:12:45 +02:00
|
|
|
let span = Dom.create('span', ['id', this.prfx + tf.id]);
|
2015-06-06 12:06:15 +02:00
|
|
|
span.className = this.contCssClass;
|
|
|
|
|
|
|
|
//Container element (rdiv or custom element)
|
2016-04-24 17:12:45 +02:00
|
|
|
if (!this.targetId) {
|
2015-06-06 12:06:15 +02:00
|
|
|
tf.setToolbar();
|
|
|
|
}
|
|
|
|
let targetEl = !this.targetId ? tf.rDiv : Dom.id(this.targetId);
|
|
|
|
|
2016-04-24 17:12:45 +02:00
|
|
|
if (!this.targetId) {
|
2015-06-06 12:06:15 +02:00
|
|
|
let firstChild = targetEl.firstChild;
|
|
|
|
firstChild.parentNode.insertBefore(span, firstChild);
|
|
|
|
} else {
|
|
|
|
targetEl.appendChild(span);
|
|
|
|
}
|
|
|
|
|
|
|
|
let btn;
|
2016-04-24 17:12:45 +02:00
|
|
|
if (!this.btnHtml) {
|
2015-06-06 12:06:15 +02:00
|
|
|
btn = Dom.create('a', ['href', 'javascript:void(0);']);
|
|
|
|
btn.className = this.btnCssClass;
|
|
|
|
btn.title = this.btnText || this.defaultText;
|
|
|
|
btn.innerHTML = this.collapseBtnHtml;
|
|
|
|
span.appendChild(btn);
|
|
|
|
} else { //Custom html
|
|
|
|
span.innerHTML = this.btnHtml;
|
|
|
|
btn = span.firstChild;
|
|
|
|
}
|
|
|
|
|
2016-04-24 17:12:45 +02:00
|
|
|
Event.add(btn, 'click', () => this.toggle());
|
2015-10-24 13:03:42 +02:00
|
|
|
|
2015-06-06 12:06:15 +02:00
|
|
|
this.contEl = span;
|
|
|
|
this.btnEl = btn;
|
|
|
|
|
2016-04-24 17:12:45 +02:00
|
|
|
if (!this.visibleAtStart) {
|
2015-06-06 12:06:15 +02:00
|
|
|
this.toggle();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-06-06 14:22:13 +02:00
|
|
|
/**
|
|
|
|
* Toggle filters visibility
|
|
|
|
*/
|
2016-04-24 18:47:01 +02:00
|
|
|
toggle() {
|
2015-06-06 12:06:15 +02:00
|
|
|
let tf = this.tf;
|
2016-04-24 17:12:45 +02:00
|
|
|
let tbl = tf.gridLayout ? tf.feature('gridLayout').headTbl : tf.tbl;
|
2015-06-06 12:06:15 +02:00
|
|
|
let fltRow = tbl.rows[this.filtersRowIndex];
|
2016-04-24 18:47:01 +02:00
|
|
|
let isDisplayed = fltRow.style.display === '';
|
2015-06-06 12:06:15 +02:00
|
|
|
|
2016-04-24 18:47:01 +02:00
|
|
|
this.show(!isDisplayed);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Show or hide filters
|
|
|
|
*
|
|
|
|
* @param {boolean} [visible=true] Visibility flag
|
|
|
|
*/
|
|
|
|
show(visible = true) {
|
|
|
|
let tf = this.tf;
|
|
|
|
let tbl = tf.gridLayout ? tf.feature('gridLayout').headTbl : tf.tbl;
|
|
|
|
let fltRow = tbl.rows[this.filtersRowIndex];
|
|
|
|
|
|
|
|
if (this.onBeforeShow && visible) {
|
2015-06-06 12:06:15 +02:00
|
|
|
this.onBeforeShow.call(this, this);
|
|
|
|
}
|
2016-04-24 18:47:01 +02:00
|
|
|
if (this.onBeforeHide && !visible) {
|
2015-06-06 12:06:15 +02:00
|
|
|
this.onBeforeHide.call(null, this);
|
|
|
|
}
|
|
|
|
|
2016-04-24 18:47:01 +02:00
|
|
|
fltRow.style.display = visible ? '' : 'none';
|
2016-04-24 17:12:45 +02:00
|
|
|
if (this.enableIcon && !this.btnHtml) {
|
2016-04-24 18:47:01 +02:00
|
|
|
this.btnEl.innerHTML = visible ?
|
|
|
|
this.collapseBtnHtml : this.expandBtnHtml;
|
2015-06-06 12:06:15 +02:00
|
|
|
}
|
|
|
|
|
2016-04-24 18:47:01 +02:00
|
|
|
if (this.onAfterShow && visible) {
|
2015-06-06 12:06:15 +02:00
|
|
|
this.onAfterShow.call(null, this);
|
|
|
|
}
|
2016-04-24 18:47:01 +02:00
|
|
|
if (this.onAfterHide && !visible) {
|
2015-06-06 12:06:15 +02:00
|
|
|
this.onAfterHide.call(null, this);
|
|
|
|
}
|
2016-04-26 11:22:02 +02:00
|
|
|
|
|
|
|
this.emitter.emit('filters-toggled', tf, this, visible);
|
2015-06-06 12:06:15 +02:00
|
|
|
}
|
|
|
|
|
2015-06-06 14:22:13 +02:00
|
|
|
/**
|
|
|
|
* Destroy the UI
|
|
|
|
*/
|
2016-04-24 17:12:45 +02:00
|
|
|
destroy() {
|
|
|
|
if (!this.btnEl && !this.contEl) {
|
2015-06-06 12:06:15 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-04-24 18:47:01 +02:00
|
|
|
this.emitter.off(['show-filters'], (tf, visible) => this.show(visible));
|
2016-04-24 17:12:45 +02:00
|
|
|
|
2015-06-06 12:06:15 +02:00
|
|
|
this.btnEl.innerHTML = '';
|
2015-12-05 14:37:59 +01:00
|
|
|
Dom.remove(this.btnEl);
|
2015-06-06 12:06:15 +02:00
|
|
|
this.btnEl = null;
|
|
|
|
|
|
|
|
this.contEl.innerHTML = '';
|
2015-12-05 14:37:59 +01:00
|
|
|
Dom.remove(this.contEl);
|
2015-06-06 12:06:15 +02:00
|
|
|
this.contEl = null;
|
|
|
|
this.initialized = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|