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