JakeHillion/hugo-PaperMod
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix focus ghosting in search results O_o

Browse Source
This commit is contained in:
Aditya Telange 2021-04-10 00:59:24 +05:30
parent c255d148d8
commit f1bc3471a6
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
assets/js/fastsearch.js
View File

@ -3,7 +3,7 @@ import * as params from '@params';
var fuse; // holds our search engine var fuse; // holds our search engine
var resList = document.getElementById('searchResults'); var resList = document.getElementById('searchResults');
var sInput = document.getElementById('searchInput'); var sInput = document.getElementById('searchInput');
var first, last = null var first, last, current_elem = null
var resultsAvailable = false; var resultsAvailable = false;
// load our search index // load our search index
@ -38,8 +38,18 @@ window.onload = function () {
xhr.send(); xhr.send();
} }
function activeToggle() { function activeToggle(ae) {
document.activeElement.parentElement.classList.toggle("focus") document.querySelectorAll('.focus').forEach(function (element) {
// rm focus class
element.classList.remove("focus")
});
if (ae) {
ae.focus()
document.activeElement = current_elem = ae;
ae.parentElement.classList.add("focus")
} else {
document.activeElement.parentElement.classList.add("focus")
}
} }
function reset() { function reset() {
@ -82,7 +92,8 @@ sInput.addEventListener('search', function (e) {
// kb bindings // kb bindings
document.onkeydown = function (e) { document.onkeydown = function (e) {
let key = e.key; let key = e.key;
let ae = document.activeElement; var ae = document.activeElement;
let inbox = document.getElementById("searchbox").contains(ae) let inbox = document.getElementById("searchbox").contains(ae)
if (ae === sInput) { if (ae === sInput) {
@ -90,22 +101,18 @@ document.onkeydown = function (e) {
while (elements.length > 0) { while (elements.length > 0) {
elements[0].classList.remove('focus'); elements[0].classList.remove('focus');
} }
} } else if (current_elem) ae = current_elem;
if (key === "ArrowDown" && resultsAvailable && inbox) { if (key === "ArrowDown" && resultsAvailable && inbox) {
e.preventDefault(); e.preventDefault();
if (ae == sInput) { if (ae == sInput) {
// if the currently focused element is the search input, focus the <a> of first <li> // if the currently focused element is the search input, focus the <a> of first <li>
activeToggle(); // rm focus class activeToggle(resList.firstChild.lastChild);
resList.firstChild.lastChild.focus();
activeToggle(); // add focus class
} else if (ae.parentElement == last) { } else if (ae.parentElement == last) {
// if the currently focused element's parent is last, do nothing // if the currently focused element's parent is last, do nothing
} else { } else {
// otherwise select the next search result // otherwise select the next search result
activeToggle(); // rm focus class activeToggle(ae.parentElement.nextSibling.lastChild);
ae.parentElement.nextSibling.lastChild.focus();
activeToggle(); // add focus class
} }
} else if (key === "ArrowUp" && resultsAvailable && inbox) { } else if (key === "ArrowUp" && resultsAvailable && inbox) {
e.preventDefault(); e.preventDefault();
@ -113,13 +120,10 @@ document.onkeydown = function (e) {
// if the currently focused element is input box, do nothing // if the currently focused element is input box, do nothing
} else if (ae.parentElement == first) { } else if (ae.parentElement == first) {
// if the currently focused element is first item, go to input box // if the currently focused element is first item, go to input box
activeToggle(); // rm focus class activeToggle(sInput);
sInput.focus();
} else { } else {
// otherwise select the previous search result // otherwise select the previous search result
activeToggle(); // rm focus class activeToggle(ae.parentElement.previousSibling.lastChild);
ae.parentElement.previousSibling.lastChild.focus();
activeToggle(); // add focus class
} }
} else if (key === "ArrowRight" && resultsAvailable && inbox) { } else if (key === "ArrowRight" && resultsAvailable && inbox) {
ae.click(); // click on active link ae.click(); // click on active link