mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-21 07:46:42 +02:00
139 lines
3.6 KiB
JavaScript
139 lines
3.6 KiB
JavaScript
import {Feature} from '../feature';
|
|
import {addClass, removeClass, hasClass} from '../dom';
|
|
import {EMPTY_FN} from '../types';
|
|
import {defaultsStr, defaultsFn} from '../settings';
|
|
|
|
/**
|
|
* Visual indicator for filtered columns
|
|
* @export
|
|
* @class MarkActiveColumns
|
|
* @extends {Feature}
|
|
*/
|
|
export class MarkActiveColumns extends Feature {
|
|
|
|
/**
|
|
* Create an instance of MarkActiveColumns
|
|
* @param {TableFilter} tf TableFilter instance
|
|
*/
|
|
constructor(tf) {
|
|
super(tf, 'markActiveColumns');
|
|
|
|
let config = this.config.mark_active_columns || {};
|
|
|
|
/**
|
|
* Css class for filtered (active) columns
|
|
* @type {String}
|
|
*/
|
|
this.headerCssClass = defaultsStr(config.header_css_class,
|
|
'activeHeader');
|
|
|
|
/**
|
|
* Css class for filtered (active) column cells
|
|
* @type {String}
|
|
*/
|
|
this.cellCssClass = defaultsStr(config.cell_css_class,
|
|
'activeCell');
|
|
|
|
/**
|
|
* Enable/disable column highlighting
|
|
* @type {Boolean}
|
|
*/
|
|
this.highlightColumn = Boolean(config.highlight_column);
|
|
|
|
/**
|
|
* Callback fired before a column is marked as filtered
|
|
* @type {Function}
|
|
*/
|
|
this.onBeforeActiveColumn = defaultsFn(config.on_before_active_column,
|
|
EMPTY_FN);
|
|
|
|
/**
|
|
* Callback fired after a column is marked as filtered
|
|
* @type {Function}
|
|
*/
|
|
this.onAfterActiveColumn = defaultsFn(config.on_after_active_column,
|
|
EMPTY_FN);
|
|
}
|
|
|
|
/**
|
|
* Initialise MarkActiveColumns instance
|
|
*/
|
|
init() {
|
|
if (this.initialized) {
|
|
return;
|
|
}
|
|
|
|
this.emitter.on(['before-filtering'], () => this.clearActiveColumns());
|
|
this.emitter.on(
|
|
['cell-processed'],
|
|
(tf, colIndex) => this.markActiveColumn(colIndex)
|
|
);
|
|
|
|
/** @inherited */
|
|
this.initialized = true;
|
|
}
|
|
|
|
/**
|
|
* Clear filtered columns visual indicator (background color)
|
|
*/
|
|
clearActiveColumns() {
|
|
let tf = this.tf;
|
|
tf.eachCol((idx) => {
|
|
removeClass(tf.getHeaderElement(idx), this.headerCssClass);
|
|
|
|
if (this.highlightColumn) {
|
|
tf.dom()
|
|
.querySelectorAll(`tbody td:nth-child(${idx + 1})`)
|
|
.forEach((cell) => {
|
|
removeClass(cell, this.cellCssClass);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Mark currently filtered column
|
|
* @param {Number} colIndex Column index
|
|
*/
|
|
markActiveColumn(colIndex) {
|
|
let tf = this.tf;
|
|
let header = tf.getHeaderElement(colIndex);
|
|
if (hasClass(header, this.headerCssClass)) {
|
|
return;
|
|
}
|
|
|
|
this.onBeforeActiveColumn(this, colIndex);
|
|
|
|
addClass(header, this.headerCssClass);
|
|
|
|
if (this.highlightColumn) {
|
|
tf.dom()
|
|
.querySelectorAll(`tbody td:nth-child(${colIndex + 1})`)
|
|
.forEach((cell) => {
|
|
addClass(cell, this.cellCssClass);
|
|
});
|
|
}
|
|
|
|
this.onAfterActiveColumn(this, colIndex);
|
|
}
|
|
|
|
/**
|
|
* Remove feature
|
|
*/
|
|
destroy() {
|
|
if (!this.initialized) {
|
|
return;
|
|
}
|
|
|
|
this.clearActiveColumns();
|
|
this.emitter.off(['before-filtering'], () => this.clearActiveColumns());
|
|
this.emitter.off(
|
|
['cell-processed'],
|
|
(tf, colIndex) => this.markActiveColumn(colIndex)
|
|
);
|
|
|
|
/** @inherited */
|
|
this.initialized = false;
|
|
}
|
|
}
|