src/extensions/colsVisibility/colsVisibility.js
import {Feature} from '../../feature';
import {
addClass, removeClass, createCheckItem, createElm, elm, removeElm,
getText, tag
} from '../../dom';
import {isUndef, EMPTY_FN, isNull} from '../../types';
import {addEvt, targetEvt, removeEvt} from '../../event';
import {root} from '../../root';
import {NONE} from '../../const';
import {
defaultsBool, defaultsStr, defaultsFn, defaultsNb, defaultsArr
} from '../../settings';
import {RIGHT} from '../../modules/toolbar';
/**
* Columns Visibility extension
*/
export default class ColsVisibility extends Feature {
/**
* Creates an instance of ColsVisibility
* @param {TableFilter} tf TableFilter instance
* @param {Object} Configuration object
*/
constructor(tf, f) {
super(tf, ColsVisibility);
// Configuration object
let cfg = this.config;
/**
* Module name
* @type {String}
*/
this.name = f.name;
/**
* Module description
* @type {String}
*/
this.desc = defaultsStr(f.description, 'Columns visibility manager');
/**
* show/hide columns container element
* @private
*/
this.spanEl = null;
/**
* show/hide columns button element
* @private
*/
this.btnEl = null;
/**
* show/hide columns main container element
* @private
*/
this.contEl = null;
/**
* Enable tick to hide a column, defaults to true
* @type {Boolean}
*/
this.tickToHide = defaultsBool(f.tick_to_hide, true);
/**
* Enable columns manager UI, defaults to true
* @type {Boolean}
*/
this.manager = defaultsBool(f.manager, true);
/**
* Headers HTML table reference only if headers are external
* @type {DOMElement}
*/
this.headersTbl = f.headers_table || null;
/**
* Headers row index only if headers are external
* @type {Number}
*/
this.headersIndex = defaultsNb(f.headers_index, 1);
/**
* ID of main container element
* @type {String}
*/
this.contElTgtId = defaultsStr(f.container_target_id, null);
/**
* Alternative text for column headers in column manager UI
* @type {Array}
*/
this.headersText = defaultsArr(f.headers_text, []);
/**
* ID of button's container element
* @type {String}
*/
this.btnTgtId = defaultsStr(f.btn_target_id, null);
/**
* Button's text, defaults to Columns▼
* @type {String}
*/
this.btnText = defaultsStr(f.btn_text, 'Columns▼');
/**
* Button's inner HTML
* @type {String}
*/
this.btnHtml = defaultsStr(f.btn_html, null);
/**
* Css class for button
* @type {String}
*/
this.btnCssClass = defaultsStr(f.btn_css_class, 'colVis');
/**
* Columns manager UI close link text, defaults to 'Close'
* @type {String}
*/
this.btnCloseText = defaultsStr(f.btn_close_text, 'Close');
/**
* Columns manager UI close link HTML
* @type {String}
*/
this.btnCloseHtml = defaultsStr(f.btn_close_html, null);
/**
* Css for columns manager UI close link
* @type {String}
*/
this.btnCloseCssClass = defaultsStr(f.btn_close_css_class,
this.btnCssClass);
/**
* Extension's stylesheet filename
* @type {String}
*/
this.stylesheet = defaultsStr(f.stylesheet, 'colsVisibility.css');
/**
* Css for columns manager UI span
* @type {String}
*/
this.spanCssClass = defaultsStr(f.span_css_class, 'colVisSpan');
/**
* Css for columns manager UI main container
* @type {String}
*/
this.contCssClass = defaultsStr(f.cont_css_class, 'colVisCont');
/**
* Css for columns manager UI checklist (ul)
* @type {String}
*/
this.listCssClass = defaultsStr(cfg.list_css_class, 'cols_checklist');
/**
* Css for columns manager UI checklist item (li)
* @type {String}
*/
this.listItemCssClass = defaultsStr(cfg.checklist_item_css_class,
'cols_checklist_item');
/**
* Css for columns manager UI checklist item selected state (li)
* @type {String}
*/
this.listSlcItemCssClass = defaultsStr(
cfg.checklist_selected_item_css_class,
'cols_checklist_slc_item'
);
/**
* Text preceding the columns list, defaults to 'Hide' or 'Show'
* depending on tick mode (tick_to_hide option)
* @type {String}
*/
this.text = defaultsStr(f.text, this.tickToHide ? 'Hide: ' : 'Show: ');
/**
* List of columns indexes to be hidden at initialization
* @type {Array}
*/
this.atStart = defaultsArr(f.at_start, []);
/**
* Enable hover behaviour on columns manager button/link
* @type {Boolean}
*/
this.enableHover = Boolean(f.enable_hover);
/**
* Enable select all option, disabled by default
* @type {Boolean}
*/
this.enableTickAll = Boolean(f.enable_tick_all);
/**
* Text for select all option, defaults to 'Select all:'
* @type {String}
*/
this.tickAllText = defaultsStr(f.tick_all_text, 'Select all:');
/**
* Default position in toolbar ('left'|'center'|'right')
* @type {String}
*/
this.toolbarPosition = defaultsStr(f.toolbar_position, RIGHT);
/**
* List of indexes of hidden columns
* @private
*/
this.hiddenCols = [];
/**
* Bound mouseup wrapper
* @private
*/
this.boundMouseup = null;
/**
* Callback fired when the extension is initialized
* @type {Function}
*/
this.onLoaded = defaultsFn(f.on_loaded, EMPTY_FN);
/**
* Callback fired before the columns manager is opened
* @type {Function}
*/
this.onBeforeOpen = defaultsFn(f.on_before_open, EMPTY_FN);
/**
* Callback fired after the columns manager is opened
* @type {Function}
*/
this.onAfterOpen = defaultsFn(f.on_after_open, EMPTY_FN);
/**
* Callback fired before the columns manager is closed
* @type {Function}
*/
this.onBeforeClose = defaultsFn(f.on_before_close, EMPTY_FN);
/**
* Callback fired after the columns manager is closed
* @type {Function}
*/
this.onAfterClose = defaultsFn(f.on_after_close, EMPTY_FN);
/**
* Callback fired before a column is hidden
* @type {Function}
*/
this.onBeforeColHidden = defaultsFn(f.on_before_col_hidden, EMPTY_FN);
/**
* Callback fired after a column is hidden
* @type {Function}
*/
this.onAfterColHidden = defaultsFn(f.on_after_col_hidden, EMPTY_FN);
/**
* Callback fired before a column is displayed
* @type {Function}
*/
this.onBeforeColDisplayed = defaultsFn(f.on_before_col_displayed,
EMPTY_FN);
/**
* Callback fired after a column is displayed
* @type {Function}
*/
this.onAfterColDisplayed = defaultsFn(f.on_after_col_displayed,
EMPTY_FN);
//Grid layout support
if (tf.gridLayout) {
this.headersTbl = tf.feature('gridLayout').headTbl; //headers table
this.headersIndex = 0; //headers index
}
//Loads extension stylesheet
tf.import(f.name + 'Style', tf.getStylePath() + this.stylesheet, null,
'link');
this.enable();
}
/**
* Mouse-up event handler handling popup auto-close behaviour
* @private
*/
onMouseup(evt) {
let targetElm = targetEvt(evt);
while (targetElm && targetElm !== this.contEl
&& targetElm !== this.btnEl) {
targetElm = targetElm.parentNode;
}
if (targetElm !== this.contEl && targetElm !== this.btnEl) {
this.toggle();
}
return;
}
/**
* Toggle columns manager UI
*/
toggle() {
// ensure mouseup event handler is removed
removeEvt(root, 'mouseup', this.boundMouseup);
let contDisplay = this.contEl.style.display;
if (contDisplay !== 'inline') {
this.onBeforeOpen(this);
}
if (contDisplay === 'inline') {
this.onBeforeClose(this);
}
this.contEl.style.display = contDisplay === 'inline' ?
NONE : 'inline';
if (contDisplay !== 'inline') {
this.onAfterOpen(this);
addEvt(root, 'mouseup', this.boundMouseup);
}
if (contDisplay === 'inline') {
this.onAfterClose(this);
}
}
/**
* Check an item in columns manager UI
* @private
*/
checkItem(lbl) {
let li = lbl.parentNode;
if (!li || !lbl) {
return;
}
let isChecked = lbl.firstChild.checked;
let colIndex = lbl.firstChild.getAttribute('id').split('_')[1];
colIndex = parseInt(colIndex, 10);
if (isChecked) {
addClass(li, this.listSlcItemCssClass);
} else {
removeClass(li, this.listSlcItemCssClass);
}
let hide = false;
if ((this.tickToHide && isChecked) ||
(!this.tickToHide && !isChecked)) {
hide = true;
}
this.setHidden(colIndex, hide);
}
/**
* Initializes ColsVisibility instance
*/
init() {
if (this.initialized || !this.manager) {
return;
}
this.emitter.emit('initializing-extension', this,
!isNull(this.btnTgtId));
this.emitter.on(['hide-column'],
(tf, colIndex) => this.hideCol(colIndex));
this.buildBtn();
this.buildManager();
/** @inherited */
this.initialized = true;
this.boundMouseup = this.onMouseup.bind(this);
this.emitter.emit('columns-visibility-initialized', this.tf, this);
this.emitter.emit('extension-initialized', this);
// Hide columns at start at very end of initialization, do not move
// as order is important
this._hideAtStart();
}
/**
* Build main button UI
*/
buildBtn() {
if (this.btnEl) {
return;
}
let tf = this.tf;
let span = createElm('span');
span.className = this.spanCssClass;
// Container element (rdiv or custom element)
let targetEl = !this.btnTgtId ?
tf.feature('toolbar').container(this.toolbarPosition) :
elm(this.btnTgtId);
if (!this.btnTgtId) {
let firstChild = targetEl.firstChild;
firstChild.parentNode.insertBefore(span, firstChild);
} else {
targetEl.appendChild(span);
}
if (!this.btnHtml) {
let btn = createElm('a', ['href', 'javascript:;']);
btn.className = this.btnCssClass;
btn.title = this.desc;
btn.innerHTML = this.btnText;
span.appendChild(btn);
if (!this.enableHover) {
addEvt(btn, 'click', (evt) => this.toggle(evt));
} else {
addEvt(btn, 'mouseover', (evt) => this.toggle(evt));
}
} else { // Custom html
span.innerHTML = this.btnHtml;
let colVisEl = span.firstChild;
if (!this.enableHover) {
addEvt(colVisEl, 'click', (evt) => this.toggle(evt));
} else {
addEvt(colVisEl, 'mouseover', (evt) => this.toggle(evt));
}
}
this.spanEl = span;
this.btnEl = this.spanEl.firstChild;
this.onLoaded(this);
}
/**
* Build columns manager UI
*/
buildManager() {
let tf = this.tf;
let container = !this.contElTgtId ?
createElm('div') :
elm(this.contElTgtId);
container.className = this.contCssClass;
//Extension description
let extNameLabel = createElm('p');
extNameLabel.innerHTML = this.text;
container.appendChild(extNameLabel);
//Headers list
let ul = createElm('ul');
ul.className = this.listCssClass;
let tbl = this.headersTbl || tf.dom();
let headerIndex = this.headersTbl ?
this.headersIndex : tf.getHeadersRowIndex();
let headerRow = tbl.rows[headerIndex];
//Tick all option
if (this.enableTickAll) {
let li = createCheckItem('col__' + tf.id, this.tickAllText,
this.tickAllText);
addClass(li, this.listItemCssClass);
ul.appendChild(li);
li.check.checked = !this.tickToHide;
addEvt(li.check, 'click', () => {
for (let h = 0; h < headerRow.cells.length; h++) {
let itm = elm('col_' + h + '_' + tf.id);
if (itm && li.check.checked !== itm.checked) {
itm.click();
itm.checked = li.check.checked;
}
}
});
}
for (let i = 0; i < headerRow.cells.length; i++) {
let cell = headerRow.cells[i];
let cellText = this.headersText[i] || this._getHeaderText(cell);
let liElm = createCheckItem('col_' + i + '_' + tf.id, cellText,
cellText);
addClass(liElm, this.listItemCssClass);
if (!this.tickToHide) {
addClass(liElm, this.listSlcItemCssClass);
}
ul.appendChild(liElm);
if (!this.tickToHide) {
liElm.check.checked = true;
}
addEvt(liElm.check, 'click', (evt) => {
let elm = targetEvt(evt);
let lbl = elm.parentNode;
this.checkItem(lbl);
});
}
//separator
let p = createElm('p', ['align', 'center']);
let btn;
//Close link
if (!this.btnCloseHtml) {
btn = createElm('a', ['href', 'javascript:;']);
btn.className = this.btnCloseCssClass;
btn.innerHTML = this.btnCloseText;
addEvt(btn, 'click', (evt) => this.toggle(evt));
p.appendChild(btn);
} else {
p.innerHTML = this.btnCloseHtml;
btn = p.firstChild;
addEvt(btn, 'click', (evt) => this.toggle(evt));
}
container.appendChild(ul);
container.appendChild(p);
this.btnEl.parentNode.insertBefore(container, this.btnEl);
this.contEl = container;
}
/**
* Hide or show specified columns
* @param {Number} colIndex Column index
* @param {Boolean} hide Hide column if true or show if false
*/
setHidden(colIndex, hide) {
let tf = this.tf;
let tbl = tf.dom();
if (hide) {
this.onBeforeColHidden(this, colIndex);
} else {
this.onBeforeColDisplayed(this, colIndex);
}
this._hideElements(tbl, colIndex, hide);
if (this.headersTbl) {
this._hideElements(this.headersTbl, colIndex, hide);
}
let hiddenCols = this.hiddenCols;
let itemIndex = hiddenCols.indexOf(colIndex);
if (hide) {
if (itemIndex === -1) {
this.hiddenCols.push(colIndex);
}
} else {
if (itemIndex !== -1) {
this.hiddenCols.splice(itemIndex, 1);
}
}
if (hide) {
this.onAfterColHidden(this, colIndex);
this.emitter.emit('column-hidden', tf, this, colIndex,
this.hiddenCols);
} else {
this.onAfterColDisplayed(this, colIndex);
this.emitter.emit('column-shown', tf, this, colIndex,
this.hiddenCols);
}
}
/**
* Show specified column
* @param {Number} colIndex Column index
*/
showCol(colIndex) {
if (isUndef(colIndex) || !this.isColHidden(colIndex)) {
return;
}
if (this.manager && this.contEl) {
let itm = elm('col_' + colIndex + '_' + this.tf.id);
if (itm) {
itm.click();
}
} else {
this.setHidden(colIndex, false);
}
}
/**
* Hide specified column
* @param {Number} colIndex Column index
*/
hideCol(colIndex) {
if (isUndef(colIndex) || this.isColHidden(colIndex)) {
return;
}
if (this.manager && this.contEl) {
let itm = elm('col_' + colIndex + '_' + this.tf.id);
if (itm) {
itm.click();
}
} else {
this.setHidden(colIndex, true);
}
}
/**
* Determine if specified column is hidden
* @param {Number} colIndex Column index
*/
isColHidden(colIndex) {
if (this.hiddenCols.indexOf(colIndex) !== -1) {
return true;
}
return false;
}
/**
* Toggle visibility of specified column
* @param {Number} colIndex Column index
*/
toggleCol(colIndex) {
if (isUndef(colIndex) || this.isColHidden(colIndex)) {
this.showCol(colIndex);
} else {
this.hideCol(colIndex);
}
}
/**
* Return the indexes of the columns currently hidden
* @return {Array} column indexes
*/
getHiddenCols() {
return this.hiddenCols;
}
/**
* Remove the columns manager
*/
destroy() {
if (!this.initialized) {
return;
}
if (elm(this.contElTgtId)) {
elm(this.contElTgtId).innerHTML = '';
} else {
this.contEl.innerHTML = '';
removeElm(this.contEl);
this.contEl = null;
}
this.btnEl.innerHTML = '';
removeElm(this.btnEl);
this.btnEl = null;
this.emitter.off(['hide-column'],
(tf, colIndex) => this.hideCol(colIndex));
this.boundMouseup = null;
this.initialized = false;
}
_getHeaderText(cell) {
if (!cell.hasChildNodes) {
return '';
}
for (let i = 0; i < cell.childNodes.length; i++) {
let n = cell.childNodes[i];
if (n.nodeType === 3) {
return n.nodeValue;
} else if (n.nodeType === 1) {
if (n.id && n.id.indexOf('popUp') !== -1) {
continue;
} else {
return getText(n);
}
}
continue;
}
return '';
}
_hideElements(tbl, colIdx, hide) {
this._hideCells(tbl, colIdx, hide);
this._hideCol(tbl, colIdx, hide);
}
_hideCells(tbl, colIdx, hide) {
for (let i = 0; i < tbl.rows.length; i++) {
let row = tbl.rows[i];
let cell = row.cells[colIdx];
if (cell) {
cell.style.display = hide ? NONE : '';
}
}
}
_hideCol(tbl, colIdx, hide) {
let colElms = tag(tbl, 'col');
if (colElms.length === 0) {
return;
}
colElms[colIdx].style.display = hide ? NONE : '';
}
_hideAtStart() {
this.atStart.forEach((colIdx) => {
this.hideCol(colIdx);
});
}
}
