Button: Implement widget(), _destroy(), and perform _setOptions() via buttonMarkup()

Author: Gabriel Schulhof

js/widgets/forms/button.js

@@ -9,6 +9,24 @@ define( [ "jquery", "../../jquery.mobile.widget", "../../jquery.mobile.buttonMar
 //>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
 
+function splitOptions( o ) {
+	var key, ret = { btn: {}, widget: {} };
+
+	for ( key in o ) {
+		if ( o[ key ] !== null ) {
+			if ( key === "disabled" ) {
+				ret.widget.disabled = o[ key ];
+				ret.haveWidget = true;
+			} else if ( key !== "initSelector" ) {
+				ret.btn[ key ] = o[ key ];
+				ret.haveBtn = true;
+			}
+		}
+	}
+
+	return ret;
+}
+
 $.widget( "mobile.button", $.mobile.widget, {
 	options: {
 		theme: null,
@@ -21,10 +39,11 @@ $.widget( "mobile.button", $.mobile.widget, {
 		mini: null,
 		initSelector: "button, [type='button'], [type='submit'], [type='reset']"
 	},
+
 	_create: function() {
-		var $el = this.element,
-			$button,
-			o,
+		var $button,
+			o = this.options,
+			$el = this.element,
 			classes = "";
 
 		// if this is a link, check if it's been enhanced and, if not, use the right function
@@ -34,53 +53,44 @@ $.widget( "mobile.button", $.mobile.widget, {
 			}
 			return;
 		}
-		// create a copy of this.options we can pass to buttonMarkup
-		o = ( function( tdo ) {
-			var key, ret = {};
-
-			for ( key in tdo ) {
-				if ( tdo[ key ] !== null && key !== "initSelector" ) {
-					ret[ key ] = tdo[ key ];
-				}
-			}
-
-			return ret;
-		} )( this.options );
 
 		// get the inherited theme
 		// TODO centralize for all widgets
-		if ( !this.options.theme ) {
-			this.options.theme = $.mobile.getInheritedTheme( this.element, "c" );
+		if ( !o.theme ) {
+			o.theme = $.mobile.getInheritedTheme( $el, "c" );
 		}
+		o.disabled = $el.prop( "disabled" );
+		o = splitOptions( o );
 
 		// TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
 		/* if ( $el[0].className.length ) {
 			classes = $el[0].className;
 		} */
-		if ( !!~$el[0].className.indexOf( "ui-btn-left" ) ) {
+		if ( !!~$el[ 0 ].className.indexOf( "ui-btn-left" ) ) {
 			classes = "ui-btn-left";
 		}
 
-		if (  !!~$el[0].className.indexOf( "ui-btn-right" ) ) {
+		if ( !!~$el[ 0 ].className.indexOf( "ui-btn-right" ) ) {
 			classes = "ui-btn-right";
 		}
 
-		if (  $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
-			classes ? classes += " ui-submit" :  classes = "ui-submit";
+		if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
+			classes ? classes += " ui-submit" : classes = "ui-submit";
 		}
 		$( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
 
 		// Add ARIA role
 		this.button = $( "<div></div>" )
 			[ $el.html() ? "html" : "text" ]( $el.html() || $el.val() )
 			.insertBefore( $el )
-			.buttonMarkup( o )
+			.buttonMarkup( o.btn )
 			.addClass( classes )
 			.append( $el.addClass( "ui-btn-hidden" ) );
+		this._setOption( "disabled", o.widget.disabled );
 
-        $button = this.button;
+		$button = this.button;
 
-		$el.bind({
+		this._on( $el, {
 			focus: function() {
 				$button.addClass( $.mobile.focusClass );
 			},
@@ -89,42 +99,53 @@ $.widget( "mobile.button", $.mobile.widget, {
 				$button.removeClass( $.mobile.focusClass );
 			}
 		});
+	},
+
+	widget: function() {
+		return this.button;
+	},
 
-		this.refresh();
+	_destroy: function() {
+		var b = this.button;
+		this.element.insertBefore( b );
+		b.remove();
+	},
+
+	_setOptions: function( o ) {
+		o = splitOptions( o );
+
+		// Resolve the buttonMarkup options
+		if ( o.haveBtn ) {
+			this.button.buttonMarkup( o.btn );
+		}
+
+		// ... and pass the rest up
+		if ( o.haveWidget ) {
+			this._super( o.widget );
+		}
 	},
 
 	_setOption: function( key, value ) {
 		var op = {};
 
 		op[ key ] = value;
-		if ( key !== "initSelector" ) {
+		if ( key === "disabled" ) {
+			value = !!value;
+			this.element.prop( "disabled", value );
+			// FIXME: We should be using ui-state-disabled, so we can get rid of this line
+			this.button.toggleClass( "ui-disabled", value );
+		} else if ( key !== "initSelector" ) {
 			this.button.buttonMarkup( op );
 			// Record the option change in the options and in the DOM data-* attributes
 			this.element.attr( "data-" + ( $.mobile.ns || "" ) + ( key.replace( /([A-Z])/, "-$1" ).toLowerCase() ), value );
 		}
-		this._super( "_setOption", key, value );
-	},
-
-	enable: function() {
-		this.element.attr( "disabled", false );
-		this.button.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
-		return this._setOption( "disabled", false );
-	},
-
-	disable: function() {
-		this.element.attr( "disabled", true );
-		this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true );
-		return this._setOption( "disabled", true );
+		this._super( key, value );
 	},
 
 	refresh: function() {
 		var $el = this.element;
 
-		if ( $el.prop("disabled") ) {
-			this.disable();
-		} else {
-			this.enable();
-		}
+		this._setOption( "disabled", $el.prop( "disabled" ) );
 
 		// Grab the button's text element from its implementation-independent data item
 		$( this.button.data( 'buttonElements' ).text )[ $el.html() ? "html" : "text" ]( $el.html() || $el.val() );