From 5cf8db237837debad252f1c9d1ea65b5aa69a02b Mon Sep 17 00:00:00 2001
From: Matias Alejo Garcia <ematiu@gmail.com>
Date: Fri, 8 May 2015 09:35:33 -0300
Subject: [PATCH] anim at routes

---
 public/views/add.html                    |   8 ++
 public/views/copayers.html               |   6 +
 public/views/create.html                 |   8 ++
 public/views/import.html                 |   6 +
 public/views/importLegacy.html           |   8 ++
 public/views/join.html                   |   7 ++
 public/views/paymentUri.html             |   6 +
 public/views/preferencesAltCurrency.html |   2 +-
 public/views/preferencesBwsUrl.html      |   2 +-
 public/views/preferencesLanguage.html    |   8 ++
 public/views/preferencesUnit.html        |   9 ++
 src/css/mobile.css                       | 137 ++---------------------
 src/js/routes.js                         | 108 +++++-------------
 13 files changed, 107 insertions(+), 208 deletions(-)

diff --git a/public/views/add.html b/public/views/add.html
index 3201a9753..86c7505d4 100644
--- a/public/views/add.html
+++ b/public/views/add.html
@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Add Wallet'; closeToHome = true; noColor = true">
+</div>
+
+
+
 <div class="content">
 <ul class="no-bullet manage size-12">
 	<li>
diff --git a/public/views/copayers.html b/public/views/copayers.html
index b713e9930..dd6acf5c9 100644
--- a/public/views/copayers.html
+++ b/public/views/copayers.html
@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Copayers'">
+</div>
+
 <div class="content p20v" ng-controller="copayersController as copayers" ng-init="copayers.init()">
   <div ng-show="!index.notAuthorized">
     <div class="row m10t text-center">
diff --git a/public/views/create.html b/public/views/create.html
index 62ca0fcf0..75f85b2d3 100644
--- a/public/views/create.html
+++ b/public/views/create.html
@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Create new wallet';  goBackToState = 'add'; noColor = true">
+</div>
+
+
+
 <div class="content p20v" ng-controller="createController as create">
 
   <div class="onGoingProcess" ng-show="create.loading">
diff --git a/public/views/import.html b/public/views/import.html
index 414c06682..2edf34ff3 100644
--- a/public/views/import.html
+++ b/public/views/import.html
@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Import wallet';  goBackToState = 'add'; noColor = true">
+</div>
+
 <div class="content p20v" ng-controller="importController as import">
   <div class="onGoingProcess" ng-show="import.loading">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
diff --git a/public/views/importLegacy.html b/public/views/importLegacy.html
index 80b4fc759..8442f7208 100644
--- a/public/views/importLegacy.html
+++ b/public/views/importLegacy.html
@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Import legacy wallet'; goBackToState = 'add'; noColor = true">
+</div>
+
+
+
 <div class="content p20v" ng-controller="importLegacyController as importLegacy">
   <div class="row m20t">
     <div class="large-5 large-centered medium-7 medium-centered columns">
diff --git a/public/views/join.html b/public/views/join.html
index a2b94a2a0..e80647b92 100644
--- a/public/views/join.html
+++ b/public/views/join.html
@@ -1,3 +1,10 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Join shared wallet'; goBackToState = 'add'; noColor = true">
+</div>
+
+
 <div class="content p20v" ng-controller="joinController as join">
   <div class="onGoingProcess" ng-show="join.loading">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
diff --git a/public/views/paymentUri.html b/public/views/paymentUri.html
index 39ee15334..9d3b97eea 100644
--- a/public/views/paymentUri.html
+++ b/public/views/paymentUri.html
@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Choose wallet'; closeToHome = true">
+</div>
+
 <div class="content p20v row payment-uri" ng-controller="paymentUriController as payment">
   <div class="large-12 columns" ng-init="uri = payment.checkBitcoinUri()">
     <div class="panel text-center" ng-show="!uri">
