From 1fbdf4b10b0c3cdd18fe04b5fcb9c10d2031dc8a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 22 Sep 2015 16:01:14 -0500 Subject: [PATCH] feat(menu): drag right side --- ionic/components/menu/menu-gestures.ts | 31 +++++++++++++------------- ionic/gestures/slide-edge-gesture.ts | 12 +++++----- ionic/gestures/slide-gesture.ts | 2 ++ 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/ionic/components/menu/menu-gestures.ts b/ionic/components/menu/menu-gestures.ts index 0fc00ea562..e2b629c56a 100644 --- a/ionic/components/menu/menu-gestures.ts +++ b/ionic/components/menu/menu-gestures.ts @@ -2,18 +2,23 @@ import {Menu} from './menu'; import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture'; -class MenuGenericGestureHandler extends SlideEdgeGesture { - constructor(menu: Menu, targetElement, threshold) { - super(targetElement, { +class MenuContentGesture extends SlideEdgeGesture { + constructor(menu: Menu) { + + super(menu.getContentElement(), { direction: (menu.side === 'left' || menu.side === 'right') ? 'x' : 'y', edge: menu.side, - threshold: threshold + threshold: 75 }); this.menu = menu; this.listen(); } + canStart(ev) { + return this.menu.isOpen ? true : super.canStart(ev); + } + // Set CSS, then wait one frame for it to apply before sliding starts onSlideBeforeStart(slide, ev) { this.menu.setProgressStart(); @@ -40,29 +45,25 @@ class MenuGenericGestureHandler extends SlideEdgeGesture { } } - -export class MenuContentGesture extends MenuGenericGestureHandler { - constructor(menu: Menu) { - super(menu, menu.getContentElement(), 75); - } - canStart(ev) { - return this.menu.isOpen ? true : super.canStart(ev); - } -} - export class LeftMenuGesture extends MenuContentGesture { constructor(menu: Menu) { super(menu); } } -export class RightMenuGesture extends LeftMenuGesture { +export class RightMenuGesture extends MenuContentGesture { constructor(menu: Menu) { super(menu); } + + onSlide(slide, ev) { + this.menu.setProgess(slide.distance / slide.min); + } + getElementStartPos(slide, ev) { return this.menu.isOpen ? slide.min : slide.max; } + getSlideBoundaries() { return { min: -this.menu.width(), diff --git a/ionic/gestures/slide-edge-gesture.ts b/ionic/gestures/slide-edge-gesture.ts index 24967d2ed7..60f8571d8b 100644 --- a/ionic/gestures/slide-edge-gesture.ts +++ b/ionic/gestures/slide-edge-gesture.ts @@ -16,7 +16,7 @@ export class SlideEdgeGesture extends SlideGesture { } canStart(ev) { - this._containerRect = this.getContainerDimensions(); + this._d = this.getContainerDimensions(); return this.edges.every(edge => this._checkEdge(edge, ev.center)); } @@ -30,11 +30,11 @@ export class SlideEdgeGesture extends SlideGesture { } _checkEdge(edge, pos) { - switch(edge) { - case 'left': return pos.x <= this._containerRect.left + this.threshold; - case 'right': return pos.x >= this._containerRect.width - this.threshold; - case 'top': return pos.y <= this._containerRect.top + this.threshold; - case 'bottom': return pos.y >= this._containerRect.height - this.threshold; + switch (edge) { + case 'left': return pos.x <= this._d.left + this.threshold; + case 'right': return pos.x >= this._d.width - this.threshold; + case 'top': return pos.y <= this._d.top + this.threshold; + case 'bottom': return pos.y >= this._d.height - this.threshold; } } diff --git a/ionic/gestures/slide-gesture.ts b/ionic/gestures/slide-gesture.ts index f98dc61934..4e4ff5d40f 100644 --- a/ionic/gestures/slide-gesture.ts +++ b/ionic/gestures/slide-gesture.ts @@ -47,6 +47,7 @@ export class SlideGesture extends DragGesture { this.slide = null; }); } + onDrag(ev) { if (!this.slide || !this.slide.started) return; this.slide.pos = ev.center[this.direction]; @@ -58,6 +59,7 @@ export class SlideGesture extends DragGesture { this.slide.delta = this.slide.pos - this.slide.pointerStartPos; this.onSlide(this.slide, ev); } + onDragEnd(ev) { if (!this.slide || !this.slide.started) return; this.onSlideEnd(this.slide, ev);