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

Started pop-up filter module

Browse source
This commit is contained in:
Max Guglielmi 2015-02-15 19:55:23 +11:00
parent 28181a5646
commit 745d815ae8
8 changed files with 597 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gruntfile.js
View file

@ -150,4 +150,4 @@ module.exports = function (grunt) {
grunt.registerTask('dev', ['jshint', '6to5', 'concat', 'cssmin', 'copy']); grunt.registerTask('dev', ['jshint', '6to5', 'concat', 'cssmin', 'copy']);
grunt.registerTask('toes5', ['6to5']); grunt.registerTask('toes5', ['6to5']);
grunt.registerTask('test', ['qunit']); grunt.registerTask('test', ['qunit']);
}; };

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 15:02:22) - (build date: Sun Feb 15 2015 19:52:24)
- Edit below for your projects' needs - Edit below for your projects' needs
------------------------------------------------------------------------*/ ------------------------------------------------------------------------*/

2
dist/tablefilter.js vendored
View file

@ -1,6 +1,6 @@
/*------------------------------------------------------------------------ /*------------------------------------------------------------------------
- TableFilter v3.0.0 by Max Guglielmi - TableFilter v3.0.0 by Max Guglielmi
- build date: Sun Feb 15 2015 15:02:21 - build date: Sun Feb 15 2015 15:16:20
- http://tablefilter.free.fr - http://tablefilter.free.fr
- Copyright (c) 2014, Licensed under the MIT License - Copyright (c) 2014, Licensed under the MIT License
------------------------------------------------------------------------*/ ------------------------------------------------------------------------*/

196
src-es6/modules/popupFilter.js Normal file
View file

