use-touch.mjs 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import { ref } from "vue";
  2. import { TAP_OFFSET } from "../utils/index.mjs";
  3. function getDirection(x, y) {
  4. if (x > y) {
  5. return "horizontal";
  6. }
  7. if (y > x) {
  8. return "vertical";
  9. }
  10. return "";
  11. }
  12. function useTouch() {
  13. const startX = ref(0);
  14. const startY = ref(0);
  15. const deltaX = ref(0);
  16. const deltaY = ref(0);
  17. const offsetX = ref(0);
  18. const offsetY = ref(0);
  19. const direction = ref("");
  20. const isTap = ref(true);
  21. const isVertical = () => direction.value === "vertical";
  22. const isHorizontal = () => direction.value === "horizontal";
  23. const reset = () => {
  24. deltaX.value = 0;
  25. deltaY.value = 0;
  26. offsetX.value = 0;
  27. offsetY.value = 0;
  28. direction.value = "";
  29. isTap.value = true;
  30. };
  31. const start = (event) => {
  32. reset();
  33. startX.value = event.touches[0].clientX;
  34. startY.value = event.touches[0].clientY;
  35. };
  36. const move = (event) => {
  37. const touch = event.touches[0];
  38. deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;
  39. deltaY.value = touch.clientY - startY.value;
  40. offsetX.value = Math.abs(deltaX.value);
  41. offsetY.value = Math.abs(deltaY.value);
  42. const LOCK_DIRECTION_DISTANCE = 10;
  43. if (!direction.value || offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE) {
  44. direction.value = getDirection(offsetX.value, offsetY.value);
  45. }
  46. if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) {
  47. isTap.value = false;
  48. }
  49. };
  50. return {
  51. move,
  52. start,
  53. reset,
  54. startX,
  55. startY,
  56. deltaX,
  57. deltaY,
  58. offsetX,
  59. offsetY,
  60. direction,
  61. isVertical,
  62. isHorizontal,
  63. isTap
  64. };
  65. }
  66. export {
  67. useTouch
  68. };