motion-plus-vue/dist/es/components/Ticker/use-keyboard-focus.mjs

Motion Plus Vue

import { isHTMLElement as f, frame as F, wrap as T } from "motion-v";
import { onMounted as A, onUnmounted as K } from "vue";
function D(s, r, w) {
  let i = !1;
  A(() => {
    const t = s.value;
    if (!t)
      return;
    const d = r.value === "x" ? "scrollLeft" : "scrollTop", y = r.value === "x" ? "offsetLeft" : "offsetTop", E = r.value === "x" ? "ArrowLeft" : "ArrowUp", L = r.value === "x" ? "ArrowRight" : "ArrowDown";
    let c = [], o = 0;
    const m = () => {
      const e = c[o];
      e.focus(), w.set(-e[y]), t[d] = 0, F.render(() => {
        t[d] = 0;
      });
    }, b = (e) => {
      if (e.key === "Tab") {
        e.preventDefault(), u();
        const n = Array.from(
          document.querySelectorAll(
            'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]'
          )
        ).filter(f);
        n.sort(M);
        const g = n[e.shiftKey ? 0 : n.length - 1], h = e.shiftKey ? n.length - 1 : 0;
        if (t.contains(g)) {
          n[h].focus();
          return;
        } else {
          const v = n.indexOf(
            c[o]
          ), I = e.shiftKey ? -1 : 1;
          for (let l = v; l < n.length && l >= 0; l += I) {
            const p = n[l];
            if (!t.contains(p)) {
              p.focus();
              return;
            }
          }
        }
        return;
      } else e.key === E ? o-- : e.key === L && o++;
      o = T(0, c.length, o), m();
    }, k = () => {
      i || (i = !0, c = Array.from(
        t.querySelectorAll(
          '.ticker-item a, .ticker-item button, .ticker-item input, .ticker-item textarea, .ticker-item select, .ticker-item [tabindex]:not([tabindex="-1"]), .ticker-item [contenteditable="true"]'
        )
      ).filter(f), o = 0, m(), window.addEventListener("focus", a, !0), window.addEventListener("blur", a, !0), t.addEventListener("keydown", b));
    }, a = (e) => {
      (!e.target || !(e.target instanceof HTMLElement) || !t.contains(e.target)) && u();
    }, u = () => {
      i && (i = !1, window.removeEventListener("focus", a, !0), window.removeEventListener("blur", a, !0), t.removeEventListener("keydown", b));
    }, x = (e) => {
      const { target: n } = e;
      f(n) && (i || k());
    };
    t.addEventListener("focus", x, !0), K(() => {
      t.removeEventListener("focus", x), u();
    });
  });
}
function M(s, r) {
  return s.tabIndex >= 1 && r.tabIndex >= 1 ? s.tabIndex - r.tabIndex : s.tabIndex >= 1 && r.tabIndex <= 0 ? -1 : r.tabIndex >= 1 && s.tabIndex <= 0 ? 1 : 0;
}
export {
  D as useKeyboardFocus
};