deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-31 21:12:59 +02:00
Code Issues Releases Wiki Activity

wip

Browse source
This commit is contained in:
koalyptus 2017-10-02 22:15:35 +11:00
parent d86601e1a1
commit eb9ac51b5a
4 changed files with 144 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "tablefilter", "name": "tablefilter",
"version": "0.5.42", "version": "0.5.43",
"description": "A Javascript library making HTML tables filterable and a bit more", "description": "A Javascript library making HTML tables filterable and a bit more",
"license": "MIT", "license": "MIT",
"author": { "author": {

6
src/const.js
View file

@ -12,6 +12,7 @@ import {ClearButton} from './modules/clearButton';
import {AlternateRows} from './modules/alternateRows'; import {AlternateRows} from './modules/alternateRows';
import {NoResults} from './modules/noResults'; import {NoResults} from './modules/noResults';
import {Paging} from './modules/paging'; import {Paging} from './modules/paging';
import {Toolbar} from './modules/toolbar';
/** /**
* Filter types * Filter types
@ -196,5 +197,10 @@ export const FEATURES = {
paging: { paging: {
class: Paging, class: Paging,
name: 'paging' name: 'paging'
},
toolbar: {
class: Toolbar,
name: 'toolbar',
enforce: true
} }
}; };

3
src/modules/clearButton.js
View file

@ -92,7 +92,8 @@ export class ClearButton extends Feature {
if (!this.targetId) { if (!this.targetId) {
tf.setToolbar(); 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); targetEl.appendChild(cont);
if (!this.html) { if (!this.html) {

270
src/tablefilter.js
View file

@ -222,58 +222,58 @@ export class TableFilter {
*/ */
this.validRowsIndex = []; this.validRowsIndex = [];
/** // /**
* Toolbar's container DOM element // * Toolbar's container DOM element
* @type {DOMElement} // * @type {DOMElement}
* @private // * @private
*/ // */
this.infDiv = null; // this.infDiv = null;
/** // /**
* Left-side inner container DOM element (rows counter in toolbar) // * Left-side inner container DOM element (rows counter in toolbar)
* @type {DOMElement} // * @type {DOMElement}
* @private // * @private
*/ // */
this.lDiv = null; // this.lDiv = null;
/** // /**
* Right-side inner container DOM element (reset button, // * Right-side inner container DOM element (reset button,
* page length selector in toolbar) // * page length selector in toolbar)
* @type {DOMElement} // * @type {DOMElement}
* @private // * @private
*/ // */
this.rDiv = null; // this.rDiv = null;
/** // /**
* Middle inner container DOM element (paging elements in toolbar) // * Middle inner container DOM element (paging elements in toolbar)
* @type {DOMElement} // * @type {DOMElement}
* @private // * @private
*/ // */
this.mDiv = null; // this.mDiv = null;
/** // /**
* Css class for toolbar's container DOM element // * Css class for toolbar's container DOM element
* @type {String} // * @type {String}
*/ // */
this.infDivCssClass = defaultsStr(f.inf_div_css_class, 'inf'); // this.infDivCssClass = defaultsStr(f.inf_div_css_class, 'inf');
/** // /**
* Css class for left-side inner container DOM element // * Css class for left-side inner container DOM element
* @type {String} // * @type {String}
*/ // */
this.lDivCssClass = defaultsStr(f.left_div_css_class, 'ldiv'); // this.lDivCssClass = defaultsStr(f.left_div_css_class, 'ldiv');
/** // /**
* Css class for right-side inner container DOM element // * Css class for right-side inner container DOM element
* @type {String} // * @type {String}
*/ // */
this.rDivCssClass = defaultsStr(f.right_div_css_class, 'rdiv'); // this.rDivCssClass = defaultsStr(f.right_div_css_class, 'rdiv');
/** // /**
* Css class for middle inner container DOM element // * Css class for middle inner container DOM element
* @type {String} // * @type {String}
*/ // */
this.mDivCssClass = defaultsStr(f.middle_div_css_class, 'mdiv'); // this.mDivCssClass = defaultsStr(f.middle_div_css_class, 'mdiv');
/*** filters' grid appearance ***/ /*** filters' grid appearance ***/
/** /**
@ -483,11 +483,11 @@ export class TableFilter {
*/ */
this.isWatermarkArray = isArray(this.watermark); this.isWatermarkArray = isArray(this.watermark);
/** // /**
* Toolbar's custom container ID // * Toolbar's custom container ID
* @type {String} // * @type {String}
*/ // */
this.toolBarTgtId = defaultsStr(f.toolbar_target_id, null); // this.toolBarTgtId = defaultsStr(f.toolbar_target_id, null);
/** /**
* Indicate whether help UI component is disabled * Indicate whether help UI component is disabled
@ -890,29 +890,29 @@ export class TableFilter {
*/ */
this.prfxValButton = 'btn'; this.prfxValButton = 'btn';
/** // /**
* Toolbar container ID prefix // * Toolbar container ID prefix
* @private // * @private
*/ // */
this.prfxInfDiv = 'inf_'; // this.prfxInfDiv = 'inf_';
/** // /**
* Toolbar left element ID prefix // * Toolbar left element ID prefix
* @private // * @private
*/ // */
this.prfxLDiv = 'ldiv_'; // this.prfxLDiv = 'ldiv_';
/** // /**
* Toolbar right element ID prefix // * Toolbar right element ID prefix
* @private // * @private
*/ // */
this.prfxRDiv = 'rdiv_'; // this.prfxRDiv = 'rdiv_';
/** // /**
* Toolbar middle element ID prefix // * Toolbar middle element ID prefix
* @private // * @private
*/ // */
this.prfxMDiv = 'mdiv_'; // this.prfxMDiv = 'mdiv_';
/** /**
* Responsive Css class * Responsive Css class
@ -1504,7 +1504,7 @@ export class TableFilter {
this.removeExternalFlts(); this.removeExternalFlts();
} }
this.removeToolbar(); // this.removeToolbar();
this.destroyExtensions(); this.destroyExtensions();
@ -1536,78 +1536,78 @@ export class TableFilter {
this.initialized = false; this.initialized = false;
} }
/** // /**
* Generate container element for paging, reset button, rows counter etc. // * Generate container element for paging, reset button, rows counter etc.
*/ // */
setToolbar() { // setToolbar() {
if (this.infDiv) { // if (this.infDiv) {
return; // return;
} // }
/*** container div ***/ // /*** container div ***/
let infDiv = createElm('div'); // let infDiv = createElm('div');
infDiv.className = this.infDivCssClass; // infDiv.className = this.infDivCssClass;
//custom container // //custom container
if (this.toolBarTgtId) { // if (this.toolBarTgtId) {
elm(this.toolBarTgtId).appendChild(infDiv); // elm(this.toolBarTgtId).appendChild(infDiv);
} // }
//grid-layout // //grid-layout
else if (this.gridLayout) { // else if (this.gridLayout) {
let gridLayout = this.Mod.gridLayout; // let gridLayout = this.Mod.gridLayout;
gridLayout.tblMainCont.appendChild(infDiv); // gridLayout.tblMainCont.appendChild(infDiv);
infDiv.className = gridLayout.infDivCssClass; // infDiv.className = gridLayout.infDivCssClass;
} // }
//default location: just above the table // //default location: just above the table
else { // else {
let cont = createElm('caption'); // let cont = createElm('caption');
cont.appendChild(infDiv); // cont.appendChild(infDiv);
this.dom().insertBefore(cont, this.dom().firstChild); // this.dom().insertBefore(cont, this.dom().firstChild);
} // }
this.infDiv = infDiv; // this.infDiv = infDiv;
/*** left div containing rows # displayer ***/ // /*** left div containing rows # displayer ***/
let lDiv = createElm('div'); // let lDiv = createElm('div');
lDiv.className = this.lDivCssClass; // lDiv.className = this.lDivCssClass;
infDiv.appendChild(lDiv); // infDiv.appendChild(lDiv);
this.lDiv = lDiv; // this.lDiv = lDiv;
/*** right div containing reset button // /*** right div containing reset button
+ nb results per page select ***/ // + nb results per page select ***/
let rDiv = createElm('div'); // let rDiv = createElm('div');
rDiv.className = this.rDivCssClass; // rDiv.className = this.rDivCssClass;
infDiv.appendChild(rDiv); // infDiv.appendChild(rDiv);
this.rDiv = rDiv; // this.rDiv = rDiv;
/*** mid div containing paging elements ***/ // /*** mid div containing paging elements ***/
let mDiv = createElm('div'); // let mDiv = createElm('div');
mDiv.className = this.mDivCssClass; // mDiv.className = this.mDivCssClass;
infDiv.appendChild(mDiv); // infDiv.appendChild(mDiv);
this.mDiv = mDiv; // this.mDiv = mDiv;
// emit help initialisation only if undefined // // emit help initialisation only if undefined
if (isUndef(this.help)) { // if (isUndef(this.help)) {
// explicitily enable help to initialise feature by // // explicitily enable help to initialise feature by
// default, only if setting is undefined // // default, only if setting is undefined
this.Mod.help.enable(); // this.Mod.help.enable();
this.emitter.emit('init-help', this); // this.emitter.emit('init-help', this);
} // }
} // }
/** // /**
* Remove toolbar container element // * Remove toolbar container element
*/ // */
removeToolbar() { // removeToolbar() {
if (!this.infDiv) { // if (!this.infDiv) {
return; // return;
} // }
removeElm(this.infDiv); // removeElm(this.infDiv);
this.infDiv = null; // this.infDiv = null;
let tbl = this.dom(); // let tbl = this.dom();
let captions = tag(tbl, 'caption'); // let captions = tag(tbl, 'caption');
[].forEach.call(captions, (elm) => removeElm(elm)); // [].forEach.call(captions, (elm) => removeElm(elm));
} // }
/** /**
* Remove all the external column filters * Remove all the external column filters