Permalink
Browse files

Before a page is shown, add its theme to the page container. This ens…

…ures that a page will transition through the color of the page that is going to be shown. Before a page is hidden, remove its theme class from the container. Pagehide is triggered before pageshow, so the newly showing page will be set on the container before the transition, despite the removal from the outgoing page's pagehide event. Lastly, the dialog plugin overrides the page container theme when a dialog is about to be shown. Fixes #3735
  • Loading branch information...
1 parent f3b9b0e commit 10b905a9f28f3a78f1f1d2c2306c5e763fc0210a scottjehl committed Mar 5, 2012
Showing with 28 additions and 13 deletions.
  1. +4 −9 js/jquery.mobile.dialog.js
  2. +24 −4 js/jquery.mobile.page.js
View
@@ -66,18 +66,13 @@ $.widget( "mobile.dialog", $.mobile.widget, {
})
.bind( "pagehide", function( e, ui ) {
$( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass );
-
- // if there's an overlay theme, we're going to remove it from the page container.
- // First though, check that the incoming page isn't a dialog with the same theme. If so, don't remove.
- if( self.options.overlayTheme ){
- if( !ui.nextPage || !ui.nextPage.is( ".ui-dialog.ui-overlay-" + self.options.overlayTheme ) ){
- $.mobile.pageContainer.removeClass( "ui-overlay-" + self.options.overlayTheme );
- }
- }
})
+ // Override the theme set by the page plugin on pageshow
.bind( "pagebeforeshow", function(){
if( self.options.overlayTheme ){
- $.mobile.pageContainer.addClass( "ui-overlay-" + self.options.overlayTheme );
+ self.element
+ .page( "removeContainerBackground" )
+ .page( "setContainerBackground", self.options.overlayTheme );
}
});
},
View
@@ -14,15 +14,35 @@ $.widget( "mobile.page", $.mobile.widget, {
},
_create: function() {
-
+
+ var self = this;
+
// if false is returned by the callbacks do not create the page
- if( this._trigger( "beforecreate" ) === false ){
+ if( self._trigger( "beforecreate" ) === false ){
return false;
}
- this.element
+ self.element
.attr( "tabindex", "0" )
- .addClass( "ui-page ui-body-" + this.options.theme );
+ .addClass( "ui-page ui-body-" + self.options.theme )
+ .bind( "pagebeforehide", function(){
+ self.removeContainerBackground();
+ } )
+ .bind( "pagebeforeshow", function(){
+ self.setContainerBackground();
+ } );
+
+ },
+
+ removeContainerBackground: function(){
+ $.mobile.pageContainer.removeClass( "ui-overlay-" + $.mobile.getInheritedTheme( this.element ) );
+ },
+
+ // set the page container background to the page theme
+ setContainerBackground: function( theme ){
+ if( this.options.theme ){
+ $.mobile.pageContainer.addClass( "ui-overlay-" + ( theme || this.options.theme ) );
+ }
},
keepNativeSelector: function() {

0 comments on commit 10b905a

Please sign in to comment.