feat(menu): drag right side

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(),

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

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