Enable navigating the search results using the keyboard (addresses pa…

…rt of #1)
doersino · Mar 25, 2021 · 037b540 · 037b540
1 parent c1f28ba
commit 037b540
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 31 deletions.
diff --git a/_assets/search.js b/_assets/search.js
@@ -1,8 +1,12 @@
 const searchInput = document.querySelector("#search_input");
 const searchOutput = document.querySelector("#search_output");
 
-// asynchronously load search "index" (the search box will remain disabled until then)
 let searchIndex;
+
+let searchResultsCount = 0;
+let searchSelection = -1;
+
+// asynchronously load search "index" (the search box will remain disabled until then)
 fetch("search.json")
     .then(response => response.json())
     .then(data => {
@@ -46,20 +50,31 @@ function search(query) {
 }
 
 function clearResults() {
+    searchResultsCount = 0;
+    searchSelection = -1;
+
     searchOutput.innerHTML = "";
 }
 
 // render a subset of the search index in the results/output pane
 function showResults(results) {
+    searchResultsCount = results.length;
+    searchSelection = -1;
+
+    let i = 0;
     const code = results.map(e => {
-        return `<h3><span class="icons">`
+        return `<a href="${e.htmlfile}" class="searchresult" id="${i++}">`
+            + `<h3>`
+            + `<i class="icons">`
             + (e.favorite ? `<img src="assets/tabler-icons/tabler-icon-star.svg"> ` : ``)
             + (e.spicy ? `<img src="assets/tabler-icons/tabler-icon-flame.svg"> ` : ``)
             + ((e.veggie || e.vegan) ? `` : `<img src="assets/tabler-icons/tabler-icon-bone.svg"> `)
             + (e.vegan ? `<img src="assets/tabler-icons/tabler-icon-leaf.svg"> ` : ``)
-            + `</span><a href="${e.htmlfile}">${e.title}</a> `
+            + `</i>`
+            + `<span>${e.title}</span> `
             + (e.original_title ? `<em>${e.original_title}</em>` : ``)
-            + `</h3>`;
+            + `</h3>`
+            + `</a>`;
     });
 
     searchOutput.innerHTML = code.join("");
@@ -73,3 +88,31 @@ searchInput.addEventListener('input', e => {
         showResults(results);
     }
 });
+
+// highlight the currently selected search result
+function highlightSearchSelection() {
+    document.querySelectorAll(".searchresult").forEach(e => e.classList.remove("selected"));
+    if (document.getElementById(`${searchSelection}`)) {
+        document.getElementById(`${searchSelection}`).classList.add("selected");
+    }
+}
+
+// enable keyboard naviation of search results
+searchInput.addEventListener('keydown', e => {
+    if (e.key == "ArrowUp") {
+        searchSelection = Math.max(-1, searchSelection - 1);
+    } else if (e.key == "ArrowDown") {
+        searchSelection = Math.min(searchResultsCount - 1, searchSelection + 1);
+    } else if (e.key == "Enter") {
+        if (searchSelection != -1) {
+            document.getElementById(`${searchSelection}`).click();
+        }
+    }
+    highlightSearchSelection();
+})
+
+// allow, in conjunction with keyboard naviation (otherwise this would be a job for css), highlighting on mouseover
+searchOutput.addEventListener('mousemove', e => {
+    searchSelection = parseInt(e.target.closest("a.searchresult").id);
+    highlightSearchSelection();
+});
diff --git a/_assets/style.css b/_assets/style.css
@@ -75,7 +75,7 @@ h1 em {
     display: inline-block;
 }
 h1 span,
-h3 a {  /* separate original name after this a bit (but not if it's on another line) */
+h3 span {  /* separate original name after this a bit (but not if it's on another line) */
     padding-right: 0.4rem;
 }
 header ul {
@@ -167,17 +167,24 @@ header p {
     color: darkred;
     font-size: 0.64em;
 }
+.search .results a {
+    text-decoration: none;
+    color: inherit;
+}
 .search .results h3 {
     border-bottom: 1px solid #ddd;
     padding: 0.3rem 1rem 0.4rem;
     margin: 0 auto;
     width: calc(100% - 0.5em);
     background-color: white;
 }
-.search .results h3:last-child {
+.search .results a:last-child h3 {
     border-radius: 0 0 0.2em 0.2em;
     border-bottom: none;
 }
+.search .results a.selected h3 {
+    background-color: #f8f8f8;
+}
 
 .servingsuggestion {
     width: 48em;
@@ -203,7 +210,7 @@ h2 {
     font-weight: normal;
 }
 h3 {
-    margin: 0.5rem 0 1rem;
+    margin: 0.5rem 0 1rem;  /* larger bottom margin to fix spacing if the last recipe in a category has no description */
     font-size: 1.3rem;
 }
 h3 a {
@@ -227,9 +234,12 @@ h3 .icons img {
     height: 1em;
 }
 h3 + p {
-    margin-top: -0.5rem;
+    margin-top: -0.5rem;  /* move the description a bit closer to the recipe's title */
     font-family: var(--serif);
 }
+h3 + h3 {
+    margin-top: -0.5rem;  /* in the same vein, move the recipe title below a description-less recipe a bit upwards */
+}
 
 ul, p {
     margin: 1rem 0;

diff --git a/_site/assets/search.js b/_site/assets/search.js
@@ -1,8 +1,12 @@
 const searchInput = document.querySelector("#search_input");
 const searchOutput = document.querySelector("#search_output");
 
-// asynchronously load search "index" (the search box will remain disabled until then)
 let searchIndex;
+
+let searchResultsCount = 0;
+let searchSelection = -1;
+
+// asynchronously load search "index" (the search box will remain disabled until then)
 fetch("search.json")
     .then(response => response.json())
     .then(data => {
@@ -46,20 +50,31 @@ function search(query) {
 }
 
 function clearResults() {
+    searchResultsCount = 0;
+    searchSelection = -1;
+
     searchOutput.innerHTML = "";
 }
 
 // render a subset of the search index in the results/output pane
 function showResults(results) {
+    searchResultsCount = results.length;
+    searchSelection = -1;
+
+    let i = 0;
     const code = results.map(e => {
-        return `<h3><span class="icons">`
+        return `<a href="${e.htmlfile}" class="searchresult" id="${i++}">`
+            + `<h3>`
+            + `<i class="icons">`
             + (e.favorite ? `<img src="assets/tabler-icons/tabler-icon-star.svg"> ` : ``)
             + (e.spicy ? `<img src="assets/tabler-icons/tabler-icon-flame.svg"> ` : ``)
             + ((e.veggie || e.vegan) ? `` : `<img src="assets/tabler-icons/tabler-icon-bone.svg"> `)
             + (e.vegan ? `<img src="assets/tabler-icons/tabler-icon-leaf.svg"> ` : ``)
-            + `</span><a href="${e.htmlfile}">${e.title}</a> `
+            + `</i>`
+            + `<span>${e.title}</span> `
             + (e.original_title ? `<em>${e.original_title}</em>` : ``)
-            + `</h3>`;
+            + `</h3>`
+            + `</a>`;
     });
 
     searchOutput.innerHTML = code.join("");
@@ -73,3 +88,31 @@ searchInput.addEventListener('input', e => {
         showResults(results);
     }
 });
+
+// highlight the currently selected search result
+function highlightSearchSelection() {
+    document.querySelectorAll(".searchresult").forEach(e => e.classList.remove("selected"));
+    if (document.getElementById(`${searchSelection}`)) {
+        document.getElementById(`${searchSelection}`).classList.add("selected");
+    }
+}
+
+// allow keyboard naviation of search results
+searchInput.addEventListener('keydown', e => {
+    if (e.key == "ArrowUp") {
+        searchSelection = Math.max(-1, searchSelection - 1);
+    } else if (e.key == "ArrowDown") {
+        searchSelection = Math.min(searchResultsCount - 1, searchSelection + 1);
+    } else if (e.key == "Enter") {
+        if (searchSelection != -1) {
+            document.getElementById(`${searchSelection}`).click();
+        }
+    }
+    highlightSearchSelection();
+})
+
+// allow, in conjunction with keyboard naviation (otherwise this would be a job for css), highlighting on mouseover
+searchOutput.addEventListener('mousemove', e => {
+    searchSelection = parseInt(e.target.closest("a.searchresult").id);
+    highlightSearchSelection();
+});
diff --git a/_site/assets/style.css b/_site/assets/style.css
@@ -75,7 +75,7 @@ h1 em {
     display: inline-block;
 }
 h1 span,
-h3 a {  /* separate original name after this a bit (but not if it's on another line) */
+h3 span {  /* separate original name after this a bit (but not if it's on another line) */
     padding-right: 0.4rem;
 }
 header ul {
@@ -167,17 +167,24 @@ header p {
     color: darkred;
     font-size: 0.64em;
 }
+.search .results a {
+    text-decoration: none;
+    color: inherit;
+}
 .search .results h3 {
     border-bottom: 1px solid #ddd;
     padding: 0.3rem 1rem 0.4rem;
     margin: 0 auto;
     width: calc(100% - 0.5em);
     background-color: white;
 }
-.search .results h3:last-child {
+.search .results a:last-child h3 {
     border-radius: 0 0 0.2em 0.2em;
     border-bottom: none;
 }
+.search .results a.selected h3 {
+    background-color: #f8f8f8;
+}
 
 .servingsuggestion {
     width: 48em;
@@ -203,7 +210,7 @@ h2 {
     font-weight: normal;
 }
 h3 {
-    margin: 0.5rem 0 1rem;
+    margin: 0.5rem 0 1rem;  /* larger bottom margin to fix spacing if the last recipe in a category has no description */
     font-size: 1.3rem;
 }
 h3 a {
@@ -227,9 +234,12 @@ h3 .icons img {
     height: 1em;
 }
 h3 + p {
-    margin-top: -0.5rem;
+    margin-top: -0.5rem;  /* move the description a bit closer to the recipe's title */
     font-family: var(--serif);
 }
+h3 + h3 {
+    margin-top: -0.5rem;  /* in the same vein, move the recipe title below a description-less recipe a bit upwards */
+}
 
 ul, p {
     margin: 1rem 0;

diff --git a/_site/index.html b/_site/index.html
@@ -30,52 +30,52 @@ <h1><span>I Can’t Believe It’s Not a Cookbook!</span></h1>
                     <section>
                 <h2>Bakery <!--1--></h2>
                                     <h3>
-                        <span class="icons">
+                        <i class="icons">
 
 
 
                             <img src="assets/tabler-icons/tabler-icon-leaf.svg">
-                        </span>
-                        <a href="veganchocolatecake.html">Vegan Chocolate Cake</a>
+                        </i>
+                        <a href="veganchocolatecake.html"><span>Vegan Chocolate Cake</span></a>
 
                     </h3>
                                             <p>A pretty basic, but vegan, chocolate cake, easily customizable with nuts (not bolts) or berries.</p>
                                                 </section>
                     <section>
                 <h2>Korean Food <!--2--></h2>
                                     <h3>
-                        <span class="icons">
+                        <i class="icons">
                             <img src="assets/tabler-icons/tabler-icon-star.svg">
                             <img src="assets/tabler-icons/tabler-icon-flame.svg">
                             <img src="assets/tabler-icons/tabler-icon-bone.svg">
 
-                        </span>
-                        <a href="cheesebuldak.html">Cheese Buldak</a>
+                        </i>
+                        <a href="cheesebuldak.html"><span>Cheese Buldak</span></a>
                         <em>치즈불닭</em>
                     </h3>
                                             <p>Super-spicy chicken tempered with loads of cheese and fresh spring onions. Serve with rice and a light salad – or, better yet, an assortment of side dishes.</p>
                                                         <h3>
-                        <span class="icons">
+                        <i class="icons">
 
                             <img src="assets/tabler-icons/tabler-icon-flame.svg">
                             <img src="assets/tabler-icons/tabler-icon-bone.svg">
 
-                        </span>
-                        <a href="kkaennipjeon.html">Pan-Fried Perilla Leaves</a>
+                        </i>
+                        <a href="kkaennipjeon.html"><span>Pan-Fried Perilla Leaves</span></a>
                         <em>깻잎전</em>
                     </h3>
                                             <p>Perilla leaves, stuffed with a pork-based filling, then eggwashed and fried.</p>
                                                 </section>
                     <section>
                 <h2>Uncategorized <!--1--></h2>
                                     <h3>
-                        <span class="icons">
+                        <i class="icons">
 
 
 
 
-                        </span>
-                        <a href="strawberrysmoothie.html">Strawberry Smoothie</a>
+                        </i>
+                        <a href="strawberrysmoothie.html"><span>Strawberry Smoothie</span></a>
 
                     </h3>
                                             <p>Great on a hot summer day.</p>

diff --git a/_templates/index.template.html b/_templates/index.template.html
@@ -33,13 +33,13 @@ <h1><span>$index_title$</span></h1>
                 <h2>${it.category} <!--${it.recipes/length}--></h2>
                 ${for(it.recipes)}
                     <h3>
-                        <span class="icons">
+                        <i class="icons">
                             $if(it.favorite)$<img src="assets/tabler-icons/tabler-icon-star.svg">$endif$
                             $if(it.spicy)$<img src="assets/tabler-icons/tabler-icon-flame.svg">$endif$
                             $if(it.veggie)$$else$$if(it.vegan)$$else$<img src="assets/tabler-icons/tabler-icon-bone.svg">$endif$$endif$
                             $if(it.vegan)$<img src="assets/tabler-icons/tabler-icon-leaf.svg">$endif$
-                        </span>
-                        <a href="${it.htmlfile}">${it.title}</a>
+                        </i>
+                        <a href="${it.htmlfile}"><span>${it.title}</span></a>
                         $if(it.original_title)$<em>$it.original_title$</em>$endif$
                     </h3>
                     $if(it.description)$