From 261f2ea8704150d06e19f17015bbaba15d994c12 Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Tue, 17 Feb 2015 17:54:25 +1100 Subject: [PATCH] Fixed popup filter bug related to RemoveGrid action --- TODO | 3 ++- dist/filtergrid.css | 2 +- src-es6/modules/popupFilter.js | 32 ++++++++++++++++++++++++++++---- src/core.js | 8 ++++---- src/modules/popupFilter.js | 4 +--- src/modules/popupFilter.js.map | 2 +- 6 files changed, 37 insertions(+), 14 deletions(-) diff --git a/TODO b/TODO index 151b76c4..56c38662 100644 --- a/TODO +++ b/TODO @@ -2,4 +2,5 @@ - Initialise TableFilter object with a table DOM element - Use DOM event listeners for DOM events - Refactor persistence using localStorage or cookie -- Verify linked filters work as per production \ No newline at end of file +- Verify linked filters work as per production +- Re-style pop-up filter with advanced CSS3 effects \ No newline at end of file diff --git a/dist/filtergrid.css b/dist/filtergrid.css index cb7bd867..a13ef07a 100644 --- a/dist/filtergrid.css +++ b/dist/filtergrid.css @@ -1,6 +1,6 @@ /*------------------------------------------------------------------------ - TableFilter stylesheet by Max Guglielmi - - (build date: Sun Feb 15 2015 19:52:24) + - (build date: Tue Feb 17 2015 17:46:15) - Edit below for your projects' needs ------------------------------------------------------------------------*/ diff --git a/src-es6/modules/popupFilter.js b/src-es6/modules/popupFilter.js index 669bfa19..86d5410f 100644 --- a/src-es6/modules/popupFilter.js +++ b/src-es6/modules/popupFilter.js @@ -57,9 +57,7 @@ export class PopupFilter{ elm = evt.target.parentNode, colIndex = parseInt(elm.getAttribute('ci'), 10); - // o.CloseAllPopupFilters(colIndex); this.closeAll(colIndex); - // o.TogglePopupFilter(colIndex); this.toggle(colIndex); if(this.popUpFltAdjustToContainer){ @@ -93,20 +91,26 @@ export class PopupFilter{ popUpSpan.innerHTML = this.popUpImgFltHtml; var header = tf.GetHeaderElement(i); header.appendChild(popUpSpan); - // popUpSpan.onclick = onClick; Event.add(popUpSpan, 'click', (evt) => { this.onClick(evt); }); this.popUpFltSpans[i] = popUpSpan; this.popUpFltImgs[i] = popUpSpan.firstChild; } } - + /** + * Build all pop-up filters elements + */ buildAll(){ for(var i=0; i';\r\n //defines css class for popup div containing filter\r\n this.popUpDivCssClass = f.popup_div_css_class || 'popUpFilter';\r\n //callback function before popup filtes is opened\r\n this.onBeforePopUpOpen = Types.isFn(f.on_before_popup_filter_open) ?\r\n f.on_before_popup_filter_open : null;\r\n //callback function after popup filtes is opened\r\n this.onAfterPopUpOpen = Types.isFn(f.on_after_popup_filter_open) ?\r\n f.on_after_popup_filter_open : null;\r\n //callback function before popup filtes is closed\r\n this.onBeforePopUpClose =\r\n Types.isFn(f.on_before_popup_filter_close) ?\r\n f.on_before_popup_filter_close : null;\r\n //callback function after popup filtes is closed\r\n this.onAfterPopUpClose = Types.isFn(f.on_after_popup_filter_close) ?\r\n f.on_after_popup_filter_close : null;\r\n\r\n //stores filters spans\r\n this.popUpFltSpans = [];\r\n //stores filters icons\r\n this.popUpFltImgs = [];\r\n //stores filters containers\r\n this.popUpFltElms = this.popUpFltElmCache || [];\r\n this.popUpFltAdjustToContainer = true;\r\n\r\n this.tf = tf;\r\n }\r\n\r\n onClick(e){\r\n var evt = e || global.event,\r\n elm = evt.target.parentNode,\r\n colIndex = parseInt(elm.getAttribute('ci'), 10);\r\n\r\n // o.CloseAllPopupFilters(colIndex);\r\n this.closeAll(colIndex);\r\n // o.TogglePopupFilter(colIndex);\r\n this.toggle(colIndex);\r\n\r\n if(this.popUpFltAdjustToContainer){\r\n var popUpDiv = this.popUpFltElms[colIndex],\r\n header = this.tf.GetHeaderElement(colIndex),\r\n headerWidth = header.clientWidth * 0.95;\r\n if(Helpers.isIE()){\r\n var headerLeft = Dom.position(header).left;\r\n popUpDiv.style.left = (headerLeft) + 'px';\r\n }\r\n popUpDiv.style.width = parseInt(headerWidth, 10) + 'px';\r\n }\r\n Event.cancel(evt);\r\n Event.stop(evt);\r\n }\r\n\r\n /**\r\n * Initialize DOM elements\r\n */\r\n init(){\r\n var tf = this.tf;\r\n for(var i=0; i { this.onClick(evt); });\r\n this.popUpFltSpans[i] = popUpSpan;\r\n this.popUpFltImgs[i] = popUpSpan.firstChild;\r\n }\r\n }\r\n\r\n\r\n buildAll(){\r\n for(var i=0; i { Event.stop(evt); });\r\n this.popUpFltElms[colIndex] = popUpDiv;\r\n }\r\n\r\n toggle(colIndex){\r\n var tf = this.tf,\r\n popUpFltElm = this.popUpFltElms[colIndex];\r\n if(popUpFltElm.style.display === 'none' ||\r\n popUpFltElm.style.display === ''){\r\n if(this.onBeforePopUpOpen){\r\n this.onBeforePopUpOpen.call(\r\n null, this, this.popUpFltElms[colIndex], colIndex);\r\n }\r\n popUpFltElm.style.display = 'block';\r\n if(tf['col'+colIndex] === tf.fltTypeInp){\r\n tf.GetFilterElement(colIndex).focus();\r\n }\r\n if(this.onAfterPopUpOpen){\r\n this.onAfterPopUpOpen.call(\r\n null, this, this.popUpFltElms[colIndex], colIndex);\r\n }\r\n } else {\r\n if(this.onBeforePopUpClose){\r\n this.onBeforePopUpClose.call(\r\n null, this, this.popUpFltElms[colIndex], colIndex);\r\n }\r\n popUpFltElm.style.display = 'none';\r\n if(this.onAfterPopUpClose){\r\n this.onAfterPopUpClose.call(\r\n null, this, this.popUpFltElms[colIndex], colIndex);\r\n }\r\n }\r\n }\r\n\r\n closeAll(exceptIdx){\r\n for(var i=0; i';\r\n //defines css class for popup div containing filter\r\n this.popUpDivCssClass = f.popup_div_css_class || 'popUpFilter';\r\n //callback function before popup filtes is opened\r\n this.onBeforePopUpOpen = Types.isFn(f.on_before_popup_filter_open) ?\r\n f.on_before_popup_filter_open : null;\r\n //callback function after popup filtes is opened\r\n this.onAfterPopUpOpen = Types.isFn(f.on_after_popup_filter_open) ?\r\n f.on_after_popup_filter_open : null;\r\n //callback function before popup filtes is closed\r\n this.onBeforePopUpClose =\r\n Types.isFn(f.on_before_popup_filter_close) ?\r\n f.on_before_popup_filter_close : null;\r\n //callback function after popup filtes is closed\r\n this.onAfterPopUpClose = Types.isFn(f.on_after_popup_filter_close) ?\r\n f.on_after_popup_filter_close : null;\r\n\r\n //stores filters spans\r\n this.popUpFltSpans = [];\r\n //stores filters icons\r\n this.popUpFltImgs = [];\r\n //stores filters containers\r\n this.popUpFltElms = this.popUpFltElmCache || [];\r\n this.popUpFltAdjustToContainer = true;\r\n\r\n this.tf = tf;\r\n }\r\n\r\n onClick(e){\r\n var evt = e || global.event,\r\n elm = evt.target.parentNode,\r\n colIndex = parseInt(elm.getAttribute('ci'), 10);\r\n\r\n this.closeAll(colIndex);\r\n this.toggle(colIndex);\r\n\r\n if(this.popUpFltAdjustToContainer){\r\n var popUpDiv = this.popUpFltElms[colIndex],\r\n header = this.tf.GetHeaderElement(colIndex),\r\n headerWidth = header.clientWidth * 0.95;\r\n if(Helpers.isIE()){\r\n var headerLeft = Dom.position(header).left;\r\n popUpDiv.style.left = (headerLeft) + 'px';\r\n }\r\n popUpDiv.style.width = parseInt(headerWidth, 10) + 'px';\r\n }\r\n Event.cancel(evt);\r\n Event.stop(evt);\r\n }\r\n\r\n /**\r\n * Initialize DOM elements\r\n */\r\n init(){\r\n var tf = this.tf;\r\n for(var i=0; i { this.onClick(evt); });\r\n this.popUpFltSpans[i] = popUpSpan;\r\n this.popUpFltImgs[i] = popUpSpan.firstChild;\r\n }\r\n }\r\n\r\n /**\r\n * Build all pop-up filters elements\r\n */\r\n buildAll(){\r\n for(var i=0; i { Event.stop(evt); });\r\n this.popUpFltElms[colIndex] = popUpDiv;\r\n }\r\n\r\n /**\r\n * Toogle visibility of specified filter\r\n * @param {Number} colIndex Column index\r\n */\r\n toggle(colIndex){\r\n var tf = this.tf,\r\n popUpFltElm = this.popUpFltElms[colIndex];\r\n\r\n if(popUpFltElm.style.display === 'none' ||\r\n popUpFltElm.style.display === ''){\r\n if(this.onBeforePopUpOpen){\r\n this.onBeforePopUpOpen.call(\r\n null, this, this.popUpFltElms[colIndex], colIndex);\r\n }\r\n popUpFltElm.style.display = 'block';\r\n if(tf['col'+colIndex] === tf.fltTypeInp){\r\n tf.GetFilterElement(colIndex).focus();\r\n }\r\n if(this.onAfterPopUpOpen){\r\n this.onAfterPopUpOpen.call(\r\n null, this, this.popUpFltElms[colIndex], colIndex);\r\n }\r\n } else {\r\n if(this.onBeforePopUpClose){\r\n this.onBeforePopUpClose.call(\r\n null, this, this.popUpFltElms[colIndex], colIndex);\r\n }\r\n popUpFltElm.style.display = 'none';\r\n if(this.onAfterPopUpClose){\r\n this.onAfterPopUpClose.call(\r\n null, this, this.popUpFltElms[colIndex], colIndex);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Close all filters excepted for the specified one if any\r\n * @param {Number} exceptIdx Column index of the filter to not close\r\n */\r\n closeAll(exceptIdx){\r\n for(var i=0; i