@ -0,0 +1,196 @@
import {Types} from '../types';
import {Dom} from '../dom';
import {Event} from '../event';
import {Helpers} from '../helpers';
export class PopupFilter{
/**
* Pop-up filter component
* @param {Object} tf TableFilter instance
*/
constructor(tf){
// Configuration object
var f = tf.fObj;
// Enable external filters behaviour
tf.isExternalFlt = true;
tf.externalFltTgtIds = [];
//filter icon path
this.popUpImgFlt = f.popup_filters_image ||
tf.themesPath+'icn_filter.gif';
//active filter icon path
this.popUpImgFltActive = f.popup_filters_image_active ||
tf.themesPath+'icn_filterActive.gif';
this.popUpImgFltHtml = f.popup_filters_image_html ||
'<img src="'+ this.popUpImgFlt +'" alt="Column filter" />';
//defines css class for popup div containing filter
this.popUpDivCssClass = f.popup_div_css_class || 'popUpFilter';
//callback function before popup filtes is opened
this.onBeforePopUpOpen = Types.isFn(f.on_before_popup_filter_open) ?
f.on_before_popup_filter_open : null;
//callback function after popup filtes is opened
this.onAfterPopUpOpen = Types.isFn(f.on_after_popup_filter_open) ?
f.on_after_popup_filter_open : null;
//callback function before popup filtes is closed
this.onBeforePopUpClose =
Types.isFn(f.on_before_popup_filter_close) ?
f.on_before_popup_filter_close : null;
//callback function after popup filtes is closed
this.onAfterPopUpClose = Types.isFn(f.on_after_popup_filter_close) ?
f.on_after_popup_filter_close : null;
//stores filters spans
this.popUpFltSpans = [];
//stores filters icons
this.popUpFltImgs = [];
//stores filters containers
this.popUpFltElms = this.popUpFltElmCache || [];
this.popUpFltAdjustToContainer = true;
this.tf = tf;
}
onClick(e){
var evt = e || global.event,
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){
var popUpDiv = this.popUpFltElms[colIndex],
header = this.tf.GetHeaderElement(colIndex),
headerWidth = header.clientWidth * 0.95;
if(Helpers.isIE()){
var headerLeft = Dom.position(header).left;
popUpDiv.style.left = (headerLeft) + 'px';
}
popUpDiv.style.width = parseInt(headerWidth, 10) + 'px';
}
Event.cancel(evt);
Event.stop(evt);
}
/**
* Initialize DOM elements
*/
init(){
var tf = this.tf;
for(var i=0; i<tf.nbCells; i++){
if(tf['col'+i] === tf.fltTypeNone){
continue;
}
var popUpSpan = Dom.create(
'span',
['id', tf.prfxPopUpSpan+tf.id+'_'+i],
['ci', i]
);
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;
}
}
buildAll(){
for(var i=0; i<this.popUpFltElmCache.length; i++){
this.build(i, this.popUpFltElmCache[i]);
}
}
build(colIndex, div){
var tf = this.tf;
var popUpDiv = !div ?
Dom.create('div', ['id', tf.prfxPopUpDiv+tf.id+'_'+colIndex]) :
div;
popUpDiv.className = this.popUpDivCssClass;
tf.externalFltTgtIds.push(popUpDiv.id);
var header = tf.GetHeaderElement(colIndex);
header.insertBefore(popUpDiv, header.firstChild);
//popUpDiv.onclick = function(e){ evt.stop(e || global.event); };
Event.add(popUpDiv, 'click', (evt) => { Event.stop(evt); });
this.popUpFltElms[colIndex] = popUpDiv;
}
toggle(colIndex){
var tf = this.tf,
popUpFltElm = this.popUpFltElms[colIndex];
if(popUpFltElm.style.display === 'none' ||
popUpFltElm.style.display === ''){
if(this.onBeforePopUpOpen){
this.onBeforePopUpOpen.call(
null, this, this.popUpFltElms[colIndex], colIndex);
}
popUpFltElm.style.display = 'block';
if(tf['col'+colIndex] === tf.fltTypeInp){
tf.GetFilterElement(colIndex).focus();
}
if(this.onAfterPopUpOpen){
this.onAfterPopUpOpen.call(
null, this, this.popUpFltElms[colIndex], colIndex);
}
} else {
if(this.onBeforePopUpClose){
this.onBeforePopUpClose.call(
null, this, this.popUpFltElms[colIndex], colIndex);
}
popUpFltElm.style.display = 'none';
if(this.onAfterPopUpClose){
this.onAfterPopUpClose.call(
null, this, this.popUpFltElms[colIndex], colIndex);
}
}
}
closeAll(exceptIdx){
for(var i=0; i<this.popUpFltElms.length; i++){
if(i === exceptIdx){
continue;
}
var popUpFltElm = this.popUpFltElms[i];
if(popUpFltElm){
popUpFltElm.style.display = 'none';
}
}
}
buildIcons(){
for(var i=0; i<this.popUpFltImgs.length; i++){
this.buildIcon(i, false);
}
}
buildIcon(colIndex, active){
var activeImg = Types.isUndef(active) ? true : active;
if(this.popUpFltImgs[colIndex]){
this.popUpFltImgs[colIndex].src = active ?
this.popUpImgFltActive : this.popUpImgFlt;
}
}
destroy(){
this.popUpFltElmCache = [];
for(var i=0; i<this.popUpFltElms.length; i++){
var popUpFltElm = this.popUpFltElms[i],
popUpFltSpan = this.popUpFltSpans[i];
if(popUpFltElm){
popUpFltElm.parentNode.removeChild(popUpFltElm);
this.popUpFltElmCache[i] = popUpFltElm;
}
popUpFltElm = null;
if(popUpFltSpan){
popUpFltSpan.parentNode.removeChild(popUpFltSpan);
}
popUpFltSpan = null;
}
}
}

384
src/core.js
View file

