Merge branch 'tss'

css/structure/jquery.mobile.structure.css

@@ -2,7 +2,10 @@
 @import url( "jquery.mobile.transitions.css" );
 @import url( "jquery.mobile.transitions.fade.css" );
 @import url( "jquery.mobile.transitions.pop.css" );
+@import url( "jquery.mobile.transitions.slidein.keyframes.css" );
+@import url( "jquery.mobile.transitions.slideout.keyframes.css" );
 @import url( "jquery.mobile.transitions.slide.css" );
+@import url( "jquery.mobile.transitions.slidefade.css" );
 @import url( "jquery.mobile.transitions.slidedown.css" );
 @import url( "jquery.mobile.transitions.slideup.css" );
 @import url( "jquery.mobile.transitions.flip.css" );

css/structure/jquery.mobile.transitions.slide.css

@@ -1,54 +1,34 @@
-/* slide transition */
+/* slide transition - depends on slidein.keyframes and slideout.keyframes */
+.slide.out, .slide.in {
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-duration: 350ms;
+	-moz-animation-timing-function: ease-out;
+	-moz-animation-duration: 350ms;
+}
 .slide.out {
 	-webkit-transform: translateX(-100%);
 	-webkit-animation-name: slideouttoleft;
 	-moz-transform: translateX(-100%);
 	-moz-animation-name: slideouttoleft;
-	-webkit-animation-duration: 225ms;
-	-moz-animation-duration: 225ms;
 }
 
 .slide.in {
 	-webkit-transform: translateX(0);
-	-webkit-animation-name: fadein;
+	-webkit-animation-name: slideinfromright;
 	-moz-transform: translateX(0);
-	-moz-animation-name: fadein;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
+	-moz-animation-name: slideinfromright;
 }
 
 .slide.out.reverse {
 	-webkit-transform: translateX(100%);
 	-webkit-animation-name: slideouttoright;
 	-moz-transform: translateX(100%);
 	-moz-animation-name: slideouttoright;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
 }
 
 .slide.in.reverse {
 	-webkit-transform: translateX(0);
-	-webkit-animation-name: fadein;
+	-webkit-animation-name: slideinfromleft;
 	-moz-transform: translateX(0);
-	-moz-animation-name: fadein;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
-}
-
-@-webkit-keyframes slideouttoleft {
-    from { -webkit-transform: translateX(0); }
-    to { -webkit-transform: translateX(-100%); }
-}
-@-moz-keyframes slideouttoleft {
-    from { -moz-transform: translateX(0); }
-    to { -moz-transform: translateX(-100%); }
-}
-
-@-webkit-keyframes slideouttoright {
-    from { -webkit-transform: translateX(0); }
-    to { -webkit-transform: translateX(100%); }
-}
-@-moz-keyframes slideouttoright {
-    from { -moz-transform: translateX(0); }
-    to { -moz-transform: translateX(100%); }
+	-moz-animation-name: slideinfromleft;
 }

css/structure/jquery.mobile.transitions.slidefade.css

