1 line
5.8 KiB
Plaintext
1 line
5.8 KiB
Plaintext
|
{"version":3,"file":"hover.mjs","sources":["../../../src/gestures/hover.ts"],"sourcesContent":["import { ElementOrSelector } from \"../utils/resolve-elements\"\nimport { isDragActive } from \"./drag/state/is-active\"\nimport { EventOptions } from \"./types\"\nimport { setupGesture } from \"./utils/setup\"\n\n/**\n * A function to be called when a hover gesture starts.\n *\n * This function can optionally return a function that will be called\n * when the hover gesture ends.\n *\n * @public\n */\nexport type OnHoverStartEvent = (\n element: Element,\n event: PointerEvent\n) => void | OnHoverEndEvent\n\n/**\n * A function to be called when a hover gesture ends.\n *\n * @public\n */\nexport type OnHoverEndEvent = (event: PointerEvent) => void\n\nfunction isValidHover(event: PointerEvent) {\n return !(event.pointerType === \"touch\" || isDragActive())\n}\n\n/**\n * Create a hover gesture. hover() is different to .addEventListener(\"pointerenter\")\n * in that it has an easier syntax, filters out polyfilled touch events, interoperates\n * with drag gestures, and automatically removes the \"pointerennd\" event listener when the hover ends.\n *\n * @public\n */\nexport function hover(\n elementOrSelector: ElementOrSelector,\n onHoverStart: OnHoverStartEvent,\n options: EventOptions = {}\n): VoidFunction {\n const [elements, eventOptions, cancel] = setupGesture(\n elementOrSelector,\n options\n )\n\n elements.forEach((element) => {\n let isPressed = false\n let deferredHoverEnd = false\n let hoverEndCallback: OnHoverEndEvent | undefined\n\n const removePointerLeave = () => {\n element.removeEventListener(\n \"pointerleave\",\n onPointerLeave as EventListener\n )\n }\n\n const endHover = (event: PointerEvent) => {\n if (hoverEndCallback) {\n hoverEndCallback(event)\n hoverEndCallback = undefined\n }\n removePointerLeave()\n }\n\n const onPointerUp = (event: Event) => {\n isPressed = false\n window.removeEventListener(\n \"pointerup\",\n onPointerUp as EventListener\n )\n window.removeEventListener(\n \"pointercancel\",\n onPointerUp as EventListener\n )\n\n if (deferredHoverEnd) {\n deferredHoverEnd = false\n endHover(event as PointerEvent)\n }\n }\n\n const onPointerDown = () => {\n isPressed = true\n window.addEventListener(\n \"pointerup\",\n onPointerUp as EventListener,\n eventOptions\n )\n window.addEventListener(\n \"pointercancel\",\n onPointerUp as EventListener,\n eventOptions\n )\n }\n\n const onPointerLeave = (leaveEvent: PointerEvent) => {\n if (leaveEvent.pointerType === \"touch\") return\n\n if (isPressed) {\n deferredHoverEnd = true\n return\n }\n\n endHover(leaveEvent)\n }\n\n const onPointerEnter = (enterEvent: PointerEvent) => {\n if (!isValidHover(enterEvent)) return\n\n deferredHoverEnd = false\n\n const onHoverEnd = onHoverStart(\n element as Element,\n enterEvent\n )\n\n if (typeof onHoverEnd !== \"function\") return\n\n hoverEndCallback = onHoverEnd\n\n element.addEventListener(\n \"pointerleave\",\n onPointerLeave as EventListener,\n eventOptions\n )\n }\n\n element.addEventListener(\n \"pointerenter\",\n onPointerEnter as EventListener,\n eventOptions\n )\n element.addEventListener(\n \"pointerdown\",\n onPointerDown as EventListener,
|