fix(menu): fix swipe to go back and left menu conflict

Closes #5575

Author: adamdbradley

src/components/menu/menu-controller.ts

@@ -156,6 +156,12 @@ export class MenuController {
     return Promise.resolve(false);
   }
 
+  tempDisable(temporarilyDisable: boolean) {
+    this._menus.forEach(menu => {
+      menu.tempDisable(temporarilyDisable);
+    });
+  }
+
   /**
    * Toggle the menu. If it's closed, it will open, and if opened, it
    * will close.

src/components/menu/menu.ts

@@ -198,6 +198,7 @@ export class Menu extends Ion {
   private _isSwipeEnabled: boolean = true;
   private _isPers: boolean = false;
   private _init: boolean = false;
+  private _prevEnabled: boolean;
 
   /**
    * @private
@@ -419,10 +420,10 @@ export class Menu extends Ion {
    */
   swipeStart() {
     // user started swiping the menu open/close
-    if (this._isPrevented() || !this._isEnabled || !this._isSwipeEnabled) return;
-
-    this._before();
-    this._getType().setProgressStart(this.isOpen);
+    if (this._isEnabled && this._isSwipeEnabled && !this._isPrevented()) {
+      this._before();
+      this._getType().setProgressStart(this.isOpen);
+    }
   }
 
   /**
@@ -451,9 +452,6 @@ export class Menu extends Ion {
     }
   }
 
-  /**
-   * @private
-   */
   private _before() {
     // this places the menu into the correct location before it animates in
     // this css class doesn't actually kick off any animations
@@ -466,9 +464,6 @@ export class Menu extends Ion {
     }
   }
 
-  /**
-   * @private
-   */
   private _after(isOpen: boolean) {
     // keep opening/closing the menu disabled for a touch more yet
     // only add listeners/css if it's enabled and isOpen
@@ -495,15 +490,24 @@ export class Menu extends Ion {
   /**
    * @private
    */
+  tempDisable(temporarilyDisable: boolean) {
+    if (temporarilyDisable) {
+      this._prevEnabled = this._isEnabled;
+      this._getType().setProgessStep(0);
+      this.enable(false);
+
+    } else {
+      this.enable(this._prevEnabled);
+      this._after(false);
+    }
+  }
+
   private _prevent() {
     // used to prevent unwanted opening/closing after swiping open/close
     // or swiping open the menu while pressing down on the MenuToggle
     this._preventTime = Date.now() + 20;
   }
 
-  /**
-   * @private
-   */
   private _isPrevented() {
     return this._preventTime > Date.now();
   }

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

@@ -1,4 +1,5 @@
-import {App, IonicApp, MenuController, Page, NavController, Alert} from '../../../../../src';
+import {ViewChild} from '@angular/core';
+import {App, IonicApp, MenuController, Page, NavController, Alert, Nav} from '../../../../../src';
 
 
 @Page({
@@ -16,6 +17,10 @@ class Page1 {
     });
     this.nav.present(alert);
   }
+
+  goToPage2() {
+    this.nav.push(Page2);
+  }
 }
 
 
@@ -40,6 +45,7 @@ class E2EApp {
   rootPage;
   changeDetectionCount: number = 0;
   pages: Array<{title: string, component: any}>;
+  @ViewChild(Nav) nav: Nav;
 
   constructor(private app: IonicApp, private menu: MenuController) {
     this.rootPage = Page1;
@@ -54,8 +60,7 @@ class E2EApp {
   openPage(page) {
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario
-    let nav = this.app.getComponent('nav');
-    nav.setRoot(page.component).then(() => {
+    this.nav.setRoot(page.component).then(() => {
       // wait for the root page to be completely loaded
       // then close the menu
       this.menu.close();

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

@@ -138,6 +138,6 @@
 
 </ion-menu>
 
-<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
 
 <div [hidden]="isChangeDetecting()"></div>

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

@@ -51,6 +51,10 @@ <h3>Page 1</h3>
     <button (click)="presentAlert()">Open alert</button>
   </p>
 
+  <p>
+    <button (click)="goToPage2()">Go to Page 2</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>

src/components/nav/nav-controller.ts

@@ -6,6 +6,7 @@ import {IonicApp} from '../app/app';
 import {Keyboard} from '../../util/keyboard';
 import {NavParams} from './nav-params';
 import {pascalCaseToDashCase, isBlank} from '../../util/util';
+import {MenuController} from '../menu/menu-controller';
 import {NavPortal} from './nav-portal';
 import {SwipeBackGesture} from './swipe-back';
 import {Transition} from '../../transitions/transition';
@@ -1555,7 +1556,8 @@ export class NavController extends Ion {
           edge: 'left',
           threshold: this._sbThreshold
         };
-        this._sbGesture = new SwipeBackGesture(this.getNativeElement(), opts, this);
+        let menuCtrl = this._app.getAppInjector().get(MenuController);
+        this._sbGesture = new SwipeBackGesture(this.getNativeElement(), opts, this, menuCtrl);
       }
 
       if (this.canSwipeBack()) {

src/components/nav/swipe-back.ts

@@ -1,3 +1,4 @@
+import {MenuController} from '../menu/menu-controller';
 import {NavController} from './nav-controller';
 import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture';
 import {SlideData} from '../../gestures/slide-gesture';
@@ -9,7 +10,8 @@ export class SwipeBackGesture extends SlideEdgeGesture {
   constructor(
     element: HTMLElement,
     options: any,
-    private _nav: NavController
+    private _nav: NavController,
+    private _menuCtrl: MenuController
   ) {
     super(element, assign({
       direction: 'x',
@@ -33,9 +35,11 @@ export class SwipeBackGesture extends SlideEdgeGesture {
     return false;
   }
 
-  onSlideBeforeStart() {
-    console.debug('swipeBack, onSlideBeforeStart');
+  onSlideBeforeStart(slideData: SlideData, ev: any) {
+    console.debug('swipeBack, onSlideBeforeStart', ev.srcEvent.type);
     this._nav.swipeBackStart();
+
+    this._menuCtrl.tempDisable(true);
   }
 
   onSlide(slide: SlideData) {
@@ -52,6 +56,8 @@ export class SwipeBackGesture extends SlideEdgeGesture {
     console.debug('swipeBack, onSlideEnd, shouldComplete', shouldComplete, 'currentStepValue', currentStepValue);
 
     this._nav.swipeBackEnd(shouldComplete, currentStepValue);
+
+    this._menuCtrl.tempDisable(false);
   }
 
 }