123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- // Utilities
- import { keys } from "../../util/index.mjs"; // Types
- const handleGesture = wrapper => {
- const {
- touchstartX,
- touchendX,
- touchstartY,
- touchendY
- } = wrapper;
- const dirRatio = 0.5;
- const minDistance = 16;
- wrapper.offsetX = touchendX - touchstartX;
- wrapper.offsetY = touchendY - touchstartY;
- if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
- wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
- wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
- }
- if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
- wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
- wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
- }
- };
- function touchstart(event, wrapper) {
- const touch = event.changedTouches[0];
- wrapper.touchstartX = touch.clientX;
- wrapper.touchstartY = touch.clientY;
- wrapper.start?.({
- originalEvent: event,
- ...wrapper
- });
- }
- function touchend(event, wrapper) {
- const touch = event.changedTouches[0];
- wrapper.touchendX = touch.clientX;
- wrapper.touchendY = touch.clientY;
- wrapper.end?.({
- originalEvent: event,
- ...wrapper
- });
- handleGesture(wrapper);
- }
- function touchmove(event, wrapper) {
- const touch = event.changedTouches[0];
- wrapper.touchmoveX = touch.clientX;
- wrapper.touchmoveY = touch.clientY;
- wrapper.move?.({
- originalEvent: event,
- ...wrapper
- });
- }
- function createHandlers() {
- let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
- const wrapper = {
- touchstartX: 0,
- touchstartY: 0,
- touchendX: 0,
- touchendY: 0,
- touchmoveX: 0,
- touchmoveY: 0,
- offsetX: 0,
- offsetY: 0,
- left: value.left,
- right: value.right,
- up: value.up,
- down: value.down,
- start: value.start,
- move: value.move,
- end: value.end
- };
- return {
- touchstart: e => touchstart(e, wrapper),
- touchend: e => touchend(e, wrapper),
- touchmove: e => touchmove(e, wrapper)
- };
- }
- function mounted(el, binding) {
- const value = binding.value;
- const target = value?.parent ? el.parentElement : el;
- const options = value?.options ?? {
- passive: true
- };
- const uid = binding.instance?.$.uid; // TODO: use custom uid generator
- if (!target || !uid) return;
- const handlers = createHandlers(binding.value);
- target._touchHandlers = target._touchHandlers ?? Object.create(null);
- target._touchHandlers[uid] = handlers;
- keys(handlers).forEach(eventName => {
- target.addEventListener(eventName, handlers[eventName], options);
- });
- }
- function unmounted(el, binding) {
- const target = binding.value?.parent ? el.parentElement : el;
- const uid = binding.instance?.$.uid;
- if (!target?._touchHandlers || !uid) return;
- const handlers = target._touchHandlers[uid];
- keys(handlers).forEach(eventName => {
- target.removeEventListener(eventName, handlers[eventName]);
- });
- delete target._touchHandlers[uid];
- }
- export const Touch = {
- mounted,
- unmounted
- };
- export default Touch;
- //# sourceMappingURL=index.mjs.map
|