From 325f9c260e59837e50a0df4e16a03c6a357bb4ff Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Sun, 12 Apr 2015 17:52:19 +1000 Subject: [PATCH] Moved prefixes in respective modules, added test-sort-grid-layout --- dist/filtergrid.css | 2 +- src-es6/modules/checkList.js | 4 +- src-es6/modules/clearButton.js | 4 +- src-es6/modules/loader.js | 6 +- src-es6/modules/paging.js | 103 +++++++++++++--------- src-es6/modules/rowsCounter.js | 12 ++- src-es6/modules/statusBar.js | 14 ++- src-es6/tablefilter.js | 73 +++------------- src/modules/checkList.js | 4 +- src/modules/clearButton.js | 4 +- src/modules/loader.js | 6 +- src/modules/paging.js | 85 +++++++++++------- src/modules/rowsCounter.js | 12 ++- src/modules/statusBar.js | 13 ++- src/tablefilter.js | 69 +++------------ test/test-clear-button.js | 2 +- test/test-loader.js | 7 +- test/test-paging.js | 16 ++-- test/test-sort-grid-layout.html | 147 ++++++++++++++++++++++++++++++++ test/test-sort-grid-layout.js | 97 +++++++++++++++++++++ 20 files changed, 463 insertions(+), 217 deletions(-) create mode 100644 test/test-sort-grid-layout.html create mode 100644 test/test-sort-grid-layout.js diff --git a/dist/filtergrid.css b/dist/filtergrid.css index 96c554c5..4d97fdea 100644 --- a/dist/filtergrid.css +++ b/dist/filtergrid.css @@ -1,6 +1,6 @@ /*------------------------------------------------------------------------ - TableFilter stylesheet by Max Guglielmi - - (build date: Sat Apr 11 2015 19:12:40) + - (build date: Sun Apr 12 2015 17:31:04) - Edit below for your projects' needs ------------------------------------------------------------------------*/ diff --git a/src-es6/modules/checkList.js b/src-es6/modules/checkList.js index 5fdf389e..cf66ce70 100644 --- a/src-es6/modules/checkList.js +++ b/src-es6/modules/checkList.js @@ -35,6 +35,8 @@ export class CheckList{ 'flt_checklist_item_disabled'; this.enableCheckListResetFilter = f.enable_checklist_reset_filter===false ? false : true; + //checklist filter container div + this.prfxCheckListDiv = 'chkdiv_'; this.isCustom = null; this.opts = null; @@ -80,7 +82,7 @@ export class CheckList{ this.opts = []; this.optsTxt = []; - var divFltId = tf.prfxCheckListDiv+colIndex+'_'+tf.id; + var divFltId = this.prfxCheckListDiv+colIndex+'_'+tf.id; if((!Dom.id(divFltId) && !isExternal) || (!Dom.id(extFltId) && isExternal)){ return; diff --git a/src-es6/modules/clearButton.js b/src-es6/modules/clearButton.js index e0422211..f8539ab2 100644 --- a/src-es6/modules/clearButton.js +++ b/src-es6/modules/clearButton.js @@ -24,6 +24,8 @@ export class ClearButton{ (!tf.enableIcons ? null : ''); + //span containing reset button + this.prfxResetSpan = 'resetspan_'; this.tf = tf; } @@ -42,7 +44,7 @@ export class ClearButton{ return; } - var resetspan = Dom.create('span', ['id', tf.prfxResetSpan+tf.id]); + var resetspan = Dom.create('span', ['id', this.prfxResetSpan+tf.id]); // reset button is added to defined element if(!this.btnResetTgtId){ diff --git a/src-es6/modules/loader.js b/src-es6/modules/loader.js index ae3c14e6..857590c1 100644 --- a/src-es6/modules/loader.js +++ b/src-es6/modules/loader.js @@ -32,10 +32,12 @@ export class Loader{ //callback function after loader is closed this.onHideLoader = Types.isFn(f.on_hide_loader) ? f.on_hide_loader : null; + //loader div + this.prfxLoader = 'load_'; this.tf = tf; - var containerDiv = Dom.create('div', ['id', tf.prfxLoader+tf.id]); + var containerDiv = Dom.create('div', ['id', this.prfxLoader+tf.id]); containerDiv.className = this.loaderCssClass; var targetEl = !this.loaderTgtId ? @@ -45,7 +47,7 @@ export class Loader{ } else { targetEl.appendChild(containerDiv); } - this.loaderDiv = Dom.id(tf.prfxLoader+tf.id); + this.loaderDiv = Dom.id(this.prfxLoader+tf.id); if(!this.loaderHtml){ this.loaderDiv.appendChild(Dom.text(this.loaderText)); } else { diff --git a/src-es6/modules/paging.js b/src-es6/modules/paging.js index 47f45d6c..29e8773e 100644 --- a/src-es6/modules/paging.js +++ b/src-es6/modules/paging.js @@ -88,6 +88,36 @@ export class Paging{ //calls function before page is changed this.onAfterChangePage = Types.isFn(f.on_after_change_page) ? f.on_after_change_page : null; + + //pages select + this.prfxSlcPages = 'slcPages_'; + //results per page select + this.prfxSlcResults = 'slcResults_'; + //label preciding results per page select + this.prfxSlcResultsTxt = 'slcResultsTxt_'; + //span containing next page button + this.prfxBtnNextSpan = 'btnNextSpan_'; + //span containing previous page button + this.prfxBtnPrevSpan = 'btnPrevSpan_'; + //span containing last page button + this.prfxBtnLastSpan = 'btnLastSpan_'; + //span containing first page button + this.prfxBtnFirstSpan = 'btnFirstSpan_'; + //next button + this.prfxBtnNext = 'btnNext_'; + //previous button + this.prfxBtnPrev = 'btnPrev_'; + //last button + this.prfxBtnLast = 'btnLast_'; + //first button + this.prfxBtnFirst = 'btnFirst_'; + //span for tot nb pages + this.prfxPgSpan = 'pgspan_'; + //span preceding pages select (contains 'Page') + this.prfxPgBeforeSpan = 'pgbeforespan_'; + //span following pages select (contains ' of ') + this.prfxPgAfterSpan = 'pgafterspan_'; + var start_row = this.refRow; var nrows = this.nbRows; //calculates page nb @@ -168,9 +198,6 @@ export class Paging{ - onchange event for paging select =====================================================*/ evt.slcPagesChange = (event) => { - // if(evt._Paging._OnSlcPagesChangeEvt){ - // evt._Paging._OnSlcPagesChangeEvt(); - // } this.changePage(); event.target.blur(); }; @@ -178,7 +205,7 @@ export class Paging{ // Paging drop-down list selector if(this.pageSelectorType === tf.fltTypeSlc){ slcPages = Dom.create( - tf.fltTypeSlc, ['id', tf.prfxSlcPages+tf.id]); + tf.fltTypeSlc, ['id', this.prfxSlcPages+tf.id]); slcPages.className = this.pgSlcCssClass; Event.add(slcPages, 'change', evt.slcPagesChange); } @@ -187,7 +214,7 @@ export class Paging{ if(this.pageSelectorType === tf.fltTypeInp){ slcPages = Dom.create( tf.fltTypeInp, - ['id', tf.prfxSlcPages+tf.id], + ['id', this.prfxSlcPages+tf.id], ['value', this.currentPageNb] ); slcPages.className = this.pgInpCssClass; @@ -196,20 +223,20 @@ export class Paging{ // btns containers var btnNextSpan = Dom.create( - 'span',['id', tf.prfxBtnNextSpan+tf.id]); + 'span',['id', this.prfxBtnNextSpan+tf.id]); var btnPrevSpan = Dom.create( - 'span',['id', tf.prfxBtnPrevSpan+tf.id]); + 'span',['id', this.prfxBtnPrevSpan+tf.id]); var btnLastSpan = Dom.create( - 'span',['id', tf.prfxBtnLastSpan+tf.id]); + 'span',['id', this.prfxBtnLastSpan+tf.id]); var btnFirstSpan = Dom.create( - 'span',['id', tf.prfxBtnFirstSpan+tf.id]); + 'span',['id', this.prfxBtnFirstSpan+tf.id]); if(this.hasPagingBtns){ // Next button if(!this.btnNextPageHtml){ var btn_next = Dom.create( tf.fltTypeInp, - ['id', tf.prfxBtnNext+tf.id], + ['id', this.prfxBtnNext+tf.id], ['type', 'button'], ['value', this.btnNextPageText], ['title', 'Next'] @@ -225,10 +252,10 @@ export class Paging{ if(!this.btnPrevPageHtml){ var btn_prev = Dom.create( tf.fltTypeInp, - ['id',tf.prfxBtnPrev+tf.id], - ['type','button'], - ['value',this.btnPrevPageText], - ['title','Previous'] + ['id', this.prfxBtnPrev+tf.id], + ['type', 'button'], + ['value', this.btnPrevPageText], + ['title', 'Previous'] ); btn_prev.className = this.btnPageCssClass; Event.add(btn_prev, 'click', evt.prev); @@ -241,10 +268,10 @@ export class Paging{ if(!this.btnLastPageHtml){ var btn_last = Dom.create( tf.fltTypeInp, - ['id',tf.prfxBtnLast+tf.id], - ['type','button'], - ['value',this.btnLastPageText], - ['title','Last'] + ['id', this.prfxBtnLast+tf.id], + ['type', 'button'], + ['value', this.btnLastPageText], + ['title', 'Last'] ); btn_last.className = this.btnPageCssClass; Event.add(btn_last, 'click', evt.last); @@ -257,10 +284,10 @@ export class Paging{ if(!this.btnFirstPageHtml){ var btn_first = Dom.create( tf.fltTypeInp, - ['id',tf.prfxBtnFirst+tf.id], - ['type','button'], - ['value',this.btnFirstPageText], - ['title','First'] + ['id', this.prfxBtnFirst+tf.id], + ['type', 'button'], + ['value', this.btnFirstPageText], + ['title', 'First'] ); btn_first.className = this.btnPageCssClass; Event.add(btn_first, 'click', evt.first); @@ -280,23 +307,23 @@ export class Paging{ targetEl.appendChild(btnPrevSpan); var pgBeforeSpan = Dom.create( - 'span',['id', tf.prfxPgBeforeSpan+tf.id] ); + 'span',['id', this.prfxPgBeforeSpan+tf.id] ); pgBeforeSpan.appendChild( Dom.text(this.pageText) ); pgBeforeSpan.className = this.nbPgSpanCssClass; targetEl.appendChild(pgBeforeSpan); targetEl.appendChild(slcPages); var pgAfterSpan = Dom.create( - 'span',['id', tf.prfxPgAfterSpan+tf.id]); + 'span',['id', this.prfxPgAfterSpan+tf.id]); pgAfterSpan.appendChild( Dom.text(this.ofText) ); pgAfterSpan.className = this.nbPgSpanCssClass; targetEl.appendChild(pgAfterSpan); - var pgspan = Dom.create( 'span',['id', tf.prfxPgSpan+tf.id] ); + var pgspan = Dom.create( 'span',['id', this.prfxPgSpan+tf.id] ); pgspan.className = this.nbPgSpanCssClass; pgspan.appendChild( Dom.text(' '+this.nbPages+' ') ); targetEl.appendChild(pgspan); targetEl.appendChild(btnNextSpan); targetEl.appendChild(btnLastSpan); - this.pagingSlc = Dom.id(tf.prfxSlcPages+tf.id); + this.pagingSlc = Dom.id(this.prfxSlcPages+tf.id); // if this.rememberGridValues==true this.setPagingInfo() is called // in ResetGridValues() method @@ -338,7 +365,7 @@ export class Paging{ var tf = this.tf; var rows = tf.tbl.rows; var mdiv = !this.pagingTgtId ? tf.mDiv : Dom.id(this.pagingTgtId); - var pgspan = Dom.id(tf.prfxPgSpan+tf.id); + var pgspan = Dom.id(this.prfxPgSpan+tf.id); //stores valid rows indexes if(validRows && validRows.length>0){ tf.validRowsIndex = validRows; @@ -491,12 +518,12 @@ export class Paging{ }; var slcR = Dom.create( - tf.fltTypeSlc, ['id', tf.prfxSlcResults+tf.id]); + tf.fltTypeSlc, ['id', this.prfxSlcResults+tf.id]); slcR.className = tf.resultsSlcCssClass; var slcRText = this.resultsPerPage[0], slcROpts = this.resultsPerPage[1]; var slcRSpan = Dom.create( - 'span',['id', tf.prfxSlcResultsTxt+tf.id]); + 'span',['id', this.prfxSlcResultsTxt+tf.id]); slcRSpan.className = this.resultsSpanCssClass; // results per page select is added to external element @@ -509,7 +536,7 @@ export class Paging{ targetEl.appendChild(slcRSpan); targetEl.appendChild(slcR); - this.resultsPerPageSlc = Dom.id(tf.prfxSlcResults+tf.id); + this.resultsPerPageSlc = Dom.id(this.prfxSlcResults+tf.id); for(var r=0; r"); + //span containing reset button + this.prfxResetSpan = "resetspan_"; this.tf = tf; } @@ -59,7 +61,7 @@ define(["exports", "../dom", "../event"], function (exports, _dom, _event) { return; } - var resetspan = Dom.create("span", ["id", tf.prfxResetSpan + tf.id]); + var resetspan = Dom.create("span", ["id", this.prfxResetSpan + tf.id]); // reset button is added to defined element if (!this.btnResetTgtId) { diff --git a/src/modules/loader.js b/src/modules/loader.js index 168709f4..5fd76a7d 100644 --- a/src/modules/loader.js +++ b/src/modules/loader.js @@ -40,10 +40,12 @@ define(["exports", "../dom", "../types"], function (exports, _dom, _types) { this.onShowLoader = Types.isFn(f.on_show_loader) ? f.on_show_loader : null; //callback function after loader is closed this.onHideLoader = Types.isFn(f.on_hide_loader) ? f.on_hide_loader : null; + //loader div + this.prfxLoader = "load_"; this.tf = tf; - var containerDiv = Dom.create("div", ["id", tf.prfxLoader + tf.id]); + var containerDiv = Dom.create("div", ["id", this.prfxLoader + tf.id]); containerDiv.className = this.loaderCssClass; var targetEl = !this.loaderTgtId ? tf.tbl.parentNode : Dom.id(this.loaderTgtId); @@ -52,7 +54,7 @@ define(["exports", "../dom", "../types"], function (exports, _dom, _types) { } else { targetEl.appendChild(containerDiv); } - this.loaderDiv = Dom.id(tf.prfxLoader + tf.id); + this.loaderDiv = Dom.id(this.prfxLoader + tf.id); if (!this.loaderHtml) { this.loaderDiv.appendChild(Dom.text(this.loaderText)); } else { diff --git a/src/modules/paging.js b/src/modules/paging.js index 8d86d5ee..0aacfee0 100644 --- a/src/modules/paging.js +++ b/src/modules/paging.js @@ -87,6 +87,36 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], this.onBeforeChangePage = Types.isFn(f.on_before_change_page) ? f.on_before_change_page : null; //calls function before page is changed this.onAfterChangePage = Types.isFn(f.on_after_change_page) ? f.on_after_change_page : null; + + //pages select + this.prfxSlcPages = "slcPages_"; + //results per page select + this.prfxSlcResults = "slcResults_"; + //label preciding results per page select + this.prfxSlcResultsTxt = "slcResultsTxt_"; + //span containing next page button + this.prfxBtnNextSpan = "btnNextSpan_"; + //span containing previous page button + this.prfxBtnPrevSpan = "btnPrevSpan_"; + //span containing last page button + this.prfxBtnLastSpan = "btnLastSpan_"; + //span containing first page button + this.prfxBtnFirstSpan = "btnFirstSpan_"; + //next button + this.prfxBtnNext = "btnNext_"; + //previous button + this.prfxBtnPrev = "btnPrev_"; + //last button + this.prfxBtnLast = "btnLast_"; + //first button + this.prfxBtnFirst = "btnFirst_"; + //span for tot nb pages + this.prfxPgSpan = "pgspan_"; + //span preceding pages select (contains 'Page') + this.prfxPgBeforeSpan = "pgbeforespan_"; + //span following pages select (contains ' of ') + this.prfxPgAfterSpan = "pgafterspan_"; + var start_row = this.refRow; var nrows = this.nbRows; //calculates page nb @@ -167,37 +197,34 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], - onchange event for paging select =====================================================*/ evt.slcPagesChange = function (event) { - // if(evt._Paging._OnSlcPagesChangeEvt){ - // evt._Paging._OnSlcPagesChangeEvt(); - // } _this.changePage(); event.target.blur(); }; // Paging drop-down list selector if (this.pageSelectorType === tf.fltTypeSlc) { - slcPages = Dom.create(tf.fltTypeSlc, ["id", tf.prfxSlcPages + tf.id]); + slcPages = Dom.create(tf.fltTypeSlc, ["id", this.prfxSlcPages + tf.id]); slcPages.className = this.pgSlcCssClass; Event.add(slcPages, "change", evt.slcPagesChange); } // Paging input selector if (this.pageSelectorType === tf.fltTypeInp) { - slcPages = Dom.create(tf.fltTypeInp, ["id", tf.prfxSlcPages + tf.id], ["value", this.currentPageNb]); + slcPages = Dom.create(tf.fltTypeInp, ["id", this.prfxSlcPages + tf.id], ["value", this.currentPageNb]); slcPages.className = this.pgInpCssClass; Event.add(slcPages, "keypress", evt._detectKey); } // btns containers - var btnNextSpan = Dom.create("span", ["id", tf.prfxBtnNextSpan + tf.id]); - var btnPrevSpan = Dom.create("span", ["id", tf.prfxBtnPrevSpan + tf.id]); - var btnLastSpan = Dom.create("span", ["id", tf.prfxBtnLastSpan + tf.id]); - var btnFirstSpan = Dom.create("span", ["id", tf.prfxBtnFirstSpan + tf.id]); + var btnNextSpan = Dom.create("span", ["id", this.prfxBtnNextSpan + tf.id]); + var btnPrevSpan = Dom.create("span", ["id", this.prfxBtnPrevSpan + tf.id]); + var btnLastSpan = Dom.create("span", ["id", this.prfxBtnLastSpan + tf.id]); + var btnFirstSpan = Dom.create("span", ["id", this.prfxBtnFirstSpan + tf.id]); if (this.hasPagingBtns) { // Next button if (!this.btnNextPageHtml) { - var btn_next = Dom.create(tf.fltTypeInp, ["id", tf.prfxBtnNext + tf.id], ["type", "button"], ["value", this.btnNextPageText], ["title", "Next"]); + var btn_next = Dom.create(tf.fltTypeInp, ["id", this.prfxBtnNext + tf.id], ["type", "button"], ["value", this.btnNextPageText], ["title", "Next"]); btn_next.className = this.btnPageCssClass; Event.add(btn_next, "click", evt.next); btnNextSpan.appendChild(btn_next); @@ -207,7 +234,7 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], } // Previous button if (!this.btnPrevPageHtml) { - var btn_prev = Dom.create(tf.fltTypeInp, ["id", tf.prfxBtnPrev + tf.id], ["type", "button"], ["value", this.btnPrevPageText], ["title", "Previous"]); + var btn_prev = Dom.create(tf.fltTypeInp, ["id", this.prfxBtnPrev + tf.id], ["type", "button"], ["value", this.btnPrevPageText], ["title", "Previous"]); btn_prev.className = this.btnPageCssClass; Event.add(btn_prev, "click", evt.prev); btnPrevSpan.appendChild(btn_prev); @@ -217,7 +244,7 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], } // Last button if (!this.btnLastPageHtml) { - var btn_last = Dom.create(tf.fltTypeInp, ["id", tf.prfxBtnLast + tf.id], ["type", "button"], ["value", this.btnLastPageText], ["title", "Last"]); + var btn_last = Dom.create(tf.fltTypeInp, ["id", this.prfxBtnLast + tf.id], ["type", "button"], ["value", this.btnLastPageText], ["title", "Last"]); btn_last.className = this.btnPageCssClass; Event.add(btn_last, "click", evt.last); btnLastSpan.appendChild(btn_last); @@ -227,7 +254,7 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], } // First button if (!this.btnFirstPageHtml) { - var btn_first = Dom.create(tf.fltTypeInp, ["id", tf.prfxBtnFirst + tf.id], ["type", "button"], ["value", this.btnFirstPageText], ["title", "First"]); + var btn_first = Dom.create(tf.fltTypeInp, ["id", this.prfxBtnFirst + tf.id], ["type", "button"], ["value", this.btnFirstPageText], ["title", "First"]); btn_first.className = this.btnPageCssClass; Event.add(btn_first, "click", evt.first); btnFirstSpan.appendChild(btn_first); @@ -245,22 +272,22 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], targetEl.appendChild(btnFirstSpan); targetEl.appendChild(btnPrevSpan); - var pgBeforeSpan = Dom.create("span", ["id", tf.prfxPgBeforeSpan + tf.id]); + var pgBeforeSpan = Dom.create("span", ["id", this.prfxPgBeforeSpan + tf.id]); pgBeforeSpan.appendChild(Dom.text(this.pageText)); pgBeforeSpan.className = this.nbPgSpanCssClass; targetEl.appendChild(pgBeforeSpan); targetEl.appendChild(slcPages); - var pgAfterSpan = Dom.create("span", ["id", tf.prfxPgAfterSpan + tf.id]); + var pgAfterSpan = Dom.create("span", ["id", this.prfxPgAfterSpan + tf.id]); pgAfterSpan.appendChild(Dom.text(this.ofText)); pgAfterSpan.className = this.nbPgSpanCssClass; targetEl.appendChild(pgAfterSpan); - var pgspan = Dom.create("span", ["id", tf.prfxPgSpan + tf.id]); + var pgspan = Dom.create("span", ["id", this.prfxPgSpan + tf.id]); pgspan.className = this.nbPgSpanCssClass; pgspan.appendChild(Dom.text(" " + this.nbPages + " ")); targetEl.appendChild(pgspan); targetEl.appendChild(btnNextSpan); targetEl.appendChild(btnLastSpan); - this.pagingSlc = Dom.id(tf.prfxSlcPages + tf.id); + this.pagingSlc = Dom.id(this.prfxSlcPages + tf.id); // if this.rememberGridValues==true this.setPagingInfo() is called // in ResetGridValues() method @@ -310,7 +337,7 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], var tf = this.tf; var rows = tf.tbl.rows; var mdiv = !this.pagingTgtId ? tf.mDiv : Dom.id(this.pagingTgtId); - var pgspan = Dom.id(tf.prfxPgSpan + tf.id); + var pgspan = Dom.id(this.prfxPgSpan + tf.id); //stores valid rows indexes if (validRows && validRows.length > 0) { tf.validRowsIndex = validRows; @@ -464,11 +491,11 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], ev.target.blur(); }; - var slcR = Dom.create(tf.fltTypeSlc, ["id", tf.prfxSlcResults + tf.id]); + var slcR = Dom.create(tf.fltTypeSlc, ["id", this.prfxSlcResults + tf.id]); slcR.className = tf.resultsSlcCssClass; var slcRText = this.resultsPerPage[0], slcROpts = this.resultsPerPage[1]; - var slcRSpan = Dom.create("span", ["id", tf.prfxSlcResultsTxt + tf.id]); + var slcRSpan = Dom.create("span", ["id", this.prfxSlcResultsTxt + tf.id]); slcRSpan.className = this.resultsSpanCssClass; // results per page select is added to external element @@ -480,7 +507,7 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], targetEl.appendChild(slcRSpan); targetEl.appendChild(slcR); - this.resultsPerPageSlc = Dom.id(tf.prfxSlcResults + tf.id); + this.resultsPerPageSlc = Dom.id(this.prfxSlcResults + tf.id); for (var r = 0; r < slcROpts.length; r++) { var currOpt = new Option(slcROpts[r], slcROpts[r], false, false); @@ -501,7 +528,7 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], return; } var slcR = this.resultsPerPageSlc, - slcRSpan = Dom.id(tf.prfxSlcResultsTxt + tf.id); + slcRSpan = Dom.id(this.prfxSlcResultsTxt + tf.id); if (slcR) { slcR.parentNode.removeChild(slcR); } @@ -681,16 +708,16 @@ define(["exports", "../dom", "../types", "../string", "../helpers", "../event"], // btns containers var btnNextSpan, btnPrevSpan, btnLastSpan, btnFirstSpan; var pgBeforeSpan, pgAfterSpan, pgspan; - btnNextSpan = Dom.id(tf.prfxBtnNextSpan + tf.id); - btnPrevSpan = Dom.id(tf.prfxBtnPrevSpan + tf.id); - btnLastSpan = Dom.id(tf.prfxBtnLastSpan + tf.id); - btnFirstSpan = Dom.id(tf.prfxBtnFirstSpan + tf.id); + btnNextSpan = Dom.id(this.prfxBtnNextSpan + tf.id); + btnPrevSpan = Dom.id(this.prfxBtnPrevSpan + tf.id); + btnLastSpan = Dom.id(this.prfxBtnLastSpan + tf.id); + btnFirstSpan = Dom.id(this.prfxBtnFirstSpan + tf.id); //span containing 'Page' text - pgBeforeSpan = Dom.id(tf.prfxPgBeforeSpan + tf.id); + pgBeforeSpan = Dom.id(this.prfxPgBeforeSpan + tf.id); //span containing 'of' text - pgAfterSpan = Dom.id(tf.prfxPgAfterSpan + tf.id); + pgAfterSpan = Dom.id(this.prfxPgAfterSpan + tf.id); //span containing nb of pages - pgspan = Dom.id(tf.prfxPgSpan + tf.id); + pgspan = Dom.id(this.prfxPgSpan + tf.id); var evt = this.evt; diff --git a/src/modules/rowsCounter.js b/src/modules/rowsCounter.js index e701ed25..8a7c55fe 100644 --- a/src/modules/rowsCounter.js +++ b/src/modules/rowsCounter.js @@ -37,6 +37,12 @@ define(["exports", "../dom", "../types", "../helpers"], function (exports, _dom, this.overText = f.over_text || " / "; //defines css class rows counter this.totRowsCssClass = f.tot_rows_css_class || "tot"; + //rows counter div + this.prfxCounter = "counter_"; + //nb displayed rows label + this.prfxTotRows = "totrows_span_"; + //label preceding nb rows label + this.prfxTotRowsTxt = "totRowsTextSpan_"; //callback raised before counter is refreshed this.onBeforeRefreshCounter = Types.isFn(f.on_before_refresh_counter) ? f.on_before_refresh_counter : null; //callback raised after counter is refreshed @@ -55,11 +61,11 @@ define(["exports", "../dom", "../types", "../helpers"], function (exports, _dom, } //rows counter container - var countDiv = Dom.create("div", ["id", tf.prfxCounter + tf.id]); + var countDiv = Dom.create("div", ["id", this.prfxCounter + tf.id]); countDiv.className = this.totRowsCssClass; //rows counter label - var countSpan = Dom.create("span", ["id", tf.prfxTotRows + tf.id]); - var countText = Dom.create("span", ["id", tf.prfxTotRowsTxt + tf.id]); + var countSpan = Dom.create("span", ["id", this.prfxTotRows + tf.id]); + var countText = Dom.create("span", ["id", this.prfxTotRowsTxt + tf.id]); countText.appendChild(Dom.text(this.rowsCounterText)); // counter is added to defined element diff --git a/src/modules/statusBar.js b/src/modules/statusBar.js index bacd4100..5d1b773c 100644 --- a/src/modules/statusBar.js +++ b/src/modules/statusBar.js @@ -48,6 +48,13 @@ define(["exports", "../dom", "../event", "../types", "../helpers"], function (ex //calls function after message is displayed this.onAfterShowMsg = Types.isFn(f.on_after_show_msg) ? f.on_after_show_msg : null; + // status bar div + this.prfxStatus = "status_"; + // status bar label + this.prfxStatusSpan = "statusSpan_"; + // text preceding status bar label + this.prfxStatusTxt = "statusText_"; + this.tf = tf; } @@ -60,13 +67,13 @@ define(["exports", "../dom", "../event", "../types", "../helpers"], function (ex } //status bar container - var statusDiv = Dom.create("div", ["id", tf.prfxStatus + tf.id]); + var statusDiv = Dom.create("div", ["id", this.prfxStatus + tf.id]); statusDiv.className = this.statusBarCssClass; //status bar label - var statusSpan = Dom.create("span", ["id", tf.prfxStatusSpan + tf.id]); + var statusSpan = Dom.create("span", ["id", this.prfxStatusSpan + tf.id]); //preceding text - var statusSpanText = Dom.create("span", ["id", tf.prfxStatusTxt + tf.id]); + var statusSpanText = Dom.create("span", ["id", this.prfxStatusTxt + tf.id]); statusSpanText.appendChild(Dom.text(this.statusBarText)); // target element container diff --git a/src/tablefilter.js b/src/tablefilter.js index 939ac59b..ad407197 100644 --- a/src/tablefilter.js +++ b/src/tablefilter.js @@ -111,6 +111,7 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array //default script base path this.basePath = f.base_path !== undefined ? f.base_path : ""; + this.extensionsPath = f.extensions_path || this.basePath + "extensions/"; /*** filter types ***/ this.fltTypeInp = "input"; @@ -379,8 +380,8 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array this.isSortEnabled = false; this.sortConfig = f.sort_config || {}; this.sortConfig.name = this.sortConfig.name !== undefined ? f.sort_config.name : "sortabletable"; - this.sortConfig.src = this.sortConfig.src !== undefined ? f.sort_config.src : this.basePath + "extensions/sortabletable/" + "sortabletable.js"; - this.sortConfig.adapterSrc = this.sortConfig.adapter_src !== undefined ? f.sort_config.adapter_src : this.basePath + "extensions/sortabletable/adapterSortabletable.js"; + this.sortConfig.src = this.sortConfig.src !== undefined ? f.sort_config.src : this.extensionsPath + "sortabletable/" + "sortabletable.js"; + this.sortConfig.adapterSrc = this.sortConfig.adapter_src !== undefined ? f.sort_config.adapter_src : this.extensionsPath + "sortabletable/adapterSortabletable.js"; this.sortConfig.initialize = this.sortConfig.initialize !== undefined ? f.sort_config.initialize : function (o) {}; this.sortConfig.sortTypes = types.isArray(this.sortConfig.sort_types) ? f.sort_config.sort_types : []; this.sortConfig.sortCol = this.sortConfig.sort_col !== undefined ? f.sort_config.sort_col : null; @@ -394,11 +395,11 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array this.editable = f.editable === true ? true : false; this.ezEditTableConfig = f.ezEditTable_config || {}; this.ezEditTableConfig.name = this.ezEditTableConfig.name !== undefined ? f.ezEditTable_config.name : "ezedittable"; - this.ezEditTableConfig.src = this.ezEditTableConfig.src !== undefined ? f.ezEditTable_config.src : this.basePath + "extensions/ezEditTable/ezEditTable.js"; + this.ezEditTableConfig.src = this.ezEditTableConfig.src !== undefined ? f.ezEditTable_config.src : this.extensionsPath + "ezEditTable/ezEditTable.js"; //ezEditTable stylesheet not imported by default as filtergrid.css //applies this.ezEditTableConfig.loadStylesheet = this.ezEditTableConfig.loadStylesheet === true ? true : false; - this.ezEditTableConfig.stylesheet = this.ezEditTableConfig.stylesheet || this.basePath + "extensions/ezEditTable/ezEditTable.css"; + this.ezEditTableConfig.stylesheet = this.ezEditTableConfig.stylesheet || this.extensionsPath + "ezEditTable/ezEditTable.css"; this.ezEditTableConfig.stylesheetName = this.ezEditTableConfig.stylesheetName !== undefined ? f.ezEditTable_config.stylesheetName : "ezEditTableCss"; this.ezEditTableConfig.err = "Failed to instantiate EditTable " + "object.\n\"ezEditTable\" module may not be available."; @@ -474,54 +475,6 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array this.prfxRDiv = "rdiv_"; //middle div this.prfxMDiv = "mdiv_"; - //table container if fixed headers enabled - this.prfxContentDiv = "cont_"; - //checklist filter container div - this.prfxCheckListDiv = "chkdiv_"; - //pages select - this.prfxSlcPages = "slcPages_"; - //results per page select - this.prfxSlcResults = "slcResults_"; - //label preciding results per page select - this.prfxSlcResultsTxt = "slcResultsTxt_"; - //span containing next page button - this.prfxBtnNextSpan = "btnNextSpan_"; - //span containing previous page button - this.prfxBtnPrevSpan = "btnPrevSpan_"; - //span containing last page button - this.prfxBtnLastSpan = "btnLastSpan_"; - //span containing first page button - this.prfxBtnFirstSpan = "btnFirstSpan_"; - //next button - this.prfxBtnNext = "btnNext_"; - //previous button - this.prfxBtnPrev = "btnPrev_"; - //last button - this.prfxBtnLast = "btnLast_"; - //first button - this.prfxBtnFirst = "btnFirst_"; - //span for tot nb pages - this.prfxPgSpan = "pgspan_"; - //span preceding pages select (contains 'Page') - this.prfxPgBeforeSpan = "pgbeforespan_"; - //span following pages select (contains ' of ') - this.prfxPgAfterSpan = "pgafterspan_"; - //rows counter div - this.prfxCounter = "counter_"; - //nb displayed rows label - this.prfxTotRows = "totrows_span_"; - //label preceding nb rows label - this.prfxTotRowsTxt = "totRowsTextSpan_"; - //span containing reset button - this.prfxResetSpan = "resetspan_"; - //loader div - this.prfxLoader = "load_"; - //status bar div - this.prfxStatus = "status_"; - //status bar label - this.prfxStatusSpan = "statusSpan_"; - //text preceding status bar label - this.prfxStatusTxt = "statusText_"; //filter values cookie this.prfxCookieFltsValues = "tf_flts_"; //page nb cookie @@ -969,15 +922,17 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array } // checklist else if (col === this.fltTypeCheckList) { + var checkList; if (!this.Cpt.checkList) { // var CheckList = // require('modules/checkList').CheckList; // import {CheckList} from 'modules/checkList'; this.Cpt.checkList = new CheckList(this); + checkList = this.Cpt.checkList; } - var divCont = dom.create("div", ["id", this.prfxCheckListDiv + i + "_" + this.id], ["ct", i], ["filled", "0"]); - divCont.className = this.Cpt.checkList.checkListDivCssClass; + var divCont = dom.create("div", ["id", checkList.prfxCheckListDiv + i + "_" + this.id], ["ct", i], ["filled", "0"]); + divCont.className = checkList.checkListDivCssClass; //filter is appended in desired element if (externalFltTgtId) { @@ -987,15 +942,15 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array fltcell.appendChild(divCont); } - this.Cpt.checkList.checkListDiv[i] = divCont; + checkList.checkListDiv[i] = divCont; this.fltIds.push(this.prfxFlt + i + "_" + this.id); if (!this.fillSlcOnDemand) { - this.Cpt.checkList._build(i); + checkList._build(i); } if (this.fillSlcOnDemand) { evt.add(divCont, "click", this.Evt.onCheckListClick); - divCont.appendChild(dom.text(this.Cpt.checkList.activateCheckListTxt)); + divCont.appendChild(dom.text(checkList.activateCheckListTxt)); } evt.add(divCont, "click", this.Evt.onCheckListFocus); diff --git a/test/test-clear-button.js b/test/test-clear-button.js index a01bee8a..3ace6b5a 100644 --- a/test/test-clear-button.js +++ b/test/test-clear-button.js @@ -23,7 +23,7 @@ requirejs(['test-config', '../src/tablefilter'], function(config, TableFilter){ test('ClearButton UI elements', function() { var container = clearButton.btnResetEl; deepEqual(container.nodeName, 'INPUT', 'Clear button container'); - deepEqual(container.parentNode.id, tf.prfxResetSpan+tf.id, 'Container id'); + deepEqual(container.parentNode.id, clearButton.prfxResetSpan+tf.id, 'Container id'); }); module('Destroy and re-init'); diff --git a/test/test-loader.js b/test/test-loader.js index 2c609a6b..cafb88fd 100644 --- a/test/test-loader.js +++ b/test/test-loader.js @@ -12,9 +12,10 @@ requirejs(['test-config', '../src/tablefilter'], function(config, TableFilter){ module('Sanity checks'); test('Loader component', function() { - deepEqual(tf.Cpt.loader instanceof Loader, true, 'Loader constructor'); - notEqual(tf.Cpt.loader, null, 'Loader instanciated'); - notEqual(dom.id(tf.prfxLoader+tf.id), null, 'Loader DOM container'); + var loader = tf.Cpt.loader; + deepEqual(loader instanceof Loader, true, 'Loader constructor'); + notEqual(loader, null, 'Loader instanciated'); + notEqual(dom.id(loader.prfxLoader+tf.id), null, 'Loader DOM container'); }); }); \ No newline at end of file diff --git a/test/test-paging.js b/test/test-paging.js index 3e71d2ef..5d34355f 100644 --- a/test/test-paging.js +++ b/test/test-paging.js @@ -25,20 +25,20 @@ requirejs(['test-config', '../src/tablefilter'], function(config, TableFilter){ test('Paging UI elements', function() { notEqual(paging.pagingSlc, null, 'Paging drop-down element'); notEqual(paging.resultsPerPageSlc, null, 'Number of results per page drop-down element'); - notEqual(dom.id(tf.prfxBtnNextSpan+tf.id), null, 'Next button container element'); - notEqual(dom.id(tf.prfxBtnPrevSpan+tf.id), null, 'Previous button container element'); - notEqual(dom.id(tf.prfxBtnLastSpan+tf.id), null, 'Last button container element'); - notEqual(dom.id(tf.prfxBtnFirstSpan+tf.id), null, 'First button container element'); + notEqual(dom.id(paging.prfxBtnNextSpan+tf.id), null, 'Next button container element'); + notEqual(dom.id(paging.prfxBtnPrevSpan+tf.id), null, 'Previous button container element'); + notEqual(dom.id(paging.prfxBtnLastSpan+tf.id), null, 'Last button container element'); + notEqual(dom.id(paging.prfxBtnFirstSpan+tf.id), null, 'First button container element'); }); test('Destroy Paging component', function() { paging.destroy(); deepEqual(paging.pagingSlc, null, 'Paging drop-down element'); deepEqual(paging.resultsPerPageSlc, null, 'Paging drop-down element'); - deepEqual(dom.id(tf.prfxBtnNextSpan+tf.id), null, 'Next button container element'); - deepEqual(dom.id(tf.prfxBtnPrevSpan+tf.id), null, 'Previous button container element'); - deepEqual(dom.id(tf.prfxBtnLastSpan+tf.id), null, 'Last button container element'); - deepEqual(dom.id(tf.prfxBtnFirstSpan+tf.id), null, 'First button container element'); + deepEqual(dom.id(paging.prfxBtnNextSpan+tf.id), null, 'Next button container element'); + deepEqual(dom.id(paging.prfxBtnPrevSpan+tf.id), null, 'Previous button container element'); + deepEqual(dom.id(paging.prfxBtnLastSpan+tf.id), null, 'Last button container element'); + deepEqual(dom.id(paging.prfxBtnFirstSpan+tf.id), null, 'First button container element'); deepEqual(paging.nbPages, 0, 'Number of pages'); }); diff --git a/test/test-sort-grid-layout.html b/test/test-sort-grid-layout.html new file mode 100644 index 00000000..d1fca649 --- /dev/null +++ b/test/test-sort-grid-layout.html @@ -0,0 +1,147 @@ + + + + + TableFilter column sort with grid layout mode + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FromDestinationRoad Distance (km)By Air (hrs)By Rail (hrs)
SydneyAdelaide14121.425.3
SydneyBrisbane9821.516
SydneyCanberra286.64.3
SydneyMelbourne8721.110.5
AdelaidePerth27813.138
AdelaideAlice Springs1533220.25
AdelaideBrisbane20452.1540
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FromDestinationRoad Distance (km)By Air (hrs)By Rail (hrs)
SydneyAdelaide14121.425.3
SydneyBrisbane9821.516
SydneyCanberra286.64.3
SydneyMelbourne8721.110.5
AdelaidePerth27813.138
AdelaideAlice Springs1533220.25
AdelaideBrisbane20452.1540
+ + + +
+
+ + \ No newline at end of file diff --git a/test/test-sort-grid-layout.js b/test/test-sort-grid-layout.js new file mode 100644 index 00000000..50ecbca4 --- /dev/null +++ b/test/test-sort-grid-layout.js @@ -0,0 +1,97 @@ +requirejs(['test-config', '../src/tablefilter'], function(config, TableFilter){ + + var types = require('types').Types, + dom = require('dom').Dom; + + var tf = new TableFilter('demo', { + base_path: '../src/', + sort: true, + sort_config: { + sort_types: ['string','string','number','number','number'] + }, + grid_layout: true, + on_sort_loaded: startSimple + }); + tf.init(); + + var tf1 = new TableFilter('demo2', { + base_path: '../src/', + paging: true, + sort: true, + sort_config: { + sort_types: ['string','string','number','number','number'] + }, + grid_layout: true, + on_sort_loaded: startPaging + }); + tf1.init(); + + QUnit.start(); + + function startSimple(tf){ + var sort = tf.Extensions.sort; + + module('Sanity checks'); + test('Sort extension', function() { + notEqual(sort, null, 'Sort instanciated'); + deepEqual(sort.stt instanceof SortableTable, true, 'Sort type'); + deepEqual(sort.sorted, false, 'Table not sorted'); + }); + + test('Sort behaviour', function() { + var th = tf.getHeaderElement(0); + sort.sortByColumnIndex(0); + + deepEqual(sort.sorted, true, 'Table column sorted'); + deepEqual(sort.isPaged, false, 'Table is not paged'); + }); + + module('Destroy and re-init'); + test('Remove sort', function() { + sort.destroy(); + var th = tf.getHeaderElement(0), + indicator = dom.tag(th, 'img'); + deepEqual(tf.sort, false, 'Sort is removed'); + deepEqual(indicator.length, 0, 'Sort indicator is removed'); + }); + + } + + function startPaging(tf){ + var sort = tf.Extensions.sort; + + module('Sanity checks'); + test('Sort extension', function() { + notEqual(sort, null, 'Sort instanciated'); + deepEqual(sort.stt instanceof SortableTable, true, 'Sort type'); + deepEqual(sort.sorted, false, 'Table not sorted'); + }); + + module('UI elements'); + test('Sort UI elements', function() { + var th = tf.getHeaderElement(0), + indicator = dom.tag(th, 'img'); + + deepEqual(indicator.length, 1, 'Sort indicator in header element'); + }); + + test('Sort behaviour', function() { + var th = tf.getHeaderElement(0); + sort.sortByColumnIndex(0); + + deepEqual(sort.sorted, true, 'Table column sorted'); + deepEqual(tf.paging, true, 'Table is paged'); + }); + + module('Destroy and re-init'); + test('Remove sort', function() { + sort.destroy(); + var th = tf.getHeaderElement(0), + indicator = dom.tag(th, 'img'); + deepEqual(tf.sort, false, 'Sort is removed'); + deepEqual(indicator.length, 0, 'Sort indicator is removed'); + }); + + } + +});