element-plus
Version:
A Component Library for Vue 3
60 lines (57 loc) • 1.78 kB
JavaScript
import { ref, unref } from 'vue';
import { useEventListener } from '@vueuse/core';
import { cAF, rAF } from '../../../../utils/raf.mjs';
const useGridTouch = (windowRef, states, scrollTo, estimatedTotalWidth, estimatedTotalHeight, parsedWidth, parsedHeight) => {
const touchStartX = ref(0);
const touchStartY = ref(0);
let frameHandle;
let deltaX = 0;
let deltaY = 0;
const handleTouchStart = (event) => {
cAF(frameHandle);
touchStartX.value = event.touches[0].clientX;
touchStartY.value = event.touches[0].clientY;
deltaX = 0;
deltaY = 0;
};
const handleTouchMove = (event) => {
event.preventDefault();
cAF(frameHandle);
deltaX += touchStartX.value - event.touches[0].clientX;
deltaY += touchStartY.value - event.touches[0].clientY;
touchStartX.value = event.touches[0].clientX;
touchStartY.value = event.touches[0].clientY;
frameHandle = rAF(() => {
const maxScrollLeft = estimatedTotalWidth.value - unref(parsedWidth);
const maxScrollTop = estimatedTotalHeight.value - unref(parsedHeight);
const safeScrollLeft = Math.min(
states.value.scrollLeft + deltaX,
maxScrollLeft
);
const safeScrollTop = Math.min(
states.value.scrollTop + deltaY,
maxScrollTop
);
scrollTo({
scrollLeft: safeScrollLeft,
scrollTop: safeScrollTop
});
deltaX = 0;
deltaY = 0;
});
};
useEventListener(windowRef, "touchstart", handleTouchStart, {
passive: true
});
useEventListener(windowRef, "touchmove", handleTouchMove, {
passive: false
});
return {
touchStartX,
touchStartY,
handleTouchStart,
handleTouchMove
};
};
export { useGridTouch };
//# sourceMappingURL=use-grid-touch.mjs.map