Git/hugo-theme-wondermod
1
0
Fork 0
mirror of https://github.com/Wonderfall/hugo-WonderMod.git synced 2025-10-31 03:45:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Search: Keyboard Bindings for easier navigation (#138)

Browse Source 
* set up basic actions on keypress
* add actions to perform conditionally
* add simple highlight animation
* prevent mouseclick to change active element
* clear input box on Escape
* click on Arrow Right
* clear results and focus search-input on esc
* refactor
This commit is contained in:
Aditya Telange
2020-12-18 11:45:10 +05:30
committed by GitHub
parent d6b2282582
commit b7f8749cdf
3 changed files with 71 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
assets/js/fastsearch.js
View File

@@ -1,4 +1,8 @@
var fuse; // holds our search engine
var resList = document.getElementById('searchResults');
var sInput = document.getElementById('searchInput');
var first, last = null
var resultsAvailable = false;
// load our search index, only executed onload
function loadSearch() {
@@ -35,6 +39,15 @@ function loadSearch() {
xhr.send();
}
function itemGen(name, link) {
return `<li class="post-entry"><header class="entry-header">${name}&nbsp;»</header><a href="${link}" aria-label="${name}"></a></li>`
}
function activeToggle() {
document.activeElement.parentElement.classList.toggle("active")
}
// execute search as each character is typed
document.getElementById("searchInput").onkeyup = function (e) {
// run a search query (for "term") every time a letter is typed
@@ -50,11 +63,60 @@ document.getElementById("searchInput").onkeyup = function (e) {
}
document.getElementById("searchResults").innerHTML = resultSet;
resultsAvailable = true;
first = resList.firstChild;
last = resList.lastChild;
} else {
resultsAvailable = false;
document.getElementById("searchResults").innerHTML = '';
}
}
function itemGen(name, link) {
return `<li class="post-entry"><header class="entry-header">${name}&nbsp;»</header><a href="${link}" aria-label="${name}"></a></li>`
// kb bindings
document.onkeydown = function (e) {
let key = e.key;
let ae = document.activeElement;
if (key === "ArrowDown" && resultsAvailable) {
e.preventDefault();
if (ae == sInput) {
// if the currently focused element is the search input, focus the <a> of first <li>
activeToggle(); // rm active class
resList.firstChild.lastChild.focus();
activeToggle(); // add active class
} else if (ae.parentElement == last) {
// if the currently focused element's parent is last, do nothing
} else {
// otherwise select the next search result
activeToggle(); // rm active class
ae.parentElement.nextSibling.lastChild.focus();
activeToggle(); // add active class
}
} else if (key === "ArrowUp" && resultsAvailable) {
e.preventDefault();
if (ae == sInput) {
// if the currently focused element is input box, do nothing
} else if (ae.parentElement == first) {
// if the currently focused element is first item, go to input box
activeToggle(); // rm active class
sInput.focus();
} else {
// otherwise select the previous search result
activeToggle(); // rm active class
ae.parentElement.previousSibling.lastChild.focus();
activeToggle(); // add active class
}
} else if (key === "ArrowRight" && resultsAvailable) {
ae.click(); // click on active link
} else if (key === "Escape") {
resultsAvailable = false;
document.getElementById("searchResults").innerHTML = sInput.value = ''; // clear inputbox and searchResults
sInput.focus(); // shift focus to input box
}
}
document.onmousedown = function (e) {
if (e.type === "mousedown") {
e.preventDefault(); // prevent mousedown to change focus
}
}