partial #1561 - implement ng-view transitions and animations

include/views/default/crunchbutton/bundle/css.phtml

@@ -8,7 +8,6 @@
 	<link rel="stylesheet" type="text/css" href="/assets/css/<?=$s?>.css?v=<?=Cana_Util::gitVersion()?>">
 <? endforeach ; ?>
 
-<link rel="stylesheet" type="text/css" href="/assets/css/style-animations.css?v=<?=Cana_Util::gitVersion()?>">
 <link rel="stylesheet" type="text/css" href="/assets/css/magnific-popup.css?v=<?=Cana_Util::gitVersion()?>">
 <link rel="stylesheet" type="text/css" href="/assets/css/ladda-themeless.min.css?v=<?=Cana_Util::gitVersion()?>">
 

include/views/default/crunchbutton/bundle/js.phtml

@@ -47,6 +47,9 @@
 <!-- AngularJS Filters -->
 <script src="/assets/js/filters.js?v=<?=Cana_Util::gitVersion()?>"></script>
 
+<!-- AngularJS Animations -->
+<script src="/assets/js/animations.js?v=<?=Cana_Util::gitVersion()?>"></script>
+
 <!-- AngularJS Directives -->
 <script src="/assets/js/directives.js?v=<?=Cana_Util::gitVersion()?>"></script>
 

include/views/default/crunchbutton/layout/html.body.phtml

@@ -132,7 +132,6 @@
 			<div class="body">
 				<div class="content<?=$e?>">
 					<div class="main-content pages">
-						<pre>animationClass is: {{ animationClass || 'none' }}</pre>
 						<div ng-view ng-class="animationClass"><?=$this->content?></div>
 					</div>
 				</div>

www/assets/css/style-animations.css

