Merge pull request #2658 from matiu/feat/swipe

add custom swipe

bower.json

@@ -10,7 +10,6 @@
     "angular": "~1.3.13",
     "angular-foundation": "*",
     "angular-animate": "~1.3.13",
-    "angular-touch": "~1.3.0",
     "angular-qrcode": "~5.1.0",
     "angular-gettext": "~2.0.5",
     "animate.css": "~3.2.0",

public/views/includes/topbar.html

@@ -1,6 +1,6 @@
 <nav ng-controller="topbarController as topbar" class="tab-bar">
   <section class="left-small">
-    <a class="p10 ng-animate-disabled" ng-show="!goBackToState && !closeToHome  && !index.noFocusedWallet" 
+    <a id="hamburger" class="p10 ng-animate-disabled" ng-show="!goBackToState && !closeToHome  && !index.noFocusedWallet" 
       ng-click="index.openMenu()"><i class="fi-list size-24"></i>
     </a>
     <a ng-show="goBackToState" class="ng-animate-disabled"

src/css/mobile.css

@@ -39,9 +39,11 @@ body, div, .row {
 /* END disabling text selection */
 
 .inner-wrap {
-  -webkit-transition-duration: 250ms;
-  transition-duration: 250ms;
-}
+   -webkit-transition-duration: 200ms;
+   transition-duration: 200ms; 
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+} 
 
 body {
   overflow: hidden;

src/js/app.js

@@ -7,7 +7,6 @@ var modules = [
   'monospaced.qrcode',
   'gettext',
   'ngAnimate',
-  'ngTouch',
   'ngLodash',
   'uiSwitch',
   'bwcModule',

src/js/controllers/index.js

@@ -112,7 +112,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
 
     if (! document.getElementById('menu-' + tab) && ++tries<5) {
       return $timeout(function() {
-        self.setTab(tab,reset);
+        self.setTab(tab,reset, tries);
       }, 300);
     }
 

src/js/controllers/walletHome.js

@@ -379,7 +379,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
 
     // on touchdown elements
     $log.debug('Binding touchstart elements...');
-    ['menu-walletHome', 'menu-send', 'menu-receive', 'menu-history'].forEach(function(id) {
+    ['hamburger', 'menu-walletHome', 'menu-send', 'menu-receive', 'menu-history'].forEach(function(id) {
       var e = document.getElementById(id);
       if (e) e.addEventListener('touchstart', function() {
         angular.element(e).triggerHandler('click');

src/js/directives/directives.js

@@ -15,10 +15,7 @@ function selectText(element) {
 
   }
 }
-
-
 angular.module('copayApp.directives')
-
 .directive('validAddress', ['$rootScope', 'bitcore', 'profileService',
     function($rootScope, bitcore, profileService) {
       return {

src/js/directives/ngSwipe.js

@@ -0,0 +1,67 @@
+'use strict';
+
+/*  
+ * This is a modification from https://github.com/angular/angular.js/blob/master/src/ngTouch/swipe.js
+ */
+
+
+function makeSwipeDirective(directiveName, direction, eventName) {
+  angular.module('copayApp.directives')
+    .directive(directiveName, ['$parse', '$swipe',
+      function($parse, $swipe) {
+        // The maximum vertical delta for a swipe should be less than 75px.
+        var MAX_VERTICAL_DISTANCE = 75;
+        // Vertical distance should not be more than a fraction of the horizontal distance.
+        var MAX_VERTICAL_RATIO = 0.3;
+        // At least a 30px lateral motion is necessary for a swipe.
+        var MIN_HORIZONTAL_DISTANCE = 25;
+
+        return function(scope, element, attr) {
+          var swipeHandler = $parse(attr[directiveName]);
+
+          var startCoords, valid;
+
+          function validSwipe(coords) {
+            // Check that it's within the coordinates.
+            // Absolute vertical distance must be within tolerances.
+            // Horizontal distance, we take the current X - the starting X.
+            // This is negative for leftward swipes and positive for rightward swipes.
+            // After multiplying by the direction (-1 for left, +1 for right), legal swipes
+            // (ie. same direction as the directive wants) will have a positive delta and
+            // illegal ones a negative delta.
+            // Therefore this delta must be positive, and larger than the minimum.
+            if (!startCoords) return false;
+            var deltaY = Math.abs(coords.y - startCoords.y);
+            var deltaX = (coords.x - startCoords.x) * direction;
+            return valid && // Short circuit for already-invalidated swipes.
+              deltaY < MAX_VERTICAL_DISTANCE &&
+              deltaX > 0 &&
+              deltaX > MIN_HORIZONTAL_DISTANCE &&
+              deltaY / deltaX < MAX_VERTICAL_RATIO;
+          }
+
+          var pointerTypes = ['touch'];
+          $swipe.bind(element, {
+            'start': function(coords, event) {
+              startCoords = coords;
+              valid = true;
+            },
+            'move': function(coords, event) {
+              if (validSwipe(coords)) {
+                scope.$apply(function() {
+                  element.triggerHandler(eventName);
+                  swipeHandler(scope, {
+                    $event: event
+                  });
+                });
+              }
+            }
+          }, pointerTypes);
+        };
+      }
+    ]);
+}
+
+// Left is negative X-coordinate, right is positive.
+makeSwipeDirective('ngSwipeLeft', -1, 'swipeleft');
+makeSwipeDirective('ngSwipeRight', 1, 'swiperight');

src/js/init.js

@@ -18,8 +18,6 @@ angular.element(document).ready(function() {
       }, false);
 
       document.addEventListener('resume', function() {
-
-console.log('[init.js.21] RESUME'); //TODO
         if (!window.ignoreMobilePause) {
           window.location = '#/cordova/resume';
         }

src/js/services/go.js

@@ -7,23 +7,20 @@ angular.module('copayApp.services').factory('go', function($window, $rootScope,
     if (typeof document === 'undefined')
       return;
 
-    // hack to hide sidebars and use ng-click (no href=)
-    var win = angular.element($window);
-    var elem = angular.element(document.querySelector('#off-canvas-wrap'))
-    elem.removeClass('move-right');
-    elem.removeClass('move-left');
+    var elem = document.getElementById('off-canvas-wrap');
+    elem.className = 'off-canvas-wrap';
   };
 
   var toggleSidebar = function(invert) {
     if (typeof document === 'undefined')
       return;
 
-    var elem = angular.element(document.querySelector('#off-canvas-wrap'));
-    var leftbarActive = angular.element(document.getElementsByClassName('move-right')).length;
+    var elem = document.getElementById('off-canvas-wrap');
+    var leftbarActive = elem.className.indexOf('move-right') >= 0;
 
     if (invert) {
       if (profileService.profile && !$rootScope.hideNavigation) {
-        elem.addClass('move-right');
+        elem.className = 'off-canvas-wrap move-right';
       }
     } else {
       if (leftbarActive) {

src/js/services/swipe.js

@@ -0,0 +1,150 @@
+'use strict';
+
+/*  
+ * This is a modification from https://github.com/angular/angular.js/blob/master/src/ngTouch/swipe.js
+ */
+
+
+angular.module('copayApp.services')
+  .factory('$swipe', [
+  function() {
+    // The total distance in any direction before we make the call on swipe vs. scroll.
+    var MOVE_BUFFER_RADIUS = 10;
+
+    var POINTER_EVENTS = {
+      'touch': {
+        start: 'touchstart',
+        move: 'touchmove',
+        end: 'touchend',
+        cancel: 'touchcancel'
+      }
+    };
+
+    function getCoordinates(event) {
+      var originalEvent = event.originalEvent || event;
+      var touches = originalEvent.touches && originalEvent.touches.length ? originalEvent.touches : [originalEvent];
+      var e = (originalEvent.changedTouches && originalEvent.changedTouches[0]) || touches[0];
+
+      return {
+        x: e.clientX,
+        y: e.clientY
+      };
+    }
+
+    function getEvents(pointerTypes, eventType) {
+      var res = [];
+      angular.forEach(pointerTypes, function(pointerType) {
+        var eventName = POINTER_EVENTS[pointerType][eventType];
+        if (eventName) {
+          res.push(eventName);
+        }
+      });
+      return res.join(' ');
+    }
+
+    return {
+      /**
+       * @ngdoc method
+       * @name $swipe#bind
+       *
+       * @description
+       * The main method of `$swipe`. It takes an element to be watched for swipe motions, and an
+       * object containing event handlers.
+       * The pointer types that should be used can be specified via the optional
+       * third argument, which is an array of strings `'mouse'` and `'touch'`. By default,
+       * `$swipe` will listen for `mouse` and `touch` events.
+       *
+       * The four events are `start`, `move`, `end`, and `cancel`. `start`, `move`, and `end`
+       * receive as a parameter a coordinates object of the form `{ x: 150, y: 310 }`.
+       *
+       * `start` is called on either `mousedown` or `touchstart`. After this event, `$swipe` is
+       * watching for `touchmove` or `mousemove` events. These events are ignored until the total
+       * distance moved in either dimension exceeds a small threshold.
+       *
+       * Once this threshold is exceeded, either the horizontal or vertical delta is greater.
+       * - If the horizontal distance is greater, this is a swipe and `move` and `end` events follow.
+       * - If the vertical distance is greater, this is a scroll, and we let the browser take over.
+       *   A `cancel` event is sent.
+       *
+       * `move` is called on `mousemove` and `touchmove` after the above logic has determined that
+       * a swipe is in progress.
+       *
+       * `end` is called when a swipe is successfully completed with a `touchend` or `mouseup`.
+       *
+       * `cancel` is called either on a `touchcancel` from the browser, or when we begin scrolling
+       * as described above.
+       *
+       */
+      bind: function(element, eventHandlers, pointerTypes) {
+        // Absolute total movement, used to control swipe vs. scroll.
+        var totalX, totalY;
+        // Coordinates of the start position.
+        var startCoords;
+        // Last event's position.
+        var lastPos;
+        // Whether a swipe is active.
+        var active = false;
+
+        pointerTypes = pointerTypes || ['touch'];
+        element.on(getEvents(pointerTypes, 'start'), function(event) {
+          startCoords = getCoordinates(event);
+          active = true;
+          totalX = 0;
+          totalY = 0;
+          lastPos = startCoords;
+          eventHandlers['start'] && eventHandlers['start'](startCoords, event);
+        });
+        var events = getEvents(pointerTypes, 'cancel');
+        if (events) {
+          element.on(events, function(event) {
+            active = false;
+            eventHandlers['cancel'] && eventHandlers['cancel'](event);
+          });
+        }
+
+        element.on(getEvents(pointerTypes, 'move'), function(event) {
+          if (!active) return;
+
+          // Android will send a touchcancel if it thinks we're starting to scroll.
+          // So when the total distance (+ or - or both) exceeds 10px in either direction,
+          // we either:
+          // - On totalX > totalY, we send preventDefault() and treat this as a swipe.
+          // - On totalY > totalX, we let the browser handle it as a scroll.
+
+          if (!startCoords) return;
+          var coords = getCoordinates(event);
+
+          totalX += Math.abs(coords.x - lastPos.x);
+          totalY += Math.abs(coords.y - lastPos.y);
+
+          lastPos = coords;
+
+          if (totalX < MOVE_BUFFER_RADIUS && totalY < MOVE_BUFFER_RADIUS) {
+            return;
+          }
+
+          // One of totalX or totalY has exceeded the buffer, so decide on swipe vs. scroll.
+          if (totalY > totalX) {
+            // Allow native scrolling to take over.
+            active = false;
+            eventHandlers['cancel'] && eventHandlers['cancel'](event);
+            return;
+          } else {
+
+            // Prevent the browser from scrolling.
+            event.preventDefault();
+            eventHandlers['move'] && eventHandlers['move'](coords, event);
+          }
+        });
+
+        element.on(getEvents(pointerTypes, 'end'), function(event) {
+          if (!active) return;
+          active = false;
+          eventHandlers['end'] && eventHandlers['end'](getCoordinates(event), event);
+        });
+      }
+    };
+  }
+]);
+
+