feat(menu): drag right side

adamdbradley · adamdbradley · commit 1fbdf4b10b0c · 2015-09-22T16:01:14.000-05:00
diff --git 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
@@ -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
@@ -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);

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export class SlideEdgeGesture extends SlideGesture {`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`canStart(ev) {`
`19`		`- this._containerRect = this.getContainerDimensions();`
	`19`	`+ this._d = this.getContainerDimensions();`
`20`	`20`	`return this.edges.every(edge => this._checkEdge(edge, ev.center));`
`21`	`21`	`}`
`22`	`22`
`@@ -30,11 +30,11 @@ export class SlideEdgeGesture extends SlideGesture {`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`_checkEdge(edge, pos) {`
`33`		`- switch(edge) {`
`34`		`- case 'left': return pos.x <= this._containerRect.left + this.threshold;`
`35`		`- case 'right': return pos.x >= this._containerRect.width - this.threshold;`
`36`		`- case 'top': return pos.y <= this._containerRect.top + this.threshold;`
`37`		`- case 'bottom': return pos.y >= this._containerRect.height - this.threshold;`
	`33`	`+ switch (edge) {`
	`34`	`+ case 'left': return pos.x <= this._d.left + this.threshold;`
	`35`	`+ case 'right': return pos.x >= this._d.width - this.threshold;`
	`36`	`+ case 'top': return pos.y <= this._d.top + this.threshold;`
	`37`	`+ case 'bottom': return pos.y >= this._d.height - this.threshold;`
`38`	`38`	`}`
`39`	`39`	`}`
`40`	`40`