Merge pull request #3266 from cmgustavo/ref/animation-01

Ref animations. Disabled for desktop

src/css/mobile.css

@@ -203,7 +203,7 @@ _:-ms-fullscreen, :root .main {
   height: 75px;
   position: absolute;
   top: -33px;
-  font-size: 35px;
+  font-size: 2.2rem;
   border: 3px solid #fff;
   background: #1ABC9C;
   margin: 0;
@@ -301,7 +301,7 @@ a.missing-copayers {
 .sidebar .avatar-wallet, .payment-uri .avatar-wallet, .modal-content .avatar-wallet {
   background-color: #2C3E50;
   color: #fff;
-  font-size: 20px;
+  font-size: 1.4rem;
   font-weight: 700;
   margin-right: 15px;
   text-align: center;
@@ -562,6 +562,11 @@ to prevent collapsing during animation*/
 
 /*** modals ***/
 
+.hideModal {
+  visibility: none !important;
+  display: none !important;
+}
+
 .reveal-modal-bg {
   display: none !important;
 }

src/js/controllers/buyGlidera.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('buyGlideraController', 
-  function($scope, $timeout, $modal, profileService, addressService, glideraService, bwsError, lodash, isChromeApp) {
+  function($scope, $timeout, $modal, profileService, addressService, glideraService, bwsError, lodash, isChromeApp, animationService) {
     
     var self = this;
     this.show2faCodeInput = null;
@@ -9,13 +9,6 @@ angular.module('copayApp.controllers').controller('buyGlideraController',
     this.success = null;
     this.loading = null; 
 
-    // DISABLE ANIMATION ON CHROMEAPP
-    if (isChromeApp) {
-      var animatedSlideUp = 'full';
-    } else {
-      var animatedSlideUp = 'full animated slideInUp';
-    }
-
     this.otherWallets = function(testnet) {
       var network = testnet ? 'testnet' : 'livenet';
       return lodash.filter(profileService.getWallets(network), function(w) {
@@ -57,13 +50,13 @@ angular.module('copayApp.controllers').controller('buyGlideraController',
 
       var modalInstance = $modal.open({
         templateUrl: 'views/modals/wallets.html',
-          windowClass: animatedSlideUp,
+          windowClass: animationService.modalAnimated.slideUp,
           controller: ModalInstanceCtrl,
       });
 
       modalInstance.result.finally(function() {
         var m = angular.element(document.getElementsByClassName('reveal-modal'));
-        m.addClass('slideOutDown');
+        m.addClass(animationService.modalAnimated.slideOutDown);
       });
 
       modalInstance.result.then(function(obj) {

src/js/controllers/copayers.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('copayersController',
-  function($scope, $rootScope, $timeout, $log, $modal, profileService, go, notification, isCordova, gettext, gettextCatalog) {
+  function($scope, $rootScope, $timeout, $log, $modal, profileService, go, notification, isCordova, gettext, gettextCatalog, animationService) {
     var self = this;
 
     var delete_msg = gettextCatalog.getString('Are you sure you want to delete this wallet?');
@@ -37,9 +37,15 @@ angular.module('copayApp.controllers').controller('copayersController',
 
       var modalInstance = $modal.open({
         templateUrl: 'views/modals/confirmation.html',
-        windowClass: 'full',
+        windowClass: animationService.modalAnimated.slideUp,
         controller: ModalInstanceCtrl
       });
+
+      modalInstance.result.finally(function() {
+        var m = angular.element(document.getElementsByClassName('reveal-modal'));
+        m.addClass(animationService.modalAnimated.slideOutDown);
+      });
+
       modalInstance.result.then(function(ok) {
         if (ok) {
           _deleteWallet();

src/js/controllers/preferencesDelete.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('preferencesDeleteWalletController',
-  function($scope, $rootScope, $filter, $timeout, $modal, $log, notification, profileService, isCordova, go, gettext, gettextCatalog) {
+  function($scope, $rootScope, $filter, $timeout, $modal, $log, notification, profileService, isCordova, go, gettext, gettextCatalog, animationService) {
     this.isCordova = isCordova;
     this.error = null;
 
@@ -27,9 +27,15 @@ angular.module('copayApp.controllers').controller('preferencesDeleteWalletContro
 
       var modalInstance = $modal.open({
         templateUrl: 'views/modals/confirmation.html',
-        windowClass: 'full',
+        windowClass: animationService.modalAnimated.slideUp,
         controller: ModalInstanceCtrl
       });
+
+      modalInstance.result.finally(function() {
+        var m = angular.element(document.getElementsByClassName('reveal-modal'));
+        m.addClass(animationService.modalAnimated.slideOutDown);
+      });
+
       modalInstance.result.then(function(ok) {
         if (ok) {
           _deleteWallet();

src/js/controllers/preferencesGlidera.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('preferencesGlideraController', 
-  function($scope, $modal, $timeout, profileService, applicationService, glideraService, storageService, isChromeApp) {
+  function($scope, $modal, $timeout, profileService, applicationService, glideraService, storageService, isChromeApp, animationService) {
 
     this.getEmail = function(token) {
       var self = this;
@@ -31,14 +31,6 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
       });
     };
 
-    // DISABLE ANIMATION ON CHROMEAPP
-    if (isChromeApp) {
-      var animatedSlideRight = 'full';
-    }
-    else {
-      var animatedSlideRight = 'full animated slideInRight';
-    }
-
     this.revokeToken = function(testnet) {
       var network = testnet ? 'testnet' : 'livenet';
       var ModalInstanceCtrl = function($scope, $modalInstance) {
@@ -52,7 +44,7 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
 
       var modalInstance = $modal.open({
         templateUrl: 'views/modals/glidera-confirmation.html',
-        windowClass: animatedSlideRight,
+        windowClass: animationService.modalAnimated.slideRight,
         controller: ModalInstanceCtrl
       });
 
@@ -68,7 +60,7 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
 
       modalInstance.result.finally(function() {
         var m = angular.element(document.getElementsByClassName('reveal-modal'));
-        m.addClass('slideOutRight');
+        m.addClass(animationService.modalAnimated.slideOutRight);
       });
     };
 

src/js/controllers/sellGlidera.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('sellGlideraController', 
-  function($scope, $timeout, $log, $modal, configService, profileService, addressService, feeService, glideraService, bwsError, lodash, isChromeApp) {
+  function($scope, $timeout, $log, $modal, configService, profileService, addressService, feeService, glideraService, bwsError, lodash, isChromeApp, animationService) {
 
     var self = this;
     var config = configService.getSync();
@@ -14,13 +14,6 @@ angular.module('copayApp.controllers').controller('sellGlideraController',
     this.currentFeeLevel = config.wallet.settings.feeLevel || 'normal';
     var fc;
 
-    // DISABLE ANIMATION ON CHROMEAPP
-    if (isChromeApp) {
-      var animatedSlideUp = 'full';
-    } else {
-      var animatedSlideUp = 'full animated slideInUp';
-    }
-
     this.otherWallets = function(testnet) {
       var network = testnet ? 'testnet' : 'livenet';
       return lodash.filter(profileService.getWallets(network), function(w) {
@@ -53,13 +46,13 @@ angular.module('copayApp.controllers').controller('sellGlideraController',
 
       var modalInstance = $modal.open({
         templateUrl: 'views/modals/wallets.html',
-          windowClass: animatedSlideUp,
+          windowClass: animationService.modalAnimated.slideUp,
           controller: ModalInstanceCtrl,
       });
 
       modalInstance.result.finally(function() {
         var m = angular.element(document.getElementsByClassName('reveal-modal'));
-        m.addClass('slideOutDown');
+        m.addClass(animationService.modalAnimated.slideOutDown);
       });
 
       modalInstance.result.then(function(obj) {

src/js/controllers/topbar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('topbarController', function($rootScope, go) {
+angular.module('copayApp.controllers').controller('topbarController', function($scope, $rootScope, go) {
 
   this.onQrCodeScanned = function(data) {
     $rootScope.$emit('dataScanned', data);

src/js/controllers/walletHome.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $rootScope, $timeout, $filter, $modal, $log, notification, txStatus, isCordova, profileService, lodash, configService, rateService, storageService, bitcore, isChromeApp, gettext, gettextCatalog, nodeWebkit, addressService, ledger, feeService, bwsError, confirmDialog, txFormatService) {
+angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $rootScope, $timeout, $filter, $modal, $log, notification, txStatus, isCordova, profileService, lodash, configService, rateService, storageService, bitcore, isChromeApp, gettext, gettextCatalog, nodeWebkit, addressService, ledger, feeService, bwsError, confirmDialog, txFormatService, animationService) {
 
   var self = this;
   $rootScope.hideMenuBar = false;
@@ -26,15 +26,6 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
   this.isMobile = isMobile.any();
   this.addr = {};
 
-  // DISABLE ANIMATION ON CHROMEAPP
-  if (isChromeApp) {
-    var animatedSlideUp = 'full';
-    var animatedSlideRight = 'full';
-  } else {
-    var animatedSlideUp = 'full animated slideInUp';
-    var animatedSlideRight = 'full animated slideInRight';
-  }
-
   var disableScannerListener = $rootScope.$on('dataScanned', function(event, data) {
     self.setForm(data);
     $rootScope.$emit('Local/SetTab', 'send');
@@ -117,7 +108,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     };
     var modalInstance = $modal.open({
       templateUrl: 'views/modals/copayers.html',
-      windowClass: animatedSlideUp,
+      windowClass: animationService.modalAnimated.slideUp,
       controller: ModalInstanceCtrl,
     });
 
@@ -129,7 +120,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       $rootScope.modalOpened = false;
       disableCloseModal();
       var m = angular.element(document.getElementsByClassName('reveal-modal'));
-      m.addClass('slideOutDown');
+      m.addClass(animationService.modalAnimated.slideOutDown);
     });
   };
 
@@ -166,7 +157,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
 
     var modalInstance = $modal.open({
       templateUrl: 'views/modals/wallets.html',
-      windowClass: animatedSlideUp,
+      windowClass: animationService.modalAnimated.slideUp,
       controller: ModalInstanceCtrl,
     });
 
@@ -178,7 +169,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       $rootScope.modalOpened = false;
       disableCloseModal();
       var m = angular.element(document.getElementsByClassName('reveal-modal'));
-      m.addClass('slideOutDown');
+      m.addClass(animationService.modalAnimated.slideOutDown);
     });
 
     modalInstance.result.then(function(addr) {
@@ -392,7 +383,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
 
     var modalInstance = $modal.open({
       templateUrl: 'views/modals/txp-details.html',
-      windowClass: animatedSlideRight,
+      windowClass: animationService.modalAnimated.slideRight,
       controller: ModalInstanceCtrl,
     });
 
@@ -404,7 +395,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       $rootScope.modalOpened = false;
       disableCloseModal();
       var m = angular.element(document.getElementsByClassName('reveal-modal'));
-      m.addClass('slideOutRight');
+      m.addClass(animationService.modalAnimated.slideOutRight);
     });
 
     modalInstance.result.then(function(txp) {
@@ -555,7 +546,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
 
     var modalInstance = $modal.open({
       templateUrl: 'views/modals/customized-amount.html',
-      windowClass: animatedSlideUp,
+      windowClass: animationService.modalAnimated.slideUp,
       controller: ModalInstanceCtrl,
     });
 
@@ -567,7 +558,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       $rootScope.modalOpened = false;
       disableCloseModal();
       var m = angular.element(document.getElementsByClassName('reveal-modal'));
-      m.addClass('slideOutDown');
+      m.addClass(animationService.modalAnimated.slideOutDown);
     });
   };
 
@@ -973,7 +964,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     };
     var modalInstance = $modal.open({
       templateUrl: 'views/modals/paypro.html',
-      windowClass: animatedSlideUp,
+      windowClass: animationService.modalAnimated.slideUp,
       controller: ModalInstanceCtrl,
     });
 
@@ -985,7 +976,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       $rootScope.modalOpened = false;
       disableCloseModal();
       var m = angular.element(document.getElementsByClassName('reveal-modal'));
-      m.addClass('slideOutDown');
+      m.addClass(animationService.modalAnimated.slideOutDown);
     });
   };
 
@@ -1162,7 +1153,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
 
     var modalInstance = $modal.open({
       templateUrl: 'views/modals/tx-details.html',
-      windowClass: animatedSlideRight,
+      windowClass: animationService.modalAnimated.slideRight,
       controller: ModalInstanceCtrl,
     });
 
@@ -1174,7 +1165,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       $rootScope.modalOpened = false;
       disableCloseModal();
       var m = angular.element(document.getElementsByClassName('reveal-modal'));
-      m.addClass('slideOutRight');
+      m.addClass(animationService.modalAnimated.slideOutRight);
     });
   };
 

src/js/routes.js

@@ -470,7 +470,7 @@ angular
         needProfile: false
       });
   })
-  .run(function($rootScope, $state, $log, uriHandler, isCordova, profileService, $timeout, nodeWebkit, uxLanguage) {
+  .run(function($rootScope, $state, $log, uriHandler, isCordova, profileService, $timeout, nodeWebkit, uxLanguage, animationService) {
     FastClick.attach(document.body);
 
     uxLanguage.init();
@@ -494,45 +494,6 @@ angular
       win.menu = nativeMenuBar;
     }
 
-    var pageWeight = {
-      walletHome: 0,
-      copayers: -1,
-      cordova: -1,
-      payment: -1,
-      uriglidera: -1,
-
-      preferences: 11,
-      glidera: 11,
-      preferencesColor: 12,
-      backup: 12,
-      preferencesAdvanced: 12,
-      buyGlidera: 12,
-      sellGlidera: 12,
-      preferencesGlidera: 12,
-      about: 12,
-      delete: 13,
-      preferencesLanguage: 12,
-      preferencesUnit: 12,
-      preferencesFee: 12,
-      preferencesAltCurrency: 12,
-      preferencesBwsUrl: 12,
-      preferencesAlias: 12,
-      preferencesEmail: 12,
-      export: 13,
-      logs: 13,
-      information: 13,
-      translators: 13,
-      disclaimer: 13,
-      add: 11,
-      create: 12,
-      join: 12,
-      import: 12,
-      importLegacy: 13
-    };
-
-
-    var cachedTransitionState, cachedBackPanel;
-
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
 
       if (!profileService.profile && toState.needProfile) {
@@ -565,110 +526,7 @@ angular
         event.preventDefault();
       } 
 
-      /*
+      if (!animationService.transitionAnimated(fromState, toState)) {
-       * --------------------
-       */
-
-      function cleanUpLater(e, e2) {
-        var cleanedUp = false,
-          timeoutID;
-        var cleanUp = function() {
-          if (cleanedUp) return;
-          cleanedUp = true;
-          e2.parentNode.removeChild(e2);
-          e2.innerHTML = "";
-          e.className = '';
-          cachedBackPanel = null;
-          cachedTransitionState = '';
-          if (timeoutID) {
-            timeoutID = null;
-            window.clearTimeout(timeoutID);
-          }
-        };
-        e.addEventListener("animationend", cleanUp, true);
-        e2.addEventListener("animationend", cleanUp, true);
-        e.addEventListener("webkitAnimationEnd", cleanUp, true);
-        e2.addEventListener("webkitAnimationEnd", cleanUp, true);
-        timeoutID = setTimeout(cleanUp, 500);
-      };
-
-      function animateTransition(fromState, toState, event) {
-
-        if (isaosp)
-          return true;
-
-        // Animation in progress?
-        var x = document.getElementById('mainSectionDup');
-        if (x && !cachedTransitionState) {
-          console.log('Anim in progress');
-          return true;
-        }
-
-        var fromName = fromState.name;
-        var toName = toState.name;
-        if (!fromName || !toName)
-          return true;
-
-        var fromWeight = pageWeight[fromName];
-        var toWeight = pageWeight[toName];
-
-
-        var entering = null,
-          leaving = null;
-
-        // Horizontal Slide Animation?
-        if (fromWeight && toWeight) {
-          if (fromWeight > toWeight) {
-            leaving = 'CslideOutRight';
-          } else {
-            entering = 'CslideInRight';
-          }
-
-          // Vertical Slide Animation?
-        } else if (fromName && fromWeight >= 0 && toWeight >= 0) {
-          if (toWeight) {
-            entering = 'CslideInUp';
-          } else {
-            leaving = 'CslideOutDown';
-          }
-
-          // no Animation  ?
-        } else {
-          return true;
-        }
-
-        var e = document.getElementById('mainSection');
-
-
-        var desiredTransitionState = (fromName || '-') + ':' + (toName || '-');
-
-        if (desiredTransitionState == cachedTransitionState) {
-          e.className = entering || '';
-          cachedBackPanel.className = leaving || '';
-          cleanUpLater(e, cachedBackPanel);
-          //console.log('USing animation', cachedTransitionState);
-          return true;
-        } else {
-          var sc;
-          // Keep prefDiv scroll
-          var contentDiv = e.getElementsByClassName('content');
-          if (contentDiv && contentDiv[0])
-            sc = contentDiv[0].scrollTop;
-
-          cachedBackPanel = e.cloneNode(true);
-          cachedBackPanel.id = 'mainSectionDup';
-          var c = document.getElementById('sectionContainer');
-          c.appendChild(cachedBackPanel);
-
-          if (sc)
-            cachedBackPanel.getElementsByClassName('content')[0].scrollTop = sc;
-
-          cachedTransitionState = desiredTransitionState;
-          return false;
-        }
-      }
-
-      if (!animateTransition(fromState, toState)) {
         event.preventDefault();
         // Time for the backpane to render
         setTimeout(function() {

src/js/services/animationService.js

@@ -0,0 +1,152 @@
+'use strict';
+
+angular.module('copayApp.services').factory('animationService', function(isCordova) {
+  var root = {};
+
+  var cachedTransitionState, cachedBackPanel;
+
+  // DISABLE ANIMATION ON DESKTOP
+  root.modalAnimated = {
+    slideUp : isCordova ? 'full animated slideInUp' : 'full',
+    slideRight : isCordova ? 'full animated slideInRight' : 'full',
+    slideOutDown : isCordova ? 'slideOutDown' : 'hideModal',
+    slideOutRight : isCordova ? 'slideOutRight' : 'hideModal',
+  };
+
+  var pageWeight = {
+    walletHome: 0,
+    copayers: -1,
+    cordova: -1,
+    payment: -1,
+    uriglidera: -1,
+
+    preferences: 11,
+    glidera: 11,
+    preferencesColor: 12,
+    backup: 12,
+    preferencesAdvanced: 12,
+    buyGlidera: 12,
+    sellGlidera: 12,
+    preferencesGlidera: 12,
+    about: 12,
+    delete: 13,
+    preferencesLanguage: 12,
+    preferencesUnit: 12,
+    preferencesFee: 12,
+    preferencesAltCurrency: 12,
+    preferencesBwsUrl: 12,
+    preferencesAlias: 12,
+    preferencesEmail: 12,
+    export: 13,
+    logs: 13,
+    information: 13,
+    translators: 13,
+    disclaimer: 13,
+    add: 11,
+    create: 12,
+    join: 12,
+    import: 12,
+    importLegacy: 13
+  };
+
+  function cleanUpLater(e, e2) {
+    var cleanedUp = false, timeoutID;
+    var cleanUp = function() {
+      if (cleanedUp) return;
+      cleanedUp = true;
+      e2.parentNode.removeChild(e2);
+      e2.innerHTML = "";
+      e.className = '';
+      cachedBackPanel = null;
+      cachedTransitionState = '';
+      if (timeoutID) {
+        timeoutID = null;
+        window.clearTimeout(timeoutID);
+      }
+    };
+    e.addEventListener("animationend", cleanUp, true);
+    e2.addEventListener("animationend", cleanUp, true);
+    e.addEventListener("webkitAnimationEnd", cleanUp, true);
+    e2.addEventListener("webkitAnimationEnd", cleanUp, true);
+    timeoutID = setTimeout(cleanUp, 500);
+  };
+
+  root.transitionAnimated = function (fromState, toState, event) {
+
+    if (isaosp)
+      return true;
+
+    // Animation in progress?
+    var x = document.getElementById('mainSectionDup');
+    if (x && !cachedTransitionState) {
+      console.log('Anim in progress');
+      return true;
+    }
+
+    var fromName = fromState.name;
+    var toName = toState.name;
+    if (!fromName || !toName)
+      return true;
+
+    var fromWeight = pageWeight[fromName];
+    var toWeight = pageWeight[toName];
+
+
+    var entering = null,
+        leaving = null;
+
+    // Horizontal Slide Animation?
+    if (isCordova && fromWeight && toWeight) {
+      if (fromWeight > toWeight) {
+        leaving = 'CslideOutRight';
+      } else {
+        entering = 'CslideInRight';
+      }
+
+      // Vertical Slide Animation?
+    } else if (isCordova && fromName && fromWeight >= 0 && toWeight >= 0) {
+      if (toWeight) {
+        entering = 'CslideInUp';
+        
+      } else {
+        leaving = 'CslideOutDown';
+      }
+
+      // no Animation  ?
+    } else {
+      return true;
+    }
+
+    var e = document.getElementById('mainSection');
+
+
+    var desiredTransitionState = (fromName || '-') + ':' + (toName || '-');
+
+    if (desiredTransitionState == cachedTransitionState) {
+      e.className = entering || '';
+      cachedBackPanel.className = leaving || '';
+      cleanUpLater(e, cachedBackPanel);
+      //console.log('USing animation', cachedTransitionState);
+      return true;
+    } else {
+      var sc;
+      // Keep prefDiv scroll
+      var contentDiv = e.getElementsByClassName('content');
+      if (contentDiv && contentDiv[0])
+        sc = contentDiv[0].scrollTop;
+
+      cachedBackPanel = e.cloneNode(true);
+      cachedBackPanel.id = 'mainSectionDup';
+      var c = document.getElementById('sectionContainer');
+      c.appendChild(cachedBackPanel);
+
+      if (sc)
+        cachedBackPanel.getElementsByClassName('content')[0].scrollTop = sc;
+
+      cachedTransitionState = desiredTransitionState;
+      return false;
+    }
+  }
+
+  return root;
+});

src/js/services/txStatus.js

@@ -51,13 +51,13 @@ angular.module('copayApp.services').factory('txStatus', function($modal, lodash,
     };
     var modalInstance = $modal.open({
       templateUrl: root._templateUrl(type, txp),
-      windowClass: 'full popup-tx-status closeModalAnimation',
+      windowClass: 'popup-tx-status full',
       controller: ModalInstanceCtrl,
     });
 
     modalInstance.result.finally(function() {
       var m = angular.element(document.getElementsByClassName('reveal-modal'));
-      m.addClass('animated fadeOutUp');
+      m.addClass('hideModal');
     });
   };