Further fixes of still having focus and navigation issues (#54)

- Added a common selection clear function
- Search results clicking now triggers the same flow that other links we
do have already

Author: HofiOne

_includes/globals.html

@@ -52,6 +52,11 @@
     };
   }
 
+  function clearFocus() {
+    if (document.activeElement instanceof HTMLElement)
+      document.activeElement.blur();
+  }
+
   function getElementPositionRelativeToRoot(element) {
     var rect = element.getBoundingClientRect();
 

_js/custom/navigation.js

@@ -149,7 +149,9 @@ $(function () {
     if (anchorId)
       scrollToAnchor(anchorId);
     // Clear any focus (e.g back navigation keeps the previously clicked link focused)
-    window.trigger('blur');
+    clearFocus();
+    // Forcibly hide the search content that can remain open in certain back and force navigation cases
+    hideSearch();
   }
 
   function updateContentFromUrl(url) {
@@ -248,8 +250,9 @@ $(function () {
         // Clear focus from the clicked element, as we have other visualization for the selected items
         event.target.blur();
       }
-      if (false == updated)
+      if (false == updated) {
         console.debug("Different collection item or new tab/page requested, loading full page...")
+      }
     }
   }
 
@@ -779,15 +782,21 @@ $(function () {
           input.trigger("select");
         }, 100);
       }
-      else {
-        // set focus back via the initial content otherwise the focus will not get back to the search input once again
-        $(".initial-content").find("input").focus();
-      }
+      // else {
+      //   // set focus back via the initial content otherwise the focus will not get back to the search input once again
+      //   $(".initial-content").find("input").focus();
+      // }
 
       if (tooltipTarget)
         hideTooltip(true);
-      // NOTE: event.target is not always the toggle here, use it directly instead of the event
-      $("#search-button").trigger('blur');
+
+      clearFocus();
+    }
+
+    function hideSearch() {
+      $(".search-content").removeClass("is--visible");
+      $(".search-content__form").removeClass("is--visible");
+      $(".initial-content").removeClass("is--hidden");
     }
 
     $("#search-button").on('click', toggleSearch);
@@ -803,9 +812,17 @@ $(function () {
   // (e.g. when an inner embedded page link is opened directly in a new tab, not via the internal navigational links)
   finalizeContent();
 
+  hideSearch();
+
   // Listen for popstate events and update content accordingly
   window.addEventListener('popstate', function () {
     updateContentFromUrl(window.location.pathname);
   });
 
+  window.searchResultLinkClickHandler = function (event) {
+    // Clicking a link that url is shown in the active page will not trigger anything
+    // just show the actual pag, hide the search panel
+    hideSearch();
+    handleNavLinkClick(event);
+  };
 });

_js/lunr/lunr-en.js

@@ -81,7 +81,7 @@ $(document).ready(function() {
           '<div class="list__item">' +
           '<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">' +
           '<h2 class="archive__item-title" itemprop="headline">' +
-          '<a href="' + removeExtension(tore[ref].url) + '" rel="permalink">' + store[ref].title + '</a>' +
+          '<a href="' + removeExtension(tore[ref].url) + '" onclick="searchResultLinkClickHandler(event)" rel="permalink">' + store[ref].title + '</a>' +
           '</h2>' +
           '<div class="archive__item-teaser">' +
           '<img src="' + store[ref].teaser + '" alt="">' +
@@ -95,7 +95,7 @@ $(document).ready(function() {
           '<div class="list__item">' +
           '<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">' +
           '<h2 class="archive__item-title" itemprop="headline">' +
-          '<a href="' + removeExtension(store[ref].url) + '" rel="permalink">' + store[ref].title + '</a>' +
+          '<a href="' + removeExtension(store[ref].url) + '" onclick="searchResultLinkClickHandler(event)" rel="permalink">' + store[ref].title + '</a>' +
           '</h2>' +
           '<p class="archive__item-excerpt" itemprop="description">' + store[ref].excerpt.split(" ").splice(0, 20).join(" ") + '...</p>' +
           '</article>' +

_js/main.min.js

@@ -8539,7 +8539,8 @@ $(function() {
         if (ClipboardJS.isSupported()) addCodeBlocksTitle();
         addContentTooltips();
         if (anchorId) scrollToAnchor(anchorId);
-        window.trigger("blur");
+        clearFocus();
+        hideSearch();
     }
     function updateContentFromUrl(url) {
         var currContent = document.querySelector(contentID);
@@ -8593,7 +8594,9 @@ $(function() {
                 }
                 event.target.blur();
             }
-            if (false == updated) console.debug("Different collection item or new tab/page requested, loading full page...");
+            if (false == updated) {
+                console.debug("Different collection item or new tab/page requested, loading full page...");
+            }
         }
     }
     function updateNavLinks(event) {
@@ -8921,19 +8924,27 @@ $(function() {
                     input.trigger("focus");
                     input.trigger("select");
                 }, 100);
-            } else {
-                $(".initial-content").find("input").focus();
             }
             if (tooltipTarget) hideTooltip(true);
-            $("#search-button").trigger("blur");
+            clearFocus();
+        }
+        function hideSearch() {
+            $(".search-content").removeClass("is--visible");
+            $(".search-content__form").removeClass("is--visible");
+            $(".initial-content").removeClass("is--hidden");
         }
         $("#search-button").on("click", toggleSearch);
     }
     stickySideBar();
     finalizeContent();
+    hideSearch();
     window.addEventListener("popstate", function() {
         updateContentFromUrl(window.location.pathname);
     });
+    window.searchResultLinkClickHandler = function(event) {
+        hideSearch();
+        handleNavLinkClick(event);
+    };
 });
 
 $(function() {