diff --git a/chrome/script.browserify.js b/chrome/script.browserify.js index dd8debe..b81e183 100644 --- a/chrome/script.browserify.js +++ b/chrome/script.browserify.js @@ -43,34 +43,35 @@ function view() { } } - return [ - // search form - m("div.search", [ - m( - "form", - { - onsubmit: submitSearchForm - }, - [ - m("input", { - type: "text", - name: "s", - placeholder: "Search password..", - autocomplete: "off", - autofocus: "on" - }), - m("input", { - type: "submit", - value: "Search", - style: "display: none;" - }) - ] - ) - ]), - - // results - m("div.results", results) - ]; + return m('div.container', { onkeydown: keyHandler }, [ + // search form + m("div.search", [ + m( + "form", + { + onsubmit: submitSearchForm + }, + [ + m("input", { + type: "text", + id: "search-field", + name: "s", + placeholder: "Search password..", + autocomplete: "off", + autofocus: "on" + }), + m("input", { + type: "submit", + value: "Search", + style: "display: none;" + }) + ] + ) + ]), + + // results + m("div.results", results) + ]); } function submitSearchForm(e) { @@ -149,3 +150,30 @@ function getLoginData() { } ); } + +// This function uses regular DOM +// therefore there is no need for redraw calls +function keyHandler(e) { + switch (e.key) { + case 'ArrowUp': + switchFocus('button.login:last-child', 'previousElementSibling'); + break; + + case 'ArrowDown': + switchFocus('button.login:first-child', 'nextElementSibling'); + break; + } +} + +function switchFocus(firstSelector, nextNodeAttr) { + var inputId = 'search-field'; + var newActive = document.activeElement.id === inputId ? + document.querySelector(firstSelector) : + document.activeElement[nextNodeAttr]; + + if (newActive) { + newActive.focus(); + } else { + document.getElementById(inputId).focus(); + } +}