@@ -1,28 +1,29 @@
-/* animationFade stuff */
+/* animation-fade stuff */
-/*
+.animation-fade.ng-enter, .animation-fade.ng-leave {
-.animationFade.ng-enter, .animationFade.ng-leave {
 	-webkit-transition:0.5s linear all;
 	transition:0.5s linear all;
 }
-.animationFade.ng-enter, .animationFade.ng-leave.ng-leave-active {
+.animation-fade.ng-enter, .animation-fade.ng-leave.ng-leave-active {
 	opacity:0;
 }
-.animationFade.ng-leave, .animationFade.ng-enter.ng-enter-active {
+.animation-fade.ng-leave, .animation-fade.ng-enter.ng-enter-active {
 	opacity:1;
 }
-*/
+
-/* animationPush stuff */
+/* animation-push stuff */
-.animationPush.ng-enter {
+.animation-push.ng-enter {
-	-webkit-animation: 0.5s animationPush-enter ease-out;
+	-webkit-animation: 0.5s animation-push-enter ease-out;
-	animation: 0.5s animationPush-enter ease-out;
+	animation: 0.5s animation-push-enter ease-out;
+	position: absolute;
 }
 
-.animationPush.ng-leave {
+.animation-push.ng-leave {
-	-webkit-animation: 0.5s animationPush-leave  ease-out;
+	-webkit-animation: 0.5s animation-push-leave  ease-out;
-	animation: 0.5s animationPush-leave ease-out;
+	animation: 0.5s animation-push-leave ease-out;
+	position: absolute;
 }
 
-@keyframes animationPush-enter {
+@keyframes animation-push-enter {
 	from {
 		left:300px;
 		opacity:0;
@@ -33,7 +34,7 @@
 	}
 }
 
-@-webkit-keyframes animationPush-enter {
+@-webkit-keyframes animation-push-enter {
 	from {
 		left:300px;
 		opacity:0;
@@ -44,7 +45,7 @@
 	}
 }
 
-@keyframes animationPush-leave {
+@keyframes animation-push-leave {
 	from {
 		left:0;
 		opacity:1;
@@ -55,7 +56,7 @@
 	}
 }
 
-@-webkit-keyframes animationPush-leave {
+@-webkit-keyframes animation-push-leave {
 	from {
 		left:0;
 		opacity:1;
@@ -66,18 +67,20 @@
 	}
 }
 
-/* animationPop stuff */
+/* animation-pop stuff */
-.animationPop.ng-enter {
+.animation-pop.ng-enter {
-	-webkit-animation: 0.5s animationPop-enter ease-out;
+	-webkit-animation: 0.5s animation-pop-enter ease-out;
-	animation: 0.5s animationPop-enter ease-out;
+	animation: 0.5s animation-pop-enter ease-out;
+	position: absolute;
 }
 
-.animationPop.ng-leave {
+.animation-pop.ng-leave {
-	-webkit-animation: 0.5s animationPop-leave ease-out;
+	-webkit-animation: 0.5s animation-pop-leave ease-out;
-	animation: 0.5s animationPop-leave ease-out;
+	animation: 0.5s animation-pop-leave ease-out;
+	position: absolute;
 }
 
-@keyframes animationPop-enter {
+@keyframes animation-pop-enter {
 	from {
 		left:-300px;
 		opacity:0;
@@ -88,7 +91,7 @@
 	}
 }
 
-@-webkit-keyframes animationPop-enter {
+@-webkit-keyframes animation-pop-enter {
 	from {
 		left:-300px;
 		opacity:0;
@@ -99,7 +102,7 @@
 	}
 }
 
-@keyframes animationPop-leave {
+@keyframes animation-pop-leave {
 	from {
 		left:0;
 		opacity:1;
@@ -110,7 +113,7 @@
 	}
 }
 
-@-webkit-keyframes animationPop-leave {
+@-webkit-keyframes animation-pop-leave {
 	from {
 		left:0;
 		opacity:1;

www/assets/js/animations.js

@@ -0,0 +1,96 @@
+// Animation push
+NGApp.animation( '.animation-push', function( $rootScope ) {
+	
+	var windowWidth = $rootScope.windowWidth;
+	
+	return {
+
+		enter : function( element, done ) {
+			var width = element.css( 'width' );
+			element.css( { position: 'absolute', left: ( windowWidth + 30 ), opacity : 1, width : width } );
+			jQuery( element ).animate( { left: 0 }, 
+					{ duration: 400,
+						complete: function(){
+												jQuery( element ).css( { position: 'static' } );
+												done();
+											} 
+					}
+				);
+		},
+
+		leave : function( element, done ) {
+			var width = element.css( 'width' );
+			element.css( { position: 'absolute', left: 0, width : width } );
+			element.css( 'width', width );
+			jQuery( element ).animate( { left: ( windowWidth * -1 ), opacity : 0 }, 
+					{ duration: 200,
+						complete: function(){
+												jQuery( element ).css( { position: 'static' } );
+												done();
+											} 
+					}
+				);
+		}
+	};
+
+});
+
+// Animation pop
+NGApp.animation( '.animation-pop', function( $rootScope ) {
+	
+	var windowWidth = $rootScope.windowWidth;
+	
+	return {
+
+		enter : function( element, done ) {
+			var width = element.css( 'width' );
+			element.css( { position: 'absolute', left: ( windowWidth * -1 ), opacity : 1, width : width } );
+			jQuery( element ).animate( { left: 0 }, 
+					{ duration: 400,
+						complete: function(){
+												jQuery( element ).css( { position: 'static' } );
+												done();
+											} 
+					}
+				);
+		},
+
+		leave : function( element, done ) {
+			var width = element.css( 'width' );
+			element.css( { position: 'absolute', left: 0, width : width } );
+			jQuery( element ).animate( { left: ( windowWidth + 30 ), opacity : 0 }, 
+					{ duration: 200,
+						complete: function(){
+												jQuery( element ).css( { position: 'static' } );
+												done();
+											} 
+					}
+				);
+		}
+	};
+});
+
+// Animation fade
+NGApp.animation( '.animation-fade', function() {
+	
+	return {
+
+		enter : function( element, done ) {
+			element.css( { opacity : 0 } );
+			jQuery( element ).animate( { opacity: 1 }, 
+					{ duration: 300,
+						complete: function(){  done(); } 
+					}
+				);
+		},
+
+		leave : function( element, done ) {
+			element.css( { opacity : 1 } );
+			jQuery( element ).animate( { opacity : 0 }, 
+					{ duration: 200,
+						complete: function(){ done(); } 
+					}
+				);
+		}
+	};
+});

www/assets/js/app.js

@@ -38,6 +38,7 @@ var App = {
 		desktop: 9,
 		mobile: 6
 	},
+	transitionForDesktop : false,
 	cachedObjectsExpiresIn : 86400 // 86400 seconds is 24 hours
 };
 
@@ -324,8 +325,7 @@ NGApp.controller('AppController', function ($scope, $route, $routeParams, $rootS
 	$rootScope.back = function() {
 		App.snap.close();
 		var backwards = false;
-
+		switch( $route.current.action ) {
-		switch($route.current.action) {
 			case 'order':
 				backwards = '/orders';
 				break;
@@ -336,9 +336,8 @@ NGApp.controller('AppController', function ($scope, $route, $routeParams, $rootS
 				backwards = '/location';
 				break;
 		}
-
+		if ( backwards ) {
-		if (backwards) {
+			App.go( backwards, 'pop' );
-			App.go(backwards);
 		} else {
 			history.back();
 		}
@@ -444,31 +443,14 @@ App.connectionError = function() {
 };
 
 App.go = function( url, transition ){
-	var animationClass = '';
+	if( App.isNarrowScreen() || App.transitionForDesktop ){
-	switch( transition ){
+		App.rootScope.animationClass = transition ? 'animation-' + transition : '';
-		case 'push': animationClass = 'animationPush'; break;
-		case 'fade': animationClass = 'animationFade'; break;
-		case 'pop': animationClass = 'animationPop'; break;
-		default: animationClass = '';
-	}
-	App.rootScope.animationClass = animationClass;
-	console.log('App.rootScope.animationClass',App.rootScope.animationClass);
 		App.rootScope.$safeApply();
+	}
 	// @todo: do some tests to figure out if we need this or not
 	// App.location.path(!App.isPhoneGap ? url : 'index.html#' + url);
-	/*console.log('App.rootScope.animationClass',App.rootScope.animationClass);
-	if( App.rootScope.animationClass != '' ){
-		setTimeout( function(){
-			App.location.path( url || '/' );
-		}, 10 );
-	} else {
-		App.location.path( url || '/' );
-	}*/
-	setTimeout( function(){
 	App.location.path( url || '/' );
 	App.rootScope.$safeApply();
-	}, 10 );
-	
 };
 
 App.toggleMenu = function() {

www/assets/js/controllers.js

@@ -178,7 +178,7 @@ NGApp.controller( 'RestaurantsCtrl', function ( $scope, $rootScope, $http, $loca
 			// @todo: this is kind of redundundant
 			// make sure that the restaurant is actulay loaded first
 			App.cache('Restaurant', restaurant.permalink, function () {
-				App.go( '/' + restaurants.permalink + '/' + restaurant.permalink, 'pop' );
+				App.go( '/' + restaurants.permalink + '/' + restaurant.permalink, 'push' );
 			}, function() {
 
 				if ($('.is-ui2').get(0)) {
@@ -242,7 +242,7 @@ NGApp.controller( 'RestaurantsCtrl', function ( $scope, $rootScope, $http, $loca
 		}, 
 		// Error
 		function(){
-			$location.path( '/location' );
+			App.go( '/location' );
 		}
 	);
 });
@@ -291,7 +291,7 @@ NGApp.controller( 'LocationCtrl', function ($scope, $http, $location, $rootScope
 	$scope.locationError = false;
 
 	$scope.openCity = function( city ){
-		$location.path( '/' + city );
+		App.go( '/' + city, 'push' );
 	}
 
 	$scope.resetFormLocation = function(){
@@ -364,7 +364,7 @@ NGApp.controller( 'LocationCtrl', function ($scope, $http, $location, $rootScope
 	});
 
 	var proceed = function() {
-		$location.path( '/' + restaurants.permalink );
+		App.go( '/' + restaurants.permalink, 'push' );
 		$scope.location.form.address = '';
 		$scope.warningPlaceholder = false;
 		$scope.isProcessing = false;

www/assets/js/services.navigation.js

@@ -31,14 +31,9 @@ NGApp.factory( 'MainNavigationService', function( $http, $location, $rootScope,
 
 	/* the transitions type could be push, fade, pop or none */
 	service.link = function( path, transition ){
-		var animationClass = '';
+		if( App.isNarrowScreen() || App.transitionForDesktop ){
-		switch( transition ){
+			App.rootScope.animationClass = transition ? 'animation-' + transition : '';
-			case 'push': animationClass = 'animationPush'; break;
-			case 'fade': animationClass = 'animationFade'; break;
-			case 'pop': animationClass = 'animationPop'; break;
-			default: animationClass = '';
 		}
-		// $rootScope.animationClass = animationClass;
 		$location.path( path || '/' );
 		App.snap.close();
 	}

www/assets/js/services.order.js

@@ -679,7 +679,7 @@ NGApp.factory('OrderService', function ($http, $location, $rootScope, $filter, A
 							$rootScope.$safeApply( function(){
 								$rootScope.$broadcast( 'newOrder' );
 								OrderViewService.newOrder = true;
-								$location.path( '/order/' + uuid );	
+								App.go( '/order/' + uuid, 'push' );	
 							} );
 						});
 					}
@@ -930,11 +930,11 @@ NGApp.factory('OrdersService', function ($http, $location, $rootScope, Restauran
 	}
 
 	service.restaurant = function (permalink) {
-		$location.path('/' + restaurants.permalink + '/' + permalink);
+		App.go( '/' + restaurants.permalink + '/' + permalink, 'push' );
 	};
 
 	service.receipt = function (id_order) {
-		$location.path('/order/' + id_order);
+		App.go( '/order/' + id_order, 'push' );
 	};
 
 	// Reload the orders list

www/assets/js/services.position.js

@@ -382,7 +382,8 @@ NGApp.factory('LocationService', function ($location, $rootScope, RestaurantsSer
 				address: address
 			};
 			// if we have a bounding result, process based on that
-			if (service.bounding && google && google.maps ) {
+			if ( service.bounding && google && google.maps && google.maps.LatLng ) {
+
 				var latLong = new google.maps.LatLng(service.bounding.lat, service.bounding.lon);
 
 				// Create a cicle bounding box