@@ -0,0 +1,36 @@
+/* slidefade transition - depends on fadein and slidein.keyframes */
+.slidefade.out {
+	-webkit-transform: translateX(-100%);
+	-webkit-animation-name: slideouttoleft;
+	-moz-transform: translateX(-100%);
+	-moz-animation-name: slideouttoleft;
+	-webkit-animation-duration: 225ms;
+	-moz-animation-duration: 225ms;
+}
+
+.slidefade.in {
+	-webkit-transform: translateX(0);
+	-webkit-animation-name: fadein;
+	-moz-transform: translateX(0);
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+.slidefade.out.reverse {
+	-webkit-transform: translateX(100%);
+	-webkit-animation-name: slideouttoright;
+	-moz-transform: translateX(100%);
+	-moz-animation-name: slideouttoright;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+.slidefade.in.reverse {
+	-webkit-transform: translateX(0);
+	-webkit-animation-name: fadein;
+	-moz-transform: translateX(0);
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}

css/structure/jquery.mobile.transitions.slidein.keyframes.css

@@ -0,0 +1,18 @@
+/* keyframes for slidein from sides */
+@-webkit-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
+}

css/structure/jquery.mobile.transitions.slideout.keyframes.css

@@ -0,0 +1,18 @@
+/* keyframes for slideout to sides */
+@-webkit-keyframes slideouttoleft {
+    from { -webkit-transform: translateX(0); }
+    to { -webkit-transform: translateX(-100%); }
+}
+@-moz-keyframes slideouttoleft {
+    from { -moz-transform: translateX(0); }
+    to { -moz-transform: translateX(-100%); }
+}
+
+@-webkit-keyframes slideouttoright {
+    from { -webkit-transform: translateX(0); }
+    to { -webkit-transform: translateX(100%); }
+}
+@-moz-keyframes slideouttoright {
+    from { -moz-transform: translateX(0); }
+    to { -moz-transform: translateX(100%); }
+}

docs/pages/page-transitions.html

@@ -63,6 +63,11 @@ <h2>Page transitions</h2>
 				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
 				<td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
 			</tr>
+			<tr>
+				<th><h3>slidefade</h3></th>
+				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
+				<td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
+			</tr>
 			<tr>
 				<th><h3>slide</h3></th>
 				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>

js/jquery.mobile.core.js

@@ -50,7 +50,7 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
 		maxTransitionWidth: false,
 
 		// Minimum scroll distance that will be remembered when returning to a page
-		minScrollBack: 10,
+		minScrollBack: 250,
 
 		// DEPRECATED: the following property is no longer in use, but defined until 2.0 to prevent conflicts
 		touchOverflowEnabled: false,

js/jquery.mobile.navigation.js

@@ -485,7 +485,12 @@ define( [
 
 		//clear page loader
 		$.mobile.hidePageLoadingMsg();
-
+
+		// If transition is defined, check if css 3D transforms are supported, and if not, if a fallback is specified
+		if( transition && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ transition ] ){
+			transition = $.mobile.transitionFallbacks[ transition ];
+		}
+
 		//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.

js/jquery.mobile.transition.js

@@ -9,82 +9,140 @@ define( [ "jquery", "./jquery.mobile.core" ], function( $ ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, window, undefined ) {
 
-function outInTransitionHandler( name, reverse, $to, $from ) {
+var createHandler = function( sequential ){
 
-	// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
-	if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
-		name = $.mobile.transitionFallbacks[ name ];
+	// Default to sequential
+	if( sequential === undefined ){
+		sequential = true;
 	}
 
-	var deferred = new $.Deferred(),
-		reverseClass = reverse ? " reverse" : "",
-		active	= $.mobile.urlHistory.getActive(),
-		toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
-		screenHeight = $.mobile.getScreenHeight(),
-		viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
-		maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
-		none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
-		doneOut = function() {
+	return function( name, reverse, $to, $from ) {
 
-			if ( $from ) {
+		var 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",
+			toggleViewportClass = function(){
+				$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + 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(){
 				$from
 					.removeClass( $.mobile.activePageClass + " out in reverse " + name )
 					.height( "" );
-			}
-
-			$to.addClass( $.mobile.activePageClass );
-
-			if( !none ){
-				$to.animationComplete( doneIn );
-			}
+			},
+			startOut = function(){
+				// if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
+				if( !sequential ){
+					doneOut();
+				}
+				else {
+					$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
+				$from
+					.height( screenHeight + $(window ).scrollTop() )
+					.addClass( name + " out" + reverseClass );
+			},
 
-			// Send focus to page as it is now display: block
-			$.mobile.focusPage( $to );
+			doneOut = function() {
 
-			// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
-			$to.height( screenHeight + toScroll );
+				if ( $from && sequential ) {
+					cleanFrom();
+				}
 
-			$.mobile.silentScroll( toScroll );
+				startIn();
+			},
 
-			$to.addClass( name + " in" + reverseClass );
+			startIn = function(){	
 
-			if( none ){
-				doneIn();
-			}
+				$to.addClass( $.mobile.activePageClass );				
 
-		},
-
-		doneIn = function() {
-			$to
-				.removeClass( "out in reverse " + name )
-				.height( "" )
-				.parent().removeClass( viewportClass );
+				// Send focus to page as it is now display: block
+				$.mobile.focusPage( $to );
 
-			deferred.resolve( name, reverse, $to, $from, true );
-		};
+				// Set to page height
+				$to.height( screenHeight + toScroll );
+
+				scrollPage();
+
+				if( !none ){
+					$to.animationComplete( doneIn );
+				}
+
+				$to.addClass( name + " in" + reverseClass );
+
+				if( none ){
+					doneIn();
+				}
+
+			},
 
-	$to
-		.parent().addClass( viewportClass );
+			doneIn = function() {
+
+				if ( !sequential ) {
+
+					if( $from ){
+						cleanFrom();
+					}
+				}
+
+				$to
+					.removeClass( "out in reverse " + name )
+					.height( "" );
+
+				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() !== toScroll ){
+					scrollPage();
+				}
+
+				deferred.resolve( name, reverse, $to, $from, true );
+			};
+
+		toggleViewportClass();
 
-	if ( $from && !none ) {
-		$from
-			.animationComplete( doneOut )
-			.height( screenHeight + $(window ).scrollTop() )
-			.addClass( name + " out" + reverseClass );
-	}
-	else {	
-		doneOut();
-	}
+		if ( $from && !none ) {
+			startOut();
+		}
+		else {
+			doneOut();
+		}
 
-	return deferred.promise();
+		return deferred.promise();
+	};
 }
 
+// generate the handlers from the above
+var sequentialHandler = createHandler(),
+	simultaneousHandler = createHandler( false );
+
 // Make our transition handler the public default.
-$.mobile.defaultTransitionHandler = outInTransitionHandler;
+$.mobile.defaultTransitionHandler = sequentialHandler;
 
 //transition handler dictionary for 3rd party transitions
 $.mobile.transitionHandlers = {
-	"default": $.mobile.defaultTransitionHandler
+	"default": $.mobile.defaultTransitionHandler,
+	"sequential": sequentialHandler,
+	"simultaneous": simultaneousHandler
 };
 
 $.mobile.transitionFallbacks = {};