Permalink
Browse files

Dialog: Do not re-create the close button if its location or text cha…

…nges.
  • Loading branch information...
gabrielschulhof committed Jul 18, 2013
1 parent c293304 commit 7becf2db3108e2c900a3fb4173295b4690f9aed5
Showing with 59 additions and 51 deletions.
  1. +59 −51 js/widgets/dialog.js
View
@@ -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

0 comments on commit 7becf2d

Please sign in to comment.