mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-22 16:26:42 +02:00
579 lines
24 KiB
JavaScript
579 lines
24 KiB
JavaScript
define(['exports', 'module', '../../dom', '../../types', '../../event', '../../helpers', '../../array'], function (exports, module, _dom, _types, _event, _helpers, _array) {
|
|
'use strict';
|
|
|
|
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
|
|
|
|
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
|
|
|
var ColsVisibility = (function () {
|
|
|
|
/**
|
|
* Columns Visibility extension
|
|
* @param {Object} tf TableFilter instance
|
|
*/
|
|
|
|
function ColsVisibility(tf) {
|
|
var ext = arguments[1] === undefined ? {
|
|
name: 'colsVisibility',
|
|
description: 'Columns visibility manager'
|
|
} : arguments[1];
|
|
|
|
_classCallCheck(this, ColsVisibility);
|
|
|
|
// Configuration object
|
|
var f = ext;
|
|
var cfg = tf.config();
|
|
|
|
this.initialized = false;
|
|
this.extName = f.name;
|
|
this.extDesc = f.description;
|
|
|
|
//show/hide cols span element
|
|
this.spanEl = null;
|
|
//show/hide cols button element
|
|
this.btnEl = null;
|
|
//show/hide cols container div element
|
|
this.contEl = null;
|
|
|
|
//tick to hide or show column
|
|
this.tickToHide = f.tick_to_hide === false ? false : true;
|
|
//enables/disables cols manager generation
|
|
this.manager = f.manager === false ? false : true;
|
|
//only if external headers
|
|
this.headersTbl = f.headers_table || false;
|
|
//only if external headers
|
|
this.headersIndex = f.headers_index || 1;
|
|
//id of container element
|
|
this.contElTgtId = f.container_target_id || null;
|
|
//alternative headers text
|
|
this.headersText = f.headers_text || null;
|
|
//id of button container element
|
|
this.btnTgtId = f.btn_target_id || null;
|
|
//defines show/hide cols text
|
|
this.btnText = f.btn_text || 'Columns▼';
|
|
//defines show/hide cols button innerHtml
|
|
this.btnHtml = f.btn_html || null;
|
|
//defines css class for show/hide cols button
|
|
this.btnCssClass = f.btn_css_class || 'colVis';
|
|
//defines close link text
|
|
this.btnCloseText = f.btn_close_text || 'Close';
|
|
//defines close button innerHtml
|
|
this.btnCloseHtml = f.btn_close_html || null;
|
|
//defines css class for close button
|
|
this.btnCloseCssClass = f.btn_close_css_class || this.btnCssClass;
|
|
|
|
this.path = f.path || tf.extensionsPath + 'colsVisibility/';
|
|
this.stylesheet = f.stylesheet || 'colsVisibility.css';
|
|
//span containing show/hide cols button
|
|
this.prfx = 'colVis_';
|
|
//defines css class span containing show/hide cols
|
|
this.spanCssClass = f.span_css_class || 'colVisSpan';
|
|
this.prfxCont = this.prfx + 'Cont_';
|
|
//defines css class div containing show/hide cols
|
|
this.contCssClass = f.cont_css_class || 'colVisCont';
|
|
//defines css class for cols list (ul)
|
|
this.listCssClass = cfg.list_css_class || 'cols_checklist';
|
|
//defines css class for list item (li)
|
|
this.listItemCssClass = cfg.checklist_item_css_class || 'cols_checklist_item';
|
|
//defines css class for selected list item (li)
|
|
this.listSlcItemCssClass = cfg.checklist_selected_item_css_class || 'cols_checklist_slc_item';
|
|
//text preceding columns list
|
|
this.text = f.text || (this.tickToHide ? 'Hide: ' : 'Show: ');
|
|
this.atStart = f.at_start || null;
|
|
this.enableHover = Boolean(f.enable_hover);
|
|
//enables select all option
|
|
this.enableTickAll = Boolean(f.enable_tick_all);
|
|
//text preceding columns list
|
|
this.tickAllText = f.tick_all_text || 'Select all:';
|
|
|
|
//array containing hidden columns indexes
|
|
this.hiddenCols = [];
|
|
this.tblHasColTag = _dom.Dom.tag(tf.tbl, 'col').length > 0;
|
|
|
|
//callback invoked just after cols manager is loaded
|
|
this.onLoaded = _types.Types.isFn(f.on_loaded) ? f.on_loaded : null;
|
|
//calls function before cols manager is opened
|
|
this.onBeforeOpen = _types.Types.isFn(f.on_before_open) ? f.on_before_open : null;
|
|
//calls function after cols manager is opened
|
|
this.onAfterOpen = _types.Types.isFn(f.on_after_open) ? f.on_after_open : null;
|
|
//calls function before cols manager is closed
|
|
this.onBeforeClose = _types.Types.isFn(f.on_before_close) ? f.on_before_close : null;
|
|
//calls function after cols manager is closed
|
|
this.onAfterClose = _types.Types.isFn(f.on_after_close) ? f.on_after_close : null;
|
|
|
|
//calls function before col is hidden
|
|
this.onBeforeColHidden = _types.Types.isFn(f.on_before_col_hidden) ? f.on_before_col_hidden : null;
|
|
//calls function after col is hidden
|
|
this.onAfterColHidden = _types.Types.isFn(f.on_after_col_hidden) ? f.on_after_col_hidden : null;
|
|
//calls function before col is displayed
|
|
this.onBeforeColDisplayed = _types.Types.isFn(f.on_before_col_displayed) ? f.on_before_col_displayed : null;
|
|
//calls function after col is displayed
|
|
this.onAfterColDisplayed = _types.Types.isFn(f.on_after_col_displayed) ? f.on_after_col_displayed : null;
|
|
|
|
//Grid layout compatibility
|
|
if (tf.gridLayout) {
|
|
this.headersTbl = tf.Cpt.gridLayout.headTbl; //headers table
|
|
this.headersIndex = 0; //headers index
|
|
this.onAfterColDisplayed = function () {};
|
|
this.onAfterColHidden = function () {};
|
|
}
|
|
|
|
//Loads extension stylesheet
|
|
tf.includeFile(f.name + 'Style', this.path + '/' + this.stylesheet, null, 'link');
|
|
|
|
this.tf = tf;
|
|
}
|
|
|
|
_createClass(ColsVisibility, [{
|
|
key: 'toggle',
|
|
value: function toggle(evt) {
|
|
var tf = this.tf;
|
|
var contDisplay = this.contEl.style.display;
|
|
var onBeforeOpen = this.onBeforeOpen;
|
|
var onBeforeClose = this.onBeforeClose;
|
|
var onAfterOpen = this.onAfterOpen;
|
|
var onAfterClose = this.onAfterClose;
|
|
|
|
if (onBeforeOpen && contDisplay !== 'inline') {
|
|
onBeforeOpen.call(null, this);
|
|
}
|
|
if (onBeforeClose && contDisplay === 'inline') {
|
|
onBeforeClose.call(null, this);
|
|
}
|
|
|
|
this.contEl.style.display = contDisplay === 'inline' ? 'none' : 'inline';
|
|
|
|
if (onAfterOpen && contDisplay !== 'inline') {
|
|
onAfterOpen.call(null, this);
|
|
}
|
|
if (onAfterClose && contDisplay === 'inline') {
|
|
onAfterClose.call(null, this);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'checkItem',
|
|
value: function checkItem(lbl) {
|
|
var li = lbl.parentNode;
|
|
if (!li || !lbl) {
|
|
return;
|
|
}
|
|
var isChecked = lbl.firstChild.checked;
|
|
var colIndex = lbl.firstChild.getAttribute('id').split('_')[1];
|
|
colIndex = parseInt(colIndex, 10);
|
|
if (isChecked) {
|
|
_dom.Dom.addClass(li, this.listSlcItemCssClass);
|
|
} else {
|
|
_dom.Dom.removeClass(li, this.listSlcItemCssClass);
|
|
}
|
|
|
|
var hide = false;
|
|
if (this.tickToHide && isChecked || !this.tickToHide && !isChecked) {
|
|
hide = true;
|
|
}
|
|
this.setHidden(colIndex, hide);
|
|
}
|
|
}, {
|
|
key: 'init',
|
|
value: function init() {
|
|
if (!this.manager) {
|
|
return;
|
|
}
|
|
this.buildBtn();
|
|
this.buildManager();
|
|
|
|
this.initialized = true;
|
|
}
|
|
}, {
|
|
key: 'buildBtn',
|
|
|
|
/**
|
|
* Build main button UI
|
|
*/
|
|
value: function buildBtn() {
|
|
var _this = this;
|
|
|
|
if (this.btnEl) {
|
|
return;
|
|
}
|
|
var tf = this.tf;
|
|
var span = _dom.Dom.create('span', ['id', this.prfx + tf.id]);
|
|
span.className = this.spanCssClass;
|
|
|
|
//Container element (rdiv or custom element)
|
|
if (!this.btnTgtId) {
|
|
tf.setToolbar();
|
|
}
|
|
var targetEl = !this.btnTgtId ? tf.rDiv : _dom.Dom.id(this.btnTgtId);
|
|
|
|
if (!this.btnTgtId) {
|
|
var firstChild = targetEl.firstChild;
|
|
firstChild.parentNode.insertBefore(span, firstChild);
|
|
} else {
|
|
targetEl.appendChild(span);
|
|
}
|
|
|
|
if (!this.btnHtml) {
|
|
var btn = _dom.Dom.create('a', ['href', 'javascript:;']);
|
|
btn.className = this.btnCssClass;
|
|
btn.title = this.extDesc;
|
|
|
|
btn.innerHTML = this.btnText;
|
|
span.appendChild(btn);
|
|
if (!this.enableHover) {
|
|
_event.Event.add(btn, 'click', function (evt) {
|
|
_this.toggle(evt);
|
|
});
|
|
} else {
|
|
_event.Event.add(btn, 'mouseover', function (evt) {
|
|
_this.toggle(evt);
|
|
});
|
|
}
|
|
} else {
|
|
//Custom html
|
|
span.innerHTML = this.btnHtml;
|
|
var colVisEl = span.firstChild;
|
|
if (!this.enableHover) {
|
|
_event.Event.add(colVisEl, 'click', function (evt) {
|
|
_this.toggle(evt);
|
|
});
|
|
} else {
|
|
_event.Event.add(colVisEl, 'mouseover', function (evt) {
|
|
_this.toggle(evt);
|
|
});
|
|
}
|
|
}
|
|
|
|
this.spanEl = span;
|
|
this.btnEl = this.spanEl.firstChild;
|
|
|
|
if (this.onLoaded) {
|
|
this.onLoaded.call(null, this);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'buildManager',
|
|
|
|
/**
|
|
* Build columns manager UI
|
|
*/
|
|
value: function buildManager() {
|
|
var _this2 = this;
|
|
|
|
var tf = this.tf;
|
|
|
|
var container = !this.contElTgtId ? _dom.Dom.create('div', ['id', this.prfxCont + tf.id]) : _dom.Dom.id(this.contElTgtId);
|
|
container.className = this.contCssClass;
|
|
|
|
//Extension description
|
|
var extNameLabel = _dom.Dom.create('p');
|
|
extNameLabel.innerHTML = this.text;
|
|
container.appendChild(extNameLabel);
|
|
|
|
//Headers list
|
|
var ul = _dom.Dom.create('ul', ['id', 'ul' + this.extName + '_' + tf.id]);
|
|
ul.className = this.listCssClass;
|
|
|
|
var tbl = this.headersTbl ? this.headersTbl : tf.tbl;
|
|
var headerIndex = this.headersTbl ? this.headersIndex : tf.getHeadersRowIndex();
|
|
var headerRow = tbl.rows[headerIndex];
|
|
|
|
//Tick all option
|
|
if (this.enableTickAll) {
|
|
var li = _dom.Dom.createCheckItem('col__' + tf.id, this.tickAllText, this.tickAllText);
|
|
_dom.Dom.addClass(li, this.listItemCssClass);
|
|
ul.appendChild(li);
|
|
li.check.checked = !this.tickToHide;
|
|
|
|
_event.Event.add(li.check, 'click', function (evt) {
|
|
for (var h = 0; h < headerRow.cells.length; h++) {
|
|
var itm = _dom.Dom.id('col_' + h + '_' + tf.id);
|
|
if (itm && li.check.checked !== itm.checked) {
|
|
itm.click();
|
|
itm.checked = li.check.checked;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
for (var i = 0; i < headerRow.cells.length; i++) {
|
|
var cell = headerRow.cells[i];
|
|
var cellText = this.headersText && this.headersText[i] ? this.headersText[i] : this._getHeaderText(cell);
|
|
var liElm = _dom.Dom.createCheckItem('col_' + i + '_' + tf.id, cellText, cellText);
|
|
_dom.Dom.addClass(liElm, this.listItemCssClass);
|
|
if (!this.tickToHide) {
|
|
_dom.Dom.addClass(liElm, this.listSlcItemCssClass);
|
|
}
|
|
ul.appendChild(liElm);
|
|
if (!this.tickToHide) {
|
|
liElm.check.checked = true;
|
|
}
|
|
|
|
_event.Event.add(liElm.check, 'click', function (evt) {
|
|
var elm = _event.Event.target(evt);
|
|
var lbl = elm.parentNode;
|
|
_this2.checkItem(lbl);
|
|
});
|
|
}
|
|
|
|
//separator
|
|
var p = _dom.Dom.create('p', ['align', 'center']);
|
|
var btn;
|
|
//Close link
|
|
if (!this.btnCloseHtml) {
|
|
btn = _dom.Dom.create('a', ['href', 'javascript:;']);
|
|
btn.className = this.btnCloseCssClass;
|
|
btn.innerHTML = this.btnCloseText;
|
|
_event.Event.add(btn, 'click', function (evt) {
|
|
_this2.toggle(evt);
|
|
});
|
|
p.appendChild(btn);
|
|
} else {
|
|
p.innerHTML = this.btnCloseHtml;
|
|
btn = p.firstChild;
|
|
_event.Event.add(btn, 'click', function (evt) {
|
|
_this2.toggle(evt);
|
|
});
|
|
}
|
|
|
|
container.appendChild(ul);
|
|
container.appendChild(p);
|
|
|
|
this.btnEl.parentNode.insertBefore(container, this.btnEl);
|
|
this.contEl = container;
|
|
|
|
if (this.atStart) {
|
|
var a = this.atStart;
|
|
for (var k = 0; k < a.length; k++) {
|
|
var itm = _dom.Dom.id('col_' + a[k] + '_' + tf.id);
|
|
if (itm) {
|
|
itm.click();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setHidden',
|
|
|
|
/**
|
|
* Hide or show specified columns
|
|
* @param {Numner} colIndex Column index
|
|
* @param {Boolean} hide hide column if true or show if false
|
|
*/
|
|
value: function setHidden(colIndex, hide) {
|
|
var tf = this.tf;
|
|
var tbl = tf.tbl;
|
|
var col = _dom.Dom.tag(tbl, 'col')[colIndex];
|
|
|
|
if (this.onBeforeColHidden && hide) {
|
|
this.onBeforeColHidden.call(null, this, colIndex);
|
|
}
|
|
if (this.onBeforeColDisplayed && !hide) {
|
|
this.onBeforeColDisplayed.call(null, this, colIndex);
|
|
}
|
|
|
|
this._hideCells(tbl, colIndex, hide);
|
|
if (this.headersTbl) {
|
|
this._hideCells(this.headersTbl, colIndex, hide);
|
|
}
|
|
|
|
var hiddenCols = this.hiddenCols;
|
|
if (hide) {
|
|
if (hiddenCols.indexOf(colIndex) === -1) {
|
|
this.hiddenCols.push(colIndex);
|
|
}
|
|
} else {
|
|
var itemIndex = _array.Arr.indexByValue(hiddenCols, colIndex, true);
|
|
if (hiddenCols.indexOf(colIndex) !== -1) {
|
|
this.hiddenCols.splice(itemIndex, 1);
|
|
}
|
|
}
|
|
|
|
var gridLayout;
|
|
var headTbl;
|
|
var gridColElms;
|
|
if (this.onAfterColHidden && hide) {
|
|
//This event is fired just after a column is displayed for
|
|
//grid_layout compatibility
|
|
if (tf.gridLayout) {
|
|
gridLayout = tf.Cpt.gridLayout;
|
|
headTbl = gridLayout.headTbl;
|
|
gridColElms = gridLayout.gridColElms;
|
|
if (_helpers.Helpers.isIE()) {
|
|
tbl.style.width = headTbl.clientWidth + 'px';
|
|
} else {
|
|
var ths = headTbl.rows[this.headersIndex].cells;
|
|
var hiddenWidth = 0;
|
|
for (var i = 0; i < tf.nbCells; i++) {
|
|
if (ths[i].style.display === 'none') {
|
|
var w = parseInt(ths[i].style.width, 10);
|
|
ths[i].style.width = 0;
|
|
hiddenWidth += w;
|
|
}
|
|
}
|
|
var headTblW = parseInt(headTbl.style.width, 10);
|
|
|
|
headTbl.style.width = headTblW - hiddenWidth + 'px';
|
|
tbl.style.width = headTbl.style.width;
|
|
gridColElms[colIndex].style.display = 'none';
|
|
}
|
|
}
|
|
this.onAfterColHidden.call(null, this, colIndex);
|
|
}
|
|
|
|
if (this.onAfterColDisplayed && !hide) {
|
|
//This event is fired just after a column is displayed for
|
|
//grid_layout compatibility
|
|
if (tf.gridLayout) {
|
|
gridLayout = tf.Cpt.gridLayout;
|
|
headTbl = gridLayout.headTbl;
|
|
gridColElms = gridLayout.gridColElms;
|
|
gridColElms[colIndex].style.display = '';
|
|
var width = parseInt(gridColElms[colIndex].style.width, 10);
|
|
var header = tf.getHeaderElement(colIndex);
|
|
header.style.width = width + 'px';
|
|
headTbl.style.width = parseInt(headTbl.style.width, 10) + width + 'px';
|
|
tf.tbl.style.width = headTbl.style.width;
|
|
}
|
|
this.onAfterColDisplayed.call(null, this, colIndex);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'showCol',
|
|
|
|
/**
|
|
* Show specified column
|
|
* @param {Number} colIndex Column index
|
|
*/
|
|
value: function showCol(colIndex) {
|
|
if (colIndex === undefined || !this.isColHidden(colIndex)) {
|
|
return;
|
|
}
|
|
if (this.manager && this.contEl) {
|
|
var itm = _dom.Dom.id('col_' + colIndex + '_' + this.tf.id);
|
|
if (itm) {
|
|
itm.click();
|
|
}
|
|
} else {
|
|
this.setHidden(colIndex, false);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'hideCol',
|
|
|
|
/**
|
|
* Hide specified column
|
|
* @param {Number} colIndex Column index
|
|
*/
|
|
value: function hideCol(colIndex) {
|
|
if (colIndex === undefined || this.isColHidden(colIndex)) {
|
|
return;
|
|
}
|
|
if (this.manager && this.contEl) {
|
|
var itm = _dom.Dom.id('col_' + colIndex + '_' + this.tf.id);
|
|
if (itm) {
|
|
itm.click();
|
|
}
|
|
} else {
|
|
this.setHidden(colIndex, true);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'isColHidden',
|
|
|
|
/**
|
|
* Determine if specified column is hidden
|
|
* @param {Number} colIndex Column index
|
|
*/
|
|
value: function isColHidden(colIndex) {
|
|
if (this.hiddenCols.indexOf(colIndex) !== -1) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
}, {
|
|
key: 'toggleCol',
|
|
|
|
/**
|
|
* Toggle visibility of specified column
|
|
* @param {Number} colIndex Column index
|
|
*/
|
|
value: function toggleCol(colIndex) {
|
|
if (colIndex === undefined || this.isColHidden(colIndex)) {
|
|
this.showCol(colIndex);
|
|
} else {
|
|
this.hideCol(colIndex);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getHiddenCols',
|
|
|
|
/**
|
|
* Returns the indexes of the columns currently hidden
|
|
* @return {Array} column indexes
|
|
*/
|
|
value: function getHiddenCols() {
|
|
return this.hiddenCols;
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
|
|
/**
|
|
* Remove the columns manager
|
|
*/
|
|
value: function destroy() {
|
|
if (!this.btnEl || !this.contEl) {
|
|
return;
|
|
}
|
|
if (_dom.Dom.id(this.contElTgtId)) {
|
|
_dom.Dom.id(this.contElTgtId).innerHTML = '';
|
|
} else {
|
|
this.contEl.innerHTML = '';
|
|
this.contEl.parentNode.removeChild(this.contEl);
|
|
this.contEl = null;
|
|
}
|
|
this.btnEl.innerHTML = '';
|
|
this.btnEl.parentNode.removeChild(this.btnEl);
|
|
this.btnEl = null;
|
|
this.initialized = false;
|
|
}
|
|
}, {
|
|
key: '_getHeaderText',
|
|
value: function _getHeaderText(cell) {
|
|
if (!cell.hasChildNodes) {
|
|
return '';
|
|
}
|
|
|
|
for (var i = 0; i < cell.childNodes.length; i++) {
|
|
var 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 _dom.Dom.getText(n);
|
|
}
|
|
}
|
|
continue;
|
|
}
|
|
return '';
|
|
}
|
|
}, {
|
|
key: '_hideCells',
|
|
value: function _hideCells(tbl, colIndex, hide) {
|
|
for (var i = 0; i < tbl.rows.length; i++) {
|
|
var row = tbl.rows[i];
|
|
var cell = row.cells[colIndex];
|
|
if (cell) {
|
|
cell.style.display = hide ? 'none' : '';
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return ColsVisibility;
|
|
})();
|
|
|
|
module.exports = ColsVisibility;
|
|
});
|
|
//# sourceMappingURL=colsVisibility.js.map
|