You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
968 B
49 lines
968 B
3 years ago
|
var currentIndex = 0
|
||
|
|
||
|
function nav(offset) {
|
||
|
var items = document.querySelectorAll('.items:not(.disabled)')
|
||
|
if (offset === -1) {
|
||
|
if (currentIndex <= 0) {
|
||
|
return
|
||
|
}
|
||
|
}
|
||
|
else if (offset === 1) {
|
||
|
if (currentIndex >= items.length - 1) {
|
||
|
return
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
console.error(`nav called with unknown offset: ${offset}`)
|
||
|
}
|
||
|
|
||
|
currentIndex += offset
|
||
|
items[currentIndex].focus()
|
||
|
items[currentIndex].addEventListener('keydown', handleKeyDown)
|
||
|
}
|
||
|
|
||
|
function handleKeyDown(e) {
|
||
|
switch (e.key) {
|
||
|
case 'ArrowUp':
|
||
|
e.preventDefault()
|
||
|
e.stopPropagation()
|
||
|
nav(-1)
|
||
|
break
|
||
|
case 'ArrowDown':
|
||
|
e.preventDefault()
|
||
|
e.stopPropagation()
|
||
|
nav(1)
|
||
|
break
|
||
|
}
|
||
|
}
|
||
|
|
||
|
window.addEventListener('load', function (e) {
|
||
|
// Select first item
|
||
|
var items = document.querySelectorAll('.items:not(.disabled)')
|
||
|
if (items.length > 0) {
|
||
|
items[0].focus()
|
||
|
items[0].addEventListener('keydown', handleKeyDown)
|
||
|
}
|
||
|
|
||
|
document.body.addEventListener('keydown', handleKeyDown)
|
||
|
})
|