/*
|
* tablesaw: A set of plugins for responsive tables
|
* Column Toggle: allows the user to toggle which columns are visible.
|
* Copyright (c) 2013 Filament Group, Inc.
|
* MIT License
|
*/
|
|
;(function( win, $, undefined ){
|
|
var ColumnToggle = function( element ) {
|
|
this.$table = $( element );
|
|
this.classes = {
|
columnToggleTable: 'tablesaw-columntoggle',
|
columnBtnContain: 'tablesaw-columntoggle-btnwrap tablesaw-advance',
|
columnBtn: 'tablesaw-columntoggle-btn tablesaw-nav-btn down',
|
popup: 'tablesaw-columntoggle-popup',
|
priorityPrefix: 'tablesaw-priority-',
|
// TODO duplicate class, also in tables.js
|
toolbar: 'tablesaw-bar'
|
};
|
|
// Expose headers and allHeaders properties on the widget
|
// headers references the THs within the first TR in the table
|
this.headers = this.$table.find( 'tr:first > th' );
|
|
this.$table.data( 'tablesaw-coltoggle', this );
|
};
|
|
ColumnToggle.prototype.init = function() {
|
|
var tableId,
|
id,
|
$menuButton,
|
$popup,
|
$menu,
|
$btnContain,
|
self = this;
|
|
this.$table.addClass( this.classes.columnToggleTable );
|
|
tableId = this.$table.attr( "id" );
|
id = tableId + "-popup";
|
$btnContain = $( "<div class='" + this.classes.columnBtnContain + "'></div>" );
|
$menuButton = $( "<a href='#" + id + "' class='btn btn-micro " + this.classes.columnBtn +"' data-popup-link>" +
|
"<span>" + Tablesaw.i18n.columnBtnText + "</span></a>" );
|
$popup = $( "<div class='dialog-table-coltoggle " + this.classes.popup + "' id='" + id + "'></div>" );
|
$menu = $( "<div class='btn-group'></div>" );
|
|
var hasNonPersistentHeaders = false;
|
$( this.headers ).not( "td" ).each( function() {
|
var $this = $( this ),
|
priority = $this.attr("data-tablesaw-priority"),
|
$cells = self.$getCells( this );
|
|
if( priority && priority !== "persist" ) {
|
$cells.addClass( self.classes.priorityPrefix + priority );
|
|
$("<label><input type='checkbox' checked>" + $this.text() + "</label>" )
|
.appendTo( $menu )
|
.children( 0 )
|
.data( "tablesaw-header", this );
|
|
hasNonPersistentHeaders = true;
|
}
|
});
|
|
if( !hasNonPersistentHeaders ) {
|
$menu.append( '<label>' + Tablesaw.i18n.columnsDialogError + '</label>' );
|
}
|
|
$menu.appendTo( $popup );
|
|
// bind change event listeners to inputs - TODO: move to a private method?
|
$menu.find( 'input[type="checkbox"]' ).on( "change", function(e) {
|
var checked = e.target.checked;
|
|
self.$getCellsFromCheckbox( e.target )
|
.toggleClass( "tablesaw-cell-hidden", !checked )
|
.toggleClass( "tablesaw-cell-visible", checked );
|
|
self.$table.trigger( 'tablesawcolumns' );
|
});
|
|
$menuButton.appendTo( $btnContain );
|
$btnContain.appendTo( this.$table.prev().filter( '.' + this.classes.toolbar ) );
|
|
var closeTimeout;
|
function openPopup() {
|
$btnContain.addClass( 'visible' );
|
$menuButton.removeClass( 'down' ).addClass( 'up' );
|
|
$( document ).unbind( 'click.' + tableId, closePopup );
|
|
window.clearTimeout( closeTimeout );
|
closeTimeout = window.setTimeout(function() {
|
$( document ).one( 'click.' + tableId, closePopup );
|
}, 15 );
|
}
|
|
function closePopup( event ) {
|
// Click came from inside the popup, ignore.
|
if( event && $( event.target ).closest( "." + self.classes.popup ).length ) {
|
return;
|
}
|
|
$( document ).unbind( 'click.' + tableId );
|
$menuButton.removeClass( 'up' ).addClass( 'down' );
|
$btnContain.removeClass( 'visible' );
|
}
|
|
$menuButton.on( "click.tablesaw", function( event ) {
|
event.preventDefault();
|
|
if( !$btnContain.is( ".visible" ) ) {
|
openPopup();
|
} else {
|
closePopup();
|
}
|
});
|
|
$popup.appendTo( $btnContain );
|
|
this.$menu = $menu;
|
|
$(window).on( "resize." + tableId, function(){
|
self.refreshToggle();
|
});
|
|
this.refreshToggle();
|
};
|
|
ColumnToggle.prototype.$getCells = function( th ) {
|
return $( th ).add( th.cells );
|
};
|
|
ColumnToggle.prototype.$getCellsFromCheckbox = function( checkbox ) {
|
var th = $( checkbox ).data( "tablesaw-header" );
|
return this.$getCells( th );
|
};
|
|
ColumnToggle.prototype.refreshToggle = function() {
|
var self = this;
|
this.$menu.find( "input" ).each( function() {
|
this.checked = self.$getCellsFromCheckbox( this ).eq( 0 ).css( "display" ) === "table-cell";
|
});
|
};
|
|
ColumnToggle.prototype.refreshPriority = function(){
|
var self = this;
|
$(this.headers).not( "td" ).each( function() {
|
var $this = $( this ),
|
priority = $this.attr("data-tablesaw-priority"),
|
$cells = $this.add( this.cells );
|
|
if( priority && priority !== "persist" ) {
|
$cells.addClass( self.classes.priorityPrefix + priority );
|
}
|
});
|
};
|
|
ColumnToggle.prototype.destroy = function() {
|
// table toolbars, document and window .tableId events
|
// removed in parent tables.js destroy method
|
|
this.$table.removeClass( this.classes.columnToggleTable );
|
this.$table.find( 'th, td' ).each(function() {
|
var $cell = $( this );
|
$cell.removeClass( 'tablesaw-cell-hidden' )
|
.removeClass( 'tablesaw-cell-visible' );
|
|
this.className = this.className.replace( /\bui\-table\-priority\-\d\b/g, '' );
|
});
|
};
|
|
// on tablecreate, init
|
$( document ).on( "tablesawcreate", function( e, Tablesaw ){
|
|
if( Tablesaw.mode === 'columntoggle' ){
|
var table = new ColumnToggle( Tablesaw.table );
|
table.init();
|
}
|
|
} );
|
|
$( document ).on( "tablesawdestroy", function( e, Tablesaw ){
|
if( Tablesaw.mode === 'columntoggle' ){
|
$( Tablesaw.table ).data( 'tablesaw-coltoggle' ).destroy();
|
}
|
} );
|
|
}( this, jQuery ));
|
