feat(sidenav): consider swipe acceleration of 10px per drag (normal d…

…rag is 1-2px) -> smooth swipe acceleration.
angular · Dec 26, 2015 · fd75cd9 · fd75cd9
1 parent 2955260
commit fd75cd9
Showing 1 changed file with 23 additions and 7 deletions.
diff --git a/src/components/sidenav/sidenav.js b/src/components/sidenav/sidenav.js
@@ -328,17 +328,22 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
 
     function enableDragging() {
       $mdGesture.register(element, 'drag', { horizontal: true });
-      element.on('$md.dragstart', onDragStart)
+
+      element
+        .on('$md.dragstart', onDragStart)
         .on('$md.drag', onDrag)
         .on('$md.dragend', onDragEnd);
 
       var style = getComputedStyle(element[0]);
       var sidenavWidth = parseInt(style.width);
       var isRightSidenav = element.hasClass('md-sidenav-right');
+      var accelerationBound = 10;
 
       var dragCancelled = false;
       var dragPercentage;
       var lastOpenState;
+      var lastDistance = 0;
+      var isQuickDrag = false;
 
       function onDragStart() {
         if (element.hasClass('md-locked-open')) {
@@ -352,15 +357,22 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
       function onDrag(ev) {
         if (dragCancelled) return;
 
-        // If the sidenav is aligned left, the sidenav is opened at zero x-axis
-        var startOffset = isRightSidenav ? 100 : 0;
+        if (!isQuickDrag) {
+          if (isRightSidenav) isQuickDrag = lastDistance - ev.pointer.distanceX <= -accelerationBound;
+          else isQuickDrag = lastDistance - ev.pointer.distanceX >= accelerationBound;
+        } else {
+          if (isRightSidenav && lastDistance > ev.pointer.distanceX) isQuickDrag = false;
+          else if (!isRightSidenav && lastDistance < ev.pointer.distanceX) isQuickDrag = false;
+        }
 
-        dragPercentage = startOffset - Math.round((ev.pointer.distanceX / sidenavWidth) * 100);
+        dragPercentage = Math.round((ev.pointer.distanceX / sidenavWidth) * 100);
+        if (!isRightSidenav) dragPercentage = 0 - dragPercentage;
 
         if (dragPercentage > 100) dragPercentage = 100;
         else if (dragPercentage < 0) dragPercentage = 0;
 
-        element.css($mdConstant.CSS.TRANSFORM, 'translate3d(-' + dragPercentage + '%,0,0)');
+        element.css($mdConstant.CSS.TRANSFORM, 'translate3d(-' + (isRightSidenav ? 100 - dragPercentage : dragPercentage) + '%,0,0)');
+        lastDistance = ev.pointer.distanceX;
       }
 
       function onDragEnd() {
@@ -369,9 +381,10 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
           return;
         }
 
-        var remainingPercentage = dragPercentage > 50 ? 100 - dragPercentage : dragPercentage;
+        var remainingPercentage = 100 - dragPercentage;
         var animationTime = 4 * remainingPercentage;
-        var isOpen = dragPercentage > 50;
+        var isOpen = dragPercentage > 50 || isQuickDrag;
+        if (isRightSidenav) isOpen = !isOpen;
 
         element.css($mdConstant.CSS.TRANSITION_DURATION, animationTime + "ms");
 
@@ -381,6 +394,9 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
           element.css($mdConstant.CSS.TRANSFORM, 'translate3d(-0%,0,0)');
         }
 
+        // Reset drag
+        lastDistance = 0;
+        isQuickDrag = false;
         $timeout(onAnimationDone, animationTime, true, (isRightSidenav ? isOpen : !isOpen));
       }