ionic-framework/ionic/gestures/slide-gesture.ts

import {DragGesture} from './drag-gesture';
import {clamp} from '../util';


export class SlideGesture extends DragGesture {
  public slide: SlideData = null;

  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: SlideData, ev: any) {
    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: SlideData, ev: any) {
    return 0;
  }

  canStart(ev: any): boolean {
    return true;
  }

  onDragStart(ev: any): boolean {
    if (!this.canStart(ev)) {
      return false;
    }

    this.slide = {};
    this.onSlideBeforeStart(this.slide, ev);

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

    return true;
  }

  onDrag(ev: any): boolean {
    if (!this.slide || !this.slide.started) {
      return false;
    }

    this.slide.pos = ev.center[this.direction];
    this.slide.distance = 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);

    return true;
  }

  onDragEnd(ev: any) {
    if (!this.slide || !this.slide.started) return;
    this.onSlideEnd(this.slide, ev);
    this.slide = null;
  }

  onSlideBeforeStart(slide?: SlideData, ev?: any): void {}
  onSlideStart(slide?: SlideData, ev?: any): void {}
  onSlide(slide?: SlideData, ev?: any): void {}
  onSlideEnd(slide?: SlideData, ev?: any): void {}
}

export interface SlideData {
  min?: number;
  max?: number;
  distance?: number;
  delta?: number;
  started?: boolean;
  pos?: any;
  pointerStartPos?: number;
  elementStartPos?: number;
}