vuestic-ui
Version:
Vue 3 UI Framework
106 lines (105 loc) • 3.82 kB
JavaScript
import { ref, reactive, watchEffect, watch } from "vue";
import { u as useEvent } from "./useEvent.js";
const mouseEvents = ["mousedown", "mousemove"];
const touchEvents = ["touchstart", "touchmove"];
const commonAllowedDirections = {
vertical: ["", "all", "vertical"],
horizontal: ["", "all", "horizontal"]
};
const verticalSpecificAllowedDirections = [...commonAllowedDirections.vertical, "up", "down"];
const horizontalSpecificAllowedDirections = [...commonAllowedDirections.horizontal, "left", "right"];
const useSwipeProps = {
swipable: { type: Boolean, default: false },
swipeDistance: { type: Number, default: 75 },
swipeDirection: { type: String, default: "all" }
};
const useSwipe = (props, container, cb) => {
const swipeStarted = ref(false);
const swipePath = reactive({
start: { x: 0, y: 0 },
end: { x: 0, y: 0 }
});
const swipeDuration = reactive({
start: 0,
end: 0
});
const setState = (e, type) => {
let event;
if (mouseEvents.includes(e.type)) {
event = e;
}
if (touchEvents.includes(e.type)) {
const touchEvent = e;
event = touchEvent.changedTouches[touchEvent.changedTouches.length - 1];
}
if (!event) {
return;
}
swipePath[type].x = event.pageX;
swipePath[type].y = event.pageY;
swipeDuration[type] = (/* @__PURE__ */ new Date()).getTime();
};
const onSwipeStart = (e) => {
if (!props.swipable || swipeStarted.value) {
return;
}
swipeStarted.value = true;
setState(e, "start");
};
const onSwipeMove = (e) => {
if (!swipeStarted.value) {
return;
}
setState(e, "end");
};
const resetSwipe = () => {
["start", "end"].forEach((type) => {
swipePath[type].x = 0;
swipePath[type].y = 0;
swipeDuration[type] = 0;
});
swipeStarted.value = false;
};
const isSwipeAllowed = reactive({
vertical: false,
horizontal: false
});
watchEffect(() => {
isSwipeAllowed.horizontal = horizontalSpecificAllowedDirections.includes(props.swipeDirection);
isSwipeAllowed.vertical = verticalSpecificAllowedDirections.includes(props.swipeDirection);
});
const calcDistance = (axis) => {
return isSwipeAllowed[axis === "x" ? "horizontal" : "vertical"] && swipePath.start[axis] && swipePath.end[axis] ? Math.trunc(swipePath.start[axis] - swipePath.end[axis]) : 0;
};
const getAcceptableValue = (direction, result) => {
return result === props.swipeDirection || commonAllowedDirections[direction].includes(props.swipeDirection) ? result : "";
};
const swipeState = reactive({ direction: "", duration: 0 });
watch(swipePath, () => {
const xDistance = calcDistance("x");
const yDistance = calcDistance("y");
if ((xDistance || yDistance) && [xDistance, yDistance].some((el) => Math.abs(el) >= props.swipeDistance)) {
if (Math.abs(xDistance) >= Math.abs(yDistance) && isSwipeAllowed.horizontal) {
const result = xDistance > 0 ? "left" : "right";
swipeState.direction = getAcceptableValue("horizontal", result);
} else if (Math.abs(xDistance) < Math.abs(yDistance) && isSwipeAllowed.vertical) {
const result = yDistance > 0 ? "down" : "up";
swipeState.direction = getAcceptableValue("vertical", result);
}
swipeState.duration = swipeDuration.end - swipeDuration.start;
resetSwipe();
}
}, { deep: true });
watch(swipeState, () => cb(swipeState), { deep: true });
if (props.swipable) {
useEvent(["touchstart", "mousedown"], onSwipeStart, container);
useEvent(["touchmove", "mousemove"], onSwipeMove, container);
useEvent(["touchcancel", "mouseup", "touchend", "mouseleave"], resetSwipe, container);
}
return { swipeState };
};
export {
useSwipe as a,
useSwipeProps as u
};
//# sourceMappingURL=useSwipe.js.map