From 72699dbbb425d8477ec1342d0f74ee96e390f08a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 2 Feb 2016 16:41:03 -0600
Subject: [PATCH] fix(menu): fix scrolling page w/ side menus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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      | 33 ++++++-
 ionic/components/menu/menu.ts               |  2 +-
 ionic/components/menu/test/basic/index.ts   |  4 +-
 ionic/components/menu/test/basic/main.html  | 99 ++++++++++++++++++++-
 ionic/components/menu/test/basic/page1.html |  2 +
 5 files changed, 132 insertions(+), 8 deletions(-)

diff --git a/ionic/components/menu/menu-gestures.ts b/ionic/components/menu/menu-gestures.ts
index c82ffb5959..87dc517c70 100644
--- a/ionic/components/menu/menu-gestures.ts
+++ b/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));
-    return this.menu.isOpen && this.menu.isEnabled && validAngle ? true : super.canStart(ev);
+    let menu = this.menu;
+
+    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
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index 406f9eeefe..16836ff46e 100644
--- a/ionic/components/menu/menu.ts
+++ b/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();
     }
 
diff --git a/ionic/components/menu/test/basic/index.ts b/ionic/components/menu/test/basic/index.ts
index a23df1a89c..c9c922e607 100644
--- a/ionic/components/menu/test/basic/index.ts
+++ b/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;
   }
 }
diff --git a/ionic/components/menu/test/basic/main.html b/ionic/components/menu/test/basic/main.html
index 81ac00582e..ee03015948 100644
--- a/ionic/components/menu/test/basic/main.html
+++ b/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>
\ No newline at end of file
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index 9a75a6c92e..0d1b51c54b 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/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>