From 14f73b27ee412a6b7abea9a6489325d139620628 Mon Sep 17 00:00:00 2001
From: Kin Blas <jblas@adobe.com>
Date: Tue, 26 Apr 2011 13:53:11 -0700
Subject: [PATCH] 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.
---
 js/jquery.mobile.transition.js | 44 ++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 js/jquery.mobile.transition.js

diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
new file mode 100644
index 00000000..e80140c6
--- /dev/null
+++ b/js/jquery.mobile.transition.js
@@ -0,0 +1,44 @@
+/*!
+ * jQuery Mobile v@VERSION
+ * http://jquerymobile.com/
+ *
+ * Copyright 2010, jQuery Project
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+(function( $, window, undefined ) {
+
+function css3TransitionHandler(name, reverse, $to, $from)
+{
+	var deferred = new $.Deferred(),
+		reverseClass = reverse ? " reverse" : "",
+		viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
+		doneFunc = function(){
+			$to.add($from).removeClass("out in reverse " + name);
+			$from.removeClass($.mobile.activePageClass);
+			$to.parent().removeClass(viewportClass);
+	
+			deferred.resolve(name, reverse, $to, $from);
+		};
+	
+	$to.animationComplete(doneFunc);
+	
+	$to.parent().addClass(viewportClass);
+	if ($from.length){
+		$from.addClass(name + " out" + reverseClass);
+	}
+	$to.addClass($.mobile.activePageClass + " " + name + " in" + reverseClass);
+
+	return deferred.promise();
+}
+
+// Make our transition handler public.
+$.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;
+}
+
+})( jQuery, this );