From e03348c041bc8c5c6399d2299a4a63dc93473aa0 Mon Sep 17 00:00:00 2001 From: Aditya Telange <21258296+adityatelange@users.noreply.github.com> Date: Sun, 7 Feb 2021 21:34:34 +0530 Subject: [PATCH] improve search - fix menu element becoming inactive change class active -> focus - set input type seach #198 - add a reset func - add script to clear searchbox when clicked on X sign --- assets/css/search.css | 2 +- assets/js/fastsearch.js | 39 ++++++++++++++++++++++-------------- layouts/_default/search.html | 4 ++-- 3 files changed, 27 insertions(+), 18 deletions(-) diff --git a/assets/css/search.css b/assets/css/search.css index 5deb71ed..2b9d4bc9 100644 --- a/assets/css/search.css +++ b/assets/css/search.css @@ -39,7 +39,7 @@ outline: none; } -#searchResults .active { +#searchResults .focus { transform: scale(.98); border: 2px solid var(--tertiary) } diff --git a/assets/js/fastsearch.js b/assets/js/fastsearch.js index 935d8fbd..2546310a 100644 --- a/assets/js/fastsearch.js +++ b/assets/js/fastsearch.js @@ -42,7 +42,13 @@ function itemGen(name, link) { } function activeToggle() { - document.activeElement.parentElement.classList.toggle("active") + document.activeElement.parentElement.classList.toggle("focus") +} + +function reset() { + resultsAvailable = false; + resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults + sInput.focus(); // shift focus to input box } // execute search as each character is typed @@ -59,16 +65,21 @@ sInput.onkeyup = function (e) { resultSet = resultSet + itemGen(results[item].item.title, results[item].item.permalink) } - document.getElementById("searchResults").innerHTML = resultSet; + resList.innerHTML = resultSet; resultsAvailable = true; first = resList.firstChild; last = resList.lastChild; } else { resultsAvailable = false; - document.getElementById("searchResults").innerHTML = ''; + resList.innerHTML = ''; } } +sInput.addEventListener('search', function (e) { + // clicked on x + if (!this.value) reset() +}) + // kb bindings document.onkeydown = function (e) { let key = e.key; @@ -76,9 +87,9 @@ document.onkeydown = function (e) { let inbox = document.getElementById("searchbox").contains(ae) if (ae === sInput) { - var elements = document.getElementsByClassName('active'); + var elements = document.getElementsByClassName('focus'); while (elements.length > 0) { - elements[0].classList.remove('active'); + elements[0].classList.remove('focus'); } } @@ -86,16 +97,16 @@ document.onkeydown = function (e) { e.preventDefault(); if (ae == sInput) { // if the currently focused element is the search input, focus the of first
  • - activeToggle(); // rm active class + activeToggle(); // rm focus class resList.firstChild.lastChild.focus(); - activeToggle(); // add active class + activeToggle(); // add focus 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 + activeToggle(); // rm focus class ae.parentElement.nextSibling.lastChild.focus(); - activeToggle(); // add active class + activeToggle(); // add focus class } } else if (key === "ArrowUp" && resultsAvailable && inbox) { e.preventDefault(); @@ -103,19 +114,17 @@ document.onkeydown = function (e) { // 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 + activeToggle(); // rm focus class sInput.focus(); } else { // otherwise select the previous search result - activeToggle(); // rm active class + activeToggle(); // rm focus class ae.parentElement.previousSibling.lastChild.focus(); - activeToggle(); // add active class + activeToggle(); // add focus class } } else if (key === "ArrowRight" && resultsAvailable && inbox) { ae.click(); // click on active link } else if (key === "Escape") { - resultsAvailable = false; - resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults - sInput.focus(); // shift focus to input box + reset() } } diff --git a/layouts/_default/search.html b/layouts/_default/search.html index 8ad0bef4..ae9ba068 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -21,8 +21,8 @@ -{{- end }}{{/* end main */}} +{{- end }}{{/* end main */}}