forked from MapComplete/MapComplete
22 lines
734 B
TypeScript
22 lines
734 B
TypeScript
|
export function focusWithArrows(htmlElement: HTMLDivElement, classname: string) {
|
||
|
|
const destroy: () => void = undefined
|
||
|
|
htmlElement.addEventListener("keyup", e => {
|
||
|
|
const currentElement = document.activeElement
|
||
|
|
const canBeSelected = <HTMLElement[]> Array.from(htmlElement.getElementsByClassName(classname))
|
||
|
|
|
||
|
|
const i = canBeSelected.findIndex(el => el.contains(currentElement) || el === currentElement)
|
||
|
|
const l = canBeSelected.length
|
||
|
|
if (e.key === "ArrowDown") {
|
||
|
|
canBeSelected.at((i + 1) % l).focus()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (e.key === "ArrowUp") {
|
||
|
|
canBeSelected.at((i - 1) ).focus()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return { destroy }
|
||
|
|
}
|
||
|
|
|