From 821df23a7d9822af112229d3205e88a8782bad6c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 28 Dec 2011 11:59:48 +0700 Subject: [PATCH] Much of the scripting in nav.js's transitionPages function was tied to the animation sequence for our css3transitionhandler. For example, the order was, scroll to top, run transitions, then scroll to the remembered location of the new page (there's more involved, but that's the gist of it). If we want to expand beyond this sequence, much of that scripting needs to move to the css3transitionhandler itself, and also to our "none" transition handler, which comes with nav model. This commit moves all that logic into the transition handlers, and should provide a better starting point for adding different transition sequences, such as fade-out, scroll, fade-in. In the process of making this change, the reFocus function was made public as $.mobile.focusPage. --- js/jquery.mobile.navigation.js | 93 +++++++++++++++------------------- js/jquery.mobile.transition.js | 50 +++++++++++++++++- 2 files changed, 91 insertions(+), 52 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 24c34331..954a295a 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -376,7 +376,7 @@ define( [ //direct focus to the page title, or otherwise first focusable element - function reFocus( page ) { + $.mobile.focusPage = function ( page ) { var pageTitle = page.find( ".ui-title:eq(0)" ); if( pageTitle.length ) { @@ -494,44 +494,13 @@ define( [ //function for transitioning between two existing pages function transitionPages( toPage, fromPage, transition, reverse ) { - //get current scroll distance - var active = $.mobile.urlHistory.getActive(), - touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, - toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - screenHeight = getScreenHeight(); - - // Scroll to top, hide addr bar - window.scrollTo( 0, $.mobile.defaultHomeScroll ); - if( fromPage ) { //trigger before show/hide events fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } ); } - if( !touchOverflow){ - toPage.height( screenHeight + toScroll ); - } - toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } ); - //clear page loader - $.mobile.hidePageLoadingMsg(); - - if( touchOverflow && toScroll ){ - - toPage.addClass( "ui-mobile-pre-transition" ); - // Send focus to page as it is now display: block - reFocus( toPage ); - - //set page's scrollTop to remembered distance - if( toPage.is( ".ui-native-fixed" ) ){ - toPage.find( ".ui-content" ).scrollTop( toScroll ); - } - else{ - toPage.scrollTop( toScroll ); - } - } - //find the transition handler for the specified transition. If there //isn't one in our transitionHandlers dictionary, use the default one. //call the handler immediately to kick-off the transition. @@ -539,22 +508,9 @@ define( [ promise = th( transition, reverse, toPage, fromPage ); promise.done(function() { - //reset toPage height back - if( !touchOverflow ){ - toPage.height( "" ); - } - - // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - if( !touchOverflow ){ - $.mobile.silentScroll( toScroll ); - } //trigger show/hide events if( fromPage ) { - if( !touchOverflow ){ - fromPage.height( "" ); - } - fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } ); } @@ -626,13 +582,48 @@ define( [ $.mobile.dialogHashKey = dialogHashKey; //default non-animation transition handler - $.mobile.noneTransitionHandler = function( name, reverse, $toPage, $fromPage ) { - if ( $fromPage ) { - $fromPage.removeClass( $.mobile.activePageClass ); + $.mobile.noneTransitionHandler = function( name, reverse, $to, $from ) { + var active = $.mobile.urlHistory.getActive(), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, + toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, + screenHeight = $.mobile.getScreenHeight(); + + if( !touchOverflow){ + $to.height( screenHeight + toScroll ); } - $toPage.addClass( $.mobile.activePageClass ); - return $.Deferred().resolve( name, reverse, $toPage, $fromPage ).promise(); + if( touchOverflow && toScroll ){ + + $to.addClass( "ui-mobile-pre-transition" ); + + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + + //set page's scrollTop to remembered distance + if( $to.is( ".ui-native-fixed" ) ){ + $to.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + $to.scrollTop( toScroll ); + } + } + + //clear page loader + $.mobile.hidePageLoadingMsg(); + + if ( $from ) { + $from.removeClass( $.mobile.activePageClass ); + } + + $to.addClass( $.mobile.activePageClass ); + + // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. + if( !touchOverflow ){ + $.mobile.silentScroll( toScroll ); + } + + return $.Deferred().resolve( name, reverse, $to, $from ).promise(); }; //default handler for unknown transitions @@ -1174,7 +1165,7 @@ define( [ // itself to avoid ie bug that reports offsetWidth as > 0 (core check for visibility) // despite visibility: hidden addresses issue #2965 // https://github.com/jquery/jquery-mobile/issues/2965 - reFocus( toPage ); + $.mobile.focusPage( toPage ); releasePageTransitionLock(); diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 906a0dbb..b5e91577 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -17,7 +17,11 @@ function css3TransitionHandler( name, reverse, $to, $from ) { var deferred = new $.Deferred(), reverseClass = reverse ? " reverse" : "", + active = $.mobile.urlHistory.getActive(), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, + toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, + screenHeight = $.mobile.getScreenHeight(), doneFunc = function() { $to.add( $from ).removeClass( "out in reverse " + name ); @@ -27,6 +31,23 @@ function css3TransitionHandler( name, reverse, $to, $from ) { } $to.parent().removeClass( viewportClass ); + + //reset $to height back + if( !touchOverflow ){ + $to.height( "" ); + } + + // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. + if( !touchOverflow ){ + $.mobile.silentScroll( toScroll ); + } + + //trigger show/hide events + if( $from ) { + if( !touchOverflow ){ + $from.height( "" ); + } + } deferred.resolve( name, reverse, $to, $from ); }; @@ -34,10 +55,37 @@ function css3TransitionHandler( name, reverse, $to, $from ) { $to.animationComplete( doneFunc ); $to.parent().addClass( viewportClass ); + + // Scroll to top, hide addr bar + window.scrollTo( 0, $.mobile.defaultHomeScroll ); + + if( !touchOverflow){ + $to.height( screenHeight + toScroll ); + } + if( touchOverflow && toScroll ){ + + $to.addClass( "ui-mobile-pre-transition" ); + + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + + //set page's scrollTop to remembered distance + if( $to.is( ".ui-native-fixed" ) ){ + $to.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + $to.scrollTop( toScroll ); + } + } + + //clear page loader + $.mobile.hidePageLoadingMsg(); + if ( $from ) { $from.addClass( name + " out" + reverseClass ); } + $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); return deferred.promise(); @@ -48,7 +96,7 @@ $.mobile.css3TransitionHandler = css3TransitionHandler; // If the default transition handler is the 'none' handler, replace it with our handler. if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - $.mobile.defaultTransitionHandler = css3TransitionHandler; + //$.mobile.defaultTransitionHandler = css3TransitionHandler; } })( jQuery, this );