swipe-back-4918e56b.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. 'use strict';
  5. const helpers = require('./helpers-8a48fdea.js');
  6. const dir = require('./dir-94c21456.js');
  7. const index = require('./index-ee07ed59.js');
  8. require('./index-cc858e97.js');
  9. require('./gesture-controller-9436f482.js');
  10. const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {
  11. const win = el.ownerDocument.defaultView;
  12. let rtl = dir.isRTL(el);
  13. /**
  14. * Determine if a gesture is near the edge
  15. * of the screen. If true, then the swipe
  16. * to go back gesture should proceed.
  17. */
  18. const isAtEdge = (detail) => {
  19. const threshold = 50;
  20. const { startX } = detail;
  21. if (rtl) {
  22. return startX >= win.innerWidth - threshold;
  23. }
  24. return startX <= threshold;
  25. };
  26. const getDeltaX = (detail) => {
  27. return rtl ? -detail.deltaX : detail.deltaX;
  28. };
  29. const getVelocityX = (detail) => {
  30. return rtl ? -detail.velocityX : detail.velocityX;
  31. };
  32. const canStart = (detail) => {
  33. /**
  34. * The user's locale can change mid-session,
  35. * so we need to check text direction at
  36. * the beginning of every gesture.
  37. */
  38. rtl = dir.isRTL(el);
  39. return isAtEdge(detail) && canStartHandler();
  40. };
  41. const onMove = (detail) => {
  42. // set the transition animation's progress
  43. const delta = getDeltaX(detail);
  44. const stepValue = delta / win.innerWidth;
  45. onMoveHandler(stepValue);
  46. };
  47. const onEnd = (detail) => {
  48. // the swipe back gesture has ended
  49. const delta = getDeltaX(detail);
  50. const width = win.innerWidth;
  51. const stepValue = delta / width;
  52. const velocity = getVelocityX(detail);
  53. const z = width / 2.0;
  54. const shouldComplete = velocity >= 0 && (velocity > 0.2 || delta > z);
  55. const missing = shouldComplete ? 1 - stepValue : stepValue;
  56. const missingDistance = missing * width;
  57. let realDur = 0;
  58. if (missingDistance > 5) {
  59. const dur = missingDistance / Math.abs(velocity);
  60. realDur = Math.min(dur, 540);
  61. }
  62. onEndHandler(shouldComplete, stepValue <= 0 ? 0.01 : helpers.clamp(0, stepValue, 0.9999), realDur);
  63. };
  64. return index.createGesture({
  65. el,
  66. gestureName: 'goback-swipe',
  67. /**
  68. * Swipe to go back should have priority over other horizontal swipe
  69. * gestures. These gestures have a priority of 100 which is why 101 was chosen here.
  70. */
  71. gesturePriority: 101,
  72. threshold: 10,
  73. canStart,
  74. onStart: onStartHandler,
  75. onMove,
  76. onEnd,
  77. });
  78. };
  79. exports.createSwipeBackGesture = createSwipeBackGesture;