Only load searchindex when needed

Author: GuillaumeGomez

src/theme/index.hbs

@@ -170,7 +170,7 @@
                 {{#if search_enabled}}
                 <div id="search-wrapper" class="hidden">
                     <form id="searchbar-outer" class="searchbar-outer">
-                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
+                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header" disabled>
                     </form>
                     <div id="searchresults-outer" class="searchresults-outer hidden">
                         <div id="searchresults-header" class="searchresults-header"></div>

src/theme/searcher/searcher.js

@@ -259,6 +259,11 @@ window.search = window.search || {};
         doc_urls = config.doc_urls;
         searchindex = elasticlunr.Index.load(config.index);
 
+        searchbar.removeAttribute("disabled");
+        searchbar.focus();
+    }
+
+    function initSearchInteractions() {
         // Set up events
         searchicon.addEventListener('click', function(e) { searchIconClickHandler(); }, false);
         searchbar.addEventListener('keyup', function(e) { searchbarKeyUpHandler(); }, false);
@@ -271,7 +276,9 @@ window.search = window.search || {};
         // If reloaded, do the search or mark again, depending on the current url parameters
         doSearchOrMarkFromUrl();
     }
-    
+
+    initSearchInteractions();
+
     function unfocusSearchbar() {
         // hacky, but just focusing a div only works once
         var tmp = document.createElement('input');
@@ -280,7 +287,7 @@ window.search = window.search || {};
         tmp.focus();
         tmp.remove();
     }
-    
+
     // On reload or browser history backwards/forwards events, parse the url and do search or mark
     function doSearchOrMarkFromUrl() {
         // Check current URL for search request
@@ -313,7 +320,7 @@ window.search = window.search || {};
             }
         }
     }
-    
+
     // Eventhandler for keyevents on `document`
     function globalKeyHandler(e) {
         if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.type === 'textarea' || e.target.type === 'text' || !hasFocus() && /^(?:input|select|textarea)$/i.test(e.target.nodeName)) { return; }
@@ -364,8 +371,23 @@ window.search = window.search || {};
         }
     }
 
+    function loadScript(url, id) {
+        if (document.getElementById(id)) {
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = url;
+        script.id = id;
+        script.onload = () => init(window.search);
+        script.onerror = error => {
+            console.error(`Failed to load \`${url}\`: ${error}`);
+        };
+        document.head.append(script);
+    }
+
     function showSearch(yes) {
         if (yes) {
+            loadScript('{{ resource "searchindex.js" }}', 'search-index');
             search_wrap.classList.remove('hidden');
             searchicon.setAttribute('aria-expanded', 'true');
         } else {
@@ -467,19 +489,6 @@ window.search = window.search || {};
         showResults(true);
     }
 
-    function loadScript(url, id) {
-        const script = document.createElement('script');
-        script.src = url;
-        script.id = id;
-        script.onload = () => init(window.search);
-        script.onerror = error => {
-            console.error(`Failed to load \`${url}\`: ${error}`);    
-        };
-        document.head.append(script);
-    }
-
-    loadScript('{{ resource "searchindex.js" }}', 'search-index');
-
     // Exported functions
     search.hasFocus = hasFocus;
 })(window.search);