Dialog: Do not re-create the close button if its location or text changes.

Author: Gabriel Schulhof

js/widgets/dialog.js

@@ -14,7 +14,9 @@ define( [ "jquery",
 
 $.widget( "mobile.dialog", {
 	options: {
-		closeBtn: "left", /* Accepts left, right and none */
+
+		// Accepts left, right and none
+		closeBtn: "left",
 		closeBtnText: "Close",
 		overlayTheme: "a",
 		corners: true
@@ -44,7 +46,7 @@ $.widget( "mobile.dialog", {
 			$target = $( event.target ).closest( event.type === "vclick" ? "a" : "form" );
 
 		if ( $target.length && !$target.jqmData( "transition" ) ) {
-
+			attrs = {};
 			attrs[ "data-" + $.mobile.ns + "transition" ] =
 				( $.mobile.urlHistory.getActive() || {} )[ "transition" ] ||
 				$.mobile.defaultDialogTransition;
@@ -54,90 +56,96 @@ $.widget( "mobile.dialog", {
 	},
 
 	_create: function() {
-		var $el = this.element,
-			cornerClass = !!this.options.corners ? " ui-corner-all" : "",
-			dialogWrap = $( "<div/>", {
-					"role" : "dialog",
-					"class" : "ui-dialog-contain ui-overlay-shadow" + cornerClass
-				});
-
-		$el.addClass( "ui-dialog" );
-
-		// Class the markup for dialog styling
-		// Set aria role
-		$el.wrapInner( dialogWrap );
+		var elem = this.element,
+			opts = this.options;
+
+		// Class the markup for dialog styling and wrap interior
+		elem.addClass( "ui-dialog" )
+			.wrapInner( $( "<div/>", {
+
+				// ARIA role
+				"role" : "dialog",
+				"class" : "ui-dialog-contain ui-overlay-shadow" +
+					( !!opts.corners ? " ui-corner-all" : "" )
+			}));
+
+		$.extend( this, {
+			_isCloseable: false,
+			_inner: elem.children(),
+			_headerCloseButton: null
+		});
 
-		this._on( $el, {
+		this._on( elem, {
 			vclick: "_handleVClickSubmit",
 			submit: "_handleVClickSubmit",
 			pagebeforeshow: "_handlePageBeforeShow",
 			pagebeforehide: "_handlePageBeforeHide"
 		});
 
-		this._setCloseBtn( this.options.closeBtn );
+		this._setCloseBtn( opts.closeBtn );
 	},
 
 	_setOptions: function( options ) {
-		var updateCloseButton;
+		var closeButtonLocation, closeButtonText,
+			currentOpts = this.options;
 
 		if ( options.corners !== undefined ) {
-			this.element.children().toggleClass( "ui-corner-all", !!options.corners );
+			this._inner.toggleClass( "ui-corner-all", !!options.corners );
 		}
 
 		if ( options.overlayTheme !== undefined ) {
 			if ( $.mobile.activePage[ 0 ] === this.element[ 0 ] ) {
-				this.options.overlayTheme = options.overlayTheme;
+				currentOpts.overlayTheme = options.overlayTheme;
 				this._handlePageBeforeShow();
 			}
 		}
 
 		if ( options.closeBtnText !== undefined ) {
-			this.options.closeBtnText = options.closeBtnText;
-			updateCloseButton = this.options.closeBtn;
+			closeButtonLocation = currentOpts.closeBtn;
+			closeButtonText = options.closeBtnText;
 		}
 
 		if ( options.closeBtn !== undefined ) {
-			updateCloseButton = options.closeBtn;
+			closeButtonLocation = options.closeBtn;
 		}
 
-		if ( updateCloseButton ) {
-			this._setCloseBtn( updateCloseButton );
+		if ( closeButtonLocation ) {
+			this._setCloseBtn( closeButtonLocation, closeButtonText );
 		}
 
 		this._super( options );
 	},
 
-	_setCloseBtn: function( value ) {
-		var self = this, btn, location, dst;
+	_setCloseBtn: function( location, text ) {
+		var dst,
+			btn = this._headerCloseButton;
 
-		if ( this._headerCloseButton ) {
-			this._headerCloseButton.remove();
-			this._headerCloseButton = null;
-		}
-		if ( value !== "none" ) {
-			// Sanitize value
-			location = ( value === "left" ? "left" : "right" );
-			dst = this.element.children().find( ":jqmData(role='header')" ).first();
+		// Sanitize value
+		location = "left" === location ? "left" : "right" === location ? "right" : "none";
+
+		if ( "none" === location ) {
+			if ( btn ) {
+				btn.remove();
+				btn = null;
+			}
+		} else if ( btn ) {
+			btn.removeClass( "ui-btn-left ui-btn-right" ).addClass( "ui-btn-" + location );
+			if ( text ) {
+				btn.text( text );
+			}
+		} else {
+			dst = this._inner.find( ":jqmData(role='header')" ).first();
 			btn = $( "<a></a>", {
-				"role": "button",
-				"href": "#",
-				"class": "ui-btn ui-btn-" + location +
-					" ui-corner-all ui-icon-delete ui-btn-icon-notext"
+					"role": "button",
+					"href": "#",
+					"class": "ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-" + location
 				})
-				.text( this.options.closeBtnText )
-				.prependTo( dst )
-				// this must be an anonymous function so that select menu dialogs can replace
-				// the close method. This is a change from previously just defining data-rel=back
-				// on the button and letting nav handle it
-				//
-				// Use click rather than vclick in order to prevent the possibility of unintentionally
-				// reopening the dialog if the dialog opening item was directly under the close button.
-				.bind( "click", function() {
-					self.close();
-				});
-
-			this._headerCloseButton = btn;
+				.text( text || this.options.closeBtnText || "" )
+				.prependTo( dst );
+			this._on( btn, { click: "close" } );
 		}
+
+		this._headerCloseButton = btn;
 	},
 
 	// Close method goes back in history