mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-27 03:00:35 +00:00
renamed the new transition handler transition.js
This commit is contained in:
scottjehl
parent
edfafbf5d7
commit
bc2b4faf0b
2 changed files with 58 additions and 158 deletions
|
|
@ -2,99 +2,92 @@
|
|||
* "transitions" plugin - Page change tranistions
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
//>>description: Page change tranistions.
|
||||
//>>label: Page Transitions
|
||||
|
||||
// TODO the dependency defined here for transitions is to make sure
|
||||
// that the defaultTransitionHandler is defined _after_ navigation has been defined
|
||||
// This requires a rework/rethinking
|
||||
define( [ "jquery.mobile.core", "order!jquery.mobile.navigation" ], function() {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
function css3TransitionHandler( name, reverse, $to, $from ) {
|
||||
|
||||
function outInTransitionHandler( 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() {
|
||||
viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
|
||||
doneOut = function() {
|
||||
|
||||
$to.add( $from ).removeClass( "out in reverse " + name );
|
||||
|
||||
if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
|
||||
$from.removeClass( $.mobile.activePageClass );
|
||||
if ( $from ) {
|
||||
$from
|
||||
.removeClass( $.mobile.activePageClass + " out in reverse " + name )
|
||||
.height( "" );
|
||||
}
|
||||
|
||||
$to.parent().removeClass( viewportClass );
|
||||
|
||||
//reset $to height back
|
||||
if( !touchOverflow ){
|
||||
$to.height( "" );
|
||||
}
|
||||
$to
|
||||
.animationComplete( doneIn )
|
||||
.addClass( $.mobile.activePageClass );
|
||||
|
||||
// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
|
||||
if( !touchOverflow ){
|
||||
$.mobile.silentScroll( toScroll );
|
||||
}
|
||||
// Send focus to page as it is now display: block
|
||||
$.mobile.focusPage( $to );
|
||||
|
||||
if( touchOverflow && toScroll ){
|
||||
|
||||
//trigger show/hide events
|
||||
if( $from ) {
|
||||
if( !touchOverflow ){
|
||||
$from.height( "" );
|
||||
//set page's scrollTop to remembered distance
|
||||
if( $to.is( ".ui-native-fixed" ) ){
|
||||
$to.find( ".ui-content" ).scrollTop( toScroll );
|
||||
}
|
||||
else{
|
||||
$to.scrollTop( toScroll );
|
||||
}
|
||||
}
|
||||
|
||||
// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
|
||||
if( !touchOverflow ){
|
||||
$to.height( screenHeight + toScroll );
|
||||
|
||||
$.mobile.silentScroll( toScroll );
|
||||
}
|
||||
|
||||
$to.addClass( name + " in" + reverseClass );
|
||||
|
||||
},
|
||||
|
||||
doneIn = function() {
|
||||
|
||||
deferred.resolve( name, reverse, $to, $from );
|
||||
$to
|
||||
.removeClass( "out in reverse " + name )
|
||||
.parent().removeClass( viewportClass )
|
||||
.height( "" );
|
||||
|
||||
deferred.resolve( name, reverse, $to, $from, true );
|
||||
};
|
||||
|
||||
$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 );
|
||||
}
|
||||
}
|
||||
$to
|
||||
.parent().addClass( viewportClass );
|
||||
|
||||
//clear page loader
|
||||
$.mobile.hidePageLoadingMsg();
|
||||
|
||||
if ( $from ) {
|
||||
$from.addClass( name + " out" + reverseClass );
|
||||
$from
|
||||
.height( screenHeight + $(window ).scrollTop() )
|
||||
.animationComplete( doneOut )
|
||||
.addClass( name + " out" + reverseClass );
|
||||
}
|
||||
else {
|
||||
doneOut();
|
||||
}
|
||||
|
||||
$to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
// Make our transition handler public.
|
||||
$.mobile.css3TransitionHandler = css3TransitionHandler;
|
||||
$.mobile.outInTransitionHandler = outInTransitionHandler;
|
||||
|
||||
// If the default transition handler is the 'none' handler, replace it with our handler.
|
||||
if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) {
|
||||
$.mobile.defaultTransitionHandler = outInTransitionHandler;
|
||||
}
|
||||
|
||||
// add class for where 3d transforms are supported, or not
|
||||
$( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-csstransform3d" : "ui-unsupported-csstransform3d" );
|
||||
|
||||
})( jQuery, this );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
|
|
|
|||
|
|
@ -1,93 +0,0 @@
|
|||
/*
|
||||
* "transitions" plugin - Page change tranistions
|
||||
*/
|
||||
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
function outInTransitionHandler( 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 ),
|
||||
screenHeight = $.mobile.getScreenHeight(),
|
||||
viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
|
||||
doneOut = function() {
|
||||
|
||||
if ( $from ) {
|
||||
$from
|
||||
.removeClass( $.mobile.activePageClass + " out in reverse " + name )
|
||||
.height( "" );
|
||||
}
|
||||
|
||||
$to
|
||||
.animationComplete( doneIn )
|
||||
.addClass( $.mobile.activePageClass );
|
||||
|
||||
// Send focus to page as it is now display: block
|
||||
$.mobile.focusPage( $to );
|
||||
|
||||
if( touchOverflow && toScroll ){
|
||||
|
||||
//set page's scrollTop to remembered distance
|
||||
if( $to.is( ".ui-native-fixed" ) ){
|
||||
$to.find( ".ui-content" ).scrollTop( toScroll );
|
||||
}
|
||||
else{
|
||||
$to.scrollTop( toScroll );
|
||||
}
|
||||
}
|
||||
|
||||
// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
|
||||
if( !touchOverflow ){
|
||||
$to.height( screenHeight + toScroll );
|
||||
|
||||
$.mobile.silentScroll( toScroll );
|
||||
}
|
||||
|
||||
$to.addClass( name + " in" + reverseClass );
|
||||
|
||||
},
|
||||
|
||||
doneIn = function() {
|
||||
|
||||
$to
|
||||
.removeClass( "out in reverse " + name )
|
||||
.parent().removeClass( viewportClass )
|
||||
.height( "" );
|
||||
|
||||
deferred.resolve( name, reverse, $to, $from, true );
|
||||
};
|
||||
|
||||
$to
|
||||
.parent().addClass( viewportClass );
|
||||
|
||||
//clear page loader
|
||||
$.mobile.hidePageLoadingMsg();
|
||||
|
||||
if ( $from ) {
|
||||
$from
|
||||
.height( screenHeight + $(window ).scrollTop() )
|
||||
.animationComplete( doneOut )
|
||||
.addClass( name + " out" + reverseClass );
|
||||
}
|
||||
else {
|
||||
doneOut();
|
||||
}
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
// Make our transition handler public.
|
||||
$.mobile.outInTransitionHandler = outInTransitionHandler;
|
||||
|
||||
// If the default transition handler is the 'none' handler, replace it with our handler.
|
||||
if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) {
|
||||
$.mobile.defaultTransitionHandler = outInTransitionHandler;
|
||||
}
|
||||
|
||||
// add class for where 3d transforms are supported, or not
|
||||
$( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-csstransform3d" : "ui-unsupported-csstransform3d" );
|
||||
|
||||
})( jQuery, this );
|
||||
Loading…
Reference in a new issue