Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Dialog: Do not re-create the close button if its location or text cha…
Browse files Browse the repository at this point in the history
…nges.
  • Loading branch information
Gabriel Schulhof committed Jul 18, 2013
1 parent c293304 commit 7becf2d
Showing 1 changed file with 59 additions and 51 deletions.
110 changes: 59 additions & 51 deletions js/widgets/dialog.js
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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
Expand Down

0 comments on commit 7becf2d

Please sign in to comment.