fix(menu): swiping menu distinguishes between opening and closing direction

Closes #5511

Author: manucorporat

src/components/menu/menu-gestures.ts

@@ -77,21 +77,34 @@ export class MenuContentGesture extends SlideEdgeGesture {
     let z = (this.menu.side === 'right' ? slide.min : slide.max);
     let stepValue = (slide.distance / z);
     console.debug('menu gesture, onSlide', this.menu.side, 'distance', slide.distance, 'min', slide.min, 'max', slide.max, 'z', z, 'stepValue', stepValue);
-
+    ev.srcEvent.preventDefault();
+    ev.preventDefault();
     this.menu.swipeProgress(stepValue);
   }
 
   onSlideEnd(slide: SlideData, ev: any) {
     let z = (this.menu.side === 'right' ? slide.min : slide.max);
-
-    let shouldComplete = (Math.abs(ev.velocityX) > 0.2) ||
-                         (Math.abs(slide.delta) > Math.abs(z) * 0.5);
-
     let currentStepValue = (slide.distance / z);
 
-    console.debug('menu gesture, onSlide', this.menu.side, 'distance', slide.distance, 'delta', slide.delta, 'velocityX', ev.velocityX, 'min', slide.min, 'max', slide.max, 'shouldComplete', shouldComplete, 'currentStepValue', currentStepValue);
-
-    this.menu.swipeEnd(shouldComplete, currentStepValue);
+    z = Math.abs(z * 0.5);
+    let shouldCompleteRight = (ev.velocityX >= 0)
+      && (ev.velocityX > 0.2 || slide.delta > z);
+    
+    let shouldCompleteLeft = (ev.velocityX <= 0)
+      && (ev.velocityX < -0.2 || slide.delta < -z);
+    
+    console.debug(
+      'menu gesture, onSlide', this.menu.side,
+      'distance', slide.distance,
+      'delta', slide.delta,
+      'velocityX', ev.velocityX,
+      'min', slide.min,
+      'max', slide.max,
+      'shouldCompleteLeft', shouldCompleteLeft,
+      'shouldCompleteRight', shouldCompleteRight,
+      'currentStepValue', currentStepValue);
+
+    this.menu.swipeEnd(shouldCompleteLeft, shouldCompleteRight, currentStepValue);
   }
 
   getElementStartPos(slide: SlideData, ev: any) {

src/components/menu/menu.ts

@@ -459,11 +459,20 @@ export class Menu extends Ion {
   /**
    * @private
    */
-  swipeEnd(shouldComplete: boolean, currentStepValue: number) {
+  swipeEnd(shouldCompleteLeft: boolean, shouldCompleteRight: boolean, stepValue: number) {
     // user has finished dragging the menu
     if (this._isEnabled && this._isSwipeEnabled) {
       this._prevent();
-      this._getType().setProgressEnd(shouldComplete, currentStepValue, (isOpen: boolean) => {
+
+      let opening = !this.isOpen;
+      let shouldComplete = false;
+      if (opening) {
+        shouldComplete = (this.side === 'right') ? shouldCompleteLeft : shouldCompleteRight;
+      } else {
+        shouldComplete = (this.side === 'right') ? shouldCompleteRight : shouldCompleteLeft;
+      }
+
+      this._getType().setProgressEnd(shouldComplete, stepValue, (isOpen: boolean) => {
         console.debug('menu, swipeEnd', this.side);
         this._after(isOpen);
       });