deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-09 18:06:53 +02:00
Code Issues Releases Wiki Activity

Finalised columns visibility manager

Browse source
This commit is contained in:
Max Guglielmi 2015-04-24 20:38:20 +10:00
parent 79cf6a19a0
commit 39a608fa36
13 changed files with 548 additions and 629 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Gruntfile.js
View file

@ -14,7 +14,10 @@ module.exports = function (grunt) {
src: [
'Gruntfile.js',
'<%= source_folder %>*.js',
'src-es6/**/*.js',
'!<%= source_folder %>tablefilter.js'
// ,
// '!src-es6/tablefilter.js'
],
options: {
jshintrc: '.jshintrc'

2
dist/filtergrid.css vendored
View file

@ -1,6 +1,6 @@
/*------------------------------------------------------------------------
- TableFilter stylesheet by Max Guglielmi
- (build date: Mon Apr 20 2015 16:50:53)
- (build date: Fri Apr 24 2015 19:43:06)
- Edit below for your projects' needs
------------------------------------------------------------------------*/

12
dist/tablefilter.js vendored
View file

File diff suppressed because one or more lines are too long

2
package.json
View file

@ -7,7 +7,7 @@
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.6.1",
"grunt-contrib-jshint": "~0.6.1",
"grunt-contrib-jshint": "~0.11.0",
"grunt-contrib-qunit": "^0.5.2",
"grunt-contrib-requirejs": "^0.4.4",
"grunt-contrib-uglify": "~0.2.2",

500
src-es6/extensions/colsVisibility/colsVisibility.js
View file

@ -18,170 +18,144 @@ export class ColsVisibility{
}){
// Configuration object
var f = tf.config();
var f = ext;
var cfg = tf.config();
this.colsVisibility = f.cols_visibility;
this.colVisInitialized = false;
this.colVisExtName = ext.name;
this.colVisExtDesc = ext.description ;
this.initialized = false;
this.extName = f.name;
this.extDesc = f.description;
//show/hide cols span element
this.colVisSpanEl = null;
this.spanEl = null;
//show/hide cols button element
this.btnColVisEl = null;
this.btnEl = null;
//show/hide cols container div element
this.colVisContEl = null;
this.contEl = null;
//tick to hide or show column
this.colVisTickToHide = Boolean(f.colvis_tick_to_hide || true);
this.tickToHide = f.tick_to_hide===false ? false : true;
//enables/disables cols manager generation
this.colVisManager = Boolean(f.colvis_manager || true);
this.manager = f.manager===false ? false : true;
//only if external headers
this.colVisHeadersTbl = f.colvis_headers_table || null;
this.headersTbl = f.headers_table || false;
//only if external headers
this.colVisHeadersIndex = f.colvis_headers_index || 1;
this.headersIndex = f.headers_index || 1;
//id of container element
this.colVisContElTgtId = f.colvis_container_target_id || null;
this.contElTgtId = f.container_target_id || null;
//alternative headers text
this.colVisHeadersText = f.colvis_headers_text || null;
this.headersText = f.headers_text || null;
//id of button container element
this.btnColVisTgtId = f.btn_colvis_target_id || null;
this.btnTgtId = f.btn_target_id || null;
//defines show/hide cols text
this.btnColVisText = f.btn_colvis_text || 'Columns&#9660;';
this.btnText = f.btn_text || 'Columns&#9660;';
//defines show/hide cols button innerHtml
this.btnColVisHtml = f.btn_colvis_html || null;
this.btnHtml = f.btn_html || null;
//defines css class for show/hide cols button
this.btnColVisCssClass = f.btn_colvis_css_class || 'colVis';
this.btnCssClass = f.btn_css_class || 'colVis';
//defines close link text
this.btnColVisCloseText = f.btn_colvis_close_text || 'Close';
this.btnCloseText = f.btn_close_text || 'Close';
//defines close button innerHtml
this.btnColVisCloseHtml = f.btn_colvis_close_html || null;
this.btnCloseHtml = f.btn_close_html || null;
//defines css class for close button
this.btnColVisCloseCssClass =
f.btn_colvis_close_css_class || this.btnColVisCssClass;
this.btnCloseCssClass = f.btn_close_css_class || this.btnCssClass;
this.colVisExtPath = ext.path || tf.extensionsPath + 'colsVisibility/';
this.colVisStylesheet = 'colsVisibility.css';
this.path = f.path || tf.extensionsPath + 'colsVisibility/';
this.stylesheet = f.stylesheet || 'colsVisibility.css';
//span containing show/hide cols button
this.prfxColVisSpan = 'colVis_';
this.prfx = 'colVis_';
//defines css class span containing show/hide cols
this.colVisSpanCss = f.colvis_span_css_class || 'colVisSpan';
this.prfxColVisCont = 'colVisCont_';
this.spanCssClass = f.span_css_class || 'colVisSpan';
this.prfxCont = this.prfx + 'Cont_';
//defines css class div containing show/hide cols
this.colVisContCss = f.colvis_cont_css_class || 'colVisCont';
this.contCssClass = f.cont_css_class || 'colVisCont';
//defines css class for cols list (ul)
this.colVisListCss = f.colvis_list_css_class ||'cols_checklist';
this.listCssClass = cfg.list_css_class ||'cols_checklist';
//defines css class for list item (li)
this.colVisListItemCssClass = f.checklist_item_css_class ||
this.listItemCssClass = cfg.checklist_item_css_class ||
'cols_checklist_item';
//defines css class for selected list item (li)
this.colVisListSlcItemCssClass =
f.checklist_selected_item_css_class || 'cols_checklist_slc_item';
this.listSlcItemCssClass = cfg.checklist_selected_item_css_class ||
'cols_checklist_slc_item';
//text preceding columns list
this.colVisText = f.colvis_text || 'Hide columns: ';
this.colVisAtStart = f.colvis_at_start || null;
this.colVisEnableHover = Boolean(f.colvis_enable_hover) || false;
this.text = f.text || (this.tickToHide ? 'Hide: ' : 'Show: ');
this.atStart = f.at_start || null;
this.enableHover = Boolean(f.enable_hover);
//enables select all option
this.colVisEnableTickAll = Boolean(f.colvis_enable_tick_all) || false;
this.enableTickAll = Boolean(f.enable_tick_all);
//text preceding columns list
this.colVisTickAllText = f.colvis_tick_all_text || 'Select all:';
this.colVisIsOpen = false;
this.tickAllText = f.tick_all_text || 'Select all:';
//array containing hidden columns indexes
this.colVisHiddenCols = [];
this.hiddenCols = [];
this.tblHasColTag = (Dom.tag(tf.tbl,'col').length > 0);
//callback invoked just after cols manager is loaded
this.onColsManagerLoaded = Types.isFn(f.on_cols_manager_loaded) ?
f.on_cols_manager_loaded : null;
this.onLoaded = Types.isFn(f.on_loaded) ? f.on_loaded : null;
//calls function before cols manager is opened
this.onBeforeOpenColsManager =
Types.isFn(f.on_before_open_cols_manager) ?
f.on_before_open_cols_manager : null;
this.onBeforeOpen = Types.isFn(f.on_before_open) ?
f.on_before_open : null;
//calls function after cols manager is opened
this.onAfterOpenColsManager = Types.isFn(f.on_after_open_cols_manager) ?
f.on_after_open_cols_manager : null;
this.onAfterOpen = Types.isFn(f.on_after_open) ? f.on_after_open : null;
//calls function before cols manager is closed
this.onBeforeCloseColsManager =
Types.isFn(f.on_before_close_cols_manager) ?
f.on_before_close_cols_manager : null;
this.onBeforeClose = Types.isFn(f.on_before_close) ?
f.on_before_close : null;
//calls function after cols manager is closed
this.onAfterCloseColsManager =
Types.isFn(f.on_after_close_cols_manager) ?
f.on_after_close_cols_manager : null;
this.onAfterClose = Types.isFn(f.on_after_close) ?
f.on_after_close : null;
//calls function before col is hidden
this.onBeforeColIsHidden = Types.isFn(f.on_before_col_is_hidden) ?
f.on_before_col_is_hidden : null;
this.onBeforeColHidden = Types.isFn(f.on_before_col_hidden) ?
f.on_before_col_hidden : null;
//calls function after col is hidden
this.onAfterColIsHidden = Types.isFn(f.on_after_col_is_hidden) ?
f.on_after_col_is_hidden : null;
this.onAfterColHidden = Types.isFn(f.on_after_col_hidden) ?
f.on_after_col_hidden : null;
//calls function before col is displayed
this.onBeforeColIsDisplayed = Types.isFn(f.on_before_col_is_displayed) ?
f.on_before_col_is_displayed : null;
this.onBeforeColDisplayed = Types.isFn(f.on_before_col_displayed) ?
f.on_before_col_displayed : null;
//calls function after col is displayed
this.onAfterColIsDisplayed = Types.isFn(f.on_after_col_is_displayed) ?
f.on_after_col_is_displayed : null;
this.onAfterColDisplayed = Types.isFn(f.on_after_col_displayed) ?
f.on_after_col_displayed : null;
//Grid layout compatibility
if(tf.gridLayout){
this.colVisHeadersTbl = tf.headTbl; //headers table
this.colVisHeadersIndex = 0; //headers index
this.onAfterColIsDisplayed = function(){};
this.onAfterColIsHidden = function(){};
this.headersTbl = tf.Cpt.gridLayout.headTbl; //headers table
this.headersIndex = 0; //headers index
this.onAfterColDisplayed = function(){};
this.onAfterColHidden = function(){};
}
//Extension event definition
//event name for TF event manager
tf.Evt.name.colsvisibility = 'ShowColsVisibility';
//event status message
tf.msgShowColsVisibility = 'Show/Hide columns';
tf.Evt._ShowColsVisibility = function(){ o.ShowColsVisibility(); };
//event name for TF event manager
tf.Evt.name.checkitem = 'CheckItem';
//event status message
tf.msgCheckItem = 'Showing/hiding columns';
tf.Evt._CheckItem = function(li){ o.CheckItem(li); };
//Loads extension stylesheet
tf.includeFile(
ext.name+'Style',
this.colVisExtPath + this.colVisStylesheet,
null,
'link'
);
f.name+'Style', this.path + this.stylesheet, null, 'link');
this.tf = tf;
//Sets button
// if(this.colVisManager) o.SetShowHideColsBtn();
this.init();
this.colVisInitialized = true;
}
toggle(evt){
var tf = this.tf;
var contDisplay = this.colVisContEl.style.display;
var onBeforeOpenColsManager = this.onBeforeOpenColsManager;
var onBeforeCloseColsManager = this.onBeforeCloseColsManager;
var onAfterOpenColsManager = this.onAfterOpenColsManager;
var onAfterCloseColsManager = this.onAfterCloseColsManager;
var contDisplay = this.contEl.style.display;
var onBeforeOpen = this.onBeforeOpen;
var onBeforeClose = this.onBeforeClose;
var onAfterOpen = this.onAfterOpen;
var onAfterClose = this.onAfterClose;
if(onBeforeOpenColsManager && contDisplay !== 'inline'){
onBeforeOpenColsManager.call(null, this);
if(onBeforeOpen && contDisplay !== 'inline'){
onBeforeOpen.call(null, this);
}
if(onBeforeCloseColsManager && contDisplay === 'inline'){
onBeforeCloseColsManager.call(null, this);
if(onBeforeClose && contDisplay === 'inline'){
onBeforeClose.call(null, this);
}
this.colVisContEl.style.display = contDisplay === 'inline' ?
this.contEl.style.display = contDisplay === 'inline' ?
'none' : 'inline';
if(onAfterOpenColsManager && contDisplay !== 'inline'){
onAfterOpenColsManager.call(null, this);
if(onAfterOpen && contDisplay !== 'inline'){
onAfterOpen.call(null, this);
}
if(onAfterCloseColsManager && contDisplay === 'inline'){
onAfterCloseColsManager.call(null, this);
if(onAfterClose && contDisplay === 'inline'){
onAfterClose.call(null, this);
}
}
@ -192,215 +166,174 @@ export class ColsVisibility{
}
var isChecked = lbl.firstChild.checked;
var colIndex = lbl.firstChild.getAttribute('id').split('_')[1];
colIndex = parseInt(colIndex, 10);
if(isChecked){
Dom.addClass(li, this.colVisListSlcItemCssClass);
Dom.addClass(li, this.listSlcItemCssClass);
} else {
Dom.removeClass(li, this.colVisListSlcItemCssClass);
Dom.removeClass(li, this.listSlcItemCssClass);
}
// var hide = (this.TickToHide && isChecked) || (!this.TickToHide && !isChecked) ? true : false;
var hide = false;
if((this.colVisTickToHide && isChecked) ||
(!this.colVisTickToHide && !isChecked)){
if((this.tickToHide && isChecked) || (!this.tickToHide && !isChecked)){
hide = true;
}
this.setHidden(colIndex, hide);
}
init(){
if(!this.colVisManager){
if(!this.manager){
return;
}
this.buildBtn();
this.buildManager();
this.initialized = true;
}
/**
* Build main button UI
*/
buildBtn(){
var tf = this.tf;
// if(!tf.hasGrid && !tf.isFirstLoad){
// return;
// }
if(this.btnColVisEl){
if(this.btnEl){
return;
}
var colVisSpan = Dom.create('span',
['id', this.prfxColVisSpan+tf.id]);
colVisSpan.className = this.colVisSpanCss;
var tf = this.tf;
var span = Dom.create('span', ['id', this.prfx+tf.id]);
span.className = this.spanCssClass;
//Container element (rdiv or custom element)
if(!this.btnColVisTgtId){
if(!this.btnTgtId){
tf.setToolbar();
}
var targetEl = !this.btnColVisTgtId ?
tf.rDiv : Dom.id(this.btnColVisTgtId);
var targetEl = !this.btnTgtId ? tf.rDiv : Dom.id(this.btnTgtId);
if(this.btnColVisTgtId){
targetEl.firstChild.parentNode.insertBefore(
colVisSpan, targetEl.firstChild);
if(!this.btnTgtId){
var firstChild = targetEl.firstChild;
firstChild.parentNode.insertBefore(span, firstChild);
} else {
targetEl.appendChild(colVisSpan);
targetEl.appendChild(span);
}
if(!this.btnColVisHtml){
if(!this.btnHtml){
var btn = Dom.create('a', ['href','javascript:;']);
btn.className = this.btnColVisCssClass;
btn.title = this.colVisExtDesc;
btn.className = this.btnCssClass;
btn.title = this.extDesc;
btn.innerHTML = this.btnColVisText;
colVisSpan.appendChild(btn);
if(!this.colVisEnableHover){
// btn.onclick = this.Evt._ShowColsVisibility;
btn.innerHTML = this.btnText;
span.appendChild(btn);
if(!this.enableHover){
Event.add(btn, 'click', (evt)=> { this.toggle(evt); });
} else {
// var o = this;
// btn.onmouseover = this.Evt._ShowColsVisibility;
Event.add(btn, 'mouseover', (evt)=> { this.toggle(evt); });
}
} else { //Custom html
colVisSpan.innerHTML = this.btnColVisHtml;
var colVisEl = colVisSpan.firstChild;
if(!this.colVisEnableHover){
// colVisEl.onclick = this.Evt._ShowColsVisibility;
Event.add(colVisEl,
'click', (evt)=> { this.toggle(evt); });
span.innerHTML = this.btnHtml;
var colVisEl = span.firstChild;
if(!this.enableHover){
Event.add(colVisEl, 'click', (evt)=> { this.toggle(evt); });
} else {
// colVisEl.onmouseover = this.Evt._ShowColsVisibility;
Event.add(colVisEl,
'mouseover', (evt)=> { this.toggle(evt); });
Event.add(colVisEl, 'mouseover', (evt)=> { this.toggle(evt); });
}
}
this.colVisSpanEl = colVisSpan;
this.btnColVisEl = this.colVisSpanEl.firstChild;
this.spanEl = span;
this.btnEl = this.spanEl.firstChild;
// this.SetColsVisibilityManager();
// this.buildManager();
if(this.onColsManagerLoaded){
this.onColsManagerLoaded.call(null, this);
if(this.onLoaded){
this.onLoaded.call(null, this);
}
}
/**
* Build columns manager UI
*/
buildManager(){
var tf = this.tf;
// if(!this.hasGrid && !this.isFirstLoad) return;
var container = !this.colVisContElTgtId ?
Dom.create('div', ['id', this.prfxColVisCont+tf.id]) :
Dom.id(this.colVisContElTgtId);
container.className = this.colVisContCss;
var container = !this.contElTgtId ?
Dom.create('div', ['id', this.prfxCont+tf.id]) :
Dom.id(this.contElTgtId);
container.className = this.contCssClass;
//Extension description
var extNameLabel = Dom.create('p');
extNameLabel.innerHTML = this.colVisText;
extNameLabel.innerHTML = this.text;
container.appendChild(extNameLabel);
//Headers list
var ul = Dom.create('ul' ,['id', 'ul'+this.colVisExtName+'_'+tf.id]);
ul.className = this.colVisListCss;
var ul = Dom.create('ul' ,['id', 'ul'+this.extName+'_'+tf.id]);
ul.className = this.listCssClass;
var tbl = this.colVisHeadersTbl ? this.colVisHeadersTbl : tf.tbl;
var headerIndex = this.colVisHeadersTbl ?
this.colVisHeadersIndex : tf.getHeadersRowIndex();
var tbl = this.headersTbl ? this.headersTbl : tf.tbl;
var headerIndex = this.headersTbl ?
this.headersIndex : tf.getHeadersRowIndex();
var headerRow = tbl.rows[headerIndex];
//Tick all option
if(this.colVisEnableTickAll){
if(this.enableTickAll){
var li = Dom.createCheckItem(
'col__'+tf.id, this.colVisTickAllText, this.colVisTickAllText);
Dom.addClass(li, this.colVisListItemCssClass);
'col__'+tf.id, this.tickAllText, this.tickAllText);
Dom.addClass(li, this.listItemCssClass);
ul.appendChild(li);
var isAllTicked = false;
// li.check.onclick = function(){
// for(var h=0; h<headerRow.cells.length; h++)
// {
// var itm = tf_Id('col_'+h+'_'+o.id);
// if(!isAllTicked && itm.checked) itm.checked = false;
// if(isAllTicked && !itm.checked) itm.checked = true;
// if(itm) itm.click();
// }
// isAllTicked = (isAllTicked ? false : true);
// };
li.check.checked = !this.tickToHide;
Event.add(li.check, 'click', (evt)=> {
for(var h = 0; h < headerRow.cells.length; h++){
var itm = Dom.id('col_'+h+'_'+tf.id);
if(!isAllTicked && itm.checked){
itm.checked = false;
}
if(isAllTicked && !itm.checked){
itm.checked = true;
}
if(itm){
if(itm && li.check.checked !== itm.checked){
itm.click();
itm.checked = li.check.checked;
}
}
isAllTicked = !isAllTicked;
});
// if(tf_isIE)
// {//IE: label looses check capability
// li.label.onclick = function(){ this.firstChild.click(); };
// }
}
for(var i = 0; i < headerRow.cells.length; i++){
var cell = headerRow.cells[i];
var cellText = this.colVisHeadersText && this.colVisHeadersText[i] ?
this.colVisHeadersText[i] : this._getHeaderText(cell);
var cellText = this.headersText && this.headersText[i] ?
this.headersText[i] : this._getHeaderText(cell);
var liElm = Dom.createCheckItem(
'col_'+i+'_'+tf.id, cellText, cellText);
Dom.addClass(liElm, this.colVisListItemCssClass);
if(!this.colVisTickToHide){
Dom.addClass(liElm, this.colVisListSlcItemCssClass);
Dom.addClass(liElm, this.listItemCssClass);
if(!this.tickToHide){
Dom.addClass(liElm, this.listSlcItemCssClass);
}
ul.appendChild(liElm);
if(!this.colVisTickToHide){
if(!this.tickToHide){
liElm.check.checked = true;
}
// liElm.check.onclick = function(){ o.Evt._CheckItem(this.parentNode); };
Event.add(liElm.check, 'click', (evt)=> {
var elm = Event.target(evt);
var lbl = elm.parentNode;
this.checkItem(lbl);
});
// if(tf_isIE)
// {//IE: label looses check capability
// li.label.onclick = function(){ this.firstChild.click(); };
// }
}
//separator
var p = Dom.create('p', ['align','center']);
var btn;
//Close link
if(!this.btnColVisCloseHtml){
if(!this.btnCloseHtml){
btn = Dom.create('a', ['href','javascript:;']);
btn.className = this.btnColVisCloseCssClass;
btn.innerHTML = this.btnColVisCloseText;
// btn.onclick = this.Evt._ShowColsVisibility;
btn.className = this.btnCloseCssClass;
btn.innerHTML = this.btnCloseText;
Event.add(btn, 'click', (evt)=> { this.toggle(evt); });
p.appendChild(btn);
} else {
p.innerHTML = this.btnColVisCloseHtml;
p.innerHTML = this.btnCloseHtml;
btn = p.firstChild;
// btn.onclick = this.Evt._ShowColsVisibility;
Event.add(btn, 'click', (evt)=> { this.toggle(evt); });
}
container.appendChild(ul);
container.appendChild(p);
this.btnColVisEl.parentNode.insertBefore(container, this.btnColVisEl);
this.colVisContEl = container;
this.btnEl.parentNode.insertBefore(container, this.btnEl);
this.contEl = container;
//IE6 only: options are not checked if colVisTickToHide=false
// if(tf_isIE && !o.colVisTickToHide)
// for(var i=0; i<headerRow.cells.length; i++)
// tf_Id('col_'+i+'_'+o.id).checked = true;
if(this.colVisAtStart){
var a = this.colVisAtStart;
if(this.atStart){
var a = this.atStart;
for(var k=0; k<a.length; k++){
var itm = Dom.id('col_'+a[k]+'_'+tf.id);
if(itm){
@ -410,95 +343,56 @@ export class ColsVisibility{
}
}
/**
* Hide or show specified columns
* @param {Numner} colIndex Column index
* @param {Boolean} hide hide column if true or show if false
*/
setHidden(colIndex, hide){
var tf = this.tf;
var tbl = tf.tbl;
var col = Dom.tag(tbl, 'col')[colIndex];
//External headers
var col1 = this.colVisHeadersTbl ?
Dom.tag(this.colVisHeadersTbl, 'col')[colIndex] : null;
if(this.onBeforeColIsHidden && hide){
this.onBeforeColIsHidden.call(null, this, colIndex);
if(this.onBeforeColHidden && hide){
this.onBeforeColHidden.call(null, this, colIndex);
}
if(this.onBeforeColIsDisplayed && !hide){
this.onBeforeColIsDisplayed.call(null, this, colIndex);
if(this.onBeforeColDisplayed && !hide){
this.onBeforeColDisplayed.call(null, this, colIndex);
}
//cols can be hidden only under IE
if(this.tblHasColTag && Helpers.isIE()){
tbl = this.colVisHeadersTbl || tbl;
var filtersRow = tbl.rows[tf.getFiltersRowIndex()];
var a1 = tf.getFiltersByType(tf.fltTypeSlc, true);
var a2 = tf.getFiltersByType(tf.fltTypeMulti, true);
var a = a1.concat(a2);
if(col){
col.style.display = hide ? 'none' : '';
//Selects are displayed even if column is hidden under IE6
if(a.indexOf(colIndex) !== -1){
if(!this.colVisHeadersTbl){
filtersRow.cells[colIndex].style.visibility = hide ?
'hidden' : 'visible';
}
else{
var flt = Dom.id(tf.fltIds[colIndex]);
flt.style.visibility = hide ? 'hidden' : 'visible';
}
}
}
if(col1){
col1.style.display = hide ? 'none' : '';
}
} else {
this._hideCells(tbl, colIndex, hide);
if(this.colVisHeadersTbl){
this._hideCells(this.colVisHeadersTbl, colIndex, hide);
}
this._hideCells(tbl, colIndex, hide);
if(this.headersTbl){
this._hideCells(this.headersTbl, colIndex, hide);
}
var hiddenCols = this.colVisHiddenCols;
var hiddenCols = this.hiddenCols;
if(hide){
if(hiddenCols.indexOf(colIndex) === -1){
this.colVisHiddenCols.push(colIndex);
this.hiddenCols.push(colIndex);
}
} else {
// var itemIndex = o.showHideHiddenCols.tf_IndexByValue(colIndex, true);
var itemIndex = Arr.indexByValue(hiddenCols, colIndex, true);
if(hiddenCols.indexOf(colIndex) !== -1){
this.colVisHiddenCols.splice(itemIndex, 1);
this.hiddenCols.splice(itemIndex, 1);
}
}
var gridLayout;
var headTbl;
var gridColElms;
if(this.onAfterColIsHidden && hide){
if(this.onAfterColHidden && hide){
//This event is fired just after a column is displayed for
//grid_layout compatibility
if(tf.gridLayout){
//Returns the removed column widths
// function getHiddenWidth(){
// var ths = o.headTbl.rows[o.showHideColsHeadersIndex].cells;
// var hW = 0;
// for(var i=0; i<o.nbCells; i++){
// if(ths[i].style.display == 'none'){
// var w = parseInt(ths[i].style.width);
// ths[i].style.width = 0;
// hW += w;
// }
// }
// return hW;
// }
gridLayout = tf.Cpt.gridLayout;
headTbl = gridLayout.headTbl;
gridColElms = gridLayout.gridColElms;
if(Helpers.isIE()){
tbl.style.width = headTbl.clientWidth + 'px';
} else {
var ths = headTbl.rows[this.colVisHeadersIndex].cells;
var ths = headTbl.rows[this.headersIndex].cells;
var hiddenWidth = 0;
for(var i=0; i<o.nbCells; i++){
for(var i=0; i<tf.nbCells; i++){
if(ths[i].style.display === 'none'){
var w = parseInt(ths[i].style.width, 10);
ths[i].style.width = 0;
@ -512,32 +406,37 @@ export class ColsVisibility{
gridColElms[colIndex].style.display = 'none';
}
}
this.onAfterColIsHidden.call(null, this, colIndex);
this.onAfterColHidden.call(null, this, colIndex);
}
if(this.onAfterColIsDisplayed && !hide){
if(this.onAfterColDisplayed && !hide){
//This event is fired just after a column is displayed for
//grid_layout compatibility
if(tf.gridLayout /*&& (!tf_isIE && !tf_isIE7)*/){
if(tf.gridLayout){
gridLayout = tf.Cpt.gridLayout;
headTbl = gridLayout.headTbl;
gridColElms = gridLayout.gridColElms;
gridColElms[colIndex].style.display = '';
var width = parseInt(gridColElms[colIndex].style.width, 10);
gridLayout.crWColsRow.cells[colIndex].style.width = width +'px';
var header = tf.getHeaderElement(colIndex);
header.style.width = width +'px';
headTbl.style.width =
(parseInt(headTbl.style.width, 10) + width) + 'px';
tf.tbl.style.width = headTbl.style.width;
}
this.onAfterColIsDisplayed.call(null, this, colIndex);
this.onAfterColDisplayed.call(null, this, colIndex);
}
}
/**
* Show specified column
* @param {Number} colIndex Column index
*/
showCol(colIndex){
if(colIndex === undefined || !this.IsColHidden(colIndex)){
if(colIndex === undefined || !this.isColHidden(colIndex)){
return;
}
if(this.colVisManager && this.colVisContEl){
if(this.manager && this.contEl){
var itm = Dom.id('col_'+colIndex+'_'+this.tf.id);
if(itm){ itm.click(); }
} else {
@ -545,11 +444,15 @@ export class ColsVisibility{
}
}
/**
* Hide specified column
* @param {Number} colIndex Column index
*/
hideCol(colIndex){
if(colIndex === undefined || this.IsColHidden(colIndex)){
if(colIndex === undefined || this.isColHidden(colIndex)){
return;
}
if(this.colVisManager && this.colVisContEl){
if(this.manager && this.contEl){
var itm = Dom.id('col_'+colIndex+'_'+this.tf.id);
if(itm){ itm.click(); }
} else {
@ -557,40 +460,55 @@ export class ColsVisibility{
}
}
/**
* Determine if specified column is hidden
* @param {Number} colIndex Column index
*/
isColHidden(colIndex){
if(this.colVisHiddenCols.indexOf(colIndex) !== -1){
if(this.hiddenCols.indexOf(colIndex) !== -1){
return true;
}
return false;
}
/**
* Toggle visibility of specified column
* @param {Number} colIndex Column index
*/
toggleCol(colIndex){
if(colIndex === undefined || this.IsColHidden(colIndex)){
this.ShowCol(colIndex);
if(colIndex === undefined || this.isColHidden(colIndex)){
this.showCol(colIndex);
} else {
this.HideCol(colIndex);
this.hideCol(colIndex);
}
}
/**
* Returns the indexes of the columns currently hidden
* @return {Array} column indexes
*/
getHiddenCols(){
return this.colVisHiddenCols;
return this.hiddenCols;
}
/**
* Remove the columns manager
*/
destroy(){
if(!this.btnColVisEl || !this.colVisContEl){
if(!this.btnEl || !this.contEl){
return;
}
if(Dom.id(this.colVisContElTgtId)){
Dom.id(this.colVisContElTgtId).innerHTML = '';
if(Dom.id(this.contElTgtId)){
Dom.id(this.contElTgtId).innerHTML = '';
} else {
this.colVisContEl.innerHTML = '';
this.colVisContEl.parentNode.removeChild(this.colVisContEl);
this.colVisContEl = null;
this.contEl.innerHTML = '';
this.contEl.parentNode.removeChild(this.contEl);
this.contEl = null;
}
this.btnColVisEl.innerHTML = '';
this.btnColVisEl.parentNode.removeChild(this.btnColVisEl);
this.btnColVisEl = null;
this.colVisInitialized = false;
this.btnEl.innerHTML = '';
this.btnEl.parentNode.removeChild(this.btnEl);
this.btnEl = null;
this.initialized = false;
}
_getHeaderText(cell){

51
src-es6/modules/gridLayout.js
View file

@ -192,11 +192,11 @@ export class GridLayout{
}
//Headers table style
this.headTbl.style.width = tbl.style.width;
this.headTbl.style.tableLayout = 'fixed';
tbl.style.tableLayout = 'fixed';
this.headTbl.cellPadding = tbl.cellPadding;
this.headTbl.cellSpacing = tbl.cellSpacing;
// this.headTbl.style.width = tbl.style.width;
//content table without headers needs col widths to be reset
tf.setColWidths();
@ -205,29 +205,30 @@ export class GridLayout{
this.headTblCont.style.width = this.tblCont.clientWidth+'px';
tbl.style.width = '';
//
this.headTbl.style.width = tbl.clientWidth + 'px';
//
//scroll synchronisation
var o = this;
Event.add(this.tblCont, 'scroll', function(evt){
//this = scroll element
var scrollLeft = this.scrollLeft;
o.headTblCont.scrollLeft = scrollLeft;
Event.add(this.tblCont, 'scroll', (evt)=> {
var elm = Event.target(evt);
var scrollLeft = elm.scrollLeft;
this.headTblCont.scrollLeft = scrollLeft;
//New pointerX calc taking into account scrollLeft
if(!o.isPointerXOverwritten){
try{
o.Evt.pointerX = function(evt){
var e = evt || global.event;
var bdScrollLeft = tf_StandardBody().scrollLeft +
scrollLeft;
return (e.pageX + scrollLeft) ||
(e.clientX + bdScrollLeft);
};
o.isPointerXOverwritten = true;
} catch(err) {
o.isPointerXOverwritten = false;
}
}
// if(!o.isPointerXOverwritten){
// try{
// o.Evt.pointerX = function(evt){
// var e = evt || global.event;
// var bdScrollLeft = tf_StandardBody().scrollLeft +
// scrollLeft;
// return (e.pageX + scrollLeft) ||
// (e.clientX + bdScrollLeft);
// };
// o.isPointerXOverwritten = true;
// } catch(err) {
// o.isPointerXOverwritten = false;
// }
// }
});
//Sort is enabled if not specified in config object
@ -267,7 +268,7 @@ export class GridLayout{
f.col_enable_text_ellipsis = false;
//Cols generation for all browsers excepted IE<=7
o.tblHasColTag = Dom.tag(tbl, 'col').length > 0 ? true : false;
this.tblHasColTag = Dom.tag(tbl, 'col').length > 0 ? true : false;
//Col elements are enough to keep column widths after sorting and
//filtering
@ -283,8 +284,8 @@ export class GridLayout{
}
o.tblHasColTag = true;
};
if(!o.tblHasColTag){
createColTags(o);
if(!this.tblHasColTag){
createColTags(this);
} else {
var cols = Dom.tag(tbl, 'col');
for(var ii=0; ii<tf.nbCells; ii++){
@ -296,7 +297,7 @@ export class GridLayout{
var afterColResizedFn = Types.isFn(f.on_after_col_resized) ?
f.on_after_col_resized : null;
f.on_after_col_resized = function(o,colIndex){
f.on_after_col_resized = function(o, colIndex){
if(!colIndex){
return;
}

2
src-es6/modules/popupFilter.js
View file

@ -145,7 +145,7 @@ export class PopupFilter{
}
popUpFltElm.style.display = 'block';
if(tf['col'+colIndex] === tf.fltTypeInp){
var flt = tf.GetFilterElement(colIndex);
var flt = tf.getFilterElement(colIndex);
if(flt){
flt.focus();
}

20
src-es6/tablefilter.js
View file

@ -445,8 +445,7 @@ export default class TableFilter{
//typing
this.onKeyUp = f.on_keyup===true ? true : false;
//onkeyup delay timer (msecs)
this.onKeyUpDelay = !isNaN(f.on_keyup_delay) ?
f.on_keyup_delay : 900;
this.onKeyUpDelay = !isNaN(f.on_keyup_delay) ? f.on_keyup_delay : 900;
this.isUserTyping = null; //typing indicator
this.onKeyUpTimer = undefined;
@ -1022,7 +1021,7 @@ export default class TableFilter{
inp.setAttribute(
'placeholder',
this.isWatermarkArray ?
this.watermark[i] : this.watermark
(this.watermark[i] || '') : this.watermark
);
}
inp.className = inpclass;
@ -1273,8 +1272,9 @@ export default class TableFilter{
for(var i=0; i<exts.length; i++){
var tf = this;
var ext = exts[i];
var inst = eval('new '+ exts[i].name+'(tf, ext);');
console.log(inst);
var name = ext.name;
var inst = eval('new '+ name+'(tf, ext);');
tf.Extensions[name] = inst;
}
}
@ -1527,8 +1527,9 @@ export default class TableFilter{
}
//grid-layout
else if(this.gridLayout){
this.Cpt.gridLayout.tblMainCont.appendChild(infdiv);
infdiv.className = this.gridInfDivCssClass;
var gridLayout = this.Cpt.gridLayout;
gridLayout.tblMainCont.appendChild(infdiv);
infdiv.className = gridLayout.gridInfDivCssClass;
}
//default location: just above the table
else{
@ -2912,7 +2913,8 @@ export default class TableFilter{
var row = this.tbl.rows,
filteredData = [];
if(includeHeaders){
var table = this.gridLayout ? this.headTbl : this.tbl,
var table = this.gridLayout ?
this.Cpt.gridLayout.headTbl : this.tbl,
r = table.rows[this.headersRow],
rowData = [r.rowIndex,[]];
for(var j=0; j<this.nbCells; j++){
@ -3405,7 +3407,7 @@ export default class TableFilter{
}
};
file.onerror = function(){
throw new Error('TF script could not load:\n' + this.src);
throw new Error('TF script could not load: ' + filePath);
};
head.appendChild(file);
}

475
src/extensions/colsVisibility/colsVisibility.js
View file

@ -30,155 +30,135 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
_classCallCheck(this, ColsVisibility);
// Configuration object
var f = tf.config();
var f = ext;
var cfg = tf.config();
this.colsVisibility = f.cols_visibility;
this.colVisInitialized = false;
this.colVisExtName = ext.name;
this.colVisExtDesc = ext.description;
this.initialized = false;
this.extName = f.name;
this.extDesc = f.description;
//show/hide cols span element
this.colVisSpanEl = null;
this.spanEl = null;
//show/hide cols button element
this.btnColVisEl = null;
this.btnEl = null;
//show/hide cols container div element
this.colVisContEl = null;
this.contEl = null;
//tick to hide or show column
this.colVisTickToHide = Boolean(f.colvis_tick_to_hide || true);
this.tickToHide = f.tick_to_hide === false ? false : true;
//enables/disables cols manager generation
this.colVisManager = Boolean(f.colvis_manager || true);
this.manager = f.manager === false ? false : true;
//only if external headers
this.colVisHeadersTbl = f.colvis_headers_table || null;
this.headersTbl = f.headers_table || false;
//only if external headers
this.colVisHeadersIndex = f.colvis_headers_index || 1;
this.headersIndex = f.headers_index || 1;
//id of container element
this.colVisContElTgtId = f.colvis_container_target_id || null;
this.contElTgtId = f.container_target_id || null;
//alternative headers text
this.colVisHeadersText = f.colvis_headers_text || null;
this.headersText = f.headers_text || null;
//id of button container element
this.btnColVisTgtId = f.btn_colvis_target_id || null;
this.btnTgtId = f.btn_target_id || null;
//defines show/hide cols text
this.btnColVisText = f.btn_colvis_text || "Columns&#9660;";
this.btnText = f.btn_text || "Columns&#9660;";
//defines show/hide cols button innerHtml
this.btnColVisHtml = f.btn_colvis_html || null;
this.btnHtml = f.btn_html || null;
//defines css class for show/hide cols button
this.btnColVisCssClass = f.btn_colvis_css_class || "colVis";
this.btnCssClass = f.btn_css_class || "colVis";
//defines close link text
this.btnColVisCloseText = f.btn_colvis_close_text || "Close";
this.btnCloseText = f.btn_close_text || "Close";
//defines close button innerHtml
this.btnColVisCloseHtml = f.btn_colvis_close_html || null;
this.btnCloseHtml = f.btn_close_html || null;
//defines css class for close button
this.btnColVisCloseCssClass = f.btn_colvis_close_css_class || this.btnColVisCssClass;
this.btnCloseCssClass = f.btn_close_css_class || this.btnCssClass;
this.colVisExtPath = ext.path || tf.extensionsPath + "colsVisibility/";
this.colVisStylesheet = "colsVisibility.css";
this.path = f.path || tf.extensionsPath + "colsVisibility/";
this.stylesheet = f.stylesheet || "colsVisibility.css";
//span containing show/hide cols button
this.prfxColVisSpan = "colVis_";
this.prfx = "colVis_";
//defines css class span containing show/hide cols
this.colVisSpanCss = f.colvis_span_css_class || "colVisSpan";
this.prfxColVisCont = "colVisCont_";
this.spanCssClass = f.span_css_class || "colVisSpan";
this.prfxCont = this.prfx + "Cont_";
//defines css class div containing show/hide cols
this.colVisContCss = f.colvis_cont_css_class || "colVisCont";
this.contCssClass = f.cont_css_class || "colVisCont";
//defines css class for cols list (ul)
this.colVisListCss = f.colvis_list_css_class || "cols_checklist";
this.listCssClass = cfg.list_css_class || "cols_checklist";
//defines css class for list item (li)
this.colVisListItemCssClass = f.checklist_item_css_class || "cols_checklist_item";
this.listItemCssClass = cfg.checklist_item_css_class || "cols_checklist_item";
//defines css class for selected list item (li)
this.colVisListSlcItemCssClass = f.checklist_selected_item_css_class || "cols_checklist_slc_item";
this.listSlcItemCssClass = cfg.checklist_selected_item_css_class || "cols_checklist_slc_item";
//text preceding columns list
this.colVisText = f.colvis_text || "Hide columns: ";
this.colVisAtStart = f.colvis_at_start || null;
this.colVisEnableHover = Boolean(f.colvis_enable_hover) || false;
this.text = f.text || (this.tickToHide ? "Hide: " : "Show: ");
this.atStart = f.at_start || null;
this.enableHover = Boolean(f.enable_hover);
//enables select all option
this.colVisEnableTickAll = Boolean(f.colvis_enable_tick_all) || false;
this.enableTickAll = Boolean(f.enable_tick_all);
//text preceding columns list
this.colVisTickAllText = f.colvis_tick_all_text || "Select all:";
this.colVisIsOpen = false;
this.tickAllText = f.tick_all_text || "Select all:";
//array containing hidden columns indexes
this.colVisHiddenCols = [];
this.hiddenCols = [];
this.tblHasColTag = Dom.tag(tf.tbl, "col").length > 0;
//callback invoked just after cols manager is loaded
this.onColsManagerLoaded = Types.isFn(f.on_cols_manager_loaded) ? f.on_cols_manager_loaded : null;
this.onLoaded = Types.isFn(f.on_loaded) ? f.on_loaded : null;
//calls function before cols manager is opened
this.onBeforeOpenColsManager = Types.isFn(f.on_before_open_cols_manager) ? f.on_before_open_cols_manager : null;
this.onBeforeOpen = Types.isFn(f.on_before_open) ? f.on_before_open : null;
//calls function after cols manager is opened
this.onAfterOpenColsManager = Types.isFn(f.on_after_open_cols_manager) ? f.on_after_open_cols_manager : null;
this.onAfterOpen = Types.isFn(f.on_after_open) ? f.on_after_open : null;
//calls function before cols manager is closed
this.onBeforeCloseColsManager = Types.isFn(f.on_before_close_cols_manager) ? f.on_before_close_cols_manager : null;
this.onBeforeClose = Types.isFn(f.on_before_close) ? f.on_before_close : null;
//calls function after cols manager is closed
this.onAfterCloseColsManager = Types.isFn(f.on_after_close_cols_manager) ? f.on_after_close_cols_manager : null;
this.onAfterClose = Types.isFn(f.on_after_close) ? f.on_after_close : null;
//calls function before col is hidden
this.onBeforeColIsHidden = Types.isFn(f.on_before_col_is_hidden) ? f.on_before_col_is_hidden : null;
this.onBeforeColHidden = Types.isFn(f.on_before_col_hidden) ? f.on_before_col_hidden : null;
//calls function after col is hidden
this.onAfterColIsHidden = Types.isFn(f.on_after_col_is_hidden) ? f.on_after_col_is_hidden : null;
this.onAfterColHidden = Types.isFn(f.on_after_col_hidden) ? f.on_after_col_hidden : null;
//calls function before col is displayed
this.onBeforeColIsDisplayed = Types.isFn(f.on_before_col_is_displayed) ? f.on_before_col_is_displayed : null;
this.onBeforeColDisplayed = Types.isFn(f.on_before_col_displayed) ? f.on_before_col_displayed : null;
//calls function after col is displayed
this.onAfterColIsDisplayed = Types.isFn(f.on_after_col_is_displayed) ? f.on_after_col_is_displayed : null;
this.onAfterColDisplayed = Types.isFn(f.on_after_col_displayed) ? f.on_after_col_displayed : null;
//Grid layout compatibility
if (tf.gridLayout) {
this.colVisHeadersTbl = tf.headTbl; //headers table
this.colVisHeadersIndex = 0; //headers index
this.onAfterColIsDisplayed = function () {};
this.onAfterColIsHidden = function () {};
this.headersTbl = tf.Cpt.gridLayout.headTbl; //headers table
this.headersIndex = 0; //headers index
this.onAfterColDisplayed = function () {};
this.onAfterColHidden = function () {};
}
//Extension event definition
//event name for TF event manager
tf.Evt.name.colsvisibility = "ShowColsVisibility";
//event status message
tf.msgShowColsVisibility = "Show/Hide columns";
tf.Evt._ShowColsVisibility = function () {
o.ShowColsVisibility();
};
//event name for TF event manager
tf.Evt.name.checkitem = "CheckItem";
//event status message
tf.msgCheckItem = "Showing/hiding columns";
tf.Evt._CheckItem = function (li) {
o.CheckItem(li);
};
//Loads extension stylesheet
tf.includeFile(ext.name + "Style", this.colVisExtPath + this.colVisStylesheet, null, "link");
tf.includeFile(f.name + "Style", this.path + this.stylesheet, null, "link");
this.tf = tf;
//Sets button
// if(this.colVisManager) o.SetShowHideColsBtn();
this.init();
this.colVisInitialized = true;
}
_createClass(ColsVisibility, {
toggle: {
value: function toggle(evt) {
var tf = this.tf;
var contDisplay = this.colVisContEl.style.display;
var onBeforeOpenColsManager = this.onBeforeOpenColsManager;
var onBeforeCloseColsManager = this.onBeforeCloseColsManager;
var onAfterOpenColsManager = this.onAfterOpenColsManager;
var onAfterCloseColsManager = this.onAfterCloseColsManager;
var contDisplay = this.contEl.style.display;
var onBeforeOpen = this.onBeforeOpen;
var onBeforeClose = this.onBeforeClose;
var onAfterOpen = this.onAfterOpen;
var onAfterClose = this.onAfterClose;
if (onBeforeOpenColsManager && contDisplay !== "inline") {
onBeforeOpenColsManager.call(null, this);
if (onBeforeOpen && contDisplay !== "inline") {
onBeforeOpen.call(null, this);
}
if (onBeforeCloseColsManager && contDisplay === "inline") {
onBeforeCloseColsManager.call(null, this);
if (onBeforeClose && contDisplay === "inline") {
onBeforeClose.call(null, this);
}
this.colVisContEl.style.display = contDisplay === "inline" ? "none" : "inline";
this.contEl.style.display = contDisplay === "inline" ? "none" : "inline";
if (onAfterOpenColsManager && contDisplay !== "inline") {
onAfterOpenColsManager.call(null, this);
if (onAfterOpen && contDisplay !== "inline") {
onAfterOpen.call(null, this);
}
if (onAfterCloseColsManager && contDisplay === "inline") {
onAfterCloseColsManager.call(null, this);
if (onAfterClose && contDisplay === "inline") {
onAfterClose.call(null, this);
}
}
},
@ -190,14 +170,15 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
}
var isChecked = lbl.firstChild.checked;
var colIndex = lbl.firstChild.getAttribute("id").split("_")[1];
colIndex = parseInt(colIndex, 10);
if (isChecked) {
Dom.addClass(li, this.colVisListSlcItemCssClass);
Dom.addClass(li, this.listSlcItemCssClass);
} else {
Dom.removeClass(li, this.colVisListSlcItemCssClass);
Dom.removeClass(li, this.listSlcItemCssClass);
}
// var hide = (this.TickToHide && isChecked) || (!this.TickToHide && !isChecked) ? true : false;
var hide = false;
if (this.colVisTickToHide && isChecked || !this.colVisTickToHide && !isChecked) {
if (this.tickToHide && isChecked || !this.tickToHide && !isChecked) {
hide = true;
}
this.setHidden(colIndex, hide);
@ -205,190 +186,163 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
},
init: {
value: function init() {
if (!this.colVisManager) {
if (!this.manager) {
return;
}
this.buildBtn();
this.buildManager();
this.initialized = true;
}
},
buildBtn: {
/**
* Build main button UI
*/
value: function buildBtn() {
var _this = this;
var tf = this.tf;
// if(!tf.hasGrid && !tf.isFirstLoad){
// return;
// }
if (this.btnColVisEl) {
if (this.btnEl) {
return;
}
var colVisSpan = Dom.create("span", ["id", this.prfxColVisSpan + tf.id]);
colVisSpan.className = this.colVisSpanCss;
var tf = this.tf;
var span = Dom.create("span", ["id", this.prfx + tf.id]);
span.className = this.spanCssClass;
//Container element (rdiv or custom element)
if (!this.btnColVisTgtId) {
if (!this.btnTgtId) {
tf.setToolbar();
}
var targetEl = !this.btnColVisTgtId ? tf.rDiv : Dom.id(this.btnColVisTgtId);
var targetEl = !this.btnTgtId ? tf.rDiv : Dom.id(this.btnTgtId);
if (this.btnColVisTgtId) {
targetEl.firstChild.parentNode.insertBefore(colVisSpan, targetEl.firstChild);
if (!this.btnTgtId) {
var firstChild = targetEl.firstChild;
firstChild.parentNode.insertBefore(span, firstChild);
} else {
targetEl.appendChild(colVisSpan);
targetEl.appendChild(span);
}
if (!this.btnColVisHtml) {
if (!this.btnHtml) {
var btn = Dom.create("a", ["href", "javascript:;"]);
btn.className = this.btnColVisCssClass;
btn.title = this.colVisExtDesc;
btn.className = this.btnCssClass;
btn.title = this.extDesc;
btn.innerHTML = this.btnColVisText;
colVisSpan.appendChild(btn);
if (!this.colVisEnableHover) {
// btn.onclick = this.Evt._ShowColsVisibility;
btn.innerHTML = this.btnText;
span.appendChild(btn);
if (!this.enableHover) {
Event.add(btn, "click", function (evt) {
_this.toggle(evt);
});
} else {
// var o = this;
// btn.onmouseover = this.Evt._ShowColsVisibility;
Event.add(btn, "mouseover", function (evt) {
_this.toggle(evt);
});
}
} else {
//Custom html
colVisSpan.innerHTML = this.btnColVisHtml;
var colVisEl = colVisSpan.firstChild;
if (!this.colVisEnableHover) {
// colVisEl.onclick = this.Evt._ShowColsVisibility;
span.innerHTML = this.btnHtml;
var colVisEl = span.firstChild;
if (!this.enableHover) {
Event.add(colVisEl, "click", function (evt) {
_this.toggle(evt);
});
} else {
// colVisEl.onmouseover = this.Evt._ShowColsVisibility;
Event.add(colVisEl, "mouseover", function (evt) {
_this.toggle(evt);
});
}
}
this.colVisSpanEl = colVisSpan;
this.btnColVisEl = this.colVisSpanEl.firstChild;
this.spanEl = span;
this.btnEl = this.spanEl.firstChild;
// this.SetColsVisibilityManager();
// this.buildManager();
if (this.onColsManagerLoaded) {
this.onColsManagerLoaded.call(null, this);
if (this.onLoaded) {
this.onLoaded.call(null, this);
}
}
},
buildManager: {
/**
* Build columns manager UI
*/
value: function buildManager() {
var _this = this;
var tf = this.tf;
// if(!this.hasGrid && !this.isFirstLoad) return;
var container = !this.colVisContElTgtId ? Dom.create("div", ["id", this.prfxColVisCont + tf.id]) : Dom.id(this.colVisContElTgtId);
container.className = this.colVisContCss;
var container = !this.contElTgtId ? Dom.create("div", ["id", this.prfxCont + tf.id]) : Dom.id(this.contElTgtId);
container.className = this.contCssClass;
//Extension description
var extNameLabel = Dom.create("p");
extNameLabel.innerHTML = this.colVisText;
extNameLabel.innerHTML = this.text;
container.appendChild(extNameLabel);
//Headers list
var ul = Dom.create("ul", ["id", "ul" + this.colVisExtName + "_" + tf.id]);
ul.className = this.colVisListCss;
var ul = Dom.create("ul", ["id", "ul" + this.extName + "_" + tf.id]);
ul.className = this.listCssClass;
var tbl = this.colVisHeadersTbl ? this.colVisHeadersTbl : tf.tbl;
var headerIndex = this.colVisHeadersTbl ? this.colVisHeadersIndex : tf.getHeadersRowIndex();
var tbl = this.headersTbl ? this.headersTbl : tf.tbl;
var headerIndex = this.headersTbl ? this.headersIndex : tf.getHeadersRowIndex();
var headerRow = tbl.rows[headerIndex];
//Tick all option
if (this.colVisEnableTickAll) {
var li = Dom.createCheckItem("col__" + tf.id, this.colVisTickAllText, this.colVisTickAllText);
Dom.addClass(li, this.colVisListItemCssClass);
if (this.enableTickAll) {
var li = Dom.createCheckItem("col__" + tf.id, this.tickAllText, this.tickAllText);
Dom.addClass(li, this.listItemCssClass);
ul.appendChild(li);
var isAllTicked = false;
// li.check.onclick = function(){
// for(var h=0; h<headerRow.cells.length; h++)
// {
// var itm = tf_Id('col_'+h+'_'+o.id);
// if(!isAllTicked && itm.checked) itm.checked = false;
// if(isAllTicked && !itm.checked) itm.checked = true;
// if(itm) itm.click();
// }
// isAllTicked = (isAllTicked ? false : true);
// };
li.check.checked = !this.tickToHide;
Event.add(li.check, "click", function (evt) {
for (var h = 0; h < headerRow.cells.length; h++) {
var itm = Dom.id("col_" + h + "_" + tf.id);
if (!isAllTicked && itm.checked) {
itm.checked = false;
}
if (isAllTicked && !itm.checked) {
itm.checked = true;
}
if (itm) {
if (itm && li.check.checked !== itm.checked) {
itm.click();
itm.checked = li.check.checked;
}
}
isAllTicked = !isAllTicked;
});
// if(tf_isIE)
// {//IE: label looses check capability
// li.label.onclick = function(){ this.firstChild.click(); };
// }
}
for (var i = 0; i < headerRow.cells.length; i++) {
var cell = headerRow.cells[i];
var cellText = this.colVisHeadersText && this.colVisHeadersText[i] ? this.colVisHeadersText[i] : this._getHeaderText(cell);
var cellText = this.headersText && this.headersText[i] ? this.headersText[i] : this._getHeaderText(cell);
var liElm = Dom.createCheckItem("col_" + i + "_" + tf.id, cellText, cellText);
Dom.addClass(liElm, this.colVisListItemCssClass);
if (!this.colVisTickToHide) {
Dom.addClass(liElm, this.colVisListSlcItemCssClass);
Dom.addClass(liElm, this.listItemCssClass);
if (!this.tickToHide) {
Dom.addClass(liElm, this.listSlcItemCssClass);
}
ul.appendChild(liElm);
if (!this.colVisTickToHide) {
if (!this.tickToHide) {
liElm.check.checked = true;
}
// liElm.check.onclick = function(){ o.Evt._CheckItem(this.parentNode); };
Event.add(liElm.check, "click", function (evt) {
var elm = Event.target(evt);
var lbl = elm.parentNode;
_this.checkItem(lbl);
});
// if(tf_isIE)
// {//IE: label looses check capability
// li.label.onclick = function(){ this.firstChild.click(); };
// }
}
//separator
var p = Dom.create("p", ["align", "center"]);
var btn;
//Close link
if (!this.btnColVisCloseHtml) {
if (!this.btnCloseHtml) {
btn = Dom.create("a", ["href", "javascript:;"]);
btn.className = this.btnColVisCloseCssClass;
btn.innerHTML = this.btnColVisCloseText;
// btn.onclick = this.Evt._ShowColsVisibility;
btn.className = this.btnCloseCssClass;
btn.innerHTML = this.btnCloseText;
Event.add(btn, "click", function (evt) {
_this.toggle(evt);
});
p.appendChild(btn);
} else {
p.innerHTML = this.btnColVisCloseHtml;
p.innerHTML = this.btnCloseHtml;
btn = p.firstChild;
// btn.onclick = this.Evt._ShowColsVisibility;
Event.add(btn, "click", function (evt) {
_this.toggle(evt);
});
@ -397,16 +351,11 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
container.appendChild(ul);
container.appendChild(p);
this.btnColVisEl.parentNode.insertBefore(container, this.btnColVisEl);
this.colVisContEl = container;
this.btnEl.parentNode.insertBefore(container, this.btnEl);
this.contEl = container;
//IE6 only: options are not checked if colVisTickToHide=false
// if(tf_isIE && !o.colVisTickToHide)
// for(var i=0; i<headerRow.cells.length; i++)
// tf_Id('col_'+i+'_'+o.id).checked = true;
if (this.colVisAtStart) {
var a = this.colVisAtStart;
if (this.atStart) {
var a = this.atStart;
for (var k = 0; k < a.length; k++) {
var itm = Dom.id("col_" + a[k] + "_" + tf.id);
if (itm) {
@ -417,92 +366,58 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
}
},
setHidden: {
/**
* Hide or show specified columns
* @param {Numner} colIndex Column index
* @param {Boolean} hide hide column if true or show if false
*/
value: function setHidden(colIndex, hide) {
var tf = this.tf;
var tbl = tf.tbl;
var col = Dom.tag(tbl, "col")[colIndex];
//External headers
var col1 = this.colVisHeadersTbl ? Dom.tag(this.colVisHeadersTbl, "col")[colIndex] : null;
if (this.onBeforeColIsHidden && hide) {
this.onBeforeColIsHidden.call(null, this, colIndex);
if (this.onBeforeColHidden && hide) {
this.onBeforeColHidden.call(null, this, colIndex);
}
if (this.onBeforeColIsDisplayed && !hide) {
this.onBeforeColIsDisplayed.call(null, this, colIndex);
if (this.onBeforeColDisplayed && !hide) {
this.onBeforeColDisplayed.call(null, this, colIndex);
}
//cols can be hidden only under IE
if (this.tblHasColTag && Helpers.isIE()) {
tbl = this.colVisHeadersTbl || tbl;
var filtersRow = tbl.rows[tf.getFiltersRowIndex()];
var a1 = tf.getFiltersByType(tf.fltTypeSlc, true);
var a2 = tf.getFiltersByType(tf.fltTypeMulti, true);
var a = a1.concat(a2);
if (col) {
col.style.display = hide ? "none" : "";
//Selects are displayed even if column is hidden under IE6
if (a.indexOf(colIndex) !== -1) {
if (!this.colVisHeadersTbl) {
filtersRow.cells[colIndex].style.visibility = hide ? "hidden" : "visible";
} else {
var flt = Dom.id(tf.fltIds[colIndex]);
flt.style.visibility = hide ? "hidden" : "visible";
}
}
}
if (col1) {
col1.style.display = hide ? "none" : "";
}
} else {
this._hideCells(tbl, colIndex, hide);
if (this.colVisHeadersTbl) {
this._hideCells(this.colVisHeadersTbl, colIndex, hide);
}
this._hideCells(tbl, colIndex, hide);
if (this.headersTbl) {
this._hideCells(this.headersTbl, colIndex, hide);
}
var hiddenCols = this.colVisHiddenCols;
var hiddenCols = this.hiddenCols;
if (hide) {
if (hiddenCols.indexOf(colIndex) === -1) {
this.colVisHiddenCols.push(colIndex);
this.hiddenCols.push(colIndex);
}
} else {
// var itemIndex = o.showHideHiddenCols.tf_IndexByValue(colIndex, true);
var itemIndex = Arr.indexByValue(hiddenCols, colIndex, true);
if (hiddenCols.indexOf(colIndex) !== -1) {
this.colVisHiddenCols.splice(itemIndex, 1);
this.hiddenCols.splice(itemIndex, 1);
}
}
var gridLayout;
var headTbl;
var gridColElms;
if (this.onAfterColIsHidden && hide) {
if (this.onAfterColHidden && hide) {
//This event is fired just after a column is displayed for
//grid_layout compatibility
if (tf.gridLayout) {
//Returns the removed column widths
// function getHiddenWidth(){
// var ths = o.headTbl.rows[o.showHideColsHeadersIndex].cells;
// var hW = 0;
// for(var i=0; i<o.nbCells; i++){
// if(ths[i].style.display == 'none'){
// var w = parseInt(ths[i].style.width);
// ths[i].style.width = 0;
// hW += w;
// }
// }
// return hW;
// }
gridLayout = tf.Cpt.gridLayout;
headTbl = gridLayout.headTbl;
gridColElms = gridLayout.gridColElms;
if (Helpers.isIE()) {
tbl.style.width = headTbl.clientWidth + "px";
} else {
var ths = headTbl.rows[this.colVisHeadersIndex].cells;
var ths = headTbl.rows[this.headersIndex].cells;
var hiddenWidth = 0;
for (var i = 0; i < o.nbCells; i++) {
for (var i = 0; i < tf.nbCells; i++) {
if (ths[i].style.display === "none") {
var w = parseInt(ths[i].style.width, 10);
ths[i].style.width = 0;
@ -516,32 +431,39 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
gridColElms[colIndex].style.display = "none";
}
}
this.onAfterColIsHidden.call(null, this, colIndex);
this.onAfterColHidden.call(null, this, colIndex);
}
if (this.onAfterColIsDisplayed && !hide) {
if (this.onAfterColDisplayed && !hide) {
//This event is fired just after a column is displayed for
//grid_layout compatibility
if (tf.gridLayout /*&& (!tf_isIE && !tf_isIE7)*/) {
if (tf.gridLayout) {
gridLayout = tf.Cpt.gridLayout;
headTbl = gridLayout.headTbl;
gridColElms = gridLayout.gridColElms;
gridColElms[colIndex].style.display = "";
var width = parseInt(gridColElms[colIndex].style.width, 10);
gridLayout.crWColsRow.cells[colIndex].style.width = width + "px";
var header = tf.getHeaderElement(colIndex);
header.style.width = width + "px";
headTbl.style.width = parseInt(headTbl.style.width, 10) + width + "px";
tf.tbl.style.width = headTbl.style.width;
}
this.onAfterColIsDisplayed.call(null, this, colIndex);
this.onAfterColDisplayed.call(null, this, colIndex);
}
}
},
showCol: {
/**
* Show specified column
* @param {Number} colIndex Column index
*/
value: function showCol(colIndex) {
if (colIndex === undefined || !this.IsColHidden(colIndex)) {
if (colIndex === undefined || !this.isColHidden(colIndex)) {
return;
}
if (this.colVisManager && this.colVisContEl) {
if (this.manager && this.contEl) {
var itm = Dom.id("col_" + colIndex + "_" + this.tf.id);
if (itm) {
itm.click();
@ -552,11 +474,17 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
}
},
hideCol: {
/**
* Hide specified column
* @param {Number} colIndex Column index
*/
value: function hideCol(colIndex) {
if (colIndex === undefined || this.IsColHidden(colIndex)) {
if (colIndex === undefined || this.isColHidden(colIndex)) {
return;
}
if (this.colVisManager && this.colVisContEl) {
if (this.manager && this.contEl) {
var itm = Dom.id("col_" + colIndex + "_" + this.tf.id);
if (itm) {
itm.click();
@ -567,43 +495,66 @@ define(["exports", "../../dom", "../../types", "../../event", "../../helpers", "
}
},
isColHidden: {
/**
* Determine if specified column is hidden
* @param {Number} colIndex Column index
*/
value: function isColHidden(colIndex) {
if (this.colVisHiddenCols.indexOf(colIndex) !== -1) {
if (this.hiddenCols.indexOf(colIndex) !== -1) {
return true;
}
return false;
}
},
toggleCol: {
/**
* Toggle visibility of specified column
* @param {Number} colIndex Column index
*/
value: function toggleCol(colIndex) {
if (colIndex === undefined || this.IsColHidden(colIndex)) {
this.ShowCol(colIndex);
if (colIndex === undefined || this.isColHidden(colIndex)) {
this.showCol(colIndex);
} else {
this.HideCol(colIndex);
this.hideCol(colIndex);
}
}
},
getHiddenCols: {
/**
* Returns the indexes of the columns currently hidden
* @return {Array} column indexes
*/
value: function getHiddenCols() {
return this.colVisHiddenCols;
return this.hiddenCols;
}
},
destroy: {
/**
* Remove the columns manager
*/
value: function destroy() {
if (!this.btnColVisEl || !this.colVisContEl) {
if (!this.btnEl || !this.contEl) {
return;
}
if (Dom.id(this.colVisContElTgtId)) {
Dom.id(this.colVisContElTgtId).innerHTML = "";
if (Dom.id(this.contElTgtId)) {
Dom.id(this.contElTgtId).innerHTML = "";
} else {
this.colVisContEl.innerHTML = "";
this.colVisContEl.parentNode.removeChild(this.colVisContEl);
this.colVisContEl = null;
this.contEl.innerHTML = "";
this.contEl.parentNode.removeChild(this.contEl);
this.contEl = null;
}
this.btnColVisEl.innerHTML = "";
this.btnColVisEl.parentNode.removeChild(this.btnColVisEl);
this.btnColVisEl = null;
this.colVisInitialized = false;
this.btnEl.innerHTML = "";
this.btnEl.parentNode.removeChild(this.btnEl);
this.btnEl = null;
this.initialized = false;
}
},
_getHeaderText: {

45
src/index.html
View file

@ -6,6 +6,9 @@
<script type="text/javascript">
var tf;
</script>
<style>
.test{ color: red !important; }
</style>
</head>
<body>
<p align="right">
@ -22,7 +25,8 @@
tf.Cpt.paging.destroy();
tf.filter();" >
</p>
<div style="width: 900px;">
<div id="test_cont">sss</div>
<div style="width: 500px;">
<table id="demo" cellpadding="0" cellspacing="0">
<thead>
<tr>
@ -98,7 +102,7 @@
base_path: './',
loader: false,
rows_counter: true,
enable_default_theme: true,
enable_default_theme: false,
// slc_filling_method: 'innerhtml',
sort: true,
sort_config: {
@ -126,8 +130,8 @@
default_selection: 'both',
loadStylesheet: true
},
grid_layout: false,
// grid_width: '500px',
grid_layout: true,
grid_width: '600px',
// grid_height: '200px',
on_before_show_msg: function(tf){
// console.log('on_before_show_msg');
@ -137,13 +141,44 @@
/*** Columns Visibility Manager extension load ***/
name: 'ColsVisibility',
//src: 'extensions/colsVisibility/colsVisibility.js',
description: 'Columns visibility manager'/*,
description: 'Columns visibility manager',/*
initialize: function(o){o.SetColsVisibility();}*/
// manager: true,
tick_to_hide: true,
// headers_table: true,
// container_target_id: 'test_cont',
// headers_text: ['1','2','3','4','5','6'],
btn_target_id: 'test_cont',
// btn_text: 'Hola',
// btn_html: '<button>Columns</button>',
// btn_css_class: 'test',
// btn_close_text: 'jj',
// btn_close_html: '<button>close</button>',
// btn_close_css_class: 'test',
// stylesheet: 'hola.css',
// cont_css_class: 'test',
// checklist_item_css_class: 'test',
// at_start: [0,1,2,3,4],
// enable_hover: true,
enable_tick_all: true
// ,
// tick_all_text: 'Hola',
// text: 'tutu',
// on_loaded: function(){ console.log(arguments); },
// on_before_open: function(){ console.log('on_before_open', arguments); },
// on_after_open: function(){ console.log('on_after_open',arguments); },
// on_before_close: function(){ console.log('on_before_close',arguments); },
// on_after_close: function(){ console.log('on_after_close',arguments); },
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
}]
});
tf.init();
});
</script>
<button onclick="javascript:tf.Extensions.ColsVisibility.toggleCol(2);">Toggle col 2</button>
</body>
</html>

47
src/modules/gridLayout.js
View file

@ -76,6 +76,8 @@ define(["exports", "../dom", "../types", "../helpers", "../event"], function (ex
*/
value: function init() {
var _this = this;
var tf = this.tf;
var f = tf.config();
var tbl = tf.tbl;
@ -201,11 +203,11 @@ define(["exports", "../dom", "../types", "../helpers", "../event"], function (ex
}
//Headers table style
this.headTbl.style.width = tbl.style.width;
this.headTbl.style.tableLayout = "fixed";
tbl.style.tableLayout = "fixed";
this.headTbl.cellPadding = tbl.cellPadding;
this.headTbl.cellSpacing = tbl.cellSpacing;
// this.headTbl.style.width = tbl.style.width;
//content table without headers needs col widths to be reset
tf.setColWidths();
@ -214,27 +216,30 @@ define(["exports", "../dom", "../types", "../helpers", "../event"], function (ex
this.headTblCont.style.width = this.tblCont.clientWidth + "px";
tbl.style.width = "";
//
this.headTbl.style.width = tbl.clientWidth + "px";
//
//scroll synchronisation
var o = this;
Event.add(this.tblCont, "scroll", function (evt) {
//this = scroll element
var scrollLeft = this.scrollLeft;
o.headTblCont.scrollLeft = scrollLeft;
var elm = Event.target(evt);
var scrollLeft = elm.scrollLeft;
_this.headTblCont.scrollLeft = scrollLeft;
//New pointerX calc taking into account scrollLeft
if (!o.isPointerXOverwritten) {
try {
o.Evt.pointerX = function (evt) {
var e = evt || global.event;
var bdScrollLeft = tf_StandardBody().scrollLeft + scrollLeft;
return e.pageX + scrollLeft || e.clientX + bdScrollLeft;
};
o.isPointerXOverwritten = true;
} catch (err) {
o.isPointerXOverwritten = false;
}
}
// if(!o.isPointerXOverwritten){
// try{
// o.Evt.pointerX = function(evt){
// var e = evt || global.event;
// var bdScrollLeft = tf_StandardBody().scrollLeft +
// scrollLeft;
// return (e.pageX + scrollLeft) ||
// (e.clientX + bdScrollLeft);
// };
// o.isPointerXOverwritten = true;
// } catch(err) {
// o.isPointerXOverwritten = false;
// }
// }
});
//Sort is enabled if not specified in config object
@ -274,7 +279,7 @@ define(["exports", "../dom", "../types", "../helpers", "../event"], function (ex
f.col_enable_text_ellipsis = false;
//Cols generation for all browsers excepted IE<=7
o.tblHasColTag = Dom.tag(tbl, "col").length > 0 ? true : false;
this.tblHasColTag = Dom.tag(tbl, "col").length > 0 ? true : false;
//Col elements are enough to keep column widths after sorting and
//filtering
@ -290,8 +295,8 @@ define(["exports", "../dom", "../types", "../helpers", "../event"], function (ex
}
o.tblHasColTag = true;
};
if (!o.tblHasColTag) {
createColTags(o);
if (!this.tblHasColTag) {
createColTags(this);
} else {
var cols = Dom.tag(tbl, "col");
for (var ii = 0; ii < tf.nbCells; ii++) {

2
src/modules/popupFilter.js
View file

@ -162,7 +162,7 @@ define(["exports", "../types", "../dom", "../event", "../helpers"], function (ex
}
popUpFltElm.style.display = "block";
if (tf["col" + colIndex] === tf.fltTypeInp) {
var flt = tf.GetFilterElement(colIndex);
var flt = tf.getFilterElement(colIndex);
if (flt) {
flt.focus();
}

16
src/tablefilter.js
View file

@ -964,7 +964,7 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array
var inptype = col === this.fltTypeInp ? "text" : "hidden";
var inp = dom.create(this.fltTypeInp, ["id", this.prfxFlt + i + "_" + this.id], ["type", inptype], ["ct", i]);
if (inptype !== "hidden" && this.watermark) {
inp.setAttribute("placeholder", this.isWatermarkArray ? this.watermark[i] : this.watermark);
inp.setAttribute("placeholder", this.isWatermarkArray ? this.watermark[i] || "" : this.watermark);
}
inp.className = inpclass;
inp.onfocus = this.Evt.onInpFocus;
@ -1212,8 +1212,9 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array
for (var i = 0; i < exts.length; i++) {
var tf = this;
var ext = exts[i];
var inst = eval("new " + exts[i].name + "(tf, ext);");
console.log(inst);
var name = ext.name;
var inst = eval("new " + name + "(tf, ext);");
tf.Extensions[name] = inst;
}
}
},
@ -1466,8 +1467,9 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array
}
//grid-layout
else if (this.gridLayout) {
this.Cpt.gridLayout.tblMainCont.appendChild(infdiv);
infdiv.className = this.gridInfDivCssClass;
var gridLayout = this.Cpt.gridLayout;
gridLayout.tblMainCont.appendChild(infdiv);
infdiv.className = gridLayout.gridInfDivCssClass;
}
//default location: just above the table
else {
@ -2854,7 +2856,7 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array
var row = this.tbl.rows,
filteredData = [];
if (includeHeaders) {
var table = this.gridLayout ? this.headTbl : this.tbl,
var table = this.gridLayout ? this.Cpt.gridLayout.headTbl : this.tbl,
r = table.rows[this.headersRow],
rowData = [r.rowIndex, []];
for (var j = 0; j < this.nbCells; j++) {
@ -3367,7 +3369,7 @@ define(["exports", "module", "event", "dom", "string", "cookie", "types", "array
}
};
file.onerror = function () {
throw new Error("TF script could not load:\n" + this.src);
throw new Error("TF script could not load: " + filePath);
};
head.appendChild(file);
}