From d3e9980f9c54beef6f029dec19ced0e5d16dcd2d Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sat, 31 Oct 2015 15:02:59 -0500 Subject: [PATCH] fix(menu): enabling/disabling --- ionic/components/menu/menu-gestures.ts | 2 +- ionic/components/menu/menu.ts | 87 +++++++++----------- ionic/components/menu/test/multiple/index.ts | 8 +- 3 files changed, 46 insertions(+), 51 deletions(-) diff --git a/ionic/components/menu/menu-gestures.ts b/ionic/components/menu/menu-gestures.ts index f2d20ed1f5..43196f05e5 100644 --- a/ionic/components/menu/menu-gestures.ts +++ b/ionic/components/menu/menu-gestures.ts @@ -17,7 +17,7 @@ class MenuContentGesture extends SlideEdgeGesture { } canStart(ev) { - return this.menu.isOpen ? true : super.canStart(ev); + return this.menu.isOpen && this.menu.isEnabled ? true : super.canStart(ev); } // 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 4fbd50fe4d..60ff6da28a 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -78,7 +78,7 @@ export class Menu extends Ion { this.opening = new EventEmitter('opening'); this.isOpen = false; - this._disableTime = 0; + this._preventTime = 0; this.isEnabled = true; } @@ -154,9 +154,9 @@ export class Menu extends Ion { * @return {Promise} TODO */ setOpen(shouldOpen) { - // _isDisabled is used to prevent unwanted opening/closing after swiping open/close + // _isPrevented is used to prevent unwanted opening/closing after swiping open/close // or swiping open the menu while pressing down on the menu-toggle button - if (shouldOpen === this.isOpen || this._isDisabled()) { + if (shouldOpen === this.isOpen || this._isPrevented()) { return Promise.resolve(); } @@ -169,7 +169,7 @@ export class Menu extends Ion { setProgressStart() { // user started swiping the menu open/close - if (this._isDisabled()) return; + if (this._isPrevented() || !this.isEnabled) return; this._before(); @@ -178,58 +178,66 @@ export class Menu extends Ion { setProgess(value) { // user actively dragging the menu - this._disable(); - this.app.setTransitioning(true); - this._type.setProgess(value); + if (this.isEnabled) { + this._prevent(); + this.app.setTransitioning(true); + this._type.setProgess(value); + } } setProgressEnd(shouldComplete) { // user has finished dragging the menu - this._disable(); - this.app.setTransitioning(true); - this._type.setProgressEnd(shouldComplete).then(isOpen => { - this._after(isOpen); - }); + if (this.isEnabled) { + this._prevent(); + this.app.setTransitioning(true); + this._type.setProgressEnd(shouldComplete).then(isOpen => { + this._after(isOpen); + }); + } } _before() { // this places the menu into the correct location before it animates in // this css class doesn't actually kick off any animations - this.getNativeElement().classList.add('show-menu'); - this.getBackdropElement().classList.add('show-backdrop'); + if (this.isEnabled) { + this.getNativeElement().classList.add('show-menu'); + this.getBackdropElement().classList.add('show-backdrop'); - this._disable(); - this.app.setTransitioning(true); - this.keyboard.close(); + this._prevent(); + this.app.setTransitioning(true); + this.keyboard.close(); + } } _after(isOpen) { // keep opening/closing the menu disabled for a touch more yet - this._disable(); - this.app.setTransitioning(false); + if (this.isEnabled) { + this._prevent(); + this.app.setTransitioning(false); - this.isOpen = isOpen; + this.isOpen = isOpen; - this._cntEle.classList[isOpen ? 'add' : 'remove']('menu-content-open'); + this._cntEle.classList[isOpen ? 'add' : 'remove']('menu-content-open'); - this._cntEle.removeEventListener('click', this.onContentClick); - if (isOpen) { - this._cntEle.addEventListener('click', this.onContentClick); + this._cntEle.removeEventListener('click', this.onContentClick); + if (isOpen) { + this._cntEle.addEventListener('click', this.onContentClick); - } else { - this.getNativeElement().classList.remove('show-menu'); - this.getBackdropElement().classList.remove('show-backdrop'); + } else { + this.getNativeElement().classList.remove('show-menu'); + this.getBackdropElement().classList.remove('show-backdrop'); + } } } - _disable() { + _prevent() { // used to prevent unwanted opening/closing after swiping open/close // or swiping open the menu while pressing down on the menu-toggle - this._disableTime = Date.now() + 20; + this._preventTime = Date.now() + 20; } - _isDisabled() { - return this._disableTime > Date.now(); + _isPrevented() { + return this._preventTime > Date.now(); } /** @@ -256,21 +264,8 @@ export class Menu extends Ion { return this.setOpen(!this.isOpen); } - enabled(isEnabled) { - if (!this.isEnabled && isEnabled && !this._gesture) { - // was previously disabled, and is being enabled again - // re-add the gestures - this._initGesture(); - - } else if (this.isEnabled && !isEnabled) { - // is currently enabled, and is being disabled - // remove the gestures - this._gesture && this._gesture.destroy(); - this._targetGesture && this._targetGesture.destroy(); - this._gesture = this._targetGesture = null; - } - - this.isEnabled = isEnabled; + enable(shouldEnable) { + this.isEnabled = shouldEnable; } /** diff --git a/ionic/components/menu/test/multiple/index.ts b/ionic/components/menu/test/multiple/index.ts index 62d167162d..bf7e01458c 100644 --- a/ionic/components/menu/test/multiple/index.ts +++ b/ionic/components/menu/test/multiple/index.ts @@ -11,13 +11,13 @@ class Page1 { } menu1Active() { this.activeMenu = 'menu1'; - this.app.getComponent('menu1').enabled(true); - this.app.getComponent('menu2').enabled(false); + this.app.getComponent('menu1').enable(true); + this.app.getComponent('menu2').enable(false); } menu2Active() { this.activeMenu = 'menu2'; - this.app.getComponent('menu1').enabled(false); - this.app.getComponent('menu2').enabled(true); + this.app.getComponent('menu1').enable(false); + this.app.getComponent('menu2').enable(true); } }