Merge pull request #2553 from GuillaumeGomez/load-on-need

Only load searchindex when needed

src/front-end/css/chrome.css

@@ -344,9 +344,34 @@ mark.fade-out {
     max-width: var(--content-max-width);
 }
 
+#searchbar-outer.searching #searchbar {
+    padding-right: 30px;
+}
+#searchbar-outer .spinner-wrapper {
+    display: none;
+}
+#searchbar-outer.searching .spinner-wrapper {
+    display: block;
+}
+
+.search-wrapper {
+    position: relative;
+}
+
+.spinner-wrapper {
+    --spinner-margin: 2px;
+    position: absolute;
+    margin-block-start: calc(var(--searchbar-margin-block-start) + var(--spinner-margin));
+    right: var(--spinner-margin);
+    top: 0;
+    bottom: var(--spinner-margin);
+    padding: 6px;
+    background-color: var(--bg);
+}
+
 #searchbar {
     width: 100%;
-    margin-block-start: 5px;
+    margin-block-start: var(--searchbar-margin-block-start);
     margin-block-end: 0;
     margin-inline-start: auto;
     margin-inline-end: auto;

src/front-end/css/variables.css

@@ -11,6 +11,7 @@
     --menu-bar-height: 50px;
     --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
     --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
+    --searchbar-margin-block-start: 5px;
 }
 
 /* Themes */

src/front-end/searcher/searcher.js

@@ -22,6 +22,7 @@ window.search = window.search || {};
     }
 
     const search_wrap = document.getElementById('search-wrapper'),
+        searchbar_outer = document.getElementById('searchbar-outer'),
         searchbar = document.getElementById('searchbar'),
         searchresults = document.getElementById('searchresults'),
         searchresults_outer = document.getElementById('searchresults-outer'),
@@ -262,6 +263,18 @@ window.search = window.search || {};
         doc_urls = config.doc_urls;
         searchindex = elasticlunr.Index.load(config.index);
 
+        searchbar_outer.classList.remove('searching');
+
+        searchbar.focus();
+
+        const searchterm = searchbar.value.trim();
+        if (searchterm !== '') {
+            searchbar.classList.add('active');
+            doSearch(searchterm);
+        }
+    }
+
+    function initSearchInteractions(config) {
         // Set up events
         searchicon.addEventListener('click', () => {
             searchIconClickHandler();
@@ -288,6 +301,8 @@ window.search = window.search || {};
         config.hasFocus = hasFocus;
     }
 
+    initSearchInteractions(window.search);
+
     function unfocusSearchbar() {
         // hacky, but just focusing a div only works once
         const tmp = document.createElement('input');
@@ -401,8 +416,25 @@ window.search = window.search || {};
         }
     }
 
+    function loadSearchScript(url, id) {
+        if (document.getElementById(id)) {
+            return;
+        }
+        searchbar_outer.classList.add('searching');
+
+        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) {
+            loadSearchScript(path_to_root + '{{ resource "searchindex.js" }}', 'search-index');
             search_wrap.classList.remove('hidden');
             searchicon.setAttribute('aria-expanded', 'true');
         } else {
@@ -485,14 +517,14 @@ window.search = window.search || {};
         // Don't search the same twice
         if (current_searchterm === searchterm) {
             return;
-        } else {
-            current_searchterm = searchterm;
         }
-
+        searchbar_outer.classList.add('searching');
         if (searchindex === null) {
             return;
         }
 
+        current_searchterm = searchterm;
+
         // Do the actual search
         const results = searchindex.search(searchterm, search_options);
         const resultcount = Math.min(results.length, results_options.limit_results);
@@ -511,19 +543,9 @@ window.search = window.search || {};
 
         // Display results
         showResults(true);
+        searchbar_outer.classList.remove('searching');
     }
 
-    function loadScript(url, id) {
+    // Exported functions
-        const script = document.createElement('script');
+    search.hasFocus = hasFocus;
-        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(path_to_root + '{{ resource "searchindex.js" }}', 'search-index');
-
 })(window.search);

src/front-end/templates/index.hbs

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

tests/gui/search.goml

@@ -28,3 +28,45 @@ assert-text: ("#searchresults-header", "")
 call-function: ("open-search", {})
 write: "strikethrough"
 wait-for-text: ("#searchresults-header", "2 search results for 'strikethrough':")
+
+// Now we test search shortcuts and more page changes.
+go-to: |DOC_PATH| + "index.html"
+
+// This check is to ensure that the search bar is inside the search wrapper.
+assert: "#search-wrapper #searchbar"
+assert-css: ("#search-wrapper", {"display": "none"})
+
+// Now we make sure the search input appear with the `S` shortcut.
+press-key: 's'
+wait-for-css-false: ("#search-wrapper", {"display": "none"})
+// We ensure the search bar has the focus.
+assert: "#searchbar:focus"
+
+// Now we press `Escape` to ensure that the search input disappears again.
+press-key: 'Escape'
+wait-for-css: ("#search-wrapper", {"display": "none"})
+
+// Making it appear by clicking on the search button.
+click: "#search-toggle"
+wait-for-css: ("#search-wrapper", {"display": "block"})
+// We ensure the search bar has the focus.
+assert: "#searchbar:focus"
+
+// We input "test".
+write: "test"
+// The results should now appear.
+wait-for-text: ("#searchresults-header", "search results for 'test':", ENDS_WITH)
+assert: "#searchresults"
+// Ensure that the URL was updated as well.
+assert-document-property: ({"URL": "?search=test"}, ENDS_WITH)
+
+// Now we ensure that when we land on the page with a "search in progress", the search results are
+// loaded and that the search input has focus.
+go-to: |DOC_PATH| + "index.html?search=test"
+wait-for-text: ("#searchresults-header", "search results for 'test':", ENDS_WITH)
+assert: "#searchbar:focus"
+assert: "#searchresults"
+
+// And now we press `Escape` to close everything.
+press-key: 'Escape'
+wait-for-css: ("#search-wrapper", {"display": "none"})