Archives/whoogle-search
2
0
Fork 0
mirror of https://github.com/benbusby/whoogle-search synced 2024-11-08 19:10:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add basic keyboard support #202

Browse Source 
This adds basic keyboard support on the search results page:

    ArrowUp or k - focus previous result
    ArrowDown or j - focus next result
    / focus search box

Because this just focuses links in the search result items hitting Enter
(or ctrl/cmd + Enter) when an item is focused - will open the search 
result (because the link is already focused and this is browser's default
behaviour).
This commit is contained in:
Ben Busby 2021-02-20 14:47:18 -05:00 committed by GitHub
commit 38f160142e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/static/css/header.css
View File

@ -60,3 +60,9 @@ header {
margin: 15px;
display: block;
}
#main>div:focus-within {
border-radius: 8px;
box-shadow: 0 0 6px 1px #2375e8;
}

44
app/static/js/keyboard.js Normal file
View File

@ -0,0 +1,44 @@
(function () {
let searchBar, results;
const keymap = {
ArrowUp: goUp,
ArrowDown: 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('keydown', (e) => {
if (e.target.tagName === 'INPUT') return true;
if (typeof keymap[e.key] === 'function') {
e.preventDefault();
keymap[e.key]();
}
});
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();
}
}());

5
app/templates/display.html
View File

@ -5,8 +5,6 @@
<link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
<script type="text/javascript" src="static/js/autocomplete.js"></script>
<script type="text/javascript" src="static/js/utils.js"></script>
<link rel="stylesheet" href="static/css/{{ 'search-dark' if dark_mode else 'search' }}.css">
<link rel="stylesheet" href="static/css/header.css">
{% if dark_mode %}
@ -24,4 +22,7 @@
<a style="color: #685e79" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
</p>
</footer>
<script src="static/js/autocomplete.js"></script>
<script src="static/js/utils.js"></script>
<script src="static/js/keyboard.js"></script>
</html>