-
animationClass is: {{ animationClass || 'none' }}
content?>
diff --git a/www/assets/css/style-animations.css b/www/assets/css/style-animations.css
index c6395a4f8..112c87f8f 100644
--- a/www/assets/css/style-animations.css
+++ b/www/assets/css/style-animations.css
@@ -1,28 +1,29 @@
-/* animationFade stuff */
-/*
-.animationFade.ng-enter, .animationFade.ng-leave {
+/* animation-fade stuff */
+.animation-fade.ng-enter, .animation-fade.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 */
-.animationPush.ng-enter {
- -webkit-animation: 0.5s animationPush-enter ease-out;
- animation: 0.5s animationPush-enter ease-out;
+
+/* animation-push stuff */
+.animation-push.ng-enter {
+ -webkit-animation: 0.5s animation-push-enter ease-out;
+ animation: 0.5s animation-push-enter ease-out;
+ position: absolute;
}
-.animationPush.ng-leave {
- -webkit-animation: 0.5s animationPush-leave ease-out;
- animation: 0.5s animationPush-leave ease-out;
+.animation-push.ng-leave {
+ -webkit-animation: 0.5s animation-push-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 */
-.animationPop.ng-enter {
- -webkit-animation: 0.5s animationPop-enter ease-out;
- animation: 0.5s animationPop-enter ease-out;
+/* animation-pop stuff */
+.animation-pop.ng-enter {
+ -webkit-animation: 0.5s animation-pop-enter ease-out;
+ animation: 0.5s animation-pop-enter ease-out;
+ position: absolute;
}
-.animationPop.ng-leave {
- -webkit-animation: 0.5s animationPop-leave ease-out;
- animation: 0.5s animationPop-leave ease-out;
+.animation-pop.ng-leave {
+ -webkit-animation: 0.5s animation-pop-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;
diff --git a/www/assets/js/animations.js b/www/assets/js/animations.js
new file mode 100644
index 000000000..afbc5e0df
--- /dev/null
+++ b/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(); }
+ }
+ );
+ }
+ };
+});
\ No newline at end of file
diff --git a/www/assets/js/app.js b/www/assets/js/app.js
index 4b157ecb2..e7ef1778b 100644
--- a/www/assets/js/app.js
+++ b/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) {
- App.go(backwards);
+ if ( backwards ) {
+ App.go( backwards, 'pop' );
} else {
history.back();
}
@@ -444,31 +443,14 @@ App.connectionError = function() {
};
App.go = function( url, transition ){
- var animationClass = '';
- switch( transition ){
- case 'push': animationClass = 'animationPush'; break;
- case 'fade': animationClass = 'animationFade'; break;
- case 'pop': animationClass = 'animationPop'; break;
- default: animationClass = '';
+ if( App.isNarrowScreen() || App.transitionForDesktop ){
+ App.rootScope.animationClass = transition ? 'animation-' + transition : '';
+ App.rootScope.$safeApply();
}
- 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.location.path( url || '/' );
+ App.rootScope.$safeApply();
};
App.toggleMenu = function() {
diff --git a/www/assets/js/controllers.js b/www/assets/js/controllers.js
index 4a1e0a153..da9d2dfda 100644
--- a/www/assets/js/controllers.js
+++ b/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;
diff --git a/www/assets/js/services.navigation.js b/www/assets/js/services.navigation.js
index 3f576f7c2..152bf6df4 100644
--- a/www/assets/js/services.navigation.js
+++ b/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 = '';
- switch( transition ){
- case 'push': animationClass = 'animationPush'; break;
- case 'fade': animationClass = 'animationFade'; break;
- case 'pop': animationClass = 'animationPop'; break;
- default: animationClass = '';
+ if( App.isNarrowScreen() || App.transitionForDesktop ){
+ App.rootScope.animationClass = transition ? 'animation-' + transition : '';
}
- // $rootScope.animationClass = animationClass;
$location.path( path || '/' );
App.snap.close();
}
diff --git a/www/assets/js/services.order.js b/www/assets/js/services.order.js
index 3695a2ac7..d6039d4dd 100644
--- a/www/assets/js/services.order.js
+++ b/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
diff --git a/www/assets/js/services.position.js b/www/assets/js/services.position.js
index 392f963ac..bd8c1cf03 100644
--- a/www/assets/js/services.position.js
+++ b/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