first commit
This commit is contained in:
9
node_modules/motion-dom/dist/es/gestures/drag/state/is-active.mjs
generated
vendored
Normal file
9
node_modules/motion-dom/dist/es/gestures/drag/state/is-active.mjs
generated
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
const isDragging = {
|
||||
x: false,
|
||||
y: false,
|
||||
};
|
||||
function isDragActive() {
|
||||
return isDragging.x || isDragging.y;
|
||||
}
|
||||
|
||||
export { isDragActive, isDragging };
|
||||
28
node_modules/motion-dom/dist/es/gestures/drag/state/set-active.mjs
generated
vendored
Normal file
28
node_modules/motion-dom/dist/es/gestures/drag/state/set-active.mjs
generated
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
import { isDragging } from './is-active.mjs';
|
||||
|
||||
function setDragLock(axis) {
|
||||
if (axis === "x" || axis === "y") {
|
||||
if (isDragging[axis]) {
|
||||
return null;
|
||||
}
|
||||
else {
|
||||
isDragging[axis] = true;
|
||||
return () => {
|
||||
isDragging[axis] = false;
|
||||
};
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (isDragging.x || isDragging.y) {
|
||||
return null;
|
||||
}
|
||||
else {
|
||||
isDragging.x = isDragging.y = true;
|
||||
return () => {
|
||||
isDragging.x = isDragging.y = false;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { setDragLock };
|
||||
37
node_modules/motion-dom/dist/es/gestures/hover.mjs
generated
vendored
Normal file
37
node_modules/motion-dom/dist/es/gestures/hover.mjs
generated
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
import { isDragActive } from './drag/state/is-active.mjs';
|
||||
import { setupGesture } from './utils/setup.mjs';
|
||||
|
||||
function isValidHover(event) {
|
||||
return !(event.pointerType === "touch" || isDragActive());
|
||||
}
|
||||
/**
|
||||
* Create a hover gesture. hover() is different to .addEventListener("pointerenter")
|
||||
* in that it has an easier syntax, filters out polyfilled touch events, interoperates
|
||||
* with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
function hover(elementOrSelector, onHoverStart, options = {}) {
|
||||
const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
|
||||
const onPointerEnter = (enterEvent) => {
|
||||
if (!isValidHover(enterEvent))
|
||||
return;
|
||||
const { target } = enterEvent;
|
||||
const onHoverEnd = onHoverStart(target, enterEvent);
|
||||
if (typeof onHoverEnd !== "function" || !target)
|
||||
return;
|
||||
const onPointerLeave = (leaveEvent) => {
|
||||
if (!isValidHover(leaveEvent))
|
||||
return;
|
||||
onHoverEnd(leaveEvent);
|
||||
target.removeEventListener("pointerleave", onPointerLeave);
|
||||
};
|
||||
target.addEventListener("pointerleave", onPointerLeave, eventOptions);
|
||||
};
|
||||
elements.forEach((element) => {
|
||||
element.addEventListener("pointerenter", onPointerEnter, eventOptions);
|
||||
});
|
||||
return cancel;
|
||||
}
|
||||
|
||||
export { hover };
|
||||
83
node_modules/motion-dom/dist/es/gestures/press/index.mjs
generated
vendored
Normal file
83
node_modules/motion-dom/dist/es/gestures/press/index.mjs
generated
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
import { isHTMLElement } from '../../utils/is-html-element.mjs';
|
||||
import { isDragActive } from '../drag/state/is-active.mjs';
|
||||
import { isNodeOrChild } from '../utils/is-node-or-child.mjs';
|
||||
import { isPrimaryPointer } from '../utils/is-primary-pointer.mjs';
|
||||
import { setupGesture } from '../utils/setup.mjs';
|
||||
import { isElementKeyboardAccessible } from './utils/is-keyboard-accessible.mjs';
|
||||
import { enableKeyboardPress } from './utils/keyboard.mjs';
|
||||
import { isPressing } from './utils/state.mjs';
|
||||
|
||||
/**
|
||||
* Filter out events that are not primary pointer events, or are triggering
|
||||
* while a Motion gesture is active.
|
||||
*/
|
||||
function isValidPressEvent(event) {
|
||||
return isPrimaryPointer(event) && !isDragActive();
|
||||
}
|
||||
/**
|
||||
* Create a press gesture.
|
||||
*
|
||||
* Press is different to `"pointerdown"`, `"pointerup"` in that it
|
||||
* automatically filters out secondary pointer events like right
|
||||
* click and multitouch.
|
||||
*
|
||||
* It also adds accessibility support for keyboards, where
|
||||
* an element with a press gesture will receive focus and
|
||||
* trigger on Enter `"keydown"` and `"keyup"` events.
|
||||
*
|
||||
* This is different to a browser's `"click"` event, which does
|
||||
* respond to keyboards but only for the `"click"` itself, rather
|
||||
* than the press start and end/cancel. The element also needs
|
||||
* to be focusable for this to work, whereas a press gesture will
|
||||
* make an element focusable by default.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
function press(targetOrSelector, onPressStart, options = {}) {
|
||||
const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
|
||||
const startPress = (startEvent) => {
|
||||
const target = startEvent.currentTarget;
|
||||
if (!isValidPressEvent(startEvent))
|
||||
return;
|
||||
isPressing.add(target);
|
||||
const onPressEnd = onPressStart(target, startEvent);
|
||||
const onPointerEnd = (endEvent, success) => {
|
||||
window.removeEventListener("pointerup", onPointerUp);
|
||||
window.removeEventListener("pointercancel", onPointerCancel);
|
||||
if (isPressing.has(target)) {
|
||||
isPressing.delete(target);
|
||||
}
|
||||
if (!isValidPressEvent(endEvent)) {
|
||||
return;
|
||||
}
|
||||
if (typeof onPressEnd === "function") {
|
||||
onPressEnd(endEvent, { success });
|
||||
}
|
||||
};
|
||||
const onPointerUp = (upEvent) => {
|
||||
onPointerEnd(upEvent, target === window ||
|
||||
target === document ||
|
||||
options.useGlobalTarget ||
|
||||
isNodeOrChild(target, upEvent.target));
|
||||
};
|
||||
const onPointerCancel = (cancelEvent) => {
|
||||
onPointerEnd(cancelEvent, false);
|
||||
};
|
||||
window.addEventListener("pointerup", onPointerUp, eventOptions);
|
||||
window.addEventListener("pointercancel", onPointerCancel, eventOptions);
|
||||
};
|
||||
targets.forEach((target) => {
|
||||
const pointerDownTarget = options.useGlobalTarget ? window : target;
|
||||
pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
|
||||
if (isHTMLElement(target)) {
|
||||
target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
|
||||
if (!isElementKeyboardAccessible(target) &&
|
||||
!target.hasAttribute("tabindex")) {
|
||||
target.tabIndex = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
return cancelEvents;
|
||||
}
|
||||
|
||||
export { press };
|
||||
13
node_modules/motion-dom/dist/es/gestures/press/utils/is-keyboard-accessible.mjs
generated
vendored
Normal file
13
node_modules/motion-dom/dist/es/gestures/press/utils/is-keyboard-accessible.mjs
generated
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
const focusableElements = new Set([
|
||||
"BUTTON",
|
||||
"INPUT",
|
||||
"SELECT",
|
||||
"TEXTAREA",
|
||||
"A",
|
||||
]);
|
||||
function isElementKeyboardAccessible(element) {
|
||||
return (focusableElements.has(element.tagName) ||
|
||||
element.tabIndex !== -1);
|
||||
}
|
||||
|
||||
export { isElementKeyboardAccessible };
|
||||
38
node_modules/motion-dom/dist/es/gestures/press/utils/keyboard.mjs
generated
vendored
Normal file
38
node_modules/motion-dom/dist/es/gestures/press/utils/keyboard.mjs
generated
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
import { isPressing } from './state.mjs';
|
||||
|
||||
/**
|
||||
* Filter out events that are not "Enter" keys.
|
||||
*/
|
||||
function filterEvents(callback) {
|
||||
return (event) => {
|
||||
if (event.key !== "Enter")
|
||||
return;
|
||||
callback(event);
|
||||
};
|
||||
}
|
||||
function firePointerEvent(target, type) {
|
||||
target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
|
||||
}
|
||||
const enableKeyboardPress = (focusEvent, eventOptions) => {
|
||||
const element = focusEvent.currentTarget;
|
||||
if (!element)
|
||||
return;
|
||||
const handleKeydown = filterEvents(() => {
|
||||
if (isPressing.has(element))
|
||||
return;
|
||||
firePointerEvent(element, "down");
|
||||
const handleKeyup = filterEvents(() => {
|
||||
firePointerEvent(element, "up");
|
||||
});
|
||||
const handleBlur = () => firePointerEvent(element, "cancel");
|
||||
element.addEventListener("keyup", handleKeyup, eventOptions);
|
||||
element.addEventListener("blur", handleBlur, eventOptions);
|
||||
});
|
||||
element.addEventListener("keydown", handleKeydown, eventOptions);
|
||||
/**
|
||||
* Add an event listener that fires on blur to remove the keydown events.
|
||||
*/
|
||||
element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
|
||||
};
|
||||
|
||||
export { enableKeyboardPress };
|
||||
3
node_modules/motion-dom/dist/es/gestures/press/utils/state.mjs
generated
vendored
Normal file
3
node_modules/motion-dom/dist/es/gestures/press/utils/state.mjs
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
const isPressing = new WeakSet();
|
||||
|
||||
export { isPressing };
|
||||
20
node_modules/motion-dom/dist/es/gestures/utils/is-node-or-child.mjs
generated
vendored
Normal file
20
node_modules/motion-dom/dist/es/gestures/utils/is-node-or-child.mjs
generated
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* Recursively traverse up the tree to check whether the provided child node
|
||||
* is the parent or a descendant of it.
|
||||
*
|
||||
* @param parent - Element to find
|
||||
* @param child - Element to test against parent
|
||||
*/
|
||||
const isNodeOrChild = (parent, child) => {
|
||||
if (!child) {
|
||||
return false;
|
||||
}
|
||||
else if (parent === child) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return isNodeOrChild(parent, child.parentElement);
|
||||
}
|
||||
};
|
||||
|
||||
export { isNodeOrChild };
|
||||
18
node_modules/motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs
generated
vendored
Normal file
18
node_modules/motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
const isPrimaryPointer = (event) => {
|
||||
if (event.pointerType === "mouse") {
|
||||
return typeof event.button !== "number" || event.button <= 0;
|
||||
}
|
||||
else {
|
||||
/**
|
||||
* isPrimary is true for all mice buttons, whereas every touch point
|
||||
* is regarded as its own input. So subsequent concurrent touch points
|
||||
* will be false.
|
||||
*
|
||||
* Specifically match against false here as incomplete versions of
|
||||
* PointerEvents in very old browser might have it set as undefined.
|
||||
*/
|
||||
return event.isPrimary !== false;
|
||||
}
|
||||
};
|
||||
|
||||
export { isPrimaryPointer };
|
||||
15
node_modules/motion-dom/dist/es/gestures/utils/setup.mjs
generated
vendored
Normal file
15
node_modules/motion-dom/dist/es/gestures/utils/setup.mjs
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import { resolveElements } from '../../utils/resolve-elements.mjs';
|
||||
|
||||
function setupGesture(elementOrSelector, options) {
|
||||
const elements = resolveElements(elementOrSelector);
|
||||
const gestureAbortController = new AbortController();
|
||||
const eventOptions = {
|
||||
passive: true,
|
||||
...options,
|
||||
signal: gestureAbortController.signal,
|
||||
};
|
||||
const cancel = () => gestureAbortController.abort();
|
||||
return [elements, eventOptions, cancel];
|
||||
}
|
||||
|
||||
export { setupGesture };
|
||||
Reference in New Issue
Block a user