sharpetronics/crunchbutton
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

partial #1561 - implement ng-view transitions and animations

Browse Source
This commit is contained in:
Daniel Camargo 2013-11-29 16:51:42 -02:00
parent 22c4cb7d81
commit 07b53280db
10 changed files with 150 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
include/views/default/crunchbutton/bundle/css.phtml
View File

@ -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()?>">

3
include/views/default/crunchbutton/bundle/js.phtml
View File

@ -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>

1
include/views/default/crunchbutton/layout/html.body.phtml
View File

@ -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>

59
www/assets/css/style-animations.css
View File

@ -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;

96
www/assets/js/animations.js Normal file
View File

@ -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(); }
}
);
}
};
});

36
www/assets/js/app.js
View File

@ -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() {

8
www/assets/js/controllers.js
View File

@ -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;

9
www/assets/js/services.navigation.js
View File

@ -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();
}

6
www/assets/js/services.order.js
View File

@ -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

3
www/assets/js/services.position.js
View File

@ -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