change all paths to use ionic2/

src/gestures/drag-gesture.js

@@ -0,0 +1,36 @@
+import {Gesture} from 'ionic2/gestures/gesture';
+import * as util from 'ionic2/util';
+import Hammer from 'hammer';
+
+/*
+ * BUG(ajoslin): HammerJS 2.x does not have an alternative to HammerJS 1.x's
+ * dragLockToAxis, so a vertical and horizontal gesture can happen at the same time.
+ */
+export class DragGesture extends Gesture {
+  constructor(element, opts = {}) {
+    util.defaults(opts, {});
+    super(element, opts);
+  }
+  listen() {
+    super.listen();
+    this.hammertime.on('panstart', ev => {
+      if (this.onDragStart(ev) !== false) {
+        this.dragging = true;
+      }
+    });
+    this.hammertime.on('panmove', ev => {
+      if (!this.dragging) return;
+      if (this.onDrag(ev) === false) {
+        this.dragging = false;
+      }
+    });
+    this.hammertime.on('panend', ev => {
+      if (!this.dragging) return;
+      this.onDragEnd(ev);
+      this.dragging = false;
+    });
+  }
+  onDrag() {}
+  onDragStart() {}
+  onDragEnd() {}
+}

src/gestures/gesture.js

@@ -0,0 +1,32 @@
+import * as util from 'ionic2/util';
+import Hammer from 'hammer';
+
+export class Gesture {
+  constructor(element, opts = {}) {
+    this.element = element;
+
+    // Map 'x' or 'y' string to hammerjs opts
+    this.direction = opts.direction || 'x';
+    opts.direction = this.direction === 'x' ?
+      Hammer.DIRECTION_HORIZONTAL :
+      Hammer.DIRECTION_VERTICAL;
+
+    this._options = opts;
+
+  }
+  options(opts = {}) {
+    util.extend(this._options, opts);
+  }
+
+  listen() {
+    this.hammertime = Hammer(this.element, this._options);
+  }
+  unlisten() {
+    this.hammertime.destroy();
+    this.hammertime = null;
+  }
+  destroy() {
+    this.hammertime.destroy();
+    this.hammertime = null;
+  }
+}

src/gestures/slide-edge-gesture.js

@@ -0,0 +1,39 @@
+import {SlideGesture} from 'ionic2/gestures/slide-gesture';
+import * as util from 'ionic2/util';
+
+export class SlideEdgeGesture extends SlideGesture {
+  constructor(element: Element, opts: Object = {}) {
+    util.defaults(opts, {
+      edge: 'left',
+      threshold: 50
+    });
+    super(element, opts);
+    // Can check corners through use of eg 'left top'
+    this.edges = opts.edge.split(' ');
+    this.threshold = opts.threshold;
+  }
+
+  canStart(ev) {
+    this._containerRect = this.getContainerDimensions();
+    return this.edges.every(edge => this._checkEdge(edge, ev.center));
+  }
+
+  getContainerDimensions() {
+    return {
+      left: 0,
+      top: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+
+  _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;
+    }
+  }
+
+}

src/gestures/slide-gesture.js

@@ -0,0 +1,71 @@
+import {DragGesture} from 'ionic2/gestures/drag-gesture';
+import * as util from 'ionic2/util';
+
+export class SlideGesture extends DragGesture {
+  constructor(element, opts = {}) {
+    super(element, opts);
+    this.element = element;
+  }
+
+  /*
+   * Get the min and max for the slide. pageX/pageY.
+   * Only called on dragstart.
+   */
+  getSlideBoundaries(slide, ev) {
+    return {
+      min: 0,
+      max: this.element.offsetWidth
+    };
+  }
+
+  /*
+   * Get the element's pos when the drag starts.
+   * For example, an open side menu starts at 100% and a closed
+   * sidemenu starts at 0%.
+   */
+  getElementStartPos(slide, ev) {
+    return 0;
+  }
+
+  canStart() {
+    return true;
+  }
+
+  onDragStart(ev) {
+    if (!this.canStart(ev)) return false;
+    this.slide = {};
+    var promise = this.onSlideBeforeStart(this.slide, ev) || Promise.resolve();
+    promise.then(() => {
+      var {min, max} = this.getSlideBoundaries(this.slide, ev);
+      this.slide.min = min;
+      this.slide.max = max;
+      this.slide.elementStartPos = this.getElementStartPos(this.slide, ev);
+      this.slide.pointerStartPos = ev.center[this.direction];
+      this.slide.started = true;
+      this.onSlideStart(this.slide, ev);
+    }).catch(() => {
+      this.slide = null;
+    });
+  }
+  onDrag(ev) {
+    if (!this.slide || !this.slide.started) return;
+    this.slide.pos = ev.center[this.direction];
+    this.slide.distance = util.clamp(
+      this.slide.min,
+      this.slide.pos - this.slide.pointerStartPos + this.slide.elementStartPos,
+      this.slide.max
+    );
+    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);
+    this.slide = null;
+  }
+
+  onSlideBeforeStart() {}
+  onSlideStart() {}
+  onSlide() {}
+  onSlideEnd() {}
+}