@ -302,12 +302,6 @@ function TableFilter(id) {
this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null; this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null;
//enabled selects are populated on demand //enabled selects are populated on demand
this.fillSlcOnDemand = f.fill_slc_on_demand===true ? true : false; this.fillSlcOnDemand = f.fill_slc_on_demand===true ? true : false;
// //IE only, tooltip text appearing on select before it is populated
// this.activateSlcTooltip = f.activate_slc_tooltip ||
// 'Click to activate';
// //tooltip text appearing on multiple select
// this.multipleSlcTooltip = f.multiple_slc_tooltip ||
// 'Use Ctrl key for multiple selections';
this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ? this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ?
true : false; true : false;
this.customSlcOptions = types.isArray(f.custom_slc_options) ? this.customSlcOptions = types.isArray(f.custom_slc_options) ?
@ -625,7 +619,8 @@ function TableFilter(id) {
highlightKeywords: null, highlightKeywords: null,
paging: null, paging: null,
checkList: null, checkList: null,
dropdown: null dropdown: null,
popupFilter: null
}; };
/*** TF events ***/ /*** TF events ***/
@ -899,8 +894,10 @@ TableFilter.prototype = {
} }
if(this.loader){ if(this.loader){
var Loader = require('modules/loader').Loader; if(!this.Cpt.loader){
this.Cpt.loader = new Loader(this); var Loader = require('modules/loader').Loader;
this.Cpt.loader = new Loader(this);
}
} }
if(this.highlightKeywords){ if(this.highlightKeywords){
@ -913,7 +910,12 @@ TableFilter.prototype = {
if(!this.isFirstLoad && !this.gridLayout){ if(!this.isFirstLoad && !this.gridLayout){
this.headersRow--; this.headersRow--;
} }
this.SetPopupFilterIcons(); // this.SetPopupFilterIcons();
if(!this.Cpt.popupFilter){
var PopupFilter = require('modules/popupFilter').PopupFilter;
this.Cpt.popupFilter = new PopupFilter(this);
}
this.Cpt.popupFilter.init();
} }
//filters grid is not generated //filters grid is not generated
@ -958,6 +960,12 @@ TableFilter.prototype = {
this.nbRows = this.tbl.rows.length; this.nbRows = this.tbl.rows.length;
for(var i=0; i<n; i++){// this loop adds filters for(var i=0; i<n; i++){// this loop adds filters
if(this.popUpFilters){
// this.SetPopupFilter(i);
this.Cpt.popupFilter.build(i);
}
var fltcell = dom.create(this.fltCellTag), var fltcell = dom.create(this.fltCellTag),
col = this['col'+i], col = this['col'+i],
externalFltTgtId = externalFltTgtId =
@ -973,10 +981,6 @@ TableFilter.prototype = {
inpclass = (i==n-1 && this.displayBtn) ? inpclass = (i==n-1 && this.displayBtn) ?
this.fltSmallCssClass : this.fltCssClass; this.fltSmallCssClass : this.fltCssClass;
if(this.popUpFilters){
this.SetPopupFilter(i);
}
if(col===undefined){ if(col===undefined){
col = f['col_'+i]===undefined ? col = f['col_'+i]===undefined ?
this.fltTypeInp : str.lower(f['col_'+i]); this.fltTypeInp : str.lower(f['col_'+i]);
@ -1009,7 +1013,7 @@ TableFilter.prototype = {
slc.className = str.lower(col)===this.fltTypeSlc ? slc.className = str.lower(col)===this.fltTypeSlc ?
inpclass : this.fltMultiCssClass;// for ie<=6 inpclass : this.fltMultiCssClass;// for ie<=6
//filter is appended in desired element //filter is appended in desired external element
if(externalFltTgtId){ if(externalFltTgtId){
dom.id(externalFltTgtId).appendChild(slc); dom.id(externalFltTgtId).appendChild(slc);
this.externalFltEls.push(slc); this.externalFltEls.push(slc);
@ -1475,7 +1479,8 @@ TableFilter.prototype = {
this.Cpt.loader.remove(); this.Cpt.loader.remove();
} }
if(this.popUpFilters){ if(this.popUpFilters){
this.RemovePopupFilters(); // this.RemovePopupFilters();
this.Cpt.popupFilter.destroy();
} }
if(this.markActiveColumns){ if(this.markActiveColumns){
this.ClearActiveColumns(); this.ClearActiveColumns();
@ -2419,194 +2424,194 @@ TableFilter.prototype = {
/*==================================================== /*====================================================
- generates popup filters div - generates popup filters div
=====================================================*/ =====================================================*/
SetPopupFilterIcons: function(){ // SetPopupFilterIcons: function(){
if(!this.popUpFilters){ // if(!this.popUpFilters){
return; // return;
} // }
//external filters behaviour is enabled // //external filters behaviour is enabled
this.isExternalFlt = true; // this.isExternalFlt = true;
var f = this.fObj; // var f = this.fObj;
//filter icon path // //filter icon path
this.popUpImgFlt = f.popup_filters_image || // this.popUpImgFlt = f.popup_filters_image ||
this.themesPath+'icn_filter.gif'; // this.themesPath+'icn_filter.gif';
//active filter icon path // //active filter icon path
this.popUpImgFltActive = f.popup_filters_image_active || // this.popUpImgFltActive = f.popup_filters_image_active ||
this.themesPath+'icn_filterActive.gif'; // this.themesPath+'icn_filterActive.gif';
this.popUpImgFltHtml = f.popup_filters_image_html || // this.popUpImgFltHtml = f.popup_filters_image_html ||
'<img src="'+ this.popUpImgFlt +'" alt="Column filter" />'; // '<img src="'+ this.popUpImgFlt +'" alt="Column filter" />';
//defines css class for popup div containing filter // //defines css class for popup div containing filter
this.popUpDivCssClass = f.popup_div_css_class || 'popUpFilter'; // this.popUpDivCssClass = f.popup_div_css_class || 'popUpFilter';
//callback function before popup filtes is opened // //callback function before popup filtes is opened
this.onBeforePopUpOpen = types.isFn(f.on_before_popup_filter_open) ? // this.onBeforePopUpOpen = types.isFn(f.on_before_popup_filter_open) ?
f.on_before_popup_filter_open : null; // f.on_before_popup_filter_open : null;
//callback function after popup filtes is opened // //callback function after popup filtes is opened
this.onAfterPopUpOpen = types.isFn(f.on_after_popup_filter_open) ? // this.onAfterPopUpOpen = types.isFn(f.on_after_popup_filter_open) ?
f.on_after_popup_filter_open : null; // f.on_after_popup_filter_open : null;
//callback function before popup filtes is closed // //callback function before popup filtes is closed
this.onBeforePopUpClose = // this.onBeforePopUpClose =
types.isFn(f.on_before_popup_filter_close) ? // types.isFn(f.on_before_popup_filter_close) ?
f.on_before_popup_filter_close : null; // f.on_before_popup_filter_close : null;
//callback function after popup filtes is closed // //callback function after popup filtes is closed
this.onAfterPopUpClose = types.isFn(f.on_after_popup_filter_close) ? // this.onAfterPopUpClose = types.isFn(f.on_after_popup_filter_close) ?
f.on_after_popup_filter_close : null; // f.on_after_popup_filter_close : null;
this.externalFltTgtIds = []; // this.externalFltTgtIds = [];
//stores filters spans // //stores filters spans
this.popUpFltSpans = []; // this.popUpFltSpans = [];
//stores filters icons // //stores filters icons
this.popUpFltImgs = []; // this.popUpFltImgs = [];
//stores filters containers // //stores filters containers
this.popUpFltElms = this.popUpFltElmCache || []; // this.popUpFltElms = this.popUpFltElmCache || [];
this.popUpFltAdjustToContainer = true; // this.popUpFltAdjustToContainer = true;
function onClick(e){ // function onClick(e){
var evt = e || global.event, // var evt = e || global.event,
colIndex = parseInt(this.getAttribute('ci'), 10); // colIndex = parseInt(this.getAttribute('ci'), 10);
o.CloseAllPopupFilters(colIndex); // o.CloseAllPopupFilters(colIndex);
o.TogglePopupFilter(colIndex); // o.TogglePopupFilter(colIndex);
if(o.popUpFltAdjustToContainer){ // if(o.popUpFltAdjustToContainer){
var popUpDiv = o.popUpFltElms[colIndex], // var popUpDiv = o.popUpFltElms[colIndex],
header = o.GetHeaderElement(colIndex), // header = o.GetHeaderElement(colIndex),
headerWidth = header.clientWidth * 0.95; // headerWidth = header.clientWidth * 0.95;
if(hlp.isIE()){ // if(hlp.isIE()){
var headerLeft = dom.position(header).left; // var headerLeft = dom.position(header).left;
popUpDiv.style.left = (headerLeft) + 'px'; // popUpDiv.style.left = (headerLeft) + 'px';
} // }
popUpDiv.style.width = parseInt(headerWidth, 10) + 'px'; // popUpDiv.style.width = parseInt(headerWidth, 10) + 'px';
} // }
evt.cancel(evt); // evt.cancel(evt);
evt.stop(evt); // evt.stop(evt);
} // }
var o = this; // var o = this;
for(var i=0; i<this.nbCells; i++){ // for(var i=0; i<this.nbCells; i++){
if(this['col'+i] == this.fltTypeNone){ // if(this['col'+i] == this.fltTypeNone){
continue; // continue;
} // }
var popUpSpan = dom.create( // var popUpSpan = dom.create(
'span', ['id', this.prfxPopUpSpan+this.id+'_'+i], ['ci',i]); // 'span', ['id', this.prfxPopUpSpan+this.id+'_'+i], ['ci',i]);
popUpSpan.innerHTML = this.popUpImgFltHtml; // popUpSpan.innerHTML = this.popUpImgFltHtml;
var header = this.GetHeaderElement(i); // var header = this.GetHeaderElement(i);
header.appendChild(popUpSpan); // header.appendChild(popUpSpan);
popUpSpan.onclick = onClick; // popUpSpan.onclick = onClick;
this.popUpFltSpans[i] = popUpSpan; // this.popUpFltSpans[i] = popUpSpan;
this.popUpFltImgs[i] = popUpSpan.firstChild; // this.popUpFltImgs[i] = popUpSpan.firstChild;
} // }
}, // },
/*==================================================== // /*====================================================
- generates all popup filters div // - generates all popup filters div
=====================================================*/ // =====================================================*/
SetPopupFilters: function(){ // SetPopupFilters: function(){
for(var i=0; i<this.popUpFltElmCache.length; i++){ // for(var i=0; i<this.popUpFltElmCache.length; i++){
this.SetPopupFilter(i, this.popUpFltElmCache[i]); // this.SetPopupFilter(i, this.popUpFltElmCache[i]);
} // }
}, // },
/*==================================================== // /*====================================================
- generates a popup filters div for specifies // - generates a popup filters div for specifies
column // column
=====================================================*/ // =====================================================*/
SetPopupFilter: function(colIndex, div){ // SetPopupFilter: function(colIndex, div){
var popUpDiv = !div ? // var popUpDiv = !div ?
dom.create('div',['id',this.prfxPopUpDiv+this.id+'_'+colIndex]) : // dom.create('div',['id',this.prfxPopUpDiv+this.id+'_'+colIndex]) :
div; // div;
popUpDiv.className = this.popUpDivCssClass; // popUpDiv.className = this.popUpDivCssClass;
this.externalFltTgtIds.push(this.prfxPopUpDiv+this.id+'_'+colIndex); // this.externalFltTgtIds.push(this.prfxPopUpDiv+this.id+'_'+colIndex);
var header = this.GetHeaderElement(colIndex); // var header = this.GetHeaderElement(colIndex);
header.insertBefore(popUpDiv, header.firstChild); // header.insertBefore(popUpDiv, header.firstChild);
popUpDiv.onclick = function(e){ evt.stop(e || global.event); }; // popUpDiv.onclick = function(e){ evt.stop(e || global.event); };
this.popUpFltElms[colIndex] = popUpDiv; // this.popUpFltElms[colIndex] = popUpDiv;
}, // },
/*==================================================== // /*====================================================
- toggles popup filters div // - toggles popup filters div
=====================================================*/ // =====================================================*/
TogglePopupFilter: function(colIndex){ // TogglePopupFilter: function(colIndex){
var popUpFltElm = this.popUpFltElms[colIndex]; // var 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){
this.onBeforePopUpOpen.call( // this.onBeforePopUpOpen.call(
null,this, this.popUpFltElms[colIndex],colIndex); // null,this, this.popUpFltElms[colIndex],colIndex);
} // }
popUpFltElm.style.display = 'block'; // popUpFltElm.style.display = 'block';
if(this['col'+colIndex] === this.fltTypeInp){ // if(this['col'+colIndex] === this.fltTypeInp){
this.GetFilterElement(colIndex).focus(); // this.GetFilterElement(colIndex).focus();
} // }
if(this.onAfterPopUpOpen){ // if(this.onAfterPopUpOpen){
this.onAfterPopUpOpen.call( // this.onAfterPopUpOpen.call(
null,this, this.popUpFltElms[colIndex],colIndex); // null,this, this.popUpFltElms[colIndex],colIndex);
} // }
} else { // } else {
if(this.onBeforePopUpClose){ // if(this.onBeforePopUpClose){
this.onBeforePopUpClose.call( // this.onBeforePopUpClose.call(
null,this, this.popUpFltElms[colIndex],colIndex); // null,this, this.popUpFltElms[colIndex],colIndex);
} // }
popUpFltElm.style.display = 'none'; // popUpFltElm.style.display = 'none';
if(this.onAfterPopUpClose){ // if(this.onAfterPopUpClose){
this.onAfterPopUpClose.call( // this.onAfterPopUpClose.call(
null,this, this.popUpFltElms[colIndex],colIndex); // null,this, this.popUpFltElms[colIndex],colIndex);
} // }
} // }
}, // },
/*==================================================== /*====================================================
- closes all popup filters - closes all popup filters
=====================================================*/ =====================================================*/
CloseAllPopupFilters: function(exceptColIndex){ // CloseAllPopupFilters: function(exceptColIndex){
for(var i=0; i<this.popUpFltElms.length; i++){ // for(var i=0; i<this.popUpFltElms.length; i++){
if(i === exceptColIndex){ // if(i === exceptColIndex){
continue; // continue;
} // }
var popUpFltElm = this.popUpFltElms[i]; // var popUpFltElm = this.popUpFltElms[i];
if(popUpFltElm){ // if(popUpFltElm){
popUpFltElm.style.display = 'none'; // popUpFltElm.style.display = 'none';
} // }
} // }
}, // },
/*==================================================== /*====================================================
- removes popup filters div - removes popup filters div
=====================================================*/ =====================================================*/
RemovePopupFilters: function(){ // RemovePopupFilters: function(){
this.popUpFltElmCache = []; // this.popUpFltElmCache = [];
for(var i=0; i<this.popUpFltElms.length; i++){ // for(var i=0; i<this.popUpFltElms.length; i++){
var popUpFltElm = this.popUpFltElms[i], // var popUpFltElm = this.popUpFltElms[i],
popUpFltSpan = this.popUpFltSpans[i]; // popUpFltSpan = this.popUpFltSpans[i];
if(popUpFltElm){ // if(popUpFltElm){
popUpFltElm.parentNode.removeChild(popUpFltElm); // popUpFltElm.parentNode.removeChild(popUpFltElm);
this.popUpFltElmCache[i] = popUpFltElm; // this.popUpFltElmCache[i] = popUpFltElm;
} // }
popUpFltElm = null; // popUpFltElm = null;
if(popUpFltSpan){ // if(popUpFltSpan){
popUpFltSpan.parentNode.removeChild(popUpFltSpan); // popUpFltSpan.parentNode.removeChild(popUpFltSpan);
} // }
popUpFltSpan = null; // popUpFltSpan = null;
} // }
}, // },
/*==================================================== /*====================================================
- sets inactive or active filter icon - sets inactive or active filter icon
=====================================================*/ =====================================================*/
SetPopupFilterIcon: function(colIndex, active){ // SetPopupFilterIcon: function(colIndex, active){
var activeImg = active===undefined ? true : active; // var activeImg = active===undefined ? true : active;
if(this.popUpFltImgs[colIndex]){ // if(this.popUpFltImgs[colIndex]){
this.popUpFltImgs[colIndex].src = active ? // this.popUpFltImgs[colIndex].src = active ?
this.popUpImgFltActive : this.popUpImgFlt; // this.popUpImgFltActive : this.popUpImgFlt;
} // }
}, // },
/*==================================================== /*====================================================
- sets inactive or active filter icon for all - sets inactive or active filter icon for all
filters filters
=====================================================*/ =====================================================*/
SetAllPopupFiltersIcon: function(active){ // SetAllPopupFiltersIcon: function(active){
var activeImg = active===undefined ? false : active; // var activeImg = active===undefined ? false : active;
for(var i=0; i<this.popUpFltImgs.length; i++){ // for(var i=0; i<this.popUpFltImgs.length; i++){
this.SetPopupFilterIcon(i, false); // this.SetPopupFilterIcon(i, false);
} // }
}, // },
ResetValues: function(){ ResetValues: function(){
this.EvtManager(this.Evt.name.resetvalues); this.EvtManager(this.Evt.name.resetvalues);
@ -2763,7 +2768,8 @@ TableFilter.prototype = {
} }
//removes popup filters active icons //removes popup filters active icons
if(this.popUpFilters){ if(this.popUpFilters){
this.SetAllPopupFiltersIcon(); // this.SetAllPopupFiltersIcon();
this.Cpt.popupFilter.buildIcons();
} }
//removes active column header class //removes active column header class
if(this.markActiveColumns){ if(this.markActiveColumns){
@ -3043,7 +3049,7 @@ TableFilter.prototype = {
//single search parameter //single search parameter
else { else {
occurence[j] = hasArg(str.trim(sA), cell_data, j); occurence[j] = hasArg(str.trim(sA), cell_data, j);
highlight(sA,occurence[j],cell[j]); highlight(sA, occurence[j], cell[j]);
}//else single param }//else single param
if(!occurence[j]){ if(!occurence[j]){
@ -3053,7 +3059,8 @@ TableFilter.prototype = {
singleFltRowValid = true; singleFltRowValid = true;
} }
if(this.popUpFilters){ if(this.popUpFilters){
this.SetPopupFilterIcon(j, true); // this.SetPopupFilterIcon(j, true);
this.Cpt.popupFilter.buildIcon(j, true);
} }
if(this.markActiveColumns){ if(this.markActiveColumns){
if(k === this.refRow){ if(k === this.refRow){
@ -3157,7 +3164,8 @@ TableFilter.prototype = {
this.SetWatermark(true); this.SetWatermark(true);
} }
if(this.popUpFilters){ if(this.popUpFilters){
this.CloseAllPopupFilters(); // this.CloseAllPopupFilters();
this.Cpt.popupFilter.closeAll();
} }
}, },
@ -3779,7 +3787,8 @@ TableFilter.prototype = {
} else { } else {
if(this.popUpFilters){ if(this.popUpFilters){
this.headersRow++; this.headersRow++;
this.SetPopupFilters(); // this.SetPopupFilters();
this.Cpt.popupFilter.buildAll();
} }
} }
@ -3792,7 +3801,8 @@ TableFilter.prototype = {
o.fltIds = []; o.fltIds = [];
o.isFirstLoad = true; o.isFirstLoad = true;
if(o.popUpFilters){ if(o.popUpFilters){
o.RemovePopupFilters(); // o.RemovePopupFilters();
o.Cpt.popupFilter.destroy();
} }
o._AddGrid(); o._AddGrid();
} }

1
src/index.html
View file

@ -105,6 +105,7 @@
// remember_page_length: true, // remember_page_length: true,
fill_slc_on_demand: false, fill_slc_on_demand: false,
refresh_filters: false, refresh_filters: false,
popup_filters: true,
alternate_rows: true, alternate_rows: true,
highlight_keywords: true, highlight_keywords: true,
match_case: false, match_case: false,

199
src/modules/popupFilter.js Normal file
View file

@ -0,0 +1,199 @@
define(["exports", "../types", "../dom", "../event", "../helpers"], function (exports, _types, _dom, _event, _helpers) {
"use strict";
var _classProps = function (child, staticProps, instanceProps) {
if (staticProps) Object.defineProperties(child, staticProps);
if (instanceProps) Object.defineProperties(child.prototype, instanceProps);
};
var Types = _types.Types;
var Dom = _dom.Dom;
var Event = _event.Event;
var Helpers = _helpers.Helpers;
var PopupFilter = (function () {
var PopupFilter = function PopupFilter(tf) {
// Configuration object
var f = tf.fObj;
// Enable external filters behaviour
tf.isExternalFlt = true;
tf.externalFltTgtIds = [];
//filter icon path
this.popUpImgFlt = f.popup_filters_image || tf.themesPath + "icn_filter.gif";
//active filter icon path
this.popUpImgFltActive = f.popup_filters_image_active || tf.themesPath + "icn_filterActive.gif";
this.popUpImgFltHtml = f.popup_filters_image_html || "<img src=\"" + this.popUpImgFlt + "\" alt=\"Column filter\" />";
//defines css class for popup div containing filter
this.popUpDivCssClass = f.popup_div_css_class || "popUpFilter";
//callback function before popup filtes is opened
this.onBeforePopUpOpen = Types.isFn(f.on_before_popup_filter_open) ? f.on_before_popup_filter_open : null;
//callback function after popup filtes is opened
this.onAfterPopUpOpen = Types.isFn(f.on_after_popup_filter_open) ? f.on_after_popup_filter_open : null;
//callback function before popup filtes is closed
this.onBeforePopUpClose = Types.isFn(f.on_before_popup_filter_close) ? f.on_before_popup_filter_close : null;
//callback function after popup filtes is closed
this.onAfterPopUpClose = Types.isFn(f.on_after_popup_filter_close) ? f.on_after_popup_filter_close : null;
//stores filters spans
this.popUpFltSpans = [];
//stores filters icons
this.popUpFltImgs = [];
//stores filters containers
this.popUpFltElms = this.popUpFltElmCache || [];
this.popUpFltAdjustToContainer = true;
this.tf = tf;
};
_classProps(PopupFilter, null, {
onClick: {
writable: true,
value: function (e) {
var evt = e || global.event, 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) {
var popUpDiv = this.popUpFltElms[colIndex], header = this.tf.GetHeaderElement(colIndex), headerWidth = header.clientWidth * 0.95;
if (Helpers.isIE()) {
var headerLeft = Dom.position(header).left;
popUpDiv.style.left = (headerLeft) + "px";
}
popUpDiv.style.width = parseInt(headerWidth, 10) + "px";
}
Event.cancel(evt);
Event.stop(evt);
}
},
init: {
writable: true,
value: function () {
var _this = this;
var tf = this.tf;
for (var i = 0; i < tf.nbCells; i++) {
if (tf["col" + i] === tf.fltTypeNone) {
continue;
}
var popUpSpan = Dom.create("span", ["id", tf.prfxPopUpSpan + tf.id + "_" + i], ["ci", i]);
popUpSpan.innerHTML = this.popUpImgFltHtml;
var header = tf.GetHeaderElement(i);
header.appendChild(popUpSpan);
// popUpSpan.onclick = onClick;
Event.add(popUpSpan, "click", function (evt) {
_this.onClick(evt);
});
this.popUpFltSpans[i] = popUpSpan;
this.popUpFltImgs[i] = popUpSpan.firstChild;
}
}
},
buildAll: {
writable: true,
value: function () {
for (var i = 0; i < this.popUpFltElmCache.length; i++) {
this.build(i, this.popUpFltElmCache[i]);
}
}
},
build: {
writable: true,
value: function (colIndex, div) {
var tf = this.tf;
var popUpDiv = !div ? Dom.create("div", ["id", tf.prfxPopUpDiv + tf.id + "_" + colIndex]) : div;
popUpDiv.className = this.popUpDivCssClass;
tf.externalFltTgtIds.push(popUpDiv.id);
var header = tf.GetHeaderElement(colIndex);
header.insertBefore(popUpDiv, header.firstChild);
//popUpDiv.onclick = function(e){ evt.stop(e || global.event); };
Event.add(popUpDiv, "click", function (evt) {
Event.stop(evt);
});
this.popUpFltElms[colIndex] = popUpDiv;
}
},
toggle: {
writable: true,
value: function (colIndex) {
var tf = this.tf, popUpFltElm = this.popUpFltElms[colIndex];
if (popUpFltElm.style.display === "none" || popUpFltElm.style.display === "") {
if (this.onBeforePopUpOpen) {
this.onBeforePopUpOpen.call(null, this, this.popUpFltElms[colIndex], colIndex);
}
popUpFltElm.style.display = "block";
if (tf["col" + colIndex] === tf.fltTypeInp) {
tf.GetFilterElement(colIndex).focus();
}
if (this.onAfterPopUpOpen) {
this.onAfterPopUpOpen.call(null, this, this.popUpFltElms[colIndex], colIndex);
}
} else {
if (this.onBeforePopUpClose) {
this.onBeforePopUpClose.call(null, this, this.popUpFltElms[colIndex], colIndex);
}
popUpFltElm.style.display = "none";
if (this.onAfterPopUpClose) {
this.onAfterPopUpClose.call(null, this, this.popUpFltElms[colIndex], colIndex);
}
}
}
},
closeAll: {
writable: true,
value: function (exceptIdx) {
for (var i = 0; i < this.popUpFltElms.length; i++) {
if (i === exceptIdx) {
continue;
}
var popUpFltElm = this.popUpFltElms[i];
if (popUpFltElm) {
popUpFltElm.style.display = "none";
}
}
}
},
buildIcons: {
writable: true,
value: function () {
for (var i = 0; i < this.popUpFltImgs.length; i++) {
this.buildIcon(i, false);
}
}
},
buildIcon: {
writable: true,
value: function (colIndex, active) {
var activeImg = Types.isUndef(active) ? true : active;
if (this.popUpFltImgs[colIndex]) {
this.popUpFltImgs[colIndex].src = active ? this.popUpImgFltActive : this.popUpImgFlt;
}
}
},
destroy: {
writable: true,
value: function () {
this.popUpFltElmCache = [];
for (var i = 0; i < this.popUpFltElms.length; i++) {
var popUpFltElm = this.popUpFltElms[i], popUpFltSpan = this.popUpFltSpans[i];
if (popUpFltElm) {
popUpFltElm.parentNode.removeChild(popUpFltElm);
this.popUpFltElmCache[i] = popUpFltElm;
}
popUpFltElm = null;
if (popUpFltSpan) {
popUpFltSpan.parentNode.removeChild(popUpFltSpan);
}
popUpFltSpan = null;
}
}
}
});
return PopupFilter;
})();
exports.PopupFilter = PopupFilter;
});

1
src/modules/popupFilter.js.map Normal file
View file

File diff suppressed because one or more lines are too long