[gentoo-commits] proj/devmanual:master commit in: /

[Göktürk Yüksek]

commit:     8a7bc280c2c77a379fa8c1ac481cf00728801162
Author:     Göktürk Yüksek <gokturk <AT> gentoo <DOT> org>
AuthorDate: Thu Dec 12 04:49:01 2019 +0000
Commit:     Göktürk Yüksek <gokturk <AT> gentoo <DOT> org>
CommitDate: Thu Dec 19 20:58:19 2019 +0000
URL:        https://gitweb.gentoo.org/proj/devmanual.git/commit/?id=8a7bc280

Fetch documents.js on demand when the user clicks the search text box

Instead of shipping a relatively large ~400K documents.js file on
every page load, do it when the user clicks the search text box for
the first time. Local performance measurements show that it takes
about 350ms to build the index from documents.js after fetching it.

Signed-off-by: Göktürk Yüksek <gokturk <AT> gentoo.org>

 devbook.xsl |  4 ++--
 search.js   | 36 ++++++++++++++++++++++++++----------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/devbook.xsl b/devbook.xsl
index 44ca659..da60097 100644
--- a/devbook.xsl
+++ b/devbook.xsl
@@ -549,7 +549,7 @@
               </div>
               <div class="collapse navbar-collapse" id="gw-toolbar">
               <div class="input-group">
-                <input type="search" name="search" placeholder="Search" 
title="Search Gentoo Developer Manual [f]" accesskey="f" id="searchInput" 
class="form-control"/>
+                <input type="search" name="search" placeholder="Search" 
title="Search Gentoo Developer Manual [f]" accesskey="f" id="searchInput" 
class="form-control" onclick="fetchDocuments()"/>
                 <div class="input-group-btn">
                   <input type="submit" name="fulltext" value="Search" 
title="Search the pages for this text" id="mw-searchButton" class="searchButton 
btn btn-default" onclick="search()"/>
                 </div>
@@ -629,7 +629,7 @@
             <xsl:with-param name="append">../</xsl:with-param>
           </xsl:call-template>
       </xsl:variable>
-      <script src="{$relative_path_depth_recursion}documents.js"></script>
+      <script><xsl:text>var documentsSrc = "</xsl:text><xsl:value-of 
select="$relative_path_depth_recursion"/><xsl:text>documents.js"</xsl:text></script>
       <script src="{$relative_path_depth_recursion}search.js"></script>
     </body>
     </html>

diff --git a/search.js b/search.js
index aae7bcf..c56a31a 100644
--- a/search.js
+++ b/search.js
@@ -4,16 +4,7 @@
  */
 "use strict";
 
-var search_index = lunr(function () {
-  this.ref('id');
-  this.field('text');
-  this.metadataWhitelist = ['position']
-
-  documents.forEach(function (doc) {
-    this.add(doc);
-  }, this);
-});
-
+var search_index = null;
 var search_input = document.getElementById("searchInput");
 
 search_input.addEventListener("keyup", function(event) {
@@ -23,6 +14,31 @@ search_input.addEventListener("keyup", function(event) {
   }
 });
 
+function buildIndex() {
+  search_index = lunr(function () {
+    this.ref('id');
+    this.field('text');
+    this.metadataWhitelist = ['position']
+
+    documents.forEach(function (doc) {
+      this.add(doc);
+    }, this);
+  });
+}
+
+function fetchDocuments() {
+  document.getElementsByName("search")[0].onclick = null;
+  if (search_index == null) {
+    const script = document.createElement('script')
+    script.src = documentsSrc;
+    script.async = false;
+    script.onload = function() {
+      buildIndex();
+    }
+    document.body.appendChild(script);
+  }
+}
+
 function getContents(docs, uid) {
   var contents = { name: "", text: "", url: "" };