motion-dom - npm Package Compare versions

Comparing version 11.13.0-beta.0 to 11.13.0

dist/cjs/index.js

@@ -26,26 +26,81 @@ 'use strict';
 
-function hover(elementOrSelector, onHoverStart) {
-    const elements = resolveElements(elementOrSelector);
-    const cancelGesture = new AbortController();
-    const options = { signal: cancelGesture.signal };
-    const onPointerEnter = (enterEvent) => {
-        if (enterEvent.pointerType === "touch")
+const isDragging = {
+    x: false,
+    y: false,
+};
+function isDragActive() {
+    return isDragging.x || isDragging.y;
+}
+
+/**
+ * Filter out events that are not pointer events, or are triggering
+ * while a Motion gesture is active.
+ */
+function filterEvents(callback) {
+    return (event) => {
+        if (event.pointerType === "touch" || isDragActive())
             return;
+        callback(event);
+    };
+}
+/**
+ * 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 gestureAbortController = new AbortController();
+    const eventOptions = {
+        passive: true,
+        ...options,
+        signal: gestureAbortController.signal,
+    };
+    const onPointerEnter = filterEvents((enterEvent) => {
         const { target } = enterEvent;
         const onHoverEnd = onHoverStart(enterEvent);
-        if (onHoverEnd && target) {
-            const onPointerLeave = (leaveEvent) => {
-                onHoverEnd(leaveEvent);
-                target.removeEventListener("pointerleave", onPointerLeave);
+        if (!onHoverEnd || !target)
+            return;
+        const onPointerLeave = filterEvents((leaveEvent) => {
+            onHoverEnd(leaveEvent);
+            target.removeEventListener("pointerleave", onPointerLeave);
+        });
+        target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+    });
+    resolveElements(elementOrSelector).forEach((element) => {
+        element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+    });
+    return () => gestureAbortController.abort();
+}
+
+function setDragLock(axis) {
+    if (axis === "x" || axis === "y") {
+        if (isDragging[axis]) {
+            return null;
+        }
+        else {
+            isDragging[axis] = true;
+            return () => {
+                isDragging[axis] = false;
             };
-            target.addEventListener("pointerleave", onPointerLeave, options);
         }
-    };
-    elements.forEach((element) => {
-        element.addEventListener("pointerenter", onPointerEnter, options);
-    });
-    return () => cancelGesture.abort();
+    }
+    else {
+        if (isDragging.x || isDragging.y) {
+            return null;
+        }
+        else {
+            isDragging.x = isDragging.y = true;
+            return () => {
+                isDragging.x = isDragging.y = false;
+            };
+        }
+    }
 }
 
 exports.hover = hover;
+exports.isDragActive = isDragActive;
+exports.isDragging = isDragging;
 exports.resolveElements = resolveElements;
+exports.setDragLock = setDragLock;

dist/index.d.ts

@@ -14,6 +14,54 @@ type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
 
+/**
+ * Options for the hover gesture.
+ *
+ * @public
+ */
+interface HoverOptions {
+    /**
+     * Use passive event listeners. Doing so allows the browser to optimize
+     * scrolling performance by not allowing the use of `preventDefault()`.
+     *
+     * @default true
+     */
+    passive?: boolean;
+    /**
+     * Remove the event listener after the first event.
+     *
+     * @default false
+     */
+    once?: boolean;
+}
+/**
+ * A function to be called when a hover gesture starts.
+ *
+ * This function can optionally return a function that will be called
+ * when the hover gesture ends.
+ *
+ * @public
+ */
 type OnHoverStartEvent = (event: PointerEvent) => void | OnHoverEndEvent;
+/**
+ * A function to be called when a hover gesture ends.
+ *
+ * @public
+ */
 type OnHoverEndEvent = (event: PointerEvent) => void;
-declare function hover(elementOrSelector: ElementOrSelector, onHoverStart: OnHoverStartEvent): () => void;
+/**
+ * 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
+ */
+declare function hover(elementOrSelector: ElementOrSelector, onHoverStart: OnHoverStartEvent, options?: HoverOptions): () => void;
 
-export { type AnimationScope, type ElementOrSelector, type OnHoverEndEvent, type OnHoverStartEvent, type SelectorCache, type WithQuerySelectorAll, hover, resolveElements };
+declare const isDragging: {
+    x: boolean;
+    y: boolean;
+};
+declare function isDragActive(): boolean;
+
+declare function setDragLock(axis: boolean | "x" | "y" | "lockDirection"): (() => void) | null;
+
+export { type AnimationScope, type ElementOrSelector, type HoverOptions, type OnHoverEndEvent, type OnHoverStartEvent, type SelectorCache, type WithQuerySelectorAll, hover, isDragActive, isDragging, resolveElements, setDragLock };

lib/gestures/hover.js

 import { resolveElements } from "../utils/resolve-elements";
-export function hover(elementOrSelector, onHoverStart) {
-    const elements = resolveElements(elementOrSelector);
-    const cancelGesture = new AbortController();
-    const options = { signal: cancelGesture.signal };
-    const onPointerEnter = (enterEvent) => {
-        if (enterEvent.pointerType === "touch")
+import { isDragActive } from "./drag/state/is-active";
+/**
+ * Filter out events that are not pointer events, or are triggering
+ * while a Motion gesture is active.
+ */
+function filterEvents(callback) {
+    return (event) => {
+        if (event.pointerType === "touch" || isDragActive())
             return;
+        callback(event);
+    };
+}
+/**
+ * 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
+ */
+export function hover(elementOrSelector, onHoverStart, options = {}) {
+    const gestureAbortController = new AbortController();
+    const eventOptions = {
+        passive: true,
+        ...options,
+        signal: gestureAbortController.signal,
+    };
+    const onPointerEnter = filterEvents((enterEvent) => {
         const { target } = enterEvent;
         const onHoverEnd = onHoverStart(enterEvent);
-        if (onHoverEnd && target) {
-            const onPointerLeave = (leaveEvent) => {
-                onHoverEnd(leaveEvent);
-                target.removeEventListener("pointerleave", onPointerLeave);
-            };
-            target.addEventListener("pointerleave", onPointerLeave, options);
-        }
-    };
-    elements.forEach((element) => {
-        element.addEventListener("pointerenter", onPointerEnter, options);
+        if (!onHoverEnd || !target)
+            return;
+        const onPointerLeave = filterEvents((leaveEvent) => {
+            onHoverEnd(leaveEvent);
+            target.removeEventListener("pointerleave", onPointerLeave);
+        });
+        target.addEventListener("pointerleave", onPointerLeave, eventOptions);
     });
-    return () => cancelGesture.abort();
+    resolveElements(elementOrSelector).forEach((element) => {
+        element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+    });
+    return () => gestureAbortController.abort();
 }
 //# sourceMappingURL=hover.js.map

lib/index.js

 export * from "./gestures/hover";
 export * from "./utils/resolve-elements";
+export * from "./gestures/drag/state/is-active";
+export * from "./gestures/drag/state/set-active";
 //# sourceMappingURL=index.js.map

package.json

 {
     "name": "motion-dom",
-    "version": "11.13.0-beta.0",
+    "version": "11.13.0",
     "main": "./lib/index.js",
@@ -26,3 +26,3 @@ "types": "./types/index.d.ts",
     },
-    "gitHead": "8196639f42c2f78b2f52392b867fcac4d8eeacc6"
+    "gitHead": "c6ea900aecfec3e946a0f33db4672e0194f3048b"
 }

src/gestures/hover.ts

 import { ElementOrSelector, resolveElements } from "../utils/resolve-elements"
+import { isDragActive } from "./drag/state/is-active"
 
+/**
+ * Options for the hover gesture.
+ *
+ * @public
+ */
+export interface HoverOptions {
+    /**
+     * Use passive event listeners. Doing so allows the browser to optimize
+     * scrolling performance by not allowing the use of `preventDefault()`.
+     *
+     * @default true
+     */
+    passive?: boolean
+
+    /**
+     * Remove the event listener after the first event.
+     *
+     * @default false
+     */
+    once?: boolean
+}
+
+/**
+ * A function to be called when a hover gesture starts.
+ *
+ * This function can optionally return a function that will be called
+ * when the hover gesture ends.
+ *
+ * @public
+ */
 export type OnHoverStartEvent = (event: PointerEvent) => void | OnHoverEndEvent
+
+/**
+ * A function to be called when a hover gesture ends.
+ *
+ * @public
+ */
 export type OnHoverEndEvent = (event: PointerEvent) => void
 
+/**
+ * Filter out events that are not pointer events, or are triggering
+ * while a Motion gesture is active.
+ */
+function filterEvents(callback: OnHoverStartEvent) {
+    return (event: PointerEvent) => {
+        if (event.pointerType === "touch" || isDragActive()) return
+        callback(event)
+    }
+}
+
+/**
+ * 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
+ */
 export function hover(
     elementOrSelector: ElementOrSelector,
-    onHoverStart: OnHoverStartEvent
+    onHoverStart: OnHoverStartEvent,
+    options: HoverOptions = {}
 ) {
-    const elements = resolveElements(elementOrSelector)
-    const cancelGesture = new AbortController()
+    const gestureAbortController = new AbortController()
 
-    const options = { signal: cancelGesture.signal }
+    const eventOptions = {
+        passive: true,
+        ...options,
+        signal: gestureAbortController.signal,
+    }
 
-    const onPointerEnter = (enterEvent: PointerEvent) => {
-        if (enterEvent.pointerType === "touch") return
-
+    const onPointerEnter = filterEvents((enterEvent: PointerEvent) => {
         const { target } = enterEvent
         const onHoverEnd = onHoverStart(enterEvent)
 
-        if (onHoverEnd && target) {
-            const onPointerLeave = (leaveEvent: PointerEvent) => {
-                onHoverEnd(leaveEvent)
-                target.removeEventListener("pointerleave", onPointerLeave)
-            }
+        if (!onHoverEnd || !target) return
 
-            target.addEventListener("pointerleave", onPointerLeave, options)
-        }
-    }
+        const onPointerLeave = filterEvents((leaveEvent: PointerEvent) => {
+            onHoverEnd(leaveEvent)
+            target.removeEventListener("pointerleave", onPointerLeave)
+        })
 
-    elements.forEach((element) => {
-        element.addEventListener("pointerenter", onPointerEnter, options)
+        target.addEventListener("pointerleave", onPointerLeave, eventOptions)
     })
 
-    return () => cancelGesture.abort()
+    resolveElements(elementOrSelector).forEach((element) => {
+        element.addEventListener("pointerenter", onPointerEnter, eventOptions)
+    })
+
+    return () => gestureAbortController.abort()
 }

src/index.ts

 export * from "./gestures/hover"
+
 export * from "./utils/resolve-elements"
+export * from "./gestures/drag/state/is-active"
+export * from "./gestures/drag/state/set-active"

types/gestures/hover.d.ts

 import { ElementOrSelector } from "../utils/resolve-elements";
+/**
+ * Options for the hover gesture.
+ *
+ * @public
+ */
+export interface HoverOptions {
+    /**
+     * Use passive event listeners. Doing so allows the browser to optimize
+     * scrolling performance by not allowing the use of `preventDefault()`.
+     *
+     * @default true
+     */
+    passive?: boolean;
+    /**
+     * Remove the event listener after the first event.
+     *
+     * @default false
+     */
+    once?: boolean;
+}
+/**
+ * A function to be called when a hover gesture starts.
+ *
+ * This function can optionally return a function that will be called
+ * when the hover gesture ends.
+ *
+ * @public
+ */
 export type OnHoverStartEvent = (event: PointerEvent) => void | OnHoverEndEvent;
+/**
+ * A function to be called when a hover gesture ends.
+ *
+ * @public
+ */
 export type OnHoverEndEvent = (event: PointerEvent) => void;
-export declare function hover(elementOrSelector: ElementOrSelector, onHoverStart: OnHoverStartEvent): () => void;
+/**
+ * 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
+ */
+export declare function hover(elementOrSelector: ElementOrSelector, onHoverStart: OnHoverStartEvent, options?: HoverOptions): () => void;

types/index.d.ts

 export * from "./gestures/hover";
 export * from "./utils/resolve-elements";
+export * from "./gestures/drag/state/is-active";
+export * from "./gestures/drag/state/set-active";

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27862

increased by63.29%

Number of package files

32

increased by45.45%

Lines of code

687

increased by98.55%

Number of low quality alerts

1

decreased by-50%

No dependency changes