From eb9ac51b5ac7527bc7d83d569dc893c5d7a5dfb1 Mon Sep 17 00:00:00 2001 From: koalyptus Date: Mon, 2 Oct 2017 22:15:35 +1100 Subject: [PATCH] wip --- package.json | 2 +- src/const.js | 6 + src/modules/clearButton.js | 3 +- src/tablefilter.js | 270 ++++++++++++++++++------------------- 4 files changed, 144 insertions(+), 137 deletions(-) diff --git a/package.json b/package.json index 7613e894..8d6f124a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tablefilter", - "version": "0.5.42", + "version": "0.5.43", "description": "A Javascript library making HTML tables filterable and a bit more", "license": "MIT", "author": { diff --git a/src/const.js b/src/const.js index 48a7da68..219f4f2d 100644 --- a/src/const.js +++ b/src/const.js @@ -12,6 +12,7 @@ import {ClearButton} from './modules/clearButton'; import {AlternateRows} from './modules/alternateRows'; import {NoResults} from './modules/noResults'; import {Paging} from './modules/paging'; +import {Toolbar} from './modules/toolbar'; /** * Filter types @@ -196,5 +197,10 @@ export const FEATURES = { paging: { class: Paging, name: 'paging' + }, + toolbar: { + class: Toolbar, + name: 'toolbar', + enforce: true } }; diff --git a/src/modules/clearButton.js b/src/modules/clearButton.js index ccbf3577..1f9db184 100644 --- a/src/modules/clearButton.js +++ b/src/modules/clearButton.js @@ -92,7 +92,8 @@ export class ClearButton extends Feature { if (!this.targetId) { tf.setToolbar(); } - let targetEl = !this.targetId ? tf.rDiv : elm(this.targetId); + let targetEl = !this.targetId ? /*tf.rDiv*/ + tf.feature('toolbar').right() : elm(this.targetId); targetEl.appendChild(cont); if (!this.html) { diff --git a/src/tablefilter.js b/src/tablefilter.js index f38b2d60..cc52ecdf 100644 --- a/src/tablefilter.js +++ b/src/tablefilter.js @@ -222,58 +222,58 @@ export class TableFilter { */ this.validRowsIndex = []; - /** - * Toolbar's container DOM element - * @type {DOMElement} - * @private - */ - this.infDiv = null; + // /** + // * Toolbar's container DOM element + // * @type {DOMElement} + // * @private + // */ + // this.infDiv = null; - /** - * Left-side inner container DOM element (rows counter in toolbar) - * @type {DOMElement} - * @private - */ - this.lDiv = null; + // /** + // * Left-side inner container DOM element (rows counter in toolbar) + // * @type {DOMElement} + // * @private + // */ + // this.lDiv = null; - /** - * Right-side inner container DOM element (reset button, - * page length selector in toolbar) - * @type {DOMElement} - * @private - */ - this.rDiv = null; + // /** + // * Right-side inner container DOM element (reset button, + // * page length selector in toolbar) + // * @type {DOMElement} + // * @private + // */ + // this.rDiv = null; - /** - * Middle inner container DOM element (paging elements in toolbar) - * @type {DOMElement} - * @private - */ - this.mDiv = null; + // /** + // * Middle inner container DOM element (paging elements in toolbar) + // * @type {DOMElement} + // * @private + // */ + // this.mDiv = null; - /** - * Css class for toolbar's container DOM element - * @type {String} - */ - this.infDivCssClass = defaultsStr(f.inf_div_css_class, 'inf'); + // /** + // * Css class for toolbar's container DOM element + // * @type {String} + // */ + // this.infDivCssClass = defaultsStr(f.inf_div_css_class, 'inf'); - /** - * Css class for left-side inner container DOM element - * @type {String} - */ - this.lDivCssClass = defaultsStr(f.left_div_css_class, 'ldiv'); + // /** + // * Css class for left-side inner container DOM element + // * @type {String} + // */ + // this.lDivCssClass = defaultsStr(f.left_div_css_class, 'ldiv'); - /** - * Css class for right-side inner container DOM element - * @type {String} - */ - this.rDivCssClass = defaultsStr(f.right_div_css_class, 'rdiv'); + // /** + // * Css class for right-side inner container DOM element + // * @type {String} + // */ + // this.rDivCssClass = defaultsStr(f.right_div_css_class, 'rdiv'); - /** - * Css class for middle inner container DOM element - * @type {String} - */ - this.mDivCssClass = defaultsStr(f.middle_div_css_class, 'mdiv'); + // /** + // * Css class for middle inner container DOM element + // * @type {String} + // */ + // this.mDivCssClass = defaultsStr(f.middle_div_css_class, 'mdiv'); /*** filters' grid appearance ***/ /** @@ -483,11 +483,11 @@ export class TableFilter { */ this.isWatermarkArray = isArray(this.watermark); - /** - * Toolbar's custom container ID - * @type {String} - */ - this.toolBarTgtId = defaultsStr(f.toolbar_target_id, null); + // /** + // * Toolbar's custom container ID + // * @type {String} + // */ + // this.toolBarTgtId = defaultsStr(f.toolbar_target_id, null); /** * Indicate whether help UI component is disabled @@ -890,29 +890,29 @@ export class TableFilter { */ this.prfxValButton = 'btn'; - /** - * Toolbar container ID prefix - * @private - */ - this.prfxInfDiv = 'inf_'; + // /** + // * Toolbar container ID prefix + // * @private + // */ + // this.prfxInfDiv = 'inf_'; - /** - * Toolbar left element ID prefix - * @private - */ - this.prfxLDiv = 'ldiv_'; + // /** + // * Toolbar left element ID prefix + // * @private + // */ + // this.prfxLDiv = 'ldiv_'; - /** - * Toolbar right element ID prefix - * @private - */ - this.prfxRDiv = 'rdiv_'; + // /** + // * Toolbar right element ID prefix + // * @private + // */ + // this.prfxRDiv = 'rdiv_'; - /** - * Toolbar middle element ID prefix - * @private - */ - this.prfxMDiv = 'mdiv_'; + // /** + // * Toolbar middle element ID prefix + // * @private + // */ + // this.prfxMDiv = 'mdiv_'; /** * Responsive Css class @@ -1504,7 +1504,7 @@ export class TableFilter { this.removeExternalFlts(); } - this.removeToolbar(); + // this.removeToolbar(); this.destroyExtensions(); @@ -1536,78 +1536,78 @@ export class TableFilter { this.initialized = false; } - /** - * Generate container element for paging, reset button, rows counter etc. - */ - setToolbar() { - if (this.infDiv) { - return; - } + // /** + // * Generate container element for paging, reset button, rows counter etc. + // */ + // setToolbar() { + // if (this.infDiv) { + // return; + // } - /*** container div ***/ - let infDiv = createElm('div'); - infDiv.className = this.infDivCssClass; + // /*** container div ***/ + // let infDiv = createElm('div'); + // infDiv.className = this.infDivCssClass; - //custom container - if (this.toolBarTgtId) { - elm(this.toolBarTgtId).appendChild(infDiv); - } - //grid-layout - else if (this.gridLayout) { - let gridLayout = this.Mod.gridLayout; - gridLayout.tblMainCont.appendChild(infDiv); - infDiv.className = gridLayout.infDivCssClass; - } - //default location: just above the table - else { - let cont = createElm('caption'); - cont.appendChild(infDiv); - this.dom().insertBefore(cont, this.dom().firstChild); - } - this.infDiv = infDiv; + // //custom container + // if (this.toolBarTgtId) { + // elm(this.toolBarTgtId).appendChild(infDiv); + // } + // //grid-layout + // else if (this.gridLayout) { + // let gridLayout = this.Mod.gridLayout; + // gridLayout.tblMainCont.appendChild(infDiv); + // infDiv.className = gridLayout.infDivCssClass; + // } + // //default location: just above the table + // else { + // let cont = createElm('caption'); + // cont.appendChild(infDiv); + // this.dom().insertBefore(cont, this.dom().firstChild); + // } + // this.infDiv = infDiv; - /*** left div containing rows # displayer ***/ - let lDiv = createElm('div'); - lDiv.className = this.lDivCssClass; - infDiv.appendChild(lDiv); - this.lDiv = lDiv; + // /*** left div containing rows # displayer ***/ + // let lDiv = createElm('div'); + // lDiv.className = this.lDivCssClass; + // infDiv.appendChild(lDiv); + // this.lDiv = lDiv; - /*** right div containing reset button - + nb results per page select ***/ - let rDiv = createElm('div'); - rDiv.className = this.rDivCssClass; - infDiv.appendChild(rDiv); - this.rDiv = rDiv; + // /*** right div containing reset button + // + nb results per page select ***/ + // let rDiv = createElm('div'); + // rDiv.className = this.rDivCssClass; + // infDiv.appendChild(rDiv); + // this.rDiv = rDiv; - /*** mid div containing paging elements ***/ - let mDiv = createElm('div'); - mDiv.className = this.mDivCssClass; - infDiv.appendChild(mDiv); - this.mDiv = mDiv; + // /*** mid div containing paging elements ***/ + // let mDiv = createElm('div'); + // mDiv.className = this.mDivCssClass; + // infDiv.appendChild(mDiv); + // this.mDiv = mDiv; - // emit help initialisation only if undefined - if (isUndef(this.help)) { - // explicitily enable help to initialise feature by - // default, only if setting is undefined - this.Mod.help.enable(); - this.emitter.emit('init-help', this); - } - } + // // emit help initialisation only if undefined + // if (isUndef(this.help)) { + // // explicitily enable help to initialise feature by + // // default, only if setting is undefined + // this.Mod.help.enable(); + // this.emitter.emit('init-help', this); + // } + // } - /** - * Remove toolbar container element - */ - removeToolbar() { - if (!this.infDiv) { - return; - } - removeElm(this.infDiv); - this.infDiv = null; + // /** + // * Remove toolbar container element + // */ + // removeToolbar() { + // if (!this.infDiv) { + // return; + // } + // removeElm(this.infDiv); + // this.infDiv = null; - let tbl = this.dom(); - let captions = tag(tbl, 'caption'); - [].forEach.call(captions, (elm) => removeElm(elm)); - } + // let tbl = this.dom(); + // let captions = tag(tbl, 'caption'); + // [].forEach.call(captions, (elm) => removeElm(elm)); + // } /** * Remove all the external column filters