From 7370173811974f75d58d2a7b8f5c941060403499 Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Thu, 10 Nov 2016 14:16:57 +1100 Subject: [PATCH] Removed unnecessary DOM element IDs --- dist/starter.html | 4 +- dist/tablefilter/style/colsVisibility.css | 2 +- dist/tablefilter/style/filtersVisibility.css | 2 +- dist/tablefilter/style/tablefilter.css | 2 +- .../style/themes/default/default.css | 2 +- .../style/themes/mytheme/mytheme.css | 2 +- .../style/themes/skyblue/skyblue.css | 2 +- dist/tablefilter/tablefilter.js | 108 +++++++++--------- src/const.js | 6 - src/dom.js | 20 ++-- src/modules/checkList.js | 23 ++-- src/modules/dropdown.js | 5 +- src/modules/gridLayout.js | 6 +- src/modules/popupFilter.js | 10 +- src/tablefilter.js | 67 ++++++----- test/test.js | 3 +- 16 files changed, 139 insertions(+), 125 deletions(-) diff --git a/dist/starter.html b/dist/starter.html index 9c35c1da..c2a8c895 100644 --- a/dist/starter.html +++ b/dist/starter.html @@ -1,10 +1,10 @@ - tablefilter v0.4.8 - Starter + tablefilter v0.4.9 - Starter -

tablefilter v0.4.8

+

tablefilter v0.4.9

