Changes to allow 3rd party transitions. Developers can now register a custom transition by adding their transition handler to the $.mobile.transitionHandlers dictionary. The name of the custom transition is used as the key within the transtionsHandlers dictionary, and should be the same name used within the @data-transtion attribute.
The expected prototype for a transitionHandler is as follows:
function handler(name, reverse, $to, $from)
The name parameter is the name of the transition as specified by @data-transition attribute, reverse is a boolean that is false for a normal transition, and true for a reverse transition. The $to param is a jQuery collection containing the page that is being transitioned "to", and $from is an optional collection that tells us what page we are transitioning "from". Because $from is optional, handler developers should take care and check $from to make sure it is not undefined before attempting to dereference it.
In addition to registering custom transition by name, developers can specify a handler to use in the case where a transition name is specified and does not exist within the $.mobile.transitionHanlders dictionary. Within jQuery Mobile, the default handler for unknown transition types is the $.mobile.css3Transition() handler. This handler always assumes that the transition name is to be used as a CSS class to be placed on the $to and $from elements. To change the default handler, simply set $.mobile.defaultTransitionHandler to you function handler:
$.mobile.defaultTransitionHandler = myTransitionHandler;
The changes to make all this necessary are as follows:
- Created $.mobile.noneTransitionHandler which is the default transitionHandler for the framework that simply adds and removes the page active class on the $from and $to pages with no animations.
- Moved class based transition code into a new plugin jquery.mobile.transition.js file. This plugin, when present, overrides the noneTransitionHandler as the defaultTranstionHandler for the framework so that CSS3 animation transitions are available.
- Removed code related to the setting/removal of the ui-mobile-viewport-perspective class. The css3TransitionHandler plugin takes care of automatically placing a "viewport-<transition name>" class on the viewport (body) element. This allows any other transition to specify properties on the viewport that are necessary to accomplish the transition.
- changed the CSS class ui-mobile-viewport-perspective to viewport-flip to match code changes. This makes it more apparent that setting -webkit-perspective is only used with the flip transition.
- Updated js/index.php, Makefile and build.xml to include the new jquery.mobile.transition.js file.
2011-04-26 20:53:11 +00:00
|
|
|
|
2012-01-12 17:36:46 +00:00
|
|
|
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
2012-01-13 22:27:58 +00:00
|
|
|
//>>description: Page change transition core
|
|
|
|
|
//>>label: Transition Core
|
|
|
|
|
|
2012-01-13 05:22:00 +00:00
|
|
|
define( [ "jquery", "jquery.mobile.core" ], function( $ ) {
|
2012-01-12 17:36:46 +00:00
|
|
|
//>>excludeEnd("jqmBuildExclude");
|
2011-12-16 02:09:25 +00:00
|
|
|
(function( $, window, undefined ) {
|
2011-06-29 13:38:57 +00:00
|
|
|
|
2012-01-04 11:08:07 +00:00
|
|
|
function outInTransitionHandler( name, reverse, $to, $from ) {
|
|
|
|
|
|
2012-01-09 09:24:10 +00:00
|
|
|
// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
|
2012-01-09 15:48:06 +00:00
|
|
|
if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
|
|
|
|
|
name = $.mobile.transitionFallbacks[ name ];
|
2012-01-09 09:22:57 +00:00
|
|
|
}
|
|
|
|
|
|
Changes to allow 3rd party transitions. Developers can now register a custom transition by adding their transition handler to the $.mobile.transitionHandlers dictionary. The name of the custom transition is used as the key within the transtionsHandlers dictionary, and should be the same name used within the @data-transtion attribute.
The expected prototype for a transitionHandler is as follows:
function handler(name, reverse, $to, $from)
The name parameter is the name of the transition as specified by @data-transition attribute, reverse is a boolean that is false for a normal transition, and true for a reverse transition. The $to param is a jQuery collection containing the page that is being transitioned "to", and $from is an optional collection that tells us what page we are transitioning "from". Because $from is optional, handler developers should take care and check $from to make sure it is not undefined before attempting to dereference it.
In addition to registering custom transition by name, developers can specify a handler to use in the case where a transition name is specified and does not exist within the $.mobile.transitionHanlders dictionary. Within jQuery Mobile, the default handler for unknown transition types is the $.mobile.css3Transition() handler. This handler always assumes that the transition name is to be used as a CSS class to be placed on the $to and $from elements. To change the default handler, simply set $.mobile.defaultTransitionHandler to you function handler:
$.mobile.defaultTransitionHandler = myTransitionHandler;
The changes to make all this necessary are as follows:
- Created $.mobile.noneTransitionHandler which is the default transitionHandler for the framework that simply adds and removes the page active class on the $from and $to pages with no animations.
- Moved class based transition code into a new plugin jquery.mobile.transition.js file. This plugin, when present, overrides the noneTransitionHandler as the defaultTranstionHandler for the framework so that CSS3 animation transitions are available.
- Removed code related to the setting/removal of the ui-mobile-viewport-perspective class. The css3TransitionHandler plugin takes care of automatically placing a "viewport-<transition name>" class on the viewport (body) element. This allows any other transition to specify properties on the viewport that are necessary to accomplish the transition.
- changed the CSS class ui-mobile-viewport-perspective to viewport-flip to match code changes. This makes it more apparent that setting -webkit-perspective is only used with the flip transition.
- Updated js/index.php, Makefile and build.xml to include the new jquery.mobile.transition.js file.
2011-04-26 20:53:11 +00:00
|
|
|
var deferred = new $.Deferred(),
|
|
|
|
|
reverseClass = reverse ? " reverse" : "",
|
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.
2011-12-28 04:59:48 +00:00
|
|
|
active = $.mobile.urlHistory.getActive(),
|
2012-01-18 17:15:09 +00:00
|
|
|
toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
|
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.
2011-12-28 04:59:48 +00:00
|
|
|
screenHeight = $.mobile.getScreenHeight(),
|
2012-01-04 11:08:07 +00:00
|
|
|
viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
|
2012-01-05 11:11:37 +00:00
|
|
|
maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
|
|
|
|
|
none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
|
2012-01-04 11:08:07 +00:00
|
|
|
doneOut = function() {
|
2011-06-29 13:38:57 +00:00
|
|
|
|
2012-01-04 11:08:07 +00:00
|
|
|
if ( $from ) {
|
|
|
|
|
$from
|
|
|
|
|
.removeClass( $.mobile.activePageClass + " out in reverse " + name )
|
|
|
|
|
.height( "" );
|
2011-04-26 23:36:31 +00:00
|
|
|
}
|
2012-01-04 11:08:07 +00:00
|
|
|
|
2012-01-05 10:16:18 +00:00
|
|
|
$to.addClass( $.mobile.activePageClass );
|
|
|
|
|
|
|
|
|
|
if( !none ){
|
|
|
|
|
$to.animationComplete( doneIn );
|
|
|
|
|
}
|
2011-06-29 13:38:57 +00:00
|
|
|
|
2012-01-04 11:08:07 +00:00
|
|
|
// Send focus to page as it is now display: block
|
|
|
|
|
$.mobile.focusPage( $to );
|
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.
2011-12-28 04:59:48 +00:00
|
|
|
|
|
|
|
|
// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
|
2012-01-18 17:15:09 +00:00
|
|
|
$to.height( screenHeight + toScroll );
|
2012-01-04 11:08:07 +00:00
|
|
|
|
2012-01-18 17:15:09 +00:00
|
|
|
$.mobile.silentScroll( toScroll );
|
2012-01-05 10:16:18 +00:00
|
|
|
|
2012-01-04 11:08:07 +00:00
|
|
|
$to.addClass( name + " in" + reverseClass );
|
|
|
|
|
|
2012-01-05 10:16:18 +00:00
|
|
|
if( none ){
|
|
|
|
|
doneIn();
|
|
|
|
|
}
|
|
|
|
|
|
2012-01-04 11:08:07 +00:00
|
|
|
},
|
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.
2011-12-28 04:59:48 +00:00
|
|
|
|
2012-01-04 11:08:07 +00:00
|
|
|
doneIn = function() {
|
|
|
|
|
$to
|
|
|
|
|
.removeClass( "out in reverse " + name )
|
2012-01-23 16:47:08 +00:00
|
|
|
.height( "" )
|
|
|
|
|
.parent().removeClass( viewportClass );
|
2012-01-04 11:08:07 +00:00
|
|
|
|
|
|
|
|
deferred.resolve( name, reverse, $to, $from, true );
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$to
|
2012-01-10 07:06:24 +00:00
|
|
|
.parent().addClass( viewportClass );
|
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.
2011-12-28 04:59:48 +00:00
|
|
|
|
2012-01-05 10:16:18 +00:00
|
|
|
if ( $from && !none ) {
|
2012-01-04 11:08:07 +00:00
|
|
|
$from
|
|
|
|
|
.animationComplete( doneOut )
|
2012-01-05 10:16:18 +00:00
|
|
|
.height( screenHeight + $(window ).scrollTop() )
|
2012-01-04 11:08:07 +00:00
|
|
|
.addClass( name + " out" + reverseClass );
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
doneOut();
|
Changes to allow 3rd party transitions. Developers can now register a custom transition by adding their transition handler to the $.mobile.transitionHandlers dictionary. The name of the custom transition is used as the key within the transtionsHandlers dictionary, and should be the same name used within the @data-transtion attribute.
The expected prototype for a transitionHandler is as follows:
function handler(name, reverse, $to, $from)
The name parameter is the name of the transition as specified by @data-transition attribute, reverse is a boolean that is false for a normal transition, and true for a reverse transition. The $to param is a jQuery collection containing the page that is being transitioned "to", and $from is an optional collection that tells us what page we are transitioning "from". Because $from is optional, handler developers should take care and check $from to make sure it is not undefined before attempting to dereference it.
In addition to registering custom transition by name, developers can specify a handler to use in the case where a transition name is specified and does not exist within the $.mobile.transitionHanlders dictionary. Within jQuery Mobile, the default handler for unknown transition types is the $.mobile.css3Transition() handler. This handler always assumes that the transition name is to be used as a CSS class to be placed on the $to and $from elements. To change the default handler, simply set $.mobile.defaultTransitionHandler to you function handler:
$.mobile.defaultTransitionHandler = myTransitionHandler;
The changes to make all this necessary are as follows:
- Created $.mobile.noneTransitionHandler which is the default transitionHandler for the framework that simply adds and removes the page active class on the $from and $to pages with no animations.
- Moved class based transition code into a new plugin jquery.mobile.transition.js file. This plugin, when present, overrides the noneTransitionHandler as the defaultTranstionHandler for the framework so that CSS3 animation transitions are available.
- Removed code related to the setting/removal of the ui-mobile-viewport-perspective class. The css3TransitionHandler plugin takes care of automatically placing a "viewport-<transition name>" class on the viewport (body) element. This allows any other transition to specify properties on the viewport that are necessary to accomplish the transition.
- changed the CSS class ui-mobile-viewport-perspective to viewport-flip to match code changes. This makes it more apparent that setting -webkit-perspective is only used with the flip transition.
- Updated js/index.php, Makefile and build.xml to include the new jquery.mobile.transition.js file.
2011-04-26 20:53:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return deferred.promise();
|
|
|
|
|
}
|
|
|
|
|
|
2012-01-05 10:16:18 +00:00
|
|
|
// Make our transition handler the public default.
|
|
|
|
|
$.mobile.defaultTransitionHandler = outInTransitionHandler;
|
|
|
|
|
|
|
|
|
|
//transition handler dictionary for 3rd party transitions
|
|
|
|
|
$.mobile.transitionHandlers = {
|
|
|
|
|
"default": $.mobile.defaultTransitionHandler
|
|
|
|
|
};
|
|
|
|
|
|
2012-01-09 09:22:57 +00:00
|
|
|
$.mobile.transitionFallbacks = {};
|
|
|
|
|
|
2011-12-16 02:09:25 +00:00
|
|
|
})( jQuery, this );
|
2012-01-12 17:36:46 +00:00
|
|
|
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
|
|
|
|
});
|
|
|
|
|
//>>excludeEnd("jqmBuildExclude");
|