ionic-framework/ionic/components/aside/extensions/gestures.ts

import {Aside} from 'ionic/components/aside/aside';
//TODO: figure out way to get rid of all the ../../../../
import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture';

class AsideGesture extends SlideEdgeGesture {
  constructor(aside: Aside) {
    // TODO figure out the sliding element, dont just use the parent
    let slideElement = aside.getContentElement();
    super(slideElement, {
      direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y',
      edge: aside.side,
      threshold: 75
    });
    this.aside = aside;
    this.slideElement = slideElement;
    this.listen();
  }

  canStart(ev) {
    // Only restrict edges if the aside is closed
    return this.aside.isOpen ? true : super.canStart(ev);
  }

  // Set CSS, then wait one frame for it to apply before sliding starts
  onSlideBeforeStart(slide, ev) {
    this.aside.setSliding(true);
    this.aside.setChanging(true);
    return new Promise(resolve => {
      requestAnimationFrame(resolve);
    });
  }
  onSlide(slide, ev) {
    this.aside.setOpenAmt(slide.distance / slide.max);
    this.aside.setTransform('translate3d(' + slide.distance + 'px,0,0)');
  }
  onSlideEnd(slide, ev) {
    this.aside.setTransform('');
    this.aside.setSliding(false);
    if (Math.abs(ev.gesture.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
      this.aside.setOpen(!this.aside.isOpen);
    }
  }

  getElementStartPos(slide, ev) {
    return this.aside.isOpen ? slide.max : slide.min;
  }
  getSlideBoundaries() {
    return {
      min: 0,
      max: this.aside.ele.offsetWidth
    };
  }
}

export class LeftAsideGesture extends AsideGesture {}

export class RightAsideGesture extends LeftAsideGesture {
  getElementStartPos(slide, ev) {
    return this.aside.isOpen ? slide.min : slide.max;
  }
  getSlideBoundaries() {
    return {
      min: -this.aside.ele.offsetWidth,
      max: 0
    };
  }

}

export class TopAsideGesture extends AsideGesture {
  onSlide(slide, ev) {
    this.aside.setTransform('translate3d(0,' + slide.distance + 'px,0)');
  }
  getSlideBoundaries() {
    return {
      min: 0,
      max: this.aside.ele.offsetHeight
    };
  }
}

export class BottomAsideGesture extends TopAsideGesture {
  getElementStartPos(slide, ev) {
    return this.aside.isOpen ? slide.min : slide.max;
  }
  getSlideBoundaries() {
    return {
      min: -this.aside.ele.offsetHeight,
      max: 0
    };
  }
}