diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index 29b8657d3e..cb5f57615f 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -96,7 +96,8 @@ import {MenuType} from './menu-types'; host: { 'role': 'navigation', '[attr.side]': 'side', - '[attr.type]': 'type' + '[attr.type]': 'type', + '[attr.swipeEnabled]': 'swipeEnabled' }, template: '
', directives: [forwardRef(() => MenuBackdrop)] @@ -107,9 +108,10 @@ export class Menu extends Ion { private _gesture: Gesture; private _targetGesture: Gesture; private _type: MenuType; - + isOpen: boolean = false; isEnabled: boolean = true; + isSwipeEnabled: boolean = true; backdrop: MenuBackdrop; onContentClick: EventListener; @@ -117,8 +119,9 @@ export class Menu extends Ion { @Input() id: string; @Input() side: string; @Input() type: string; + @Input() swipeEnabled: string; @Input() maxEdgeStart; - + @Output() opening: EventEmitter = new EventEmitter(); constructor( @@ -150,6 +153,10 @@ export class Menu extends Ion { } self._renderer.setElementAttribute(self._elementRef, 'side', self.side); + if (self.swipeEnabled === 'false') { + self.isSwipeEnabled = false; + } + if (!self.id) { // Auto register self.id = self.side + 'Menu'; @@ -244,7 +251,7 @@ export class Menu extends Ion { */ setProgressStart() { // user started swiping the menu open/close - if (this._isPrevented() || !this.isEnabled) return; + if (this._isPrevented() || !this.isEnabled || !this.isSwipeEnabled) return; this._before(); @@ -256,7 +263,7 @@ export class Menu extends Ion { */ setProgess(value) { // user actively dragging the menu - if (this.isEnabled) { + if (this.isEnabled && this.isSwipeEnabled) { this._prevent(); this._getType().setProgess(value); this.opening.next(value); @@ -268,7 +275,7 @@ export class Menu extends Ion { */ setProgressEnd(shouldComplete) { // user has finished dragging the menu - if (this.isEnabled) { + if (this.isEnabled && this.isSwipeEnabled) { this._prevent(); this._getType().setProgressEnd(shouldComplete).then(isOpen => { this._after(isOpen); @@ -371,6 +378,16 @@ export class Menu extends Ion { return this; } + /** + * Used to enable or disable the ability to swipe open the menu. + * @param {boolean} shouldEnable True if it should be swipe-able, false if not. + * @return {Menu} Returns the instance of the menu, which is useful for chaining. + */ + swipeEnable(shouldEnable) { + this.isSwipeEnabled = shouldEnable; + return this; + } + /** * @private */ diff --git a/ionic/components/menu/test/disable-swipe/index.ts b/ionic/components/menu/test/disable-swipe/index.ts new file mode 100644 index 0000000000..ce49ee2598 --- /dev/null +++ b/ionic/components/menu/test/disable-swipe/index.ts @@ -0,0 +1,35 @@ +import {App, IonicApp, Page, NavController} from 'ionic/ionic'; + +@Page({ + templateUrl: 'page1.html' +}) +class Page1 { + leftMenuSwipeEnabled: boolean = true; + rightMenuSwipeEnabled: boolean = false; + + constructor(app: IonicApp) { + this.app = app; + } + + toggleLeftMenuSwipeable() { + this.leftMenuSwipeEnabled = !this.leftMenuSwipeEnabled; + + this.app.getComponent('leftMenu').swipeEnable(this.leftMenuSwipeEnabled); + } + + toggleRightMenuSwipeable() { + this.rightMenuSwipeEnabled = !this.rightMenuSwipeEnabled; + + this.app.getComponent('rightMenu').swipeEnable(this.rightMenuSwipeEnabled); + } +} + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp { + constructor() { + this.rootView = Page1; + } +} diff --git a/ionic/components/menu/test/disable-swipe/main.html b/ionic/components/menu/test/disable-swipe/main.html new file mode 100644 index 0000000000..d43eb3fed4 --- /dev/null +++ b/ionic/components/menu/test/disable-swipe/main.html @@ -0,0 +1,40 @@ + + + + Left Menu + + + + + + + + + + + + + + + + + + Right Menu + + + + + + + + + + + + + + diff --git a/ionic/components/menu/test/disable-swipe/page1.html b/ionic/components/menu/test/disable-swipe/page1.html new file mode 100644 index 0000000000..3439f434db --- /dev/null +++ b/ionic/components/menu/test/disable-swipe/page1.html @@ -0,0 +1,33 @@ + + + + + + Main + + + + + + + + +

Page 1

+ +

Left Menu Swipe Enabled: {{ leftMenuSwipeEnabled }}

+ +

+ +

+ +

Right Menu Swipe Enabled: {{ rightMenuSwipeEnabled }}

+ +

+ +

+ +