Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Table: Columntoggle: Convert to proper extension.
Browse files Browse the repository at this point in the history
  • Loading branch information
Gabriel Schulhof committed Mar 26, 2013
1 parent 6e11fc8 commit a45edfa
Showing 1 changed file with 93 additions and 78 deletions.
171 changes: 93 additions & 78 deletions js/widgets/table.columntoggle.js
View file
Expand Up @@ -5,99 +5,114 @@
//>>css.structure: ../css/structure/jquery.mobile.table.columntoggle.css


define( [ "jquery", "./table", "../jquery.mobile.buttonMarkup", "./popup", "../jquery.mobile.fieldContain", "widgets/controlgroup", "widgets/forms/checkboxradio" ], function( jQuery ) {
define( [
"jquery",
"./table",
"../jquery.mobile.buttonMarkup",
"./popup",
"../jquery.mobile.fieldContain",
"widgets/controlgroup",
"widgets/forms/checkboxradio" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {

$.mobile.table.prototype.options.mode = "columntoggle";

$.mobile.table.prototype.options.columnBtnTheme = null;

$.mobile.table.prototype.options.columnPopupTheme = null;

$.mobile.table.prototype.options.columnBtnText = "Columns...";

$.mobile.table.prototype.options.classes = $.extend(
$.mobile.table.prototype.options.classes,
{
popup: "ui-table-columntoggle-popup",
columnBtn: "ui-table-columntoggle-btn",
priorityPrefix: "ui-table-priority-",
columnToggleTable: "ui-table-columntoggle"
}
);

$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function() {

var $table = $( this ),
self = $table.data( "mobile-table" ),
o = self.options,
ns = $.mobile.ns;

if( o.mode !== "columntoggle" ){
return;
}

self.element.addClass( o.classes.columnToggleTable );

var id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup", //TODO BETTER FALLBACK ID HERE
$menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" ),
$popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>"),
$menu = $("<fieldset data-" + ns + "role='controlgroup'></fieldset>");
$.widget( "mobile.table", $.mobile.table, {
options: {
mode: "columntoggle",
columnBtnTheme: null,
columnPopupTheme: null,
columnBtnText: "Columns...",
classes: $.extend( $.mobile.table.prototype.options.classes, {
popup: "ui-table-columntoggle-popup",
columnBtn: "ui-table-columntoggle-btn",
priorityPrefix: "ui-table-priority-",
columnToggleTable: "ui-table-columntoggle"
})
},

_create: function() {
var id, $menuButton, $popup, $menu,
$table = this.element,
o = this.options,
ns = $.mobile.ns,
menuInputChange = function( e ) {
var checked = this.checked;
$( this ).jqmData( "cells" )
.toggleClass( "ui-table-cell-hidden", !checked )
.toggleClass( "ui-table-cell-visible", checked );
};

this._super();

if( o.mode !== "columntoggle" ) {
return;
}

// create the hide/show toggles
self.headers.not( "td" ).each(function(){
this.element.addClass( o.classes.columnToggleTable );

id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup"; //TODO BETTER FALLBACK ID HERE
$menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" );
$popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>" );
$menu = $( "<fieldset data-" + ns + "role='controlgroup'></fieldset>" );

// create the hide/show toggles
this.headers.not( "td" ).each( function() {
var $this = $( this ),
priority = $this.jqmData( "priority" ),
$cells = $this.add( $this.jqmData( "cells" ) );

if( priority ) {
$cells.addClass( o.classes.priorityPrefix + priority );

$("<label><input type='checkbox' checked />" + $this.text() + "</label>" )
.appendTo( $menu )
.children( 0 )
.jqmData( "cells", $cells )
.checkboxradio( {
theme: o.columnPopupTheme
});
}
});
$menu.appendTo( $popup );

var priority = $( this ).jqmData( "priority" ),
$cells = $( this ).add( $( this ).jqmData( "cells" ) );
// bind change event listeners to inputs - TODO: move to a private method?
$menu.on( "change", "input", menuInputChange );

if( priority ){
$menuButton
.insertBefore( $table )
.buttonMarkup( {
theme: o.columnBtnTheme
});

$cells.addClass( o.classes.priorityPrefix + priority );
$popup
.insertBefore( $table )
.popup();

$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
.appendTo( $menu )
.children( 0 )
.jqmData( "cells", $cells )
.checkboxradio({
theme: o.columnPopupTheme
});
}
});
$menu.appendTo( $popup );
// refresh method

// bind change event listeners to inputs - TODO: move to a private method?
$menu.on( "change", "input", function( e ){
if( this.checked ){
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
}
else {
$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
}
});
this._on( $.mobile.window, { "throttledresize": "refresh" } );

$menuButton
.insertBefore( $table )
.buttonMarkup({
theme: o.columnBtnTheme
$.extend( this, {
_menu: $menu,
_menuInputChange: menuInputChange
});

$popup
.insertBefore( $table )
.popup();

// refresh method
self.refresh = function(){
$menu.find( "input" ).each( function(){
this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
$( this ).checkboxradio( "refresh" );
});
};
this.refresh();
},

$.mobile.window.on( "throttledresize", self.refresh );
_destroy: function() {
this._menu.off( "change", "input", this._menuInputChange );
this._super();
},

self.refresh();
refresh: function() {
this._menu.find( "input" ).each( function() {
var $this = $( this );

this.checked = $this.jqmData( "cells" ).eq( 0 ).css( "display" ) === "table-cell";
$this.checkboxradio( "refresh" );
});
}
});

})( jQuery );
Expand Down

0 comments on commit a45edfa

Please sign in to comment.