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); } }