From f18a62485dc127d02c77bf51f9f86fb6941d1a9d Mon Sep 17 00:00:00 2001
From: Adam Bradley
Date: Thu, 19 May 2016 23:11:36 -0500
Subject: [PATCH] fix(menu): fix swipe to go back and left menu conflict
Closes #5575
---
src/components/menu/menu-controller.ts | 6 +++++
src/components/menu/menu.ts | 30 +++++++++++++----------
src/components/menu/test/basic/index.ts | 11 ++++++---
src/components/menu/test/basic/main.html | 2 +-
src/components/menu/test/basic/page1.html | 4 +++
src/components/nav/nav-controller.ts | 4 ++-
src/components/nav/swipe-back.ts | 12 ++++++---
7 files changed, 48 insertions(+), 21 deletions(-)
diff --git a/src/components/menu/menu-controller.ts b/src/components/menu/menu-controller.ts
index 783a9f10395..d6b71147097 100644
--- a/src/components/menu/menu-controller.ts
+++ b/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.
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 02868d161e7..5c31243366c 100644
--- a/src/components/menu/menu.ts
+++ b/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();
}
diff --git a/src/components/menu/test/basic/index.ts b/src/components/menu/test/basic/index.ts
index 50e14b4d3ce..3e5830c3108 100644
--- a/src/components/menu/test/basic/index.ts
+++ b/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();
diff --git a/src/components/menu/test/basic/main.html b/src/components/menu/test/basic/main.html
index b4f7b0a7111..d607c74b63e 100644
--- a/src/components/menu/test/basic/main.html
+++ b/src/components/menu/test/basic/main.html
@@ -138,6 +138,6 @@
-
+
\ No newline at end of file
diff --git a/src/components/menu/test/basic/page1.html b/src/components/menu/test/basic/page1.html
index 6cea0dd7e5d..636809898aa 100644
--- a/src/components/menu/test/basic/page1.html
+++ b/src/components/menu/test/basic/page1.html
@@ -51,6 +51,10 @@ Page 1
+
+
+
+
diff --git a/src/components/nav/nav-controller.ts b/src/components/nav/nav-controller.ts
index 43292b089ab..400b2633665 100644
--- a/src/components/nav/nav-controller.ts
+++ b/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()) {
diff --git a/src/components/nav/swipe-back.ts b/src/components/nav/swipe-back.ts
index ed26de85b45..36f45a5740c 100644
--- a/src/components/nav/swipe-back.ts
+++ b/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);
}
}