diff --git a/public/views/preferencesAltCurrency.html b/public/views/preferencesAltCurrency.html
index 25fc61447..4a2159ef1 100644
--- a/public/views/preferencesAltCurrency.html
+++ b/public/views/preferencesAltCurrency.html
@@ -1,7 +1,7 @@
 <div 
   class="topbar-container" 
   ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Alternative Currency'; goBackToState = 'preferences'">
+  ng-init="titleSection='Alternative Currency'; goBackToState = 'preferences'; noColor = true">
 </div>
 
 
diff --git a/public/views/preferencesBwsUrl.html b/public/views/preferencesBwsUrl.html
index c704a3675..acef1d2bc 100644
--- a/public/views/preferencesBwsUrl.html
+++ b/public/views/preferencesBwsUrl.html
@@ -1,7 +1,7 @@
 <div 
   class="topbar-container" 
   ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Bitcore Wallet Service'; goBackToState = 'preferences'">
+  ng-init="titleSection='Bitcore Wallet Service'; goBackToState = 'preferences'; noColor = true">
 </div>
 
 
diff --git a/public/views/preferencesLanguage.html b/public/views/preferencesLanguage.html
index 17f5ef7ab..5672bb87f 100644
--- a/public/views/preferencesLanguage.html
+++ b/public/views/preferencesLanguage.html
@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Language'; goBackToState = 'preferences'; noColor = true">
+</div>
+
+
+
 <div class="content preferences" ng-controller="preferencesLanguageController as prefLang">
   <div class="animated infinite flash text-center m20t text-gray" ng-show="prefLang.loading" translate>Applying changes</div>
   <div ng-show="!prefLang.loading"
diff --git a/public/views/preferencesUnit.html b/public/views/preferencesUnit.html
index cf35d46cc..0bfc858bc 100644
--- a/public/views/preferencesUnit.html
+++ b/public/views/preferencesUnit.html
@@ -1,3 +1,12 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Unit'; goBackToState = 'preferences'; noColor = true">
+</div>
+
+
+
+
 <div class="content preferences" ng-controller="preferencesUnitController as prefUnit">
   <div ng-repeat="unit in prefUnit.unitOpts" ng-click="prefUnit.save(unit)" class="line-b p20 size-14">
     <span>{{unit.shortName}}</span>
diff --git a/src/css/mobile.css b/src/css/mobile.css
index e081e1c64..4cf82c6aa 100644
--- a/src/css/mobile.css
+++ b/src/css/mobile.css
@@ -406,141 +406,34 @@ to prevent collapsing during animation*/
   right: 0;
 
   animation-timing-function: ease-in-out;
-  animation-duration: 0.4s;
+  animation-duration: .4s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   
   -webkit-animation-timing-function: ease-in-out;
-  -webkit-animation-duration: 0.4s;
+  -webkit-animation-duration: .4s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-fill-mode: both;
 }
 
-@-webkit-keyframes CslideInUp {
-  0% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes CslideInUp {
-  0% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
 .CslideInUp {
-  -webkit-animation-name: CslideInUp;
-  animation-name: CslideInUp;
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
   z-index: 1003;
 }
-
-@-webkit-keyframes CslideOutDown {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-@keyframes CslideOutDown {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
 .CslideOutDown {
-  -webkit-animation-name: CslideOutDown;
-  animation-name: CslideOutDown;
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
   z-index: 1003;
 }
-
-@-webkit-keyframes CslideInLeft {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@keyframes CslideInLeft {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(100%,0, 0);
-    transform: translate3d(100%,0, 0);
-  }
-}
-
-.CslideInLeft {
-  -webkit-animation-name: CslideInLeft;
-  animation-name: CslideInLeft;
+.CslideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
   z-index: 1003;
 }
-
-@-webkit-keyframes CslideInRight {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(-100%,0, 0);
-    transform: translate3d(-100%,0, 0);
-  }
-}
-
-@keyframes CslideInRight {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(-100%, 0,0);
-    transform: translate3d(-100%, 0,0);
-  }
-}
-
 .CslideInRight {
-  -webkit-animation-name: CslideInRight;
-  animation-name: CslideInRight;
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
   z-index: 1003;
 }
 
@@ -827,14 +720,6 @@ textarea:focus
   transform: translate3d(-100%, 0, 0) !important;
 }
 
-.animated.slideInRight, 
-.animated.slideInLeft, 
-.animated.CslideInUp, 
-.animated.CslideOutDown {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-}
-
 /* removes 300ms in IE */
 -ms-touch-action: manipulation; /* IE10 /
 touch-action: manipulation; /* IE11+ */
diff --git a/src/js/routes.js b/src/js/routes.js
index bc8533028..c1f3f8789 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -112,13 +112,6 @@ angular
           'main': {
             templateUrl: 'views/paymentUri.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.goBackToState = 'walletHome';
-              $scope.noColor = true;
-            }
-          }
         },
         needProfile: true
       })
