Added search with navigational keyboard arrow

2 files changed, 67 insertions, 6 deletions

diff --git a/themes/simple/layouts/partials/navigation.html b/themes/simple/layouts/partials/navigation.html
index b65fe35..f6e5a66 100644
--- a/themes/simple/layouts/partials/navigation.html
+++ b/themes/simple/layouts/partials/navigation.html
@@ -8,11 +8,13 @@
       <meta itemprop="name" content="Main Menu">
 
       <!-- Search button -->
-      <span class="search-button flex gap-1 items-center text-gray-500 bg-gray-100 hover:bg-gray-200 rounded px-2 py-1 text-xs cursor-pointer mr-2 hidden" onclick="showSearchModal()">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
-        </svg>
-        <span class="search-button-text uppercase font-bold"></span>
+      <span class="hidden lg:block">
+        <span class="search-button flex gap-1 items-center text-gray-500 bg-gray-100 hover:bg-gray-200 rounded px-2 py-1 text-xs cursor-pointer mr-2 hidden" onclick="showSearchModal()">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+          </svg>
+          <span class="search-button-text uppercase font-bold"></span>
+        </span>
       </span>
 
       <a href="/notes.html" class="font-medium px-2 hover:bg-yellow-100">Notes</a>
diff --git a/themes/simple/layouts/partials/search.html b/themes/simple/layouts/partials/search.html
index 3e31753..5a76384 100644
--- a/themes/simple/layouts/partials/search.html
+++ b/themes/simple/layouts/partials/search.html
@@ -50,6 +50,7 @@
       }
 
       // On keyboard shortcut shows search modal.
+      let currentSearchResultsSectionIndex = -1;
       document.addEventListener('keydown', function(event) {
           // Handles macOS CMD+k.
           if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
@@ -62,6 +63,62 @@
               event.preventDefault();
               showSearchModal();
           }
+
+          // If ESC is pressed when the input is empty close the search modal.
+          if (event.key === 'Escape' || event.key === 'Esc') {
+              if (searchInput.value.length == 0) {
+                  if (!searchModal.classList.contains('hidden')) {
+                      cachedSearchTerm = null;
+                      searchModal.classList.add('hidden');
+                      searchResults.innerText = '';
+                      if (!searchResults.classList.contains('hidden')) {
+                          searchResults.classList.add('hidden');
+                      }
+                  }
+              }
+          }
+
+          // Arrow UP/DOWN movement through search results.
+          const list = document.querySelector('.ulist');
+          const itemHoverClass = 'bg-gray-100';
+          if (event.key === 'ArrowUp') {
+              if (!searchResults.classList.contains('hidden')) {
+                  event.preventDefault();
+
+                  const listItems = searchResults.querySelectorAll('a');
+                  listItems.forEach(el => el.classList.remove(itemHoverClass));
+                  currentSearchResultsSectionIndex--;
+
+                  if (!listItems[currentSearchResultsSectionIndex]) {
+                      currentSearchResultsSectionIndex = -1;
+                      searchInput.focus();
+                  }
+
+                  if (currentSearchResultsSectionIndex != -1) {
+                      listItems[currentSearchResultsSectionIndex].classList.add(itemHoverClass);
+                      listItems[currentSearchResultsSectionIndex].focus();
+                  }
+              }
+          }
+          if (event.key === 'ArrowDown') {
+              if (!searchResults.classList.contains('hidden')) {
+                  event.preventDefault();
+
+                  const listItems = searchResults.querySelectorAll('a');
+                  listItems.forEach(el => el.classList.remove(itemHoverClass));
+                  currentSearchResultsSectionIndex++;
+
+                  if (!listItems[currentSearchResultsSectionIndex]) {
+                      currentSearchResultsSectionIndex = 0;
+                  }
+
+                  if (currentSearchResultsSectionIndex != -1) {
+                      listItems[currentSearchResultsSectionIndex].classList.add(itemHoverClass);
+                      listItems[currentSearchResultsSectionIndex].focus();
+                  }
+              }
+          }
+
       });
 
       // Debounce magic.
@@ -82,7 +139,9 @@
                                 const results = searchIndex.search(query);
 
               if (results.length == 0) {
-                        searchResults.classList.add('hidden');
+                  if (!searchResults.classList.contains('hidden')) {
+                            searchResults.classList.add('hidden');
+                  }
               } else {
                   searchResults.innerText = '';
                         searchResults.classList.remove('hidden');