1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-06-17 05:06:49 +02:00
TableFilter/src/modules/popupFilter.js

277 lines
8.9 KiB
JavaScript
Raw Normal View History

import {Feature} from '../feature';
2016-05-15 04:56:12 +02:00
import {isFn} from '../types';
2016-05-24 10:42:11 +02:00
import {createElm, removeElm} from '../dom';
2016-06-02 06:13:56 +02:00
import {addEvt, cancelEvt, stopEvt, targetEvt} from '../event';
import {INPUT, NONE} from '../const';
2015-02-15 09:55:23 +01:00
2016-05-24 10:42:11 +02:00
export class PopupFilter extends Feature {
2015-02-15 09:55:23 +01:00
/**
* Pop-up filter component
* @param {Object} tf TableFilter instance
*/
2016-05-24 10:42:11 +02:00
constructor(tf) {
super(tf, 'popupFilters');
2015-02-15 09:55:23 +01:00
// Configuration object
2016-05-24 10:42:11 +02:00
let f = this.config;
2015-02-15 09:55:23 +01:00
// Enable external filters
2015-02-15 09:55:23 +01:00
tf.isExternalFlt = true;
tf.externalFltTgtIds = [];
//filter icon path
this.popUpImgFlt = f.popup_filters_image ||
2016-05-24 10:42:11 +02:00
tf.themesPath + 'icn_filter.gif';
2015-02-15 09:55:23 +01:00
//active filter icon path
this.popUpImgFltActive = f.popup_filters_image_active ||
2016-05-24 10:42:11 +02:00
tf.themesPath + 'icn_filterActive.gif';
2015-02-15 09:55:23 +01:00
this.popUpImgFltHtml = f.popup_filters_image_html ||
2016-05-24 10:42:11 +02:00
'<img src="' + this.popUpImgFlt + '" alt="Column filter" />';
2015-02-15 09:55:23 +01:00
//defines css class for popup div containing filter
this.popUpDivCssClass = f.popup_div_css_class || 'popUpFilter';
//callback function before popup filtes is opened
2016-05-15 04:56:12 +02:00
this.onBeforePopUpOpen = isFn(f.on_before_popup_filter_open) ?
2015-02-15 09:55:23 +01:00
f.on_before_popup_filter_open : null;
//callback function after popup filtes is opened
2016-05-15 04:56:12 +02:00
this.onAfterPopUpOpen = isFn(f.on_after_popup_filter_open) ?
2015-02-15 09:55:23 +01:00
f.on_after_popup_filter_open : null;
//callback function before popup filtes is closed
2016-05-15 04:56:12 +02:00
this.onBeforePopUpClose = isFn(f.on_before_popup_filter_close) ?
2015-02-15 09:55:23 +01:00
f.on_before_popup_filter_close : null;
//callback function after popup filtes is closed
2016-05-15 04:56:12 +02:00
this.onAfterPopUpClose = isFn(f.on_after_popup_filter_close) ?
2015-02-15 09:55:23 +01:00
f.on_after_popup_filter_close : null;
//stores filters spans
this.popUpFltSpans = [];
//stores filters icons
this.popUpFltImgs = [];
//stores filters containers
this.popUpFltElms = this.popUpFltElmCache || [];
this.popUpFltAdjustToContainer = true;
//id prefix for pop-up filter span
this.prfxPopUpSpan = 'popUpSpan_';
//id prefix for pop-up div containing filter
this.prfxPopUpDiv = 'popUpDiv_';
2015-02-15 09:55:23 +01:00
}
2016-05-24 10:42:11 +02:00
onClick(evt) {
2016-06-02 06:13:56 +02:00
let elm = targetEvt(evt).parentNode,
2015-02-15 09:55:23 +01:00
colIndex = parseInt(elm.getAttribute('ci'), 10);
this.closeAll(colIndex);
this.toggle(colIndex);
2016-05-24 10:42:11 +02:00
if (this.popUpFltAdjustToContainer) {
let popUpDiv = this.popUpFltElms[colIndex],
header = this.tf.getHeaderElement(colIndex),
2015-02-15 09:55:23 +01:00
headerWidth = header.clientWidth * 0.95;
2016-02-16 08:41:47 +01:00
popUpDiv.style.width = parseInt(headerWidth, 10) + 'px';
2015-02-15 09:55:23 +01:00
}
2016-06-02 06:13:56 +02:00
cancelEvt(evt);
stopEvt(evt);
2015-02-15 09:55:23 +01:00
}
/**
* Initialize DOM elements
*/
2016-05-24 10:42:11 +02:00
init() {
if (this.initialized) {
return;
}
2016-05-24 10:42:11 +02:00
let tf = this.tf;
2016-01-04 07:59:30 +01:00
// Override headers row index if no grouped headers
2016-05-24 10:42:11 +02:00
if (tf.headersRow <= 1) {
2016-01-04 07:59:30 +01:00
tf.headersRow = 0;
}
2016-05-24 10:42:11 +02:00
for (let i = 0; i < tf.nbCells; i++) {
if (tf.getFilterType(i) === NONE) {
2015-02-15 09:55:23 +01:00
continue;
}
2016-05-24 10:42:11 +02:00
let popUpSpan = createElm(
2015-02-15 09:55:23 +01:00
'span',
2016-05-24 10:42:11 +02:00
['id', this.prfxPopUpSpan + tf.id + '_' + i],
2015-02-15 09:55:23 +01:00
['ci', i]
);
popUpSpan.innerHTML = this.popUpImgFltHtml;
2016-05-24 10:42:11 +02:00
let header = tf.getHeaderElement(i);
2015-02-15 09:55:23 +01:00
header.appendChild(popUpSpan);
2016-06-02 06:13:56 +02:00
addEvt(popUpSpan, 'click', (evt) => this.onClick(evt));
2015-02-15 09:55:23 +01:00
this.popUpFltSpans[i] = popUpSpan;
this.popUpFltImgs[i] = popUpSpan.firstChild;
}
// subscribe to events
2016-05-24 10:42:11 +02:00
this.emitter.on(['before-filtering'], () => this.buildIcons());
this.emitter.on(['after-filtering'], () => this.closeAll());
2016-01-03 03:49:04 +01:00
this.emitter.on(['cell-processed'],
2016-05-24 10:42:11 +02:00
(tf, cellIndex) => this.buildIcon(cellIndex, true));
this.emitter.on(['filters-row-inserted'], () => this.tf.headersRow++);
this.emitter.on(['before-filter-init'],
2016-05-24 10:42:11 +02:00
(tf, colIndex) => this.build(colIndex));
this.initialized = true;
}
/**
* Reset previously destroyed feature
*/
2016-05-24 10:42:11 +02:00
reset() {
this.enable();
this.init();
this.buildAll();
2015-02-15 09:55:23 +01:00
}
/**
* Build all pop-up filters elements
*/
2016-05-24 10:42:11 +02:00
buildAll() {
for (let i = 0; i < this.popUpFltElmCache.length; i++) {
2015-02-15 09:55:23 +01:00
this.build(i, this.popUpFltElmCache[i]);
}
}
/**
* Build a specified pop-up filter elements
* @param {Number} colIndex Column index
* @param {Object} div Optional container DOM element
*/
2016-05-24 10:42:11 +02:00
build(colIndex, div) {
let tf = this.tf;
let popUpDiv = !div ?
createElm('div',
['id', this.prfxPopUpDiv + tf.id + '_' + colIndex]) :
2015-02-15 09:55:23 +01:00
div;
popUpDiv.className = this.popUpDivCssClass;
tf.externalFltTgtIds.push(popUpDiv.id);
2016-05-24 10:42:11 +02:00
let header = tf.getHeaderElement(colIndex);
2015-02-15 09:55:23 +01:00
header.insertBefore(popUpDiv, header.firstChild);
2016-06-02 06:13:56 +02:00
addEvt(popUpDiv, 'click', (evt) => stopEvt(evt));
2015-02-15 09:55:23 +01:00
this.popUpFltElms[colIndex] = popUpDiv;
}
/**
* Toogle visibility of specified filter
* @param {Number} colIndex Column index
*/
2016-05-24 10:42:11 +02:00
toggle(colIndex) {
let tf = this.tf,
2015-02-15 09:55:23 +01:00
popUpFltElm = this.popUpFltElms[colIndex];
2016-05-24 10:42:11 +02:00
if (popUpFltElm.style.display === NONE ||
popUpFltElm.style.display === '') {
if (this.onBeforePopUpOpen) {
2015-02-15 09:55:23 +01:00
this.onBeforePopUpOpen.call(
null, this, this.popUpFltElms[colIndex], colIndex);
}
popUpFltElm.style.display = 'block';
2016-05-24 10:42:11 +02:00
if (tf.getFilterType(colIndex) === INPUT) {
let flt = tf.getFilterElement(colIndex);
if (flt) {
flt.focus();
}
2015-02-15 09:55:23 +01:00
}
2016-05-24 10:42:11 +02:00
if (this.onAfterPopUpOpen) {
2015-02-15 09:55:23 +01:00
this.onAfterPopUpOpen.call(
null, this, this.popUpFltElms[colIndex], colIndex);
}
} else {
2016-05-24 10:42:11 +02:00
if (this.onBeforePopUpClose) {
2015-02-15 09:55:23 +01:00
this.onBeforePopUpClose.call(
null, this, this.popUpFltElms[colIndex], colIndex);
}
popUpFltElm.style.display = NONE;
2016-05-24 10:42:11 +02:00
if (this.onAfterPopUpClose) {
2015-02-15 09:55:23 +01:00
this.onAfterPopUpClose.call(
null, this, this.popUpFltElms[colIndex], colIndex);
}
}
}
/**
* Close all filters excepted for the specified one if any
* @param {Number} exceptIdx Column index of the filter to not close
*/
2016-05-24 10:42:11 +02:00
closeAll(exceptIdx) {
for (let i = 0; i < this.popUpFltElms.length; i++) {
if (i === exceptIdx) {
2015-02-15 09:55:23 +01:00
continue;
}
2016-05-24 10:42:11 +02:00
let popUpFltElm = this.popUpFltElms[i];
if (popUpFltElm) {
popUpFltElm.style.display = NONE;
2015-02-15 09:55:23 +01:00
}
}
}
/**
* Build all the icons representing the pop-up filters
*/
2016-05-24 10:42:11 +02:00
buildIcons() {
for (let i = 0; i < this.popUpFltImgs.length; i++) {
2015-02-15 09:55:23 +01:00
this.buildIcon(i, false);
}
}
/**
* Apply specified icon state
* @param {Number} colIndex Column index
* @param {Boolean} active Apply active state
*/
2016-05-24 10:42:11 +02:00
buildIcon(colIndex, active) {
if (this.popUpFltImgs[colIndex]) {
2015-02-15 09:55:23 +01:00
this.popUpFltImgs[colIndex].src = active ?
this.popUpImgFltActive : this.popUpImgFlt;
}
}
/**
* Remove pop-up filters
*/
2016-05-24 10:42:11 +02:00
destroy() {
if (!this.initialized) {
return;
}
2015-02-15 09:55:23 +01:00
this.popUpFltElmCache = [];
2016-05-24 10:42:11 +02:00
for (let i = 0; i < this.popUpFltElms.length; i++) {
let popUpFltElm = this.popUpFltElms[i],
2015-02-17 12:17:17 +01:00
popUpFltSpan = this.popUpFltSpans[i],
popUpFltImg = this.popUpFltImgs[i];
2016-05-24 10:42:11 +02:00
if (popUpFltElm) {
removeElm(popUpFltElm);
2015-02-15 09:55:23 +01:00
this.popUpFltElmCache[i] = popUpFltElm;
}
popUpFltElm = null;
2016-05-24 10:42:11 +02:00
if (popUpFltSpan) {
removeElm(popUpFltSpan);
2015-02-15 09:55:23 +01:00
}
popUpFltSpan = null;
2016-05-24 10:42:11 +02:00
if (popUpFltImg) {
removeElm(popUpFltImg);
2015-02-17 12:17:17 +01:00
}
popUpFltImg = null;
2015-02-15 09:55:23 +01:00
}
2015-02-17 12:17:17 +01:00
this.popUpFltElms = [];
this.popUpFltSpans = [];
this.popUpFltImgs = [];
// unsubscribe to events
2016-05-24 10:42:11 +02:00
this.emitter.off(['before-filtering'], () => this.buildIcons());
this.emitter.off(['after-filtering'], () => this.closeAll());
2016-01-03 03:49:04 +01:00
this.emitter.off(['cell-processed'],
2016-05-24 10:42:11 +02:00
(tf, cellIndex) => this.buildIcon(cellIndex, true));
this.emitter.off(['filters-row-inserted'], () => this.tf.headersRow++);
this.emitter.off(['before-filter-init'],
2016-05-24 10:42:11 +02:00
(tf, colIndex) => this.build(colIndex));
this.initialized = false;
2015-02-15 09:55:23 +01:00
}
2015-02-17 12:17:17 +01:00
2015-02-15 09:55:23 +01:00
}