index.mjs 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. // Utilities
  2. import { keys } from "../../util/index.mjs"; // Types
  3. const handleGesture = wrapper => {
  4. const {
  5. touchstartX,
  6. touchendX,
  7. touchstartY,
  8. touchendY
  9. } = wrapper;
  10. const dirRatio = 0.5;
  11. const minDistance = 16;
  12. wrapper.offsetX = touchendX - touchstartX;
  13. wrapper.offsetY = touchendY - touchstartY;
  14. if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
  15. wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
  16. wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
  17. }
  18. if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
  19. wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
  20. wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
  21. }
  22. };
  23. function touchstart(event, wrapper) {
  24. const touch = event.changedTouches[0];
  25. wrapper.touchstartX = touch.clientX;
  26. wrapper.touchstartY = touch.clientY;
  27. wrapper.start?.({
  28. originalEvent: event,
  29. ...wrapper
  30. });
  31. }
  32. function touchend(event, wrapper) {
  33. const touch = event.changedTouches[0];
  34. wrapper.touchendX = touch.clientX;
  35. wrapper.touchendY = touch.clientY;
  36. wrapper.end?.({
  37. originalEvent: event,
  38. ...wrapper
  39. });
  40. handleGesture(wrapper);
  41. }
  42. function touchmove(event, wrapper) {
  43. const touch = event.changedTouches[0];
  44. wrapper.touchmoveX = touch.clientX;
  45. wrapper.touchmoveY = touch.clientY;
  46. wrapper.move?.({
  47. originalEvent: event,
  48. ...wrapper
  49. });
  50. }
  51. function createHandlers() {
  52. let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  53. const wrapper = {
  54. touchstartX: 0,
  55. touchstartY: 0,
  56. touchendX: 0,
  57. touchendY: 0,
  58. touchmoveX: 0,
  59. touchmoveY: 0,
  60. offsetX: 0,
  61. offsetY: 0,
  62. left: value.left,
  63. right: value.right,
  64. up: value.up,
  65. down: value.down,
  66. start: value.start,
  67. move: value.move,
  68. end: value.end
  69. };
  70. return {
  71. touchstart: e => touchstart(e, wrapper),
  72. touchend: e => touchend(e, wrapper),
  73. touchmove: e => touchmove(e, wrapper)
  74. };
  75. }
  76. function mounted(el, binding) {
  77. const value = binding.value;
  78. const target = value?.parent ? el.parentElement : el;
  79. const options = value?.options ?? {
  80. passive: true
  81. };
  82. const uid = binding.instance?.$.uid; // TODO: use custom uid generator
  83. if (!target || !uid) return;
  84. const handlers = createHandlers(binding.value);
  85. target._touchHandlers = target._touchHandlers ?? Object.create(null);
  86. target._touchHandlers[uid] = handlers;
  87. keys(handlers).forEach(eventName => {
  88. target.addEventListener(eventName, handlers[eventName], options);
  89. });
  90. }
  91. function unmounted(el, binding) {
  92. const target = binding.value?.parent ? el.parentElement : el;
  93. const uid = binding.instance?.$.uid;
  94. if (!target?._touchHandlers || !uid) return;
  95. const handlers = target._touchHandlers[uid];
  96. keys(handlers).forEach(eventName => {
  97. target.removeEventListener(eventName, handlers[eventName]);
  98. });
  99. delete target._touchHandlers[uid];
  100. }
  101. export const Touch = {
  102. mounted,
  103. unmounted
  104. };
  105. export default Touch;
  106. //# sourceMappingURL=index.mjs.map