fix(menu): fix scrolling page w/ side menus

Improved which angles should allow the side menu to open, depending if
it’s a left or right menu. Also check if the distance of the drag is
longer than a side menu would get. For example, scrolling vertically
for a long ways would have a long distance, but triggering a side menu
to open would be a short distance.

Also ensure that a side menu can always be closed incase something goes
wrong.

Closes #5272

ionic/components/menu/menu-gestures.ts

@@ -3,7 +3,6 @@ import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture';
 
 import {assign} from '../../util/util';
 
-
 export class MenuContentGesture extends SlideEdgeGesture {
 
   constructor(public menu: Menu, targetEl: Element, options = {}) {
@@ -19,8 +18,36 @@ export class MenuContentGesture extends SlideEdgeGesture {
   }
 
   canStart(ev) {
-    let validAngle = ((-35 <= ev.angle && ev.angle <= 35) || (180 >= ev.angle && ev.angle >= 145) || (-180 <= ev.angle && ev.angle <= -145));
+    let menu = this.menu;
-    return this.menu.isOpen && this.menu.isEnabled && validAngle ? true : super.canStart(ev);
+
+    console.debug('menu canStart, id', menu.id, 'angle', ev.angle, 'distance', ev.distance);
+
+    if (!menu.isEnabled || !menu.isSwipeEnabled) {
+      console.debug('menu canStart, isEnabled', menu.isEnabled, 'isSwipeEnabled', menu.isSwipeEnabled, 'id', menu.id);
+      return false;
+    }
+
+    if (ev.distance > 50) {
+      // the distance is longer than you'd expect a side menu swipe to be
+      console.debug('menu canStart, distance too far', ev.distance, 'id', menu.id);
+      return false;
+    }
+
+    if (menu.side === 'left') {
+      // left side menu
+      if (ev.angle > -40 && ev.angle < 40) {
+        return super.canStart(ev);
+      }
+
+    } else if (menu.side === 'right') {
+      // right side menu
+      if ((ev.angle > 140 && ev.angle <= 180) || (ev.angle > -140 && ev.angle <= -180)) {
+        return super.canStart(ev);
+      }
+    }
+
+    // didn't pass the test, don't open this menu
+    return false;
   }
 
   // Set CSS, then wait one frame for it to apply before sliding starts

ionic/components/menu/menu.ts

@@ -282,7 +282,7 @@ export class Menu extends Ion {
   setOpen(shouldOpen) {
     // _isPrevented is used to prevent unwanted opening/closing after swiping open/close
     // or swiping open the menu while pressing down on the menuToggle button
-    if (shouldOpen === this.isOpen || this._isPrevented()) {
+    if ((shouldOpen && this.isOpen) || this._isPrevented()) {
       return Promise.resolve();
     }
 

ionic/components/menu/test/basic/index.ts

@@ -64,8 +64,8 @@ class E2EApp {
     console.log('onMenuOpening', ev);
   }
 
-  isHidden() {
+  isChangeDetecting() {
     console.log('Change detection', ++this.changeDetectionCount);
-    return false;
+    return true;
   }
 }

ionic/components/menu/test/basic/main.html

@@ -1,4 +1,4 @@
-<ion-menu [content]="content" id="leftMenu" side="left" (opening)="onMenuOpening($event)">
+<ion-menu [content]="content" id="leftMenu" side="left">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -12,7 +12,51 @@
         {{p.title}}
       </button>
 
-      <button ion-item menuClose="leftMenu" detail-none [hidden]="isHidden()">
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="leftMenu" detail-none>
         Close Menu
       </button>
 
@@ -40,9 +84,60 @@
         Close Menu
       </button>
 
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="rightMenu" detail-none>
+        Close Menu
+      </button>
+
     </ion-list>
+
   </ion-content>
 
 </ion-menu>
 
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
+
+<div [hidden]="isChangeDetecting()"></div>

ionic/components/menu/test/basic/page1.html

@@ -51,4 +51,6 @@
     <button (click)="presentAlert()">Open alert</button>
   </p>
 
+  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
 </ion-content>