@@ -134,14 +127,6 @@ angular
           'main': {
             templateUrl: 'views/join.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Join shared wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('import', {
@@ -151,14 +136,6 @@ angular
           'main': {
             templateUrl: 'views/import.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Import wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('importProfile', {
@@ -173,14 +150,6 @@ angular
           'main': {
             templateUrl: 'views/importLegacy.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Import legacy wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
 
       })
@@ -192,14 +161,6 @@ angular
           'main': {
             templateUrl: 'views/create.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Create new wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('copayers', {
@@ -209,9 +170,6 @@ angular
           'main': {
             templateUrl: 'views/copayers.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html'
-          }
         }
       })
       .state('preferences', {
@@ -233,14 +191,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesLanguage.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Language');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('preferencesUnit', {
@@ -252,14 +202,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesUnit.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Unit');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('preferencesAdvanced', {
@@ -372,14 +314,6 @@ angular
           'main': {
             templateUrl: 'views/add.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Add wallet');
-              $scope.closeToHome = true;
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('cordova', {
@@ -478,14 +412,16 @@ angular
       }
 
       function animateTransition(entering, leaving) {
-        console.log('[routes.js.540:entering:]', entering, leaving); //TODO
-        var e = document.getElementById('mainSection');
-        if (entering) {
-          e.className = entering;
-        } else {
-          e.className = '';
+        // Animation in progress?
+        var x = document.getElementById('mainSectionDup');
+        if (x) {
+          console.log('Anim in progress');
+          return;
         }
 
+ //       console.log('[routes.js.540:entering:]', entering, leaving); //TODO
+        var e = document.getElementById('mainSection');
+
         var e2 = e.cloneNode(true);
         if (leaving)
           e2.className=  leaving;
@@ -496,21 +432,33 @@ angular
         e2.id = 'mainSectionDup';
         c.appendChild(e2);
 
-        // TODO  webkitTransitionEnd
-//el.addEventListener("transitionend", updateTransition, true);
-        setTimeout(function(){
-console.log('[routes.js.556] DELETING OLD'); //TODO
+        if (entering) {
+          e.className = entering;
+        } else {
+          e.className = '';
+        }
+
+        var cleanedUp = false;
+        var cleanUp = function() {
+          if (cleanedUp) return;
+          cleanedUp=true;
           e2.parentNode.removeChild(e2);
           e2.innerHTML = "";
-        }, 400);
+          e.className = '';
+        };
+        e.addEventListener("animationend", cleanUp, true);
+        e2.addEventListener("animationend", cleanUp, true);
+        e.addEventListener("webkitAnimationEnd", cleanUp, true);
+        e2.addEventListener("webkitAnimationEnd", cleanUp, true);
+        setTimeout(cleanUp, 500);
       }
 
-      console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO
+//      console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO
       if (pageWeight[fromState.name] && pageWeight[toState.name]) {
          if (pageWeight[fromState.name] > pageWeight[toState.name]) {
-          animateTransition(null, 'CslideInLeft');
+          animateTransition(null,'CslideOutRight', event);
          } else {
-          animateTransition(null, 'CslideInRight');
+          animateTransition('CslideInRight', null, event);
          }
       } else if (fromState.name) {
         if (pageWeight[toState.name]) {