transition-handler-refactor.js

//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Page change transition core
//>>label: Transition Core
//>>group: Transitions
//>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.transitions.css

define( [ "jquery", "./jquery.mobile.core" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, window, undefined ) {

$.mobile.TransitionHandler = function( sequential )	{
	// Default to sequential
	if( sequential === undefined ){
		this.sequential = true;
	}
};

$.extend($.mobile.TransitionHandler.prototype, {
	handle: function( name, reverse, $to, $from ) {
		$.extend(this, {
			deferred: new $.Deferred(),
			reverseClass: reverse ? " reverse" : "",
			active: $.mobile.urlHistory.getActive(),
			toScroll: active.lastScroll || $.mobile.defaultHomeScroll,
			screenHeight: $.mobile.getScreenHeight(),
			maxTransitionOverride: $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
			none: !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
			$from: $from,
			$to: $to,
			reverse: reverse
		});

		this.toggleViewportClass();

		if ( this.$from && !this.none ) {
			this.startOut();
		}	else {
			this.doneOut();
		}

		return deferred.promise();
	},

	bind: function() {
		return $.proxy(this.handle, this);
	},

	toggleViewportClass: function(){
		$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + this.name );
	},

	scrollPage: function(){
		// By using scrollTo instead of silentScroll, we can keep things better in order
		// Just to be precautios, disable scrollstart listening like silentScroll would
		$.event.special.scrollstart.enabled = false;

		window.scrollTo( 0, toScroll );

		// reenable scrollstart listening like silentScroll would
		setTimeout(function() {
			$.event.special.scrollstart.enabled = true;
		}, 150 );
	},

	cleanFrom: function(){
		this.$from.removeClass( $.mobile.activePageClass + " out in reverse " + this.name )
			.height( "" );
	},

	startOut: function(){
		// if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
		if( !this.sequential ){
			this.doneOut();
		}
		else {
			this.$from.animationComplete( doneOut );
		}

		// Set the from page's height and start it transitioning out
		// Note: setting an explicit height helps eliminate tiling in the transitions
		this.$from.height( screenHeight + $(window ).scrollTop() )
			.addClass( this.name + " out" + reverseClass );
	},

	doneOut: function() {
		if ( this.$from && this.sequential ) {
			this.cleanFrom();
		}

		this.startIn();
	},

	startIn: function(){
		var $to = this.$to;

		$to.addClass( $.mobile.activePageClass );

		// Send focus to page as it is now display: block
		$.mobile.focusPage( $to );

		// Set to page height
		$to.height( screenHeight + toScroll );

		this.scrollPage();

		if( !this.none ){
			$to.animationComplete( doneIn );
		}

		$to.addClass( this.name + " in" + reverseClass );

		if( this.none ){
			this.doneIn();
		}
	},

	doneIn: function() {
		if ( !this.sequential ) {
			if( this.$from ){
				this.cleanFrom();
			}
		}

		this.$to.removeClass( "out in reverse " + this.name )
			.height( "" );

		this.toggleViewportClass();

		// In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
		// This ensures we jump to that spot after the fact, if we aren't there already.
		if( $( window ).scrollTop() !== this.toScroll ){
			this.scrollPage();
		}

		this.deferred.resolve( this.name, this.reverse, this.$to, this.$from, true );
	}
});

// generate the handlers from the above
var sequentialHandler = (new $.mobile.TransitionHandler()).bind(),
	simultaneousHandler = (new $.mobile.TransitionHandler( false )).bind();

// Make our transition handler the public default.
$.mobile.defaultTransitionHandler = sequentialHandler;

//transition handler dictionary for 3rd party transitions
$.mobile.transitionHandlers = {
	"default": $.mobile.defaultTransitionHandler,
	"sequential": sequentialHandler,
	"simultaneous": simultaneousHandler
};

$.mobile.transitionFallbacks = {};

})( jQuery, this );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");