2015-04-17 07:01:06 +02:00
|
|
|
import {Dom} from '../../dom';
|
|
|
|
import {Types} from '../../types';
|
|
|
|
import {Event} from '../../event';
|
2015-04-19 13:05:33 +02:00
|
|
|
import {Helpers} from '../../helpers';
|
|
|
|
import {Arr} from '../../array';
|
2015-04-12 10:32:24 +02:00
|
|
|
|
|
|
|
export class ColsVisibility{
|
|
|
|
|
|
|
|
/**
|
2015-04-12 12:24:32 +02:00
|
|
|
* Columns Visibility extension
|
2015-04-12 10:32:24 +02:00
|
|
|
* @param {Object} tf TableFilter instance
|
|
|
|
*/
|
2015-04-20 09:20:28 +02:00
|
|
|
constructor(
|
|
|
|
tf,
|
|
|
|
ext={
|
|
|
|
name:'ColsVisibility',
|
|
|
|
description:'Columns visibility manager'
|
|
|
|
}){
|
|
|
|
|
2015-04-12 10:32:24 +02:00
|
|
|
// Configuration object
|
|
|
|
var f = tf.config();
|
|
|
|
|
|
|
|
this.colsVisibility = f.cols_visibility;
|
|
|
|
|
2015-04-19 13:05:33 +02:00
|
|
|
this.colVisInitialized = false;
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisExtName = ext.name;
|
2015-04-20 09:20:28 +02:00
|
|
|
this.colVisExtDesc = ext.description ;
|
2015-04-12 10:32:24 +02:00
|
|
|
|
|
|
|
//show/hide cols span element
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisSpanEl = null;
|
2015-04-12 10:32:24 +02:00
|
|
|
//show/hide cols button element
|
2015-04-17 07:01:06 +02:00
|
|
|
this.btnColVisEl = null;
|
2015-04-12 10:32:24 +02:00
|
|
|
//show/hide cols container div element
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisContEl = null;
|
2015-04-12 12:24:32 +02:00
|
|
|
|
|
|
|
//tick to hide or show column
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisTickToHide = Boolean(f.colvis_tick_to_hide || true);
|
2015-04-12 12:24:32 +02:00
|
|
|
//enables/disables cols manager generation
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisManager = Boolean(f.colvis_manager || true);
|
2015-04-12 12:24:32 +02:00
|
|
|
//only if external headers
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisHeadersTbl = f.colvis_headers_table || null;
|
2015-04-12 12:24:32 +02:00
|
|
|
//only if external headers
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisHeadersIndex = f.colvis_headers_index || 1;
|
2015-04-12 12:24:32 +02:00
|
|
|
//id of container element
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisContElTgtId = f.colvis_container_target_id || null;
|
2015-04-12 12:24:32 +02:00
|
|
|
//alternative headers text
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisHeadersText = f.colvis_headers_text || null;
|
2015-04-12 12:24:32 +02:00
|
|
|
//id of button container element
|
2015-04-17 07:01:06 +02:00
|
|
|
this.btnColVisTgtId = f.btn_colvis_target_id || null;
|
2015-04-12 12:24:32 +02:00
|
|
|
//defines show/hide cols text
|
2015-04-20 09:20:28 +02:00
|
|
|
this.btnColVisText = f.btn_colvis_text || 'Columns▼';
|
2015-04-12 12:24:32 +02:00
|
|
|
//defines show/hide cols button innerHtml
|
2015-04-17 07:01:06 +02:00
|
|
|
this.btnColVisHtml = f.btn_colvis_html || null;
|
2015-04-12 12:24:32 +02:00
|
|
|
//defines css class for show/hide cols button
|
2015-04-17 07:01:06 +02:00
|
|
|
this.btnColVisCssClass = f.btn_colvis_css_class || 'colVis';
|
2015-04-12 12:24:32 +02:00
|
|
|
//defines close link text
|
2015-04-17 07:01:06 +02:00
|
|
|
this.btnColVisCloseText = f.btn_colvis_close_text || 'Close';
|
2015-04-12 12:24:32 +02:00
|
|
|
//defines close button innerHtml
|
2015-04-17 07:01:06 +02:00
|
|
|
this.btnColVisCloseHtml = f.btn_colvis_close_html || null;
|
2015-04-12 12:24:32 +02:00
|
|
|
//defines css class for close button
|
2015-04-17 07:01:06 +02:00
|
|
|
this.btnColVisCloseCssClass =
|
|
|
|
f.btn_colvis_close_css_class || this.btnColVisCssClass;
|
2015-04-15 09:09:20 +02:00
|
|
|
|
2015-04-20 09:20:28 +02:00
|
|
|
this.colVisExtPath = ext.path || tf.extensionsPath + 'colsVisibility/';
|
|
|
|
this.colVisStylesheet = 'colsVisibility.css';
|
2015-04-15 09:09:20 +02:00
|
|
|
//span containing show/hide cols button
|
2015-04-17 07:01:06 +02:00
|
|
|
this.prfxColVisSpan = 'colVis_';
|
2015-04-15 09:09:20 +02:00
|
|
|
//defines css class span containing show/hide cols
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisSpanCss = f.colvis_span_css_class || 'colVisSpan';
|
|
|
|
this.prfxColVisCont = 'colVisCont_';
|
2015-04-15 09:09:20 +02:00
|
|
|
//defines css class div containing show/hide cols
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisContCss = f.colvis_cont_css_class || 'colVisCont';
|
2015-04-15 09:09:20 +02:00
|
|
|
//defines css class for cols list (ul)
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisListCss = f.colvis_list_css_class ||'cols_checklist';
|
2015-04-15 09:09:20 +02:00
|
|
|
//defines css class for list item (li)
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisListItemCssClass = f.checklist_item_css_class ||
|
2015-04-15 09:09:20 +02:00
|
|
|
'cols_checklist_item';
|
|
|
|
//defines css class for selected list item (li)
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisListSlcItemCssClass =
|
2015-04-15 09:09:20 +02:00
|
|
|
f.checklist_selected_item_css_class || 'cols_checklist_slc_item';
|
|
|
|
//text preceding columns list
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisText = f.colvis_text || 'Hide columns: ';
|
|
|
|
this.colVisAtStart = f.colvis_at_start || null;
|
|
|
|
this.colVisEnableHover = Boolean(f.colvis_enable_hover) || false;
|
2015-04-15 09:09:20 +02:00
|
|
|
//enables select all option
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisEnableTickAll = Boolean(f.colvis_enable_tick_all) || false;
|
2015-04-15 09:09:20 +02:00
|
|
|
//text preceding columns list
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisTickAllText = f.colvis_tick_all_text || 'Select all:';
|
|
|
|
this.colVisIsOpen = false;
|
2015-04-15 09:09:20 +02:00
|
|
|
//array containing hidden columns indexes
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisHiddenCols = [];
|
2015-04-15 09:09:20 +02:00
|
|
|
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;
|
|
|
|
//calls function before cols manager is opened
|
|
|
|
this.onBeforeOpenColsManager =
|
|
|
|
Types.isFn(f.on_before_open_cols_manager) ?
|
|
|
|
f.on_before_open_cols_manager : 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;
|
|
|
|
//calls function before cols manager is closed
|
|
|
|
this.onBeforeCloseColsManager =
|
|
|
|
Types.isFn(f.on_before_close_cols_manager) ?
|
|
|
|
f.on_before_close_cols_manager : 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;
|
|
|
|
|
|
|
|
//calls function before col is hidden
|
|
|
|
this.onBeforeColIsHidden = Types.isFn(f.on_before_col_is_hidden) ?
|
|
|
|
f.on_before_col_is_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;
|
|
|
|
//calls function before col is displayed
|
|
|
|
this.onBeforeColIsDisplayed = Types.isFn(f.on_before_col_is_displayed) ?
|
|
|
|
f.on_before_col_is_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;
|
|
|
|
|
|
|
|
//Grid layout compatibility
|
|
|
|
if(tf.gridLayout){
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisHeadersTbl = tf.headTbl; //headers table
|
|
|
|
this.colVisHeadersIndex = 0; //headers index
|
2015-04-15 09:09:20 +02:00
|
|
|
this.onAfterColIsDisplayed = function(){};
|
|
|
|
this.onAfterColIsHidden = 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',
|
2015-04-17 07:01:06 +02:00
|
|
|
this.colVisExtPath + this.colVisStylesheet,
|
2015-04-15 09:09:20 +02:00
|
|
|
null,
|
|
|
|
'link'
|
|
|
|
);
|
|
|
|
|
2015-04-17 07:01:06 +02:00
|
|
|
this.tf = tf;
|
|
|
|
|
2015-04-15 09:09:20 +02:00
|
|
|
//Sets button
|
2015-04-17 07:01:06 +02:00
|
|
|
// if(this.colVisManager) o.SetShowHideColsBtn();
|
2015-04-15 09:09:20 +02:00
|
|
|
this.init();
|
2015-04-19 13:05:33 +02:00
|
|
|
this.colVisInitialized = true;
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
toggle(evt){
|
2015-04-19 13:05:33 +02:00
|
|
|
var tf = this.tf;
|
|
|
|
var contDisplay = this.colVisContEl.style.display;
|
|
|
|
var onBeforeOpenColsManager = this.onBeforeOpenColsManager;
|
|
|
|
var onBeforeCloseColsManager = this.onBeforeCloseColsManager;
|
|
|
|
var onAfterOpenColsManager = this.onAfterOpenColsManager;
|
2015-04-20 09:20:28 +02:00
|
|
|
var onAfterCloseColsManager = this.onAfterCloseColsManager;
|
2015-04-19 13:05:33 +02:00
|
|
|
|
|
|
|
if(onBeforeOpenColsManager && contDisplay !== 'inline'){
|
|
|
|
onBeforeOpenColsManager.call(null, this);
|
|
|
|
}
|
|
|
|
if(onBeforeCloseColsManager && contDisplay === 'inline'){
|
|
|
|
onBeforeCloseColsManager.call(null, this);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.colVisContEl.style.display = contDisplay === 'inline' ?
|
|
|
|
'none' : 'inline';
|
2015-04-17 07:01:06 +02:00
|
|
|
|
2015-04-19 13:05:33 +02:00
|
|
|
if(onAfterOpenColsManager && contDisplay !== 'inline'){
|
|
|
|
onAfterOpenColsManager.call(null, this);
|
|
|
|
}
|
|
|
|
if(onAfterCloseColsManager && contDisplay === 'inline'){
|
|
|
|
onAfterCloseColsManager.call(null, this);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-20 09:20:28 +02:00
|
|
|
checkItem(lbl){
|
|
|
|
var li = lbl.parentNode;
|
|
|
|
if(!li || !lbl){
|
2015-04-19 13:05:33 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
var isChecked = lbl.firstChild.checked;
|
|
|
|
var colIndex = lbl.firstChild.getAttribute('id').split('_')[1];
|
|
|
|
if(isChecked){
|
2015-04-20 09:20:28 +02:00
|
|
|
Dom.addClass(li, this.colVisListSlcItemCssClass);
|
2015-04-19 13:05:33 +02:00
|
|
|
} else {
|
2015-04-20 09:20:28 +02:00
|
|
|
Dom.removeClass(li, this.colVisListSlcItemCssClass);
|
2015-04-19 13:05:33 +02:00
|
|
|
}
|
|
|
|
// var hide = (this.TickToHide && isChecked) || (!this.TickToHide && !isChecked) ? true : false;
|
|
|
|
var hide = false;
|
2015-04-20 09:20:28 +02:00
|
|
|
if((this.colVisTickToHide && isChecked) ||
|
2015-04-19 13:05:33 +02:00
|
|
|
(!this.colVisTickToHide && !isChecked)){
|
|
|
|
hide = true;
|
|
|
|
}
|
|
|
|
this.setHidden(colIndex, hide);
|
2015-04-15 09:09:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
init(){
|
2015-04-20 09:20:28 +02:00
|
|
|
if(!this.colVisManager){
|
|
|
|
return;
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
2015-04-20 09:20:28 +02:00
|
|
|
this.buildBtn();
|
|
|
|
this.buildManager();
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
buildBtn(){
|
|
|
|
var tf = this.tf;
|
|
|
|
// if(!tf.hasGrid && !tf.isFirstLoad){
|
|
|
|
// return;
|
|
|
|
// }
|
|
|
|
if(this.btnColVisEl){
|
|
|
|
return;
|
|
|
|
}
|
2015-04-19 13:05:33 +02:00
|
|
|
var colVisSpan = Dom.create('span',
|
2015-04-17 07:01:06 +02:00
|
|
|
['id', this.prfxColVisSpan+tf.id]);
|
|
|
|
colVisSpan.className = this.colVisSpanCss;
|
|
|
|
|
|
|
|
//Container element (rdiv or custom element)
|
|
|
|
if(!this.btnColVisTgtId){
|
2015-04-19 13:05:33 +02:00
|
|
|
tf.setToolbar();
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
|
|
|
var targetEl = !this.btnColVisTgtId ?
|
|
|
|
tf.rDiv : Dom.id(this.btnColVisTgtId);
|
2015-04-15 09:09:20 +02:00
|
|
|
|
2015-04-17 07:01:06 +02:00
|
|
|
if(this.btnColVisTgtId){
|
|
|
|
targetEl.firstChild.parentNode.insertBefore(
|
|
|
|
colVisSpan, targetEl.firstChild);
|
|
|
|
} else {
|
|
|
|
targetEl.appendChild(colVisSpan);
|
|
|
|
}
|
|
|
|
|
|
|
|
if(!this.btnColVisHtml){
|
2015-04-19 13:05:33 +02:00
|
|
|
var btn = Dom.create('a', ['href','javascript:;']);
|
2015-04-17 07:01:06 +02:00
|
|
|
btn.className = this.btnColVisCssClass;
|
|
|
|
btn.title = this.colVisExtDesc;
|
|
|
|
|
|
|
|
btn.innerHTML = this.btnColVisText;
|
|
|
|
colVisSpan.appendChild(btn);
|
|
|
|
if(!this.colVisEnableHover){
|
|
|
|
// btn.onclick = this.Evt._ShowColsVisibility;
|
|
|
|
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); });
|
|
|
|
} else {
|
|
|
|
// colVisEl.onmouseover = this.Evt._ShowColsVisibility;
|
|
|
|
Event.add(colVisEl,
|
|
|
|
'mouseover', (evt)=> { this.toggle(evt); });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.colVisSpanEl = colVisSpan;
|
|
|
|
this.btnColVisEl = this.colVisSpanEl.firstChild;
|
|
|
|
|
|
|
|
// this.SetColsVisibilityManager();
|
2015-04-20 09:20:28 +02:00
|
|
|
// this.buildManager();
|
2015-04-17 07:01:06 +02:00
|
|
|
|
|
|
|
if(this.onColsManagerLoaded){
|
|
|
|
this.onColsManagerLoaded.call(null, this);
|
|
|
|
}
|
2015-04-12 10:32:24 +02:00
|
|
|
}
|
2015-04-17 07:01:06 +02:00
|
|
|
|
2015-04-19 13:05:33 +02:00
|
|
|
buildManager(){
|
2015-04-17 07:01:06 +02:00
|
|
|
var tf = this.tf;
|
|
|
|
// if(!this.hasGrid && !this.isFirstLoad) return;
|
|
|
|
|
|
|
|
var container = !this.colVisContElTgtId ?
|
2015-04-19 13:05:33 +02:00
|
|
|
Dom.create('div', ['id', this.prfxColVisCont+tf.id]) :
|
2015-04-17 07:01:06 +02:00
|
|
|
Dom.id(this.colVisContElTgtId);
|
|
|
|
container.className = this.colVisContCss;
|
|
|
|
|
|
|
|
//Extension description
|
2015-04-19 13:05:33 +02:00
|
|
|
var extNameLabel = Dom.create('p');
|
2015-04-17 07:01:06 +02:00
|
|
|
extNameLabel.innerHTML = this.colVisText;
|
|
|
|
container.appendChild(extNameLabel);
|
|
|
|
|
|
|
|
//Headers list
|
2015-04-19 13:05:33 +02:00
|
|
|
var ul = Dom.create('ul' ,['id', 'ul'+this.colVisExtName+'_'+tf.id]);
|
2015-04-17 07:01:06 +02:00
|
|
|
ul.className = this.colVisListCss;
|
|
|
|
|
|
|
|
var tbl = this.colVisHeadersTbl ? this.colVisHeadersTbl : tf.tbl;
|
2015-04-17 08:32:42 +02:00
|
|
|
var headerIndex = this.colVisHeadersTbl ?
|
|
|
|
this.colVisHeadersIndex : tf.getHeadersRowIndex();
|
2015-04-17 07:01:06 +02:00
|
|
|
var headerRow = tbl.rows[headerIndex];
|
|
|
|
|
|
|
|
//Tick all option
|
2015-04-17 08:32:42 +02:00
|
|
|
if(this.colVisEnableTickAll){
|
2015-04-20 09:20:28 +02:00
|
|
|
var li = Dom.createCheckItem(
|
2015-04-17 08:32:42 +02:00
|
|
|
'col__'+tf.id, this.colVisTickAllText, this.colVisTickAllText);
|
|
|
|
Dom.addClass(li, this.colVisListItemCssClass);
|
2015-04-17 07:01:06 +02:00
|
|
|
ul.appendChild(li);
|
|
|
|
var isAllTicked = false;
|
2015-04-17 08:32:42 +02:00
|
|
|
// 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);
|
|
|
|
// };
|
|
|
|
|
|
|
|
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){
|
|
|
|
itm.click();
|
|
|
|
}
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
2015-04-17 08:32:42 +02:00
|
|
|
isAllTicked = !isAllTicked;
|
|
|
|
});
|
|
|
|
|
|
|
|
// if(tf_isIE)
|
|
|
|
// {//IE: label looses check capability
|
|
|
|
// li.label.onclick = function(){ this.firstChild.click(); };
|
|
|
|
// }
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
|
|
|
|
2015-04-17 08:32:42 +02:00
|
|
|
for(var i = 0; i < headerRow.cells.length; i++){
|
2015-04-17 07:01:06 +02:00
|
|
|
var cell = headerRow.cells[i];
|
2015-04-17 08:32:42 +02:00
|
|
|
var cellText = this.colVisHeadersText && this.colVisHeadersText[i] ?
|
|
|
|
this.colVisHeadersText[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);
|
|
|
|
}
|
|
|
|
ul.appendChild(liElm);
|
|
|
|
if(!this.colVisTickToHide){
|
|
|
|
liElm.check.checked = true;
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
2015-04-17 08:32:42 +02:00
|
|
|
// liElm.check.onclick = function(){ o.Evt._CheckItem(this.parentNode); };
|
|
|
|
Event.add(liElm.check, 'click', (evt)=> {
|
2015-04-20 09:20:28 +02:00
|
|
|
var elm = Event.target(evt);
|
|
|
|
var lbl = elm.parentNode;
|
|
|
|
this.checkItem(lbl);
|
2015-04-17 08:32:42 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
// if(tf_isIE)
|
|
|
|
// {//IE: label looses check capability
|
|
|
|
// li.label.onclick = function(){ this.firstChild.click(); };
|
|
|
|
// }
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
//separator
|
2015-04-19 13:05:33 +02:00
|
|
|
var p = Dom.create('p', ['align','center']);
|
2015-04-17 08:32:42 +02:00
|
|
|
var btn;
|
2015-04-17 07:01:06 +02:00
|
|
|
//Close link
|
2015-04-17 08:32:42 +02:00
|
|
|
if(!this.btnColVisCloseHtml){
|
2015-04-19 13:05:33 +02:00
|
|
|
btn = Dom.create('a', ['href','javascript:;']);
|
2015-04-17 07:01:06 +02:00
|
|
|
btn.className = this.btnColVisCloseCssClass;
|
|
|
|
btn.innerHTML = this.btnColVisCloseText;
|
2015-04-19 13:05:33 +02:00
|
|
|
// btn.onclick = this.Evt._ShowColsVisibility;
|
|
|
|
Event.add(btn, 'click', (evt)=> { this.toggle(evt); });
|
2015-04-17 07:01:06 +02:00
|
|
|
p.appendChild(btn);
|
|
|
|
} else {
|
|
|
|
p.innerHTML = this.btnColVisCloseHtml;
|
2015-04-17 08:32:42 +02:00
|
|
|
btn = p.firstChild;
|
2015-04-19 13:05:33 +02:00
|
|
|
// btn.onclick = this.Evt._ShowColsVisibility;
|
|
|
|
Event.add(btn, 'click', (evt)=> { this.toggle(evt); });
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
container.appendChild(ul);
|
|
|
|
container.appendChild(p);
|
|
|
|
|
|
|
|
this.btnColVisEl.parentNode.insertBefore(container, this.btnColVisEl);
|
|
|
|
this.colVisContEl = container;
|
|
|
|
|
|
|
|
//IE6 only: options are not checked if colVisTickToHide=false
|
2015-04-17 08:32:42 +02:00
|
|
|
// if(tf_isIE && !o.colVisTickToHide)
|
|
|
|
// for(var i=0; i<headerRow.cells.length; i++)
|
|
|
|
// tf_Id('col_'+i+'_'+o.id).checked = true;
|
2015-04-17 07:01:06 +02:00
|
|
|
|
2015-04-17 08:32:42 +02:00
|
|
|
if(this.colVisAtStart){
|
2015-04-17 07:01:06 +02:00
|
|
|
var a = this.colVisAtStart;
|
2015-04-17 08:32:42 +02:00
|
|
|
for(var k=0; k<a.length; k++){
|
|
|
|
var itm = Dom.id('col_'+a[k]+'_'+tf.id);
|
|
|
|
if(itm){
|
|
|
|
itm.click();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-19 13:05:33 +02:00
|
|
|
setHidden(colIndex, hide){
|
|
|
|
var tf = this.tf;
|
2015-04-20 09:20:28 +02:00
|
|
|
var tbl = tf.tbl;
|
|
|
|
var col = Dom.tag(tbl, 'col')[colIndex];
|
2015-04-19 13:05:33 +02:00
|
|
|
//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.onBeforeColIsDisplayed && !hide){
|
|
|
|
this.onBeforeColIsDisplayed.call(null, this, colIndex);
|
|
|
|
}
|
|
|
|
|
|
|
|
//cols can be hidden only under IE
|
|
|
|
if(this.tblHasColTag && Helpers.isIE()){
|
2015-04-20 09:20:28 +02:00
|
|
|
tbl = this.colVisHeadersTbl || tbl;
|
2015-04-19 13:05:33 +02:00
|
|
|
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 {
|
2015-04-20 09:20:28 +02:00
|
|
|
this._hideCells(tbl, colIndex, hide);
|
2015-04-19 13:05:33 +02:00
|
|
|
if(this.colVisHeadersTbl){
|
2015-04-20 09:20:28 +02:00
|
|
|
this._hideCells(this.colVisHeadersTbl, colIndex, hide);
|
2015-04-19 13:05:33 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var hiddenCols = this.colVisHiddenCols;
|
|
|
|
if(hide){
|
|
|
|
if(hiddenCols.indexOf(colIndex) === -1){
|
|
|
|
this.colVisHiddenCols.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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var gridLayout;
|
|
|
|
var headTbl;
|
|
|
|
var gridColElms;
|
|
|
|
if(this.onAfterColIsHidden && 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()){
|
2015-04-20 09:20:28 +02:00
|
|
|
tbl.style.width = headTbl.clientWidth + 'px';
|
2015-04-19 13:05:33 +02:00
|
|
|
} else {
|
|
|
|
var ths = headTbl.rows[this.colVisHeadersIndex].cells;
|
|
|
|
var hiddenWidth = 0;
|
|
|
|
for(var i=0; i<o.nbCells; i++){
|
|
|
|
if(ths[i].style.display === 'none'){
|
|
|
|
var w = parseInt(ths[i].style.width, 10);
|
|
|
|
ths[i].style.width = 0;
|
|
|
|
hiddenWidth += w;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var headTblW = parseInt(headTbl.style.width, 10);
|
|
|
|
|
|
|
|
headTbl.style.width = headTblW - hiddenWidth + 'px';
|
2015-04-20 09:20:28 +02:00
|
|
|
tbl.style.width = headTbl.style.width;
|
2015-04-19 13:05:33 +02:00
|
|
|
gridColElms[colIndex].style.display = 'none';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.onAfterColIsHidden.call(null, this, colIndex);
|
|
|
|
}
|
|
|
|
|
|
|
|
if(this.onAfterColIsDisplayed && !hide){
|
|
|
|
//This event is fired just after a column is displayed for
|
|
|
|
//grid_layout compatibility
|
|
|
|
if(tf.gridLayout /*&& (!tf_isIE && !tf_isIE7)*/){
|
|
|
|
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';
|
|
|
|
headTbl.style.width =
|
|
|
|
(parseInt(headTbl.style.width, 10) + width) + 'px';
|
|
|
|
tf.tbl.style.width = headTbl.style.width;
|
|
|
|
}
|
|
|
|
this.onAfterColIsDisplayed.call(null, this, colIndex);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
showCol(colIndex){
|
|
|
|
if(colIndex === undefined || !this.IsColHidden(colIndex)){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if(this.colVisManager && this.colVisContEl){
|
|
|
|
var itm = Dom.id('col_'+colIndex+'_'+this.tf.id);
|
|
|
|
if(itm){ itm.click(); }
|
|
|
|
} else {
|
|
|
|
this.setHidden(colIndex, false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
hideCol(colIndex){
|
|
|
|
if(colIndex === undefined || this.IsColHidden(colIndex)){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if(this.colVisManager && this.colVisContEl){
|
|
|
|
var itm = Dom.id('col_'+colIndex+'_'+this.tf.id);
|
|
|
|
if(itm){ itm.click(); }
|
|
|
|
} else {
|
|
|
|
this.setHidden(colIndex, true);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
isColHidden(colIndex){
|
|
|
|
if(this.colVisHiddenCols.indexOf(colIndex) !== -1){
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleCol(colIndex){
|
|
|
|
if(colIndex === undefined || this.IsColHidden(colIndex)){
|
|
|
|
this.ShowCol(colIndex);
|
|
|
|
} else {
|
|
|
|
this.HideCol(colIndex);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
getHiddenCols(){
|
|
|
|
return this.colVisHiddenCols;
|
|
|
|
}
|
|
|
|
|
|
|
|
destroy(){
|
|
|
|
if(!this.btnColVisEl || !this.colVisContEl){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if(Dom.id(this.colVisContElTgtId)){
|
|
|
|
Dom.id(this.colVisContElTgtId).innerHTML = '';
|
|
|
|
} else {
|
|
|
|
this.colVisContEl.innerHTML = '';
|
|
|
|
this.colVisContEl.parentNode.removeChild(this.colVisContEl);
|
|
|
|
this.colVisContEl = null;
|
|
|
|
}
|
|
|
|
this.btnColVisEl.innerHTML = '';
|
|
|
|
this.btnColVisEl.parentNode.removeChild(this.btnColVisEl);
|
|
|
|
this.btnColVisEl = null;
|
|
|
|
this.colVisInitialized = false;
|
|
|
|
}
|
2015-04-17 08:32:42 +02:00
|
|
|
|
|
|
|
_getHeaderText(cell){
|
|
|
|
if(!cell.hasChildNodes){
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
|
|
|
|
for(var i=0; i<cell.childNodes.length; i++){
|
|
|
|
var n = cell.childNodes[i];
|
|
|
|
if(n.nodeType === 3){
|
|
|
|
return n.nodeValue;
|
|
|
|
} else if(n.nodeType === 1){
|
|
|
|
if(n['id'] && n.id.indexOf('popUp') !== -1){
|
|
|
|
continue;
|
|
|
|
} else {
|
|
|
|
return Dom.getText(n);
|
|
|
|
}
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
2015-04-17 08:32:42 +02:00
|
|
|
continue;
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
2015-04-17 08:32:42 +02:00
|
|
|
return '';
|
2015-04-17 07:01:06 +02:00
|
|
|
}
|
|
|
|
|
2015-04-19 13:05:33 +02:00
|
|
|
_hideCells(tbl, colIndex, hide){
|
|
|
|
for(var i=0; i<tbl.rows.length; i++){
|
|
|
|
var row = tbl.rows[i];
|
|
|
|
var cell = row.cells[colIndex];
|
|
|
|
if(cell){
|
|
|
|
cell.style.display = hide ? 'none' : '';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-12 10:32:24 +02:00
|
|
|
}
|