Table: Columntoggle: Convert to proper extension.

Author: Gabriel Schulhof

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 );