Permalink
Browse files

Table: Columntoggle: Convert to proper extension.

  • Loading branch information...
1 parent 6e11fc8 commit a45edfa7b172dae1d7212b46471e6c4aa8128fa6 @gabrielschulhof gabrielschulhof committed Mar 26, 2013
Showing with 93 additions and 78 deletions.
  1. +93 −78 js/widgets/table.columntoggle.js
@@ -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 );

0 comments on commit a45edfa

Please sign in to comment.