1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-23 16:52:26 +02:00

Fixed popup filter bug related to RemoveGrid action

This commit is contained in:
Max Guglielmi 2015-02-17 17:54:25 +11:00
parent 745d815ae8
commit 261f2ea870
6 changed files with 37 additions and 14 deletions

3
TODO
View file

@ -2,4 +2,5 @@
- Initialise TableFilter object with a table DOM element - Initialise TableFilter object with a table DOM element
- Use DOM event listeners for DOM events - Use DOM event listeners for DOM events
- Refactor persistence using localStorage or cookie - Refactor persistence using localStorage or cookie
- Verify linked filters work as per production - Verify linked filters work as per production
- Re-style pop-up filter with advanced CSS3 effects

2
dist/filtergrid.css vendored
View file

@ -1,6 +1,6 @@
/*------------------------------------------------------------------------ /*------------------------------------------------------------------------
- TableFilter stylesheet by Max Guglielmi - 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 - Edit below for your projects' needs
------------------------------------------------------------------------*/ ------------------------------------------------------------------------*/

View file

@ -57,9 +57,7 @@ export class PopupFilter{
elm = evt.target.parentNode, elm = evt.target.parentNode,
colIndex = parseInt(elm.getAttribute('ci'), 10); colIndex = parseInt(elm.getAttribute('ci'), 10);
// o.CloseAllPopupFilters(colIndex);
this.closeAll(colIndex); this.closeAll(colIndex);
// o.TogglePopupFilter(colIndex);
this.toggle(colIndex); this.toggle(colIndex);
if(this.popUpFltAdjustToContainer){ if(this.popUpFltAdjustToContainer){
@ -93,20 +91,26 @@ export class PopupFilter{
popUpSpan.innerHTML = this.popUpImgFltHtml; popUpSpan.innerHTML = this.popUpImgFltHtml;
var header = tf.GetHeaderElement(i); var header = tf.GetHeaderElement(i);
header.appendChild(popUpSpan); header.appendChild(popUpSpan);
// popUpSpan.onclick = onClick;
Event.add(popUpSpan, 'click', (evt) => { this.onClick(evt); }); Event.add(popUpSpan, 'click', (evt) => { this.onClick(evt); });
this.popUpFltSpans[i] = popUpSpan; this.popUpFltSpans[i] = popUpSpan;
this.popUpFltImgs[i] = popUpSpan.firstChild; this.popUpFltImgs[i] = popUpSpan.firstChild;
} }
} }
/**
* Build all pop-up filters elements
*/
buildAll(){ buildAll(){
for(var i=0; i<this.popUpFltElmCache.length; i++){ for(var i=0; i<this.popUpFltElmCache.length; i++){
this.build(i, this.popUpFltElmCache[i]); this.build(i, this.popUpFltElmCache[i]);
} }
} }
/**
* Build a specified pop-up filter elements
* @param {Number} colIndex Column index
* @param {Object} div Optional container DOM element
*/
build(colIndex, div){ build(colIndex, div){
var tf = this.tf; var tf = this.tf;
var popUpDiv = !div ? var popUpDiv = !div ?
@ -121,9 +125,14 @@ export class PopupFilter{
this.popUpFltElms[colIndex] = popUpDiv; this.popUpFltElms[colIndex] = popUpDiv;
} }
/**
* Toogle visibility of specified filter
* @param {Number} colIndex Column index
*/
toggle(colIndex){ toggle(colIndex){
var tf = this.tf, var tf = this.tf,
popUpFltElm = this.popUpFltElms[colIndex]; popUpFltElm = this.popUpFltElms[colIndex];
if(popUpFltElm.style.display === 'none' || if(popUpFltElm.style.display === 'none' ||
popUpFltElm.style.display === ''){ popUpFltElm.style.display === ''){
if(this.onBeforePopUpOpen){ if(this.onBeforePopUpOpen){
@ -151,6 +160,10 @@ export class PopupFilter{
} }
} }
/**
* Close all filters excepted for the specified one if any
* @param {Number} exceptIdx Column index of the filter to not close
*/
closeAll(exceptIdx){ closeAll(exceptIdx){
for(var i=0; i<this.popUpFltElms.length; i++){ for(var i=0; i<this.popUpFltElms.length; i++){
if(i === exceptIdx){ if(i === exceptIdx){
@ -163,12 +176,20 @@ export class PopupFilter{
} }
} }
/**
* Build all the icons representing the pop-up filters
*/
buildIcons(){ buildIcons(){
for(var i=0; i<this.popUpFltImgs.length; i++){ for(var i=0; i<this.popUpFltImgs.length; i++){
this.buildIcon(i, false); this.buildIcon(i, false);
} }
} }
/**
* Build specified icon
* @param {Number} colIndex Column index
* @param {Boolean} active Apply active state
*/
buildIcon(colIndex, active){ buildIcon(colIndex, active){
var activeImg = Types.isUndef(active) ? true : active; var activeImg = Types.isUndef(active) ? true : active;
if(this.popUpFltImgs[colIndex]){ if(this.popUpFltImgs[colIndex]){
@ -177,6 +198,9 @@ export class PopupFilter{
} }
} }
/**
* Remove pop-up filters
*/
destroy(){ destroy(){
this.popUpFltElmCache = []; this.popUpFltElmCache = [];
for(var i=0; i<this.popUpFltElms.length; i++){ for(var i=0; i<this.popUpFltElms.length; i++){

View file

@ -907,9 +907,9 @@ TableFilter.prototype = {
} }
if(this.popUpFilters){ if(this.popUpFilters){
if(!this.isFirstLoad && !this.gridLayout){ // if(!this.isFirstLoad && !this.gridLayout){
this.headersRow--; // this.headersRow--;
} // }
// this.SetPopupFilterIcons(); // this.SetPopupFilterIcons();
if(!this.Cpt.popupFilter){ if(!this.Cpt.popupFilter){
var PopupFilter = require('modules/popupFilter').PopupFilter; var PopupFilter = require('modules/popupFilter').PopupFilter;
@ -3976,7 +3976,7 @@ TableFilter.prototype = {
- returns a header DOM element for a given column - returns a header DOM element for a given column
index index
=====================================================*/ =====================================================*/
GetHeaderElement: function(colIndex){ GetHeaderElement: function(colIndex){console.log(this.headersRow);
var table = this.gridLayout ? this.headTbl : this.tbl; var table = this.gridLayout ? this.headTbl : this.tbl;
var header, tHead = dom.tag(this.tbl,'thead'); var header, tHead = dom.tag(this.tbl,'thead');
for(var i=0; i<this.nbCells; i++){ for(var i=0; i<this.nbCells; i++){

View file

@ -52,9 +52,7 @@ define(["exports", "../types", "../dom", "../event", "../helpers"], function (ex
value: function (e) { value: function (e) {
var evt = e || global.event, elm = evt.target.parentNode, colIndex = parseInt(elm.getAttribute("ci"), 10); var evt = e || global.event, elm = evt.target.parentNode, colIndex = parseInt(elm.getAttribute("ci"), 10);
// o.CloseAllPopupFilters(colIndex);
this.closeAll(colIndex); this.closeAll(colIndex);
// o.TogglePopupFilter(colIndex);
this.toggle(colIndex); this.toggle(colIndex);
if (this.popUpFltAdjustToContainer) { if (this.popUpFltAdjustToContainer) {
@ -82,7 +80,6 @@ define(["exports", "../types", "../dom", "../event", "../helpers"], function (ex
popUpSpan.innerHTML = this.popUpImgFltHtml; popUpSpan.innerHTML = this.popUpImgFltHtml;
var header = tf.GetHeaderElement(i); var header = tf.GetHeaderElement(i);
header.appendChild(popUpSpan); header.appendChild(popUpSpan);
// popUpSpan.onclick = onClick;
Event.add(popUpSpan, "click", function (evt) { Event.add(popUpSpan, "click", function (evt) {
_this.onClick(evt); _this.onClick(evt);
}); });
@ -119,6 +116,7 @@ define(["exports", "../types", "../dom", "../event", "../helpers"], function (ex
writable: true, writable: true,
value: function (colIndex) { value: function (colIndex) {
var tf = this.tf, popUpFltElm = this.popUpFltElms[colIndex]; var tf = this.tf, popUpFltElm = this.popUpFltElms[colIndex];
if (popUpFltElm.style.display === "none" || popUpFltElm.style.display === "") { if (popUpFltElm.style.display === "none" || popUpFltElm.style.display === "") {
if (this.onBeforePopUpOpen) { if (this.onBeforePopUpOpen) {
this.onBeforePopUpOpen.call(null, this, this.popUpFltElms[colIndex], colIndex); this.onBeforePopUpOpen.call(null, this, this.popUpFltElms[colIndex], colIndex);

File diff suppressed because one or more lines are too long