Permalink
Browse files

Table: Introduce columntoggle method setColumnVisibility()

  • Loading branch information...
gabrielschulhof authored and arschmitz committed May 28, 2014
1 parent 17f966c commit f21d08027c2249168cebfb74ffab5d070e989a63
Showing with 76 additions and 14 deletions.
  1. +55 −6 js/widgets/table.columntoggle.js
  2. +21 −8 js/widgets/table.columntoggle.popup.js
@@ -24,6 +24,8 @@ return $.widget( "mobile.table", $.mobile.table, {
options: {
mode: "columntoggle",
classes: $.extend( {}, $.mobile.table.prototype.options.classes, {
cellHidden: "ui-table-cell-hidden",
cellVisible: "ui-table-cell-visible",
priorityPrefix: "ui-table-priority-",
columnToggleTable: "ui-table-columntoggle"
} )
@@ -72,13 +74,60 @@ return $.widget( "mobile.table", $.mobile.table, {
}, this ) );
},
_unlock: function() {
_setColumnVisibility: function( header, visible ) {
var cells = header.jqmData( "cells" );
if ( cells ) {
cells = cells.add( header );
this._unlock( cells );
cells.addClass( this.options.classes[ visible ? "cellVisible" : "cellHidden" ] );
}
},
setColumnVisibility: function( cell, visible ) {
var header;
// If cell is a number, then simply index into the headers array
if ( $.type( cell ) === "number" ) {
header = this.headers.eq( cell );
// Otherwise it's assumed to be a jQuery collection object
} else if ( cell.length > 0 ) {
// If it's one of the headers, then we already have the header we wanted
if ( this.headers.index( cell[ 0 ] ) >= 0 ) {
header = cell.first();
// Otherwise we assume it's one of the cells, so look for it in the "cells" data for
// each header
} else {
this.headers.each( $.proxy( function( index, singleHeader ) {
var possibleHeader = $( singleHeader ),
cells = possibleHeader.jqmData( "cells" );
if ( ( cells ? cells.index( cell[ 0 ] ) : -1 ) >= 0 ) {
header = possibleHeader;
return false;
}
}, this ) );
}
}
if ( header ) {
this._setColumnVisibility( header, visible );
}
},
_unlock: function( cells ) {
var classes = this.options.classes;
// allow hide/show via CSS only = remove all toggle-locks
this.element
.children( "thead, tbody" )
.children( "tr" )
.children( ".ui-table-cel-hidden, .ui-table-cell-visible" )
.removeClass( "ui-table-cell-hidden ui-table-cell-visible" );
( cells ||
this.element
.children( "thead, tbody" )
.children( "tr" )
.children( "." + classes.cellHidden + ", ." + classes.cellVisible ) )
.removeClass( classes.cellHidden + " " + classes.cellVisible );
},
// Use the .jqmData() stored on the checkboxes to determine which columns have show/hide
@@ -152,6 +152,20 @@ $.widget( "mobile.table", $.mobile.table, {
return this._superApply( arguments );
},
_setColumnVisibility: function( header, visible, /* INTERNAL */ fromInput ) {
var input;
if ( !fromInput ) {
input = header.jqmData( "input" );
if ( input ) {
input.prop( "checked", visible ).checkboxradio( "refresh" );
}
}
return this._superApply( arguments );
},
_setupEvents: function() {
//NOTE: inputs are bound in bindToggles,
// so it can be called on refresh, too
@@ -165,13 +179,10 @@ $.widget( "mobile.table", $.mobile.table, {
});
},
_menuInputChange: function( evt ) {
var input = $( evt.target ),
checked = input[ 0 ].checked;
_menuInputChange: function( event ) {
var input = $( event.target );
input.jqmData( "cells" )
.toggleClass( "ui-table-cell-hidden", !checked )
.toggleClass( "ui-table-cell-visible", checked );
this._setColumnVisibility( input.jqmData( "header" ), input.prop( "checked" ), true );
},
_columnsButton: function() {
@@ -235,8 +246,10 @@ $.widget( "mobile.table", $.mobile.table, {
this._ui.menu.find( "input" ).each( function() {
var checkbox = $( this );
this.checked = checkbox.jqmData( "cells" ).eq( 0 ).css( "display" ) === "table-cell";
checkbox.checkboxradio( "refresh" );
checkbox
.prop( "checked",
( checkbox.jqmData( "cells" ).eq( 0 ).css( "display" ) === "table-cell" ) )
.checkboxradio( "refresh" );
});
},

0 comments on commit f21d080

Please sign in to comment.