Permalink
Browse files

[controlgroup] Convert to widget

  • Loading branch information...
1 parent 710dbae commit 6fa0c367cb989a381b28131db6f46186a47f2681 @gabrielschulhof gabrielschulhof committed Oct 30, 2012
Showing with 107 additions and 82 deletions.
  1. +1 −1 js/index.php
  2. +0 −70 js/jquery.mobile.controlGroup.js
  3. +0 −11 js/jquery.mobile.init.js
  4. +106 −0 js/widgets/controlgroup.js
View
@@ -50,7 +50,7 @@
'widgets/forms/select.custom.js',
'widgets/forms/select.js',
'jquery.mobile.buttonMarkup.js',
- 'jquery.mobile.controlGroup.js',
+ 'widgets/controlgroup.js',
'jquery.mobile.links.js',
'widgets/fixedToolbar.js',
'widgets/popup.js',
@@ -1,70 +0,0 @@
-//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
-//>>description: Visually groups sets of buttons, checks, radios, etc.
-//>>label: Controlgroups
-//>>group: Forms
-//>>css.structure: ../css/structure/jquery.mobile.controlgroup.css
-//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
-
-define( [ "jquery", "./jquery.mobile.buttonMarkup" ], function( $ ) {
-//>>excludeEnd("jqmBuildExclude");
-(function( $, undefined ) {
-
-$.fn.controlgroup = function( options ) {
- function flipClasses( els, flCorners ) {
- els.removeClass( "ui-controlgroup-last" )
- .buttonMarkup( { corners: false, shadow: false } )
- .eq( 0 ).buttonMarkup( { corners: flCorners[ 0 ] } )
- .end()
- .last().buttonMarkup( { corners: flCorners[ 1 ] } ).addClass( "ui-controlgroup-last" );
- }
-
- return this.each(function() {
- var $el = $( this ),
- o = $.extend({
- direction: $el.jqmData( "type" ) || "vertical",
- shadow: false,
- excludeInvisible: true,
- mini: $el.jqmData( "mini" )
- }, options ),
- grouplegend = $el.children( "legend" ),
- groupheading = $el.children( ".ui-controlgroup-label" ),
- groupcontrols = $el.children( ".ui-controlgroup-controls" ),
- flCorners = o.direction === "horizontal" ? [ "left", "right" ] : [ "top", "bottom" ],
- type = $el.find( "input" ).first().attr( "type" );
-
- // First unwrap the controls if the controlgroup was already enhanced
- if ( groupcontrols.length ) {
- groupcontrols.contents().unwrap();
- }
- $el.wrapInner( "<div class='ui-controlgroup-controls'></div>" );
-
- if ( grouplegend.length ) {
- // Replace legend with more stylable replacement div
- $( "<div role='heading' class='ui-controlgroup-label'>" + grouplegend.html() + "</div>" ).insertBefore( $el.children( 0 ) );
- grouplegend.remove();
- } else if ( groupheading.length ) {
- // Just move the heading if the controlgroup was already enhanced
- $el.prepend( groupheading );
- }
-
- $el.addClass( "ui-corner-all ui-controlgroup ui-controlgroup-" + o.direction );
-
- flipClasses( $el.find( ".ui-btn" + ( o.excludeInvisible ? ":visible" : "" ) ).not( '.ui-slider-handle' ), flCorners );
-
- if ( o.shadow ) {
- $el.addClass( "ui-shadow" );
- }
-
- if ( o.mini ) {
- $el.addClass( "ui-mini" );
- }
-
- });
-};
-
-// The pagecreate handler for controlgroup is in jquery.mobile.init because of the soft-dependency on the wrapped widgets
-
-})(jQuery);
-//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
-});
-//>>excludeEnd("jqmBuildExclude");
@@ -122,17 +122,6 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
// so if it's 1, use 0 from now on
$.mobile.defaultHomeScroll = ( !$.support.scrollTop || $( window ).scrollTop() === 1 ) ? 0 : 1;
-
- // TODO: Implement a proper registration mechanism with dependency handling in order to not have exceptions like the one below
- //auto self-init widgets for those widgets that have a soft dependency on others
- if ( $.fn.controlgroup ) {
- $( document ).bind( "pagecreate create", function( e ) {
- $( ":jqmData(role='controlgroup')", e.target )
- .jqmEnhanceable()
- .controlgroup({ excludeInvisible: false });
- });
- }
-
//dom-ready inits
if ( $.mobile.autoInitializePage ) {
$.mobile.initializePage();
@@ -0,0 +1,106 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Visually groups sets of buttons, checks, radios, etc.
+//>>label: Controlgroups
+//>>group: Forms
+//>>css.structure: ../../css/structure/jquery.mobile.controlgroup.css
+//>>css.theme: ../../css/themes/default/jquery.mobile.theme.css
+
+define( [ "jquery",
+ "../jquery.mobile.buttonMarkup",
+ "forms/button",
+ "../jquery.mobile.widget" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+ function flipClasses( els, flCorners ) {
+ els.removeClass( "ui-controlgroup-last" )
+ .buttonMarkup( { corners: false, shadow: false } )
+ .eq( 0 ).buttonMarkup( { corners: flCorners[ 0 ] } )
+ .end()
+ .last().buttonMarkup( { corners: flCorners[ 1 ] } ).addClass( "ui-controlgroup-last" );
+ }
+
+ $.widget( "mobile.controlgroup", $.mobile.widget, {
+ options: {
+ shadow: false,
+ excludeInvisible: false,
+ type: "vertical",
+ mini: false,
+ initSelector: ":jqmData(role='controlgroup')"
+ },
+
+ _create: function() {
+ var $el = this.element,
+ ui = {
+ inner: $( "<div class='ui-controlgroup-controls'></div>" ),
+ legend: $( "<div role='heading' class='ui-controlgroup-label'></div>" )
+ },
+ grouplegend = $el.children( "legend" ),
+ groupcontrols = $el.children( ".ui-controlgroup-controls" ),
+ self = this;
+
+ // Apply the proto
+ $el.wrapInner( ui.inner );
+ if ( grouplegend.length ) {
+ ui.legend.append( grouplegend ).insertBefore( $el.children( 0 ) );
+ }
+ $el.addClass( "ui-btn-corner-all ui-controlgroup" );
+
+ $.each( this.options, function( key, value ) {
+ // Cause initial options to be applied by their handler by temporarily setting the option to undefined
+ // - the handler then sets it to the initial value
+ self.options[ key ] = undefined;
+ self._setOption( key, value, true );
+ });
+
+ this.refresh();
+ },
+
+ _setOption: function( key, value ) {
+ var setter = "_set" + key.charAt( 0 ).toUpperCase() + key.slice( 1 );
+
+ if ( this[ setter ] !== undefined ) {
+ this[ setter ]( value );
+ }
+
+ this._super( "_setOption", key, value );
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + ( key.replace( /([A-Z])/, "-$1" ).toLowerCase() ), value );
+ },
+
+ _setType: function( value ) {
+ this.element
+ .removeClass( "ui-controlgroup-horizontal ui-controlgroup-vertical" )
+ .addClass( "ui-controlgroup-" + value );
+ this.options.type = value;
+ this.refresh();
+ },
+
+ _setShadow: function( value ) {
+ this.element.toggleClass( "ui-shadow", value );
+ },
+
+ _setMini: function( value ) {
+ this.element.toggleClass( "ui-mini", value );
+ },
+
+ refresh: function() {
+ var els = this.element
+ .find( ".ui-btn" + ( this.options.excludeInvisible ? ":visible" : "" ) )
+ .not( '.ui-slider-handle' ),
+ corners = [ true, true ];
+
+ if ( els.length > 1 ) {
+ corners = ( this.options.type === "horizontal" ? [ "left", "right" ] : [ "top", "bottom" ] );
+ }
+
+ flipClasses( els, corners );
+ }
+ });
+
+ $( document ).bind( "pagecreate create", function( e ) {
+ $.mobile.controlgroup.prototype.enhanceWithin( e.target, true );
+ });
+})(jQuery);
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");

0 comments on commit 6fa0c36

Please sign in to comment.