hover.mjs 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import { isDragActive } from './drag/state/is-active.mjs';
  2. import { setupGesture } from './utils/setup.mjs';
  3. function isValidHover(event) {
  4. return !(event.pointerType === "touch" || isDragActive());
  5. }
  6. /**
  7. * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
  8. * in that it has an easier syntax, filters out polyfilled touch events, interoperates
  9. * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
  10. *
  11. * @public
  12. */
  13. function hover(elementOrSelector, onHoverStart, options = {}) {
  14. const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
  15. const onPointerEnter = (enterEvent) => {
  16. if (!isValidHover(enterEvent))
  17. return;
  18. const { target } = enterEvent;
  19. const onHoverEnd = onHoverStart(target, enterEvent);
  20. if (typeof onHoverEnd !== "function" || !target)
  21. return;
  22. const onPointerLeave = (leaveEvent) => {
  23. if (!isValidHover(leaveEvent))
  24. return;
  25. onHoverEnd(leaveEvent);
  26. target.removeEventListener("pointerleave", onPointerLeave);
  27. };
  28. target.addEventListener("pointerleave", onPointerLeave, eventOptions);
  29. };
  30. elements.forEach((element) => {
  31. element.addEventListener("pointerenter", onPointerEnter, eventOptions);
  32. });
  33. return cancel;
  34. }
  35. export { hover };