motion-plus-vue
Version:
Motion Plus Vue
109 lines (108 loc) • 3.32 kB
JavaScript
import { isHTMLElement as b, wrap as D } from "motion-v";
import { watch as N, nextTick as S } from "vue";
function j(s, r, w, k, v) {
let a = !1;
N(s, (t, U, A) => {
if (!t)
return;
let l = !1;
const x = new AbortController(), i = {
signal: x.signal
}, m = {
...i,
capture: !0
}, T = r.value === "x" ? "scrollLeft" : "scrollTop", I = r.value === "x" ? "offsetLeft" : "offsetTop", F = r.value === "x" ? "ArrowLeft" : "ArrowUp", C = r.value === "x" ? "ArrowRight" : "ArrowDown";
let c = [], o = 0;
const E = async () => {
const e = c[o];
e.focus(), await S(), w.set(-e[I]), t[T] = 0;
}, g = (e) => {
if (e.key === "Tab") {
e.preventDefault(), p();
const n = Array.from(
document.querySelectorAll(
'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]'
)
).filter(b);
n.sort(R);
const u = n[e.shiftKey ? 0 : n.length - 1], M = e.shiftKey ? n.length - 1 : 0;
if (t.contains(u)) {
n[M].focus();
return;
} else {
const P = n.indexOf(
c[o]
), q = e.shiftKey ? -1 : 1;
for (let f = P; f < n.length && f >= 0; f += q) {
const L = n[f];
if (!t.contains(L)) {
L.focus();
return;
}
}
}
return;
} else e.key === F ? o-- : e.key === C && o++;
o = D(0, c.length, o), E();
}, K = () => {
a || (v(!0), a = !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(b), o = 0, E(), window.addEventListener(
"focus",
d,
m
), window.addEventListener(
"blur",
d,
m
), t.addEventListener(
"keydown",
g,
i
));
}, d = (e) => {
(!e.target || !(e.target instanceof HTMLElement) || !t.contains(e.target)) && p();
}, p = () => {
a && (a = !1, v(!1), k.value.set(w.get()), window.removeEventListener("focus", d), window.removeEventListener("blur", d), t.removeEventListener("keydown", g));
}, h = (e) => {
const { target: n } = e;
b(n) && (a || K());
}, O = () => {
l || (l = !0, t.addEventListener(
"focus",
h,
m
), window.addEventListener(
"pointermove",
y,
i
));
}, y = () => {
l && (l = !1, t.removeEventListener("focus", h, !0), window.removeEventListener(
"pointermove",
y,
i
));
}, H = (e) => {
const u = e.target.closest('[aria-hidden="true"]');
u && u.removeAttribute("aria-hidden");
};
window.addEventListener("keydown", O, i), t.addEventListener(
"pointerdown",
H,
i
), A(() => {
x.abort(), p();
});
}, {
flush: "post"
});
}
function R(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 {
j as useFocusNavigation
};