slide-gesture.js 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import { PanGesture } from './pan-gesture';
  2. import { clamp } from '../util/util';
  3. import { pointerCoord } from '../util/dom';
  4. /**
  5. * @hidden
  6. */
  7. export class SlideGesture extends PanGesture {
  8. constructor(plt, element, opts = {}) {
  9. super(plt, element, opts);
  10. this.slide = null;
  11. }
  12. /*
  13. * Get the min and max for the slide. pageX/pageY.
  14. * Only called on dragstart.
  15. */
  16. getSlideBoundaries(_slide, _ev) {
  17. return {
  18. min: 0,
  19. max: this.getNativeElement().offsetWidth
  20. };
  21. }
  22. /*
  23. * Get the element's pos when the drag starts.
  24. * For example, an open side menu starts at 100% and a closed
  25. * sidemenu starts at 0%.
  26. */
  27. getElementStartPos(_slide, _ev) {
  28. return 0;
  29. }
  30. onDragStart(ev) {
  31. this.onSlideBeforeStart(ev);
  32. let coord = pointerCoord(ev);
  33. let pos = coord[this.direction];
  34. this.slide = {
  35. min: 0,
  36. max: 0,
  37. pointerStartPos: pos,
  38. pos: pos,
  39. timestamp: Date.now(),
  40. elementStartPos: 0,
  41. started: true,
  42. delta: 0,
  43. distance: 0,
  44. velocity: 0,
  45. };
  46. // TODO: we should run this in the next frame
  47. let { min, max } = this.getSlideBoundaries(this.slide, ev);
  48. this.slide.min = min;
  49. this.slide.max = max;
  50. this.slide.elementStartPos = this.getElementStartPos(this.slide, ev);
  51. this.onSlideStart(this.slide, ev);
  52. }
  53. onDragMove(ev) {
  54. let slide = this.slide;
  55. (void 0) /* assert */;
  56. let coord = pointerCoord(ev);
  57. let newPos = coord[this.direction];
  58. let newTimestamp = Date.now();
  59. let velocity = (this.plt.isRTL ? (slide.pos - newPos) : (newPos - slide.pos)) / (newTimestamp - slide.timestamp);
  60. slide.pos = newPos;
  61. slide.timestamp = newTimestamp;
  62. slide.distance = clamp(slide.min, (this.plt.isRTL ? slide.pointerStartPos - newPos : newPos - slide.pointerStartPos) + slide.elementStartPos, slide.max);
  63. slide.velocity = velocity;
  64. slide.delta = (this.plt.isRTL ? slide.pointerStartPos - newPos : newPos - slide.pointerStartPos);
  65. this.onSlide(slide, ev);
  66. }
  67. onDragEnd(ev) {
  68. this.onSlideEnd(this.slide, ev);
  69. this.slide = null;
  70. }
  71. onSlideBeforeStart(_ev) { }
  72. onSlideStart(_slide, _ev) { }
  73. onSlide(_slide, _ev) { }
  74. onSlideEnd(_slide, _ev) { }
  75. }
  76. //# sourceMappingURL=slide-gesture.js.map