1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- import { ref } from "vue";
- import { TAP_OFFSET } from "../utils/index.mjs";
- function getDirection(x, y) {
- if (x > y) {
- return "horizontal";
- }
- if (y > x) {
- return "vertical";
- }
- return "";
- }
- function useTouch() {
- const startX = ref(0);
- const startY = ref(0);
- const deltaX = ref(0);
- const deltaY = ref(0);
- const offsetX = ref(0);
- const offsetY = ref(0);
- const direction = ref("");
- const isTap = ref(true);
- const isVertical = () => direction.value === "vertical";
- const isHorizontal = () => direction.value === "horizontal";
- const reset = () => {
- deltaX.value = 0;
- deltaY.value = 0;
- offsetX.value = 0;
- offsetY.value = 0;
- direction.value = "";
- isTap.value = true;
- };
- const start = (event) => {
- reset();
- startX.value = event.touches[0].clientX;
- startY.value = event.touches[0].clientY;
- };
- const move = (event) => {
- const touch = event.touches[0];
- deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;
- deltaY.value = touch.clientY - startY.value;
- offsetX.value = Math.abs(deltaX.value);
- offsetY.value = Math.abs(deltaY.value);
- const LOCK_DIRECTION_DISTANCE = 10;
- if (!direction.value || offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE) {
- direction.value = getDirection(offsetX.value, offsetY.value);
- }
- if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) {
- isTap.value = false;
- }
- };
- return {
- move,
- start,
- reset,
- startX,
- startY,
- deltaX,
- deltaY,
- offsetX,
- offsetY,
- direction,
- isVertical,
- isHorizontal,
- isTap
- };
- }
- export {
- useTouch
- };
|