diff --git a/app/static/js/keyboard.js b/app/static/js/keyboard.js index 7fd05ef..14df9d5 100644 --- a/app/static/js/keyboard.js +++ b/app/static/js/keyboard.js @@ -1,44 +1,58 @@ (function () { - let searchBar, results; - const keymap = { - ArrowUp: goUp, - ArrowDown: goDown, - k: goUp, - j: goDown, - '/': focusSearch, - }; - let activeIdx = -1; + let searchBar, results; + let shift = false; + const keymap = { + ArrowUp: goUp, + ArrowDown: goDown, + ShiftTab: goUp, + Tab: goDown, + k: goUp, + j: goDown, + '/': focusSearch, + }; + let activeIdx = -1; - document.addEventListener('DOMContentLoaded', () => { - searchBar = document.querySelector('#search-bar'); - results = document.querySelectorAll('#main>div>div>div>a'); - }); + document.addEventListener('DOMContentLoaded', () => { + searchBar = document.querySelector('#search-bar'); + results = document.querySelectorAll('#main>div>div>div>a'); + }); - document.addEventListener('keydown', (e) => { - if (e.target.tagName === 'INPUT') return true; - if (typeof keymap[e.key] === 'function') { - e.preventDefault(); - keymap[e.key](); - } - }); + document.addEventListener('keydown', (e) => { + if (e.key === 'Shift') { + shift = true; + } - function goUp () { - if (activeIdx > 0) focusResult(activeIdx - 1); - else focusSearch(); - } + if (e.target.tagName === 'INPUT') return true; + if (typeof keymap[e.key] === 'function') { + e.preventDefault(); - function goDown () { - if (activeIdx < results.length - 1) focusResult(activeIdx + 1); - } + keymap[`${shift && e.key == 'Tab' ? 'Shift' : ''}${e.key}`](); + } + }); - function focusResult (idx) { - activeIdx = idx; - results[activeIdx].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); - results[activeIdx].focus(); - } + document.addEventListener('keyup', (e) => { + if (e.key === 'Shift') { + shift = false; + } + }); - function focusSearch () { - activeIdx = -1; - searchBar.focus(); - } + function goUp () { + if (activeIdx > 0) focusResult(activeIdx - 1); + else focusSearch(); + } + + function goDown () { + if (activeIdx < results.length - 1) focusResult(activeIdx + 1); + } + + function focusResult (idx) { + activeIdx = idx; + results[activeIdx].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); + results[activeIdx].focus(); + } + + function focusSearch () { + activeIdx = -1; + searchBar.focus(); + } }());