diff --git a/dist/tablefilter/style/colsVisibility.css b/dist/tablefilter/style/colsVisibility.css index 169d257f..24bcb5ea 100644 --- a/dist/tablefilter/style/colsVisibility.css +++ b/dist/tablefilter/style/colsVisibility.css @@ -1,6 +1,6 @@ /** * tablefilter v0.4.9 by Max Guglielmi - * build date: 2016-11-08T10:52:07.338Z + * build date: 2016-11-10T02:54:44.971Z * MIT License */ span.colVisSpan{text-align:left;}span.colVisSpan a.colVis{display:inline-block;padding:7px 5px 0;font-size:inherit;font-weight:inherit;vertical-align:top}div.colVisCont{position:relative;background:#fff;-webkit-box-shadow:3px 3px 2px #888;-moz-box-shadow:3px 3px 2px #888;box-shadow:3px 3px 2px #888;position:absolute;display:none;border:1px solid #ccc;height:auto;width:250px;background-color:#fff;margin:35px 0 0 -100px;z-index:10000;padding:10px 10px 10px 10px;text-align:left;font-size:12px;}div.colVisCont:after,div.colVisCont:before{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.colVisCont:after{border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:10px;margin-left:-10px}div.colVisCont:before{border-color:rgba(255,255,255,0);border-bottom-color:#ccc;border-width:12px;margin-left:-12px}div.colVisCont p{margin:6px auto 6px auto}div.colVisCont a.colVis{display:initial;font-weight:inherit}ul.cols_checklist{padding:0;margin:0;list-style:none;}ul.cols_checklist label{display:block}ul.cols_checklist input{vertical-align:middle;margin:2px 5px 2px 1px}li.cols_checklist_item{padding:4px;margin:0;}li.cols_checklist_item:hover{background-color:#335ea8;color:#fff}.cols_checklist_slc_item{background-color:#335ea8;color:#fff} \ No newline at end of file diff --git a/dist/tablefilter/style/filtersVisibility.css b/dist/tablefilter/style/filtersVisibility.css index d5ef1a5c..8697ddb1 100644 --- a/dist/tablefilter/style/filtersVisibility.css +++ b/dist/tablefilter/style/filtersVisibility.css @@ -1,6 +1,6 @@ /** * tablefilter v0.4.9 by Max Guglielmi - * build date: 2016-11-08T10:52:07.338Z + * build date: 2016-11-10T02:54:44.971Z * MIT License */ span.expClpFlt a.btnExpClpFlt{width:35px;height:35px;display:inline-block;}span.expClpFlt a.btnExpClpFlt:hover{background-color:#f4f4f4}span.expClpFlt img{padding:8px 11px 11px 11px} \ No newline at end of file diff --git a/dist/tablefilter/style/tablefilter.css b/dist/tablefilter/style/tablefilter.css index 9feb51e1..9429fb1a 100644 --- a/dist/tablefilter/style/tablefilter.css +++ b/dist/tablefilter/style/tablefilter.css @@ -1,6 +1,6 @@ /** * tablefilter v0.4.9 by Max Guglielmi - * build date: 2016-11-08T10:52:07.338Z + * build date: 2016-11-10T02:54:44.971Z * MIT License */ .activeHeader{background-color:#66afe9 !important;color:#fff !important} diff --git a/dist/tablefilter/style/themes/default/default.css b/dist/tablefilter/style/themes/default/default.css index 0dd56671..4173e5cc 100644 --- a/dist/tablefilter/style/themes/default/default.css +++ b/dist/tablefilter/style/themes/default/default.css @@ -1,6 +1,6 @@ /** * tablefilter v0.4.9 by Max Guglielmi - * build date: 2016-11-08T10:52:07.338Z + * build date: 2016-11-10T02:54:44.971Z * MIT License */ table.TF{border-left:1px solid #ccc;border-top:none;border-right:none;border-bottom:none;}table.TF th{background:#ebecee url("images/bg_th.jpg") left top repeat-x;border-bottom:1px solid #d0d0d0;border-right:1px solid #d0d0d0;border-left:1px solid #fff;border-top:1px solid #fff;color:#333}table.TF td{border-bottom:1px dotted #999;padding:5px}.fltrow{background-color:#ebecee !important;}.fltrow th,.fltrow td{border-bottom:1px dotted #666 !important;padding:1px 3px 1px 3px !important}.flt,select.flt,select.flt_multi,.flt_s,.single_flt,.div_checklist{border:1px solid #999 !important}input.flt{width:99% !important}.inf{height:$min-height;background:#d7d7d7 url("images/bg_infDiv.jpg") 0 0 repeat-x !important}input.reset{background:transparent url("images/btn_eraser.gif") center center no-repeat !important}.helpBtn:hover{background-color:transparent}.nextPage{background:transparent url("images/btn_next_page.gif") center center no-repeat !important;}.nextPage:hover{background:transparent url("images/btn_over_next_page.gif") center center no-repeat !important}.previousPage{background:transparent url("images/btn_previous_page.gif") center center no-repeat !important;}.previousPage:hover{background:transparent url("images/btn_over_previous_page.gif") center center no-repeat !important}.firstPage{background:transparent url("images/btn_first_page.gif") center center no-repeat !important;}.firstPage:hover{background:transparent url("images/btn_over_first_page.gif") center center no-repeat !important}.lastPage{background:transparent url("images/btn_last_page.gif") center center no-repeat !important;}.lastPage:hover{background:transparent url("images/btn_over_last_page.gif") center center no-repeat !important}div.grd_Cont{background-color:#ebecee !important;border:1px solid #ccc !important;padding:0 !important;}div.grd_Cont .even{background-color:#fff}div.grd_Cont .odd{background-color:#d5d5d5}div.grd_headTblCont{background-color:#ebecee !important;border-bottom:none !important;}div.grd_headTblCont table{border-right:none !important}div.grd_tblCont table th,div.grd_headTblCont table th,div.grd_headTblCont table td{background:#ebecee url("images/bg_th.jpg") left top repeat-x !important;border-bottom:1px solid #d0d0d0 !important;border-right:1px solid #d0d0d0 !important;border-left:1px solid #fff !important;border-top:1px solid #fff !important}div.grd_tblCont table td{border-bottom:1px solid #999 !important}.grd_inf{background:#d7d7d7 url("images/bg_infDiv.jpg") 0 0 repeat-x !important;border-top:1px solid #d0d0d0 !important}.loader{border:1px solid #999}.defaultLoader{width:32px;height:32px;background:transparent url("images/img_loading.gif") 0 0 no-repeat !important}.even{background-color:#fff}.odd{background-color:#d5d5d5}span.expClpFlt a.btnExpClpFlt:hover{background-color:transparent !important}.activeHeader{background:#999 !important} \ No newline at end of file diff --git a/dist/tablefilter/style/themes/mytheme/mytheme.css b/dist/tablefilter/style/themes/mytheme/mytheme.css index 5c193a2e..be4f0e09 100644 --- a/dist/tablefilter/style/themes/mytheme/mytheme.css +++ b/dist/tablefilter/style/themes/mytheme/mytheme.css @@ -1,6 +1,6 @@ /** * tablefilter v0.4.9 by Max Guglielmi - * build date: 2016-11-08T10:52:07.338Z + * build date: 2016-11-10T02:54:44.971Z * MIT License */ table.TF{border-left:1px dotted #81963b;border-top:none;border-right:0;border-bottom:none;}table.TF th{background:#39424b url("images/bg_headers.jpg") left top repeat-x;border-bottom:0;border-right:1px dotted #d0d0d0;border-left:0;border-top:0;color:#fff}table.TF td{border-bottom:1px dotted #81963b;border-right:1px dotted #81963b;padding:5px}.fltrow{background-color:#81963b !important;}.fltrow th,.fltrow td{border-bottom:1px dotted #39424b !important;border-right:1px dotted #fff !important;border-left:0 !important;border-top:0 !important;padding:1px 3px 1px 3px !important}.flt,select.flt,select.flt_multi,.flt_s,.single_flt,.div_checklist{border:1px solid #687830 !important}input.flt{width:99% !important}.inf{background:#d8d8d8;height:$min-height}input.reset{width:53px;background:transparent url("images/btn_filter.png") center center no-repeat !important}.helpBtn:hover{background-color:transparent}.nextPage{background:transparent url("images/btn_next_page.gif") center center no-repeat !important}.previousPage{background:transparent url("images/btn_previous_page.gif") center center no-repeat !important}.firstPage{background:transparent url("images/btn_first_page.gif") center center no-repeat !important}.lastPage{background:transparent url("images/btn_last_page.gif") center center no-repeat !important}div.grd_Cont{background:#81963b url("images/bg_headers.jpg") left top repeat-x !important;border:1px solid #ccc !important;padding:0 1px 1px 1px !important;}div.grd_Cont .even{background-color:#bccd83}div.grd_Cont .odd{background-color:#fff}div.grd_headTblCont{background-color:#ebecee !important;border-bottom:none !important}div.grd_tblCont table{border-right:none !important;}div.grd_tblCont table td{border-bottom:1px dotted #81963b;border-right:1px dotted #81963b}div.grd_tblCont table th,div.grd_headTblCont table th{background:transparent url("images/bg_headers.jpg") 0 0 repeat-x !important;border-bottom:0 !important;border-right:1px dotted #d0d0d0 !important;border-left:0 !important;border-top:0 !important;padding:0 4px 0 4px !important;color:#fff !important;height:35px !important}div.grd_headTblCont table td{border-bottom:1px dotted #39424b !important;border-right:1px dotted #fff !important;border-left:0 !important;border-top:0 !important;background-color:#81963b !important;padding:1px 3px 1px 3px !important}.grd_inf{background-color:#d8d8d8;border-top:1px solid #d0d0d0 !important}.loader{border:0 !important;background:#81963b !important}.defaultLoader{width:32px;height:32px;background:transparent url("images/img_loading.gif") 0 0 no-repeat !important}.even{background-color:#bccd83}.odd{background-color:#fff}span.expClpFlt a.btnExpClpFlt:hover{background-color:transparent !important}.activeHeader{background:#81963b !important} \ No newline at end of file diff --git a/dist/tablefilter/style/themes/skyblue/skyblue.css b/dist/tablefilter/style/themes/skyblue/skyblue.css index ec24dcec..0bdbfb11 100644 --- a/dist/tablefilter/style/themes/skyblue/skyblue.css +++ b/dist/tablefilter/style/themes/skyblue/skyblue.css @@ -1,6 +1,6 @@ /** * tablefilter v0.4.9 by Max Guglielmi - * build date: 2016-11-08T10:52:07.338Z + * build date: 2016-11-10T02:54:44.971Z * MIT License */ table.TF{padding:0;color:#000;border-right:1px solid #a4bed4;border-top:1px solid #a4bed4;border-left:1px solid #a4bed4;border-bottom:0;}table.TF th{margin:0;color:inherit;background:#d1e5fe url("images/bg_skyblue.gif") 0 0 repeat-x;border-color:#fdfdfd #a4bed4 #a4bed4 #fdfdfd;border-width:1px;border-style:solid}table.TF td{margin:0;padding:5px;color:inherit;border-bottom:1px solid #a4bed4;border-left:0;border-top:0;border-right:0}.fltrow{background-color:#d1e5fe !important;}.fltrow th,.fltrow td{padding:1px 3px 1px 3px !important}.flt,select.flt,select.flt_multi,.flt_s,.single_flt,.div_checklist{border:1px solid #a4bed4 !important}input.flt{width:99% !important}.inf{background-color:#e3efff !important;border:1px solid #a4bed4;height:$min-height;color:#004a6f}div.tot,div.status{border-right:0 !important}.helpBtn:hover{background-color:transparent}input.reset{background:transparent url("images/icn_clear_filters.png") center center no-repeat !important}.nextPage{background:transparent url("images/btn_next_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.nextPage:hover{background:#ffe4ab url("images/btn_next_page.gif") center center no-repeat !important;border:1px solid #ffb552 !important}.previousPage{background:transparent url("images/btn_prev_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.previousPage:hover{background:#ffe4ab url("images/btn_prev_page.gif") center center no-repeat !important;border:1px solid #ffb552 !important}.firstPage{background:transparent url("images/btn_first_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.firstPage:hover{background:#ffe4ab url("images/btn_first_page.gif") center center no-repeat !important;border:1px solid #ffb552 !important}.lastPage{background:transparent url("images/btn_last_page.gif") center center no-repeat !important;border:1px solid transparent !important;}.lastPage:hover{background:#ffe4ab url("images/btn_last_page.gif") center center no-repeat !important;border:1px solid #ffb552 !important}.activeHeader{background:#ffe4ab !important;border:1px solid #ffb552 !important;color:inherit !important}div.grd_Cont{background-color:#d9eaed !important;border:1px solid #9cc !important;padding:0 !important;}div.grd_Cont .even{background-color:#fff}div.grd_Cont .odd{background-color:#e3efff}div.grd_headTblCont{background-color:#d9eaed !important;border-bottom:none !important}div.grd_tblCont table{border-right:none !important}div.grd_tblCont table th,div.grd_headTblCont table th,div.grd_headTblCont table td{background:#d9eaed url("images/bg_skyblue.gif") left top repeat-x;border-bottom:1px solid #a4bed4;border-right:1px solid #a4bed4 !important;border-left:1px solid #fff !important;border-top:1px solid #fff !important}div.grd_tblCont table td{border-bottom:1px solid #a4bed4 !important;border-right:0 !important;border-left:0 !important;border-top:0 !important}.grd_inf{background-color:#cce2fe;color:#004a6f;border-top:1px solid #9cc !important;}.grd_inf a{text-decoration:none;font-weight:bold}.loader{background-color:#2d8eef;border:1px solid #cce2fe;border-radius:5px}.even{background-color:#fff}.odd{background-color:#e3efff}span.expClpFlt a.btnExpClpFlt:hover{background-color:transparent !important}.ezActiveRow{background-color:#ffdc61 !important;color:inherit}.ezSelectedRow{background-color:#ffe4ab !important;color:inherit}.ezActiveCell{background-color:#fff !important;color:#000 !important;font-weight:bold}.ezETSelectedCell{background-color:#fff !important;font-weight:bold;color:#000 !important} \ No newline at end of file diff --git a/dist/tablefilter/tablefilter.js b/dist/tablefilter/tablefilter.js index bc74f7ad..466265b4 100644 --- a/dist/tablefilter/tablefilter.js +++ b/dist/tablefilter/tablefilter.js @@ -1482,10 +1482,10 @@ return /******/ (function(modules) { // webpackBootstrap var col = this.getFilterType(colIndex); var externalFltTgtId = this.isExternalFlt ? this.externalFltTgtIds[colIndex] : null; - var inptype = col === _const.INPUT ? 'text' : 'hidden'; - var inp = (0, _dom.createElm)(_const.INPUT, ['id', this.prfxFlt + colIndex + '_' + this.id], ['type', inptype], ['ct', colIndex]); + var inpType = col === _const.INPUT ? 'text' : 'hidden'; + var inp = (0, _dom.createElm)(_const.INPUT, ['id', this.buildFilterId(colIndex)], ['type', inpType], ['ct', colIndex]); - if (inptype !== 'hidden' && this.watermark) { + if (inpType !== 'hidden' && this.watermark) { inp.setAttribute('placeholder', this.isWatermarkArray ? this.watermark[colIndex] || '' : this.watermark); } inp.className = cssClass || this.fltCssClass; @@ -1527,7 +1527,7 @@ return /******/ (function(modules) { // webpackBootstrap var _this4 = this; var externalFltTgtId = this.isExternalFlt ? this.externalFltTgtIds[colIndex] : null; - var btn = (0, _dom.createElm)(_const.INPUT, ['id', this.prfxValButton + colIndex + '_' + this.id], ['type', 'button'], ['value', this.btnText]); + var btn = (0, _dom.createElm)(_const.INPUT, ['type', 'button'], ['value', this.btnText]); btn.className = this.btnCssClass; //filter is appended in custom element @@ -1784,45 +1784,45 @@ return /******/ (function(modules) { // webpackBootstrap } /*** container div ***/ - var infdiv = (0, _dom.createElm)('div', ['id', this.prfxInfDiv + this.id]); - infdiv.className = this.infDivCssClass; + var infDiv = (0, _dom.createElm)('div'); + infDiv.className = this.infDivCssClass; //custom container if (this.toolBarTgtId) { - (0, _dom.elm)(this.toolBarTgtId).appendChild(infdiv); + (0, _dom.elm)(this.toolBarTgtId).appendChild(infDiv); } //grid-layout else if (this.gridLayout) { var gridLayout = this.Mod.gridLayout; - gridLayout.tblMainCont.appendChild(infdiv); - infdiv.className = gridLayout.infDivCssClass; + gridLayout.tblMainCont.appendChild(infDiv); + infDiv.className = gridLayout.infDivCssClass; } //default location: just above the table else { var cont = (0, _dom.createElm)('caption'); - cont.appendChild(infdiv); + cont.appendChild(infDiv); this.tbl.insertBefore(cont, this.tbl.firstChild); } - this.infDiv = (0, _dom.elm)(this.prfxInfDiv + this.id); + this.infDiv = infDiv; /*** left div containing rows # displayer ***/ - var ldiv = (0, _dom.createElm)('div', ['id', this.prfxLDiv + this.id]); - ldiv.className = this.lDivCssClass; - infdiv.appendChild(ldiv); - this.lDiv = (0, _dom.elm)(this.prfxLDiv + this.id); + var lDiv = (0, _dom.createElm)('div'); + lDiv.className = this.lDivCssClass; + infDiv.appendChild(lDiv); + this.lDiv = lDiv; /*** right div containing reset button + nb results per page select ***/ - var rdiv = (0, _dom.createElm)('div', ['id', this.prfxRDiv + this.id]); - rdiv.className = this.rDivCssClass; - infdiv.appendChild(rdiv); - this.rDiv = (0, _dom.elm)(this.prfxRDiv + this.id); + var rDiv = (0, _dom.createElm)('div'); + rDiv.className = this.rDivCssClass; + infDiv.appendChild(rDiv); + this.rDiv = rDiv; /*** mid div containing paging elements ***/ - var mdiv = (0, _dom.createElm)('div', ['id', this.prfxMDiv + this.id]); - mdiv.className = this.mDivCssClass; - infdiv.appendChild(mdiv); - this.mDiv = (0, _dom.elm)(this.prfxMDiv + this.id); + var mDiv = (0, _dom.createElm)('div'); + mDiv.className = this.mDivCssClass; + infDiv.appendChild(mDiv); + this.mDiv = mDiv; // emit help initialisation only if undefined if ((0, _types.isUndef)(this.help)) { @@ -2741,7 +2741,7 @@ return /******/ (function(modules) { // webpackBootstrap if (tblHasColTag) { col = colTags[k]; } else { - col = (0, _dom.createElm)('col', ['id', this.id + '_col_' + k]); + col = (0, _dom.createElm)('col'); frag.appendChild(col); } col.style.width = colWidths[k]; @@ -2863,11 +2863,23 @@ return /******/ (function(modules) { // webpackBootstrap return parseInt(idx, 10); }; + /** + * Builds filter element ID for a given column index + * @param {any} colIndex + * @returns {String} Filter element ID string + * @private + */ + + + TableFilter.prototype.buildFilterId = function buildFilterId(colIndex) { + return '' + this.prfxFlt + colIndex + '_' + this.id; + }; + TableFilter.prototype.buildId = function buildId(tpl) { var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - data.id = tf.id; - data.prfxFlt = tf.prfxFlt; + data.id = this.id; + data.prfxFlt = this.prfxFlt; return tpl.replace(/\{([\w\.]*)\}/g, function (str, key) { return data[key]; }); @@ -3536,15 +3548,15 @@ return /******/ (function(modules) { // webpackBootstrap /** * Creates and returns a checklist item - * @param {Number} chkIndex index of check item + * @param {String} id index of check item * @param {String} chkValue check item value * @param {String} labelText check item label text * @return {Object} li DOM element */ - var createCheckItem = exports.createCheckItem = function createCheckItem(chkIndex, chkValue, labelText) { + var createCheckItem = exports.createCheckItem = function createCheckItem(id, chkValue, labelText) { var li = createElm('li'); - var label = createElm('label', ['for', chkIndex]); - var check = createElm('input', ['id', chkIndex], ['name', chkIndex], ['type', 'checkbox'], ['value', chkValue]); + var label = createElm('label', ['for', id]); + var check = createElm('input', ['id', id], ['name', id], ['type', 'checkbox'], ['value', chkValue]); label.appendChild(check); label.appendChild(createText(labelText)); li.appendChild(label); @@ -4610,7 +4622,8 @@ return /******/ (function(modules) { // webpackBootstrap if (this.enableFilters && tf.fltGrid) { tf.externalFltTgtIds = []; for (var j = 0; j < tf.getCellsNb(); j++) { - var fltTdId = tf.prfxFlt + j + this.prfxGridFltTd + tf.id; + // let fltTdId = tf.prfxFlt + j + this.prfxGridFltTd + tf.id; + var fltTdId = '' + (tf.prfxFlt + j + this.prfxGridFltTd + tf.id); var cl = (0, _dom.createElm)(tf.fltCellTag, ['id', fltTdId]); filtersRow.appendChild(cl); tf.externalFltTgtIds[j] = fltTdId; @@ -4699,6 +4712,7 @@ return /******/ (function(modules) { // webpackBootstrap var c = row.cells[n]; var thId = c.getAttribute('id'); if (!thId || thId === '') { + // thId = this.prfxGridTh + n + '_' + tf.id; thId = this.prfxGridTh + n + '_' + tf.id; c.setAttribute('id', thId); } @@ -4988,12 +5002,6 @@ return /******/ (function(modules) { // webpackBootstrap * @type {Number} */ var AUTO_FILTER_DELAY = exports.AUTO_FILTER_DELAY = 750; - - /** - * Filter ID template - * @type {String} - */ - var FILTER_ID_TPL = exports.FILTER_ID_TPL = '{prfxFlt}{colIndex}_{id}'; /***/ }, /* 12 */ @@ -5666,8 +5674,7 @@ return /******/ (function(modules) { // webpackBootstrap PopupFilter.prototype.build = function build(colIndex, div) { var tf = this.tf; var contId = tf.buildId(CONTAINER_ID_TPL, { colIndex: colIndex, prefix: this.prfxDiv }); - var popUpDiv = div || (0, _dom.createElm)('div', /*['id', this.prfxDiv + tf.id + '_' + colIndex]*/ - ['id', contId]); + var popUpDiv = div || (0, _dom.createElm)('div', ['id', contId]); popUpDiv.className = this.containerCssClass; tf.externalFltTgtIds.push(popUpDiv.id); var header = tf.getHeaderElement(colIndex); @@ -5950,9 +5957,7 @@ return /******/ (function(modules) { // webpackBootstrap var col = tf.getFilterType(colIndex); var externalFltTgtId = isExternal ? tf.externalFltTgtIds[colIndex] : null; - var slc = (0, _dom.createElm)(_const.SELECT, - //['id', tf.prfxFlt + colIndex + '_' + tf.id], - ['id', tf.buildId(_const.FILTER_ID_TPL, { colIndex: colIndex })], ['ct', colIndex], ['filled', '0']); + var slc = (0, _dom.createElm)(_const.SELECT, ['id', tf.buildFilterId(colIndex)], ['ct', colIndex], ['filled', '0']); if (col === _const.MULTIPLE) { slc.multiple = _const.MULTIPLE; @@ -6548,9 +6553,7 @@ return /******/ (function(modules) { // webpackBootstrap var tf = this.tf; var externalFltTgtId = isExternal ? tf.externalFltTgtIds[colIndex] : null; - var divCont = (0, _dom.createElm)('div', - // ['id', this.prfx + colIndex + '_' + tf.id], - ['id', tf.buildId(CONTAINER_ID_TPL, { colIndex: colIndex, prefix: this.prfx })], ['ct', colIndex], ['filled', '0']); + var divCont = (0, _dom.createElm)('div', ['id', tf.buildId(CONTAINER_ID_TPL, { colIndex: colIndex, prefix: this.prfx })], ['ct', colIndex], ['filled', '0']); divCont.className = this.containerCssClass; //filter is appended in desired element @@ -6561,8 +6564,7 @@ return /******/ (function(modules) { // webpackBootstrap } this.containers[colIndex] = divCont; - // tf.fltIds.push(tf.prfxFlt + colIndex + '_' + tf.id); - tf.fltIds.push(tf.buildId(_const.FILTER_ID_TPL, { colIndex: colIndex })); + tf.fltIds.push(tf.buildFilterId(colIndex)); if (!tf.loadFltOnDemand) { this.build(colIndex); @@ -6741,7 +6743,10 @@ return /******/ (function(modules) { // webpackBootstrap for (var y = 0; y < this.opts.length; y++) { var val = this.opts[y]; //item value var lbl = this.isCustom ? this.optsTxt[y] : val; //item text - var li = (0, _dom.createCheckItem)(tf.fltIds[colIndex] + '_' + (y + chkCt), val, lbl); + var fltId = tf.fltIds[colIndex]; + var li = (0, _dom.createCheckItem)(fltId + '_' + (y + chkCt), + /*tf.fltIds[colIndex] + '_' + (y + chkCt),*/ + val, lbl); li.className = this.itemCssClass; if (tf.linkedFilters && tf.disableExcludedOptions && (0, _array.has)(this.excludedOpts, (0, _string.matchCase)(val, tf.caseSensitive), tf.caseSensitive)) { @@ -6775,7 +6780,8 @@ return /******/ (function(modules) { // webpackBootstrap var tf = this.tf; var chkCt = 1; - var li0 = (0, _dom.createCheckItem)(tf.fltIds[colIndex] + '_0', '', tf.displayAllText); + var fltId = tf.fltIds[colIndex]; + var li0 = (0, _dom.createCheckItem)(fltId + '_0', '', tf.displayAllText); li0.className = this.itemCssClass; ul.appendChild(li0); @@ -6788,7 +6794,7 @@ return /******/ (function(modules) { // webpackBootstrap } if (tf.enableEmptyOption) { - var li1 = (0, _dom.createCheckItem)(tf.fltIds[colIndex] + '_1', tf.emOperator, tf.emptyText); + var li1 = (0, _dom.createCheckItem)(fltId + '_1', tf.emOperator, tf.emptyText); li1.className = this.itemCssClass; ul.appendChild(li1); (0, _event.addEvt)(li1.check, 'click', function (evt) { @@ -6798,7 +6804,7 @@ return /******/ (function(modules) { // webpackBootstrap } if (tf.enableNonEmptyOption) { - var li2 = (0, _dom.createCheckItem)(tf.fltIds[colIndex] + '_2', tf.nmOperator, tf.nonEmptyText); + var li2 = (0, _dom.createCheckItem)(fltId + '_2', tf.nmOperator, tf.nonEmptyText); li2.className = this.itemCssClass; ul.appendChild(li2); (0, _event.addEvt)(li2.check, 'click', function (evt) { diff --git a/src/const.js b/src/const.js index 1cf5e0d2..f2c554a6 100644 --- a/src/const.js +++ b/src/const.js @@ -116,9 +116,3 @@ export const IP_ADDRESS = 'ipaddress'; * @type {Number} */ export const AUTO_FILTER_DELAY = 750; - -/** - * Filter ID template - * @type {String} - */ -export const FILTER_ID_TPL = '{prfxFlt}{colIndex}_{id}'; diff --git a/src/dom.js b/src/dom.js index 869d600e..aaff3365 100644 --- a/src/dom.js +++ b/src/dom.js @@ -13,7 +13,7 @@ const doc = root.document; * @param {NodeElement} node * @return {String} */ -export const getText = node => { +export const getText = (node) => { if (isUndef(node.textContent)) { return trim(node.innerText); } @@ -25,7 +25,7 @@ export const getText = node => { * @param {NodeElement} node node * @return {String} */ -export const getFirstTextNode = node => { +export const getFirstTextNode = (node) => { for (let i = 0; i < node.childNodes.length; i++) { let n = node.childNodes[i]; if (n.nodeType === 3) { @@ -64,14 +64,14 @@ export const createElm = (...args) => { * @param {DOMElement} node * @return {DOMElement} old node reference */ -export const removeElm = node => node.parentNode.removeChild(node); +export const removeElm = (node) => node.parentNode.removeChild(node); /** * Returns a text node with given text * @param {String} txt * @return {Object} */ -export const createText = txt => doc.createTextNode(txt); +export const createText = (txt) => doc.createTextNode(txt); /** * Determine whether the passed elements is assigned the given class @@ -149,17 +149,17 @@ export const createOpt = (text, value, isSel) => { /** * Creates and returns a checklist item - * @param {Number} chkIndex index of check item + * @param {String} id index of check item * @param {String} chkValue check item value * @param {String} labelText check item label text * @return {Object} li DOM element */ -export const createCheckItem = (chkIndex, chkValue, labelText) => { +export const createCheckItem = (id, chkValue, labelText) => { let li = createElm('li'); - let label = createElm('label', ['for', chkIndex]); + let label = createElm('label', ['for', id]); let check = createElm('input', - ['id', chkIndex], - ['name', chkIndex], + ['id', id], + ['name', id], ['type', 'checkbox'], ['value', chkValue] ); @@ -176,7 +176,7 @@ export const createCheckItem = (chkIndex, chkValue, labelText) => { * @param {String} id Element identifier * @return {DOMElement} */ -export const elm = id => doc.getElementById(id); +export const elm = (id) => doc.getElementById(id); /** * Returns list of element matching the supplied tag name diff --git a/src/modules/checkList.js b/src/modules/checkList.js index 0cbd0ab8..46a99efa 100644 --- a/src/modules/checkList.js +++ b/src/modules/checkList.js @@ -8,7 +8,7 @@ import {matchCase, trim, rgxEsc} from '../string'; import {ignoreCase, numSortAsc, numSortDesc} from '../sort'; import {addEvt, removeEvt, targetEvt} from '../event'; import {isEmpty} from '../types'; -import {CHECKLIST, NONE, FILTER_ID_TPL} from '../const'; +import {CHECKLIST, NONE} from '../const'; const SORT_ERROR = 'Filter options for column {0} cannot be sorted in ' + '{1} manner.'; @@ -157,7 +157,6 @@ export class CheckList extends Feature { tf.externalFltTgtIds[colIndex] : null; let divCont = createElm('div', - // ['id', this.prfx + colIndex + '_' + tf.id], ['id', tf.buildId(CONTAINER_ID_TPL, {colIndex, prefix: this.prfx})], ['ct', colIndex], ['filled', '0']); divCont.className = this.containerCssClass; @@ -170,8 +169,7 @@ export class CheckList extends Feature { } this.containers[colIndex] = divCont; - // tf.fltIds.push(tf.prfxFlt + colIndex + '_' + tf.id); - tf.fltIds.push(tf.buildId(FILTER_ID_TPL, {colIndex})); + tf.fltIds.push(tf.buildFilterId(colIndex)); if (!tf.loadFltOnDemand) { this.build(colIndex); @@ -210,7 +208,8 @@ export class CheckList extends Feature { this.optsTxt = []; let flt = this.containers[colIndex]; - let ul = createElm('ul', ['id', tf.fltIds[colIndex]], + let ul = createElm('ul', + ['id', tf.fltIds[colIndex]], ['colIndex', colIndex]); ul.className = this.filterCssClass; @@ -356,7 +355,9 @@ export class CheckList extends Feature { for (let y = 0; y < this.opts.length; y++) { let val = this.opts[y]; //item value let lbl = this.isCustom ? this.optsTxt[y] : val; //item text - let li = createCheckItem(tf.fltIds[colIndex] + '_' + (y + chkCt), + let fltId = tf.fltIds[colIndex]; + let li = createCheckItem(`${fltId}_${(y + chkCt)}`, + /*tf.fltIds[colIndex] + '_' + (y + chkCt),*/ val, lbl); li.className = this.itemCssClass; @@ -387,8 +388,8 @@ export class CheckList extends Feature { addTChecks(colIndex, ul) { let tf = this.tf; let chkCt = 1; - let li0 = createCheckItem(tf.fltIds[colIndex] + '_0', '', - tf.displayAllText); + let fltId = tf.fltIds[colIndex]; + let li0 = createCheckItem(`${fltId}_0`, '', tf.displayAllText); li0.className = this.itemCssClass; ul.appendChild(li0); @@ -399,8 +400,8 @@ export class CheckList extends Feature { } if (tf.enableEmptyOption) { - let li1 = createCheckItem(tf.fltIds[colIndex] + '_1', - tf.emOperator, tf.emptyText); + let li1 = createCheckItem(`${fltId}_1`, tf.emOperator, + tf.emptyText); li1.className = this.itemCssClass; ul.appendChild(li1); addEvt(li1.check, 'click', evt => this.optionClick(evt)); @@ -408,7 +409,7 @@ export class CheckList extends Feature { } if (tf.enableNonEmptyOption) { - let li2 = createCheckItem(tf.fltIds[colIndex] + '_2', tf.nmOperator, + let li2 = createCheckItem(`${fltId}_2`, tf.nmOperator, tf.nonEmptyText); li2.className = this.itemCssClass; ul.appendChild(li2); diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index 055e11a5..c9fcce98 100644 --- a/src/modules/dropdown.js +++ b/src/modules/dropdown.js @@ -4,7 +4,7 @@ import {has} from '../array'; import {matchCase} from '../string'; import {ignoreCase, numSortAsc, numSortDesc} from '../sort'; import {addEvt, targetEvt} from '../event'; -import {SELECT, MULTIPLE, NONE, FILTER_ID_TPL} from '../const'; +import {SELECT, MULTIPLE, NONE} from '../const'; const SORT_ERROR = 'Filter options for column {0} cannot be sorted in ' + '{1} manner.'; @@ -105,8 +105,7 @@ export class Dropdown extends Feature { tf.externalFltTgtIds[colIndex] : null; let slc = createElm(SELECT, - //['id', tf.prfxFlt + colIndex + '_' + tf.id], - ['id', tf.buildId(FILTER_ID_TPL, {colIndex})], + ['id', tf.buildFilterId(colIndex)], ['ct', colIndex], ['filled', '0'] ); diff --git a/src/modules/gridLayout.js b/src/modules/gridLayout.js index b68cf3aa..f5414aba 100644 --- a/src/modules/gridLayout.js +++ b/src/modules/gridLayout.js @@ -377,7 +377,8 @@ export class GridLayout extends Feature { if (this.enableFilters && tf.fltGrid) { tf.externalFltTgtIds = []; for (let j = 0; j < tf.getCellsNb(); j++) { - let fltTdId = tf.prfxFlt + j + this.prfxGridFltTd + tf.id; + // let fltTdId = tf.prfxFlt + j + this.prfxGridFltTd + tf.id; + let fltTdId = `${tf.prfxFlt + j + this.prfxGridFltTd + tf.id}`; let cl = createElm(tf.fltCellTag, ['id', fltTdId]); filtersRow.appendChild(cl); tf.externalFltTgtIds[j] = fltTdId; @@ -458,7 +459,8 @@ export class GridLayout extends Feature { let c = row.cells[n]; let thId = c.getAttribute('id'); if (!thId || thId === '') { - thId = this.prfxGridTh + n + '_' + tf.id; + // thId = this.prfxGridTh + n + '_' + tf.id; + thId = `${this.prfxGridTh + n}_${tf.id}`; c.setAttribute('id', thId); } sortTriggers.push(thId); diff --git a/src/modules/popupFilter.js b/src/modules/popupFilter.js index 85e8ce74..a4120fb7 100644 --- a/src/modules/popupFilter.js +++ b/src/modules/popupFilter.js @@ -235,11 +235,11 @@ export class PopupFilter extends Feature { */ build(colIndex, div) { let tf = this.tf; - let contId = tf.buildId(CONTAINER_ID_TPL, - {colIndex, prefix: this.prfxDiv}) - let popUpDiv = div || - createElm('div', /*['id', this.prfxDiv + tf.id + '_' + colIndex]*/ - ['id', contId]); + let contId = tf.buildId( + CONTAINER_ID_TPL, + {colIndex, prefix: this.prfxDiv} + ); + let popUpDiv = div || createElm('div', ['id', contId]); popUpDiv.className = this.containerCssClass; tf.externalFltTgtIds.push(popUpDiv.id); let header = tf.getHeaderElement(colIndex); diff --git a/src/tablefilter.js b/src/tablefilter.js index d90328dd..e47a7e14 100644 --- a/src/tablefilter.js +++ b/src/tablefilter.js @@ -1337,12 +1337,12 @@ export class TableFilter { let col = this.getFilterType(colIndex); let externalFltTgtId = this.isExternalFlt ? this.externalFltTgtIds[colIndex] : null; - let inptype = col === INPUT ? 'text' : 'hidden'; + let inpType = col === INPUT ? 'text' : 'hidden'; let inp = createElm(INPUT, - ['id', this.prfxFlt + colIndex + '_' + this.id], - ['type', inptype], ['ct', colIndex]); + ['id', this.buildFilterId(colIndex)], + ['type', inpType], ['ct', colIndex]); - if (inptype !== 'hidden' && this.watermark) { + if (inpType !== 'hidden' && this.watermark) { inp.setAttribute('placeholder', this.isWatermarkArray ? (this.watermark[colIndex] || '') : this.watermark @@ -1375,8 +1375,9 @@ export class TableFilter { let externalFltTgtId = this.isExternalFlt ? this.externalFltTgtIds[colIndex] : null; let btn = createElm(INPUT, - ['id', this.prfxValButton + colIndex + '_' + this.id], - ['type', 'button'], ['value', this.btnText]); + ['type', 'button'], + ['value', this.btnText] + ); btn.className = this.btnCssClass; //filter is appended in custom element @@ -1598,45 +1599,45 @@ export class TableFilter { } /*** container div ***/ - let infdiv = createElm('div', ['id', this.prfxInfDiv + this.id]); - infdiv.className = this.infDivCssClass; + let infDiv = createElm('div'); + infDiv.className = this.infDivCssClass; //custom container if (this.toolBarTgtId) { - elm(this.toolBarTgtId).appendChild(infdiv); + elm(this.toolBarTgtId).appendChild(infDiv); } //grid-layout else if (this.gridLayout) { let gridLayout = this.Mod.gridLayout; - gridLayout.tblMainCont.appendChild(infdiv); - infdiv.className = gridLayout.infDivCssClass; + gridLayout.tblMainCont.appendChild(infDiv); + infDiv.className = gridLayout.infDivCssClass; } //default location: just above the table else { let cont = createElm('caption'); - cont.appendChild(infdiv); + cont.appendChild(infDiv); this.tbl.insertBefore(cont, this.tbl.firstChild); } - this.infDiv = elm(this.prfxInfDiv + this.id); + this.infDiv = infDiv; /*** left div containing rows # displayer ***/ - let ldiv = createElm('div', ['id', this.prfxLDiv + this.id]); - ldiv.className = this.lDivCssClass; - infdiv.appendChild(ldiv); - this.lDiv = elm(this.prfxLDiv + this.id); + 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', ['id', this.prfxRDiv + this.id]); - rdiv.className = this.rDivCssClass; - infdiv.appendChild(rdiv); - this.rDiv = elm(this.prfxRDiv + this.id); + let rDiv = createElm('div'); + rDiv.className = this.rDivCssClass; + infDiv.appendChild(rDiv); + this.rDiv = rDiv; /*** mid div containing paging elements ***/ - let mdiv = createElm('div', ['id', this.prfxMDiv + this.id]); - mdiv.className = this.mDivCssClass; - infdiv.appendChild(mdiv); - this.mDiv = elm(this.prfxMDiv + this.id); + let mDiv = createElm('div'); + mDiv.className = this.mDivCssClass; + infDiv.appendChild(mDiv); + this.mDiv = mDiv; // emit help initialisation only if undefined if (isUndef(this.help)) { @@ -2538,7 +2539,7 @@ export class TableFilter { if (tblHasColTag) { col = colTags[k]; } else { - col = createElm('col', ['id', this.id + '_col_' + k]); + col = createElm('col'); frag.appendChild(col); } col.style.width = colWidths[k]; @@ -2644,9 +2645,19 @@ export class TableFilter { return parseInt(idx, 10); } + /** + * Builds filter element ID for a given column index + * @param {any} colIndex + * @returns {String} Filter element ID string + * @private + */ + buildFilterId(colIndex) { + return `${this.prfxFlt}${colIndex}_${this.id}`; + } + buildId(tpl, data = {}) { - data.id = tf.id; - data.prfxFlt = tf.prfxFlt; + data.id = this.id; + data.prfxFlt = this.prfxFlt; return tpl.replace(/\{([\w\.]*)\}/g, (str, key) => { return data[key]; }); diff --git a/test/test.js b/test/test.js index 032bcf3d..31b1b028 100644 --- a/test/test.js +++ b/test/test.js @@ -34,7 +34,8 @@ } ); tf1.init(); - var btn = document.querySelector('#'+tf1.prfxValButton+'4_'+tf1.id); + + var btn = document.querySelector('.' + tf1.btnCssClass); module('Table 2: sanity checks'); test('TableFilter instance', function() {