Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-20 04:11:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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.

Browse source 
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.
This commit is contained in:
scottjehl 2011-12-28 11:59:48 +07:00
parent 69983f7907
commit 821df23a7d
2 changed files with 91 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
js/jquery.mobile.navigation.js
View file

@ -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();

50
js/jquery.mobile.transition.js
View file

@ -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 );