From a45edfa7b172dae1d7212b46471e6c4aa8128fa6 Mon Sep 17 00:00:00 2001 From: Gabriel Schulhof Date: Tue, 26 Mar 2013 21:42:54 +0200 Subject: [PATCH] Table: Columntoggle: Convert to proper extension. --- js/widgets/table.columntoggle.js | 171 +++++++++++++++++-------------- 1 file changed, 93 insertions(+), 78 deletions(-) diff --git a/js/widgets/table.columntoggle.js b/js/widgets/table.columntoggle.js index 420cdc2ede2..f986ddb413f 100644 --- a/js/widgets/table.columntoggle.js +++ b/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 = $( "" + o.columnBtnText + "" ), - $popup = $( "
"), - $menu = $("
"); +$.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 = $( "" + o.columnBtnText + "" ); + $popup = $( "
" ); + $menu = $( "
" ); + + // 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 ); + + $("" ) + .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(); - $("" ) - .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 );