Problem: the hexagonal refactor churns the backend tree for nine more phases; the UI delivery stack (web/ SPA, cmd/desktop Wails wrapper, compose/web image) must move to its own repo first so doc/layout rewrites land once on a backend-only tree. Change: - New repo git.hubris.network/dtoro/oikos-web (v0.33.0): web/, desktop/ (updateURL repointed to oikos-web releases), compose/, own CI (web + desktop jobs), own deploy script (CI-green gate, TOCTOU guard, version-tagged images, prune-to-3), own webhook receiver on :9798 + launchd unit, own compose project publishing the same 8091:80. - Cutover executed on mac-mini in order: oikos stack's web service stopped+removed, oikos-web project brought up on 8091; outer Caddy untouched (targets the published port) — serving + Authentik flow + /wails 404 quirk verified post-cutover. - Stripped from oikos: web/, cmd/desktop/, compose/web/, desktop CI workflow, ci.yml web job, Makefile ui/desktop/desktop-package/install targets, the compose web service, oikos-web from deploy.sh's fallback prune list; wails + go-keyring dropped from go.mod, vendor synced. - README / CONTRIBUTING / AGENTS.md / .agents dev+operations docs now point at the new repo; mbse + mascot design docs carry a path note. Risk: production SPA serving depends on the new pipeline now; rollback is versioned-image re-up of the old web service from a pre-split checkout (port 8091). Desktop builds installed before the split still check dtoro/oikos releases — one manual reinstall, noted in the oikos-web release notes. Verification: go vet, make test (race), make generate-check, golangci (no new findings; baseline down 400→365); post-cutover curls — localhost:8091 200, /wails/runtime.js 404, outer Caddy 302 Authentik.
77 lines
2.9 KiB
JavaScript
77 lines
2.9 KiB
JavaScript
const ignoredElement = ["INPUT", "TEXTAREA"];
|
|
/**
|
|
*
|
|
* @param e Keyboard event
|
|
* @param currentElement Event initiator element or any element that wants to handle the navigation
|
|
* @param parentElement Parent element where contains all the collection items, this will collect every item to be used when nav
|
|
* @param options further options
|
|
* @returns the navigated html element or null if none
|
|
*/
|
|
export function useArrowNavigation(e, currentElement, parentElement, options) {
|
|
if (!currentElement ||
|
|
(options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName))) {
|
|
return null;
|
|
}
|
|
const { arrowKeyOptions = "both", candidateSelector: attributeName, itemsArray = [], loop = true, dir = "ltr", preventScroll = true, focus = false, } = options;
|
|
const [right, left, up, down, home, end] = [
|
|
e.key === "ArrowRight",
|
|
e.key === "ArrowLeft",
|
|
e.key === "ArrowUp",
|
|
e.key === "ArrowDown",
|
|
e.key === "Home",
|
|
e.key === "End",
|
|
];
|
|
const goingVertical = up || down;
|
|
const goingHorizontal = right || left;
|
|
if (!home &&
|
|
!end &&
|
|
((!goingVertical && !goingHorizontal) ||
|
|
(arrowKeyOptions === "vertical" && goingHorizontal) ||
|
|
(arrowKeyOptions === "horizontal" && goingVertical)))
|
|
return null;
|
|
const allCollectionItems = parentElement
|
|
? Array.from(parentElement.querySelectorAll(attributeName))
|
|
: itemsArray;
|
|
if (!allCollectionItems.length)
|
|
return null;
|
|
if (preventScroll)
|
|
e.preventDefault();
|
|
let item = null;
|
|
if (goingHorizontal || goingVertical) {
|
|
const goForward = goingVertical ? down : dir === "ltr" ? right : left;
|
|
item = findNextFocusableElement(allCollectionItems, currentElement, {
|
|
goForward,
|
|
loop,
|
|
});
|
|
}
|
|
else if (home) {
|
|
item = allCollectionItems.at(0) || null;
|
|
}
|
|
else if (end) {
|
|
item = allCollectionItems.at(-1) || null;
|
|
}
|
|
if (focus)
|
|
item?.focus();
|
|
return item;
|
|
}
|
|
/**
|
|
* Recursive function to find the next focusable element to avoid disabled elements
|
|
*/
|
|
function findNextFocusableElement(elements, currentElement, { goForward, loop }, iterations = elements.length) {
|
|
if (--iterations === 0)
|
|
return null;
|
|
const index = elements.indexOf(currentElement);
|
|
const newIndex = goForward ? index + 1 : index - 1;
|
|
if (!loop && (newIndex < 0 || newIndex >= elements.length))
|
|
return null;
|
|
const adjustedNewIndex = (newIndex + elements.length) % elements.length;
|
|
const candidate = elements[adjustedNewIndex];
|
|
if (!candidate)
|
|
return null;
|
|
const isDisabled = candidate.hasAttribute("disabled") && candidate.getAttribute("disabled") !== "false";
|
|
if (isDisabled) {
|
|
return findNextFocusableElement(elements, candidate, { goForward, loop }, iterations);
|
|
}
|
|
return candidate;
|
|
}
|