@sveltek/attachments/dist/index.mjs

A collection of custom attachments for Svelte.

function clickOutside(callback, options = {}) {
  return (el) => {
    const { event: { target = document } = {}, trigger } = options;
    const triggers = Array.isArray(trigger) ? trigger : [trigger];
    const handler = (event) => {
      const target2 = event.target;
      if (el.contains(target2) || triggers.some((v) => v?.contains(target2))) {
        return;
      }
      callback(event);
    };
    target.addEventListener("click", handler, true);
    return () => {
      target.removeEventListener("click", handler, true);
    };
  };
}

function keyboard(callback, options = {}) {
  return (el) => {
    const { event: { type = "keydown", target = el } = {}, keys } = options;
    const handler = (event) => {
      if (!keys || keys.includes(event.key)) callback(event);
    };
    target.addEventListener(type, handler);
    return () => {
      target.removeEventListener(type, handler);
    };
  };
}

function preventScroll(options = {}) {
  return (el) => {
    const keys = options.keydown?.keys || [
      "ArrowLeft",
      "ArrowRight",
      "ArrowUp",
      "ArrowDown",
      "PageDown",
      "PageUp",
      "Home",
      "End",
      " "
    ];
    const {
      target,
      handler = (e) => e.preventDefault(),
      handlerKey = (e) => {
        if (keys.includes(e.key)) e.preventDefault();
      },
      wheel: { enable: wheelEnable = true, target: wheelEl = el } = {},
      touchmove: { enable: touchEnable = true, target: touchEl = el } = {},
      keydown: { enable: keyEnable = true, target: keyEl = document } = {}
    } = options;
    const wheelTarget = target || wheelEl;
    const touchTarget = target || touchEl;
    const keyTarget = target || keyEl;
    if (wheelEnable) {
      wheelTarget.addEventListener("wheel", handler, { passive: false });
    }
    if (touchEnable) {
      touchTarget.addEventListener("touchmove", handler, { passive: false });
    }
    if (keyEnable) {
      keyTarget.addEventListener("keydown", handlerKey);
    }
    return () => {
      if (wheelEnable) wheelTarget.removeEventListener("wheel", handler);
      if (touchEnable) touchTarget.removeEventListener("touchmove", handler);
      if (keyEnable) {
        keyTarget.removeEventListener("keydown", handlerKey);
      }
    };
  };
}

export { clickOutside, keyboard, preventScroll };