Merge pull request docker#11543 from thaJeztah/async_json

Load metadata and toc asynchronous

Author: usha-mandya

_includes/body-landing.html

@@ -473,7 +473,6 @@ <h5 class="title">Educational resources</h5>
   <script src="/js/theme-switcher.js"></script>
   <script src="/js/jquery.js"></script>
   <script src="/js/bootstrap.min.js"></script>
-  <script defer src="/js/metadata.js"></script>
   <script defer src="/js/search.js"></script>
 
   <script>

_includes/body.html

@@ -77,9 +77,7 @@ <h1>{{ page.title }}</h1>
     <script defer src="/js/anchorlinks.js"></script>
     <script src="/js/jquery.js"></script>
     <script src="/js/bootstrap.min.js"></script>
-    <script defer src="/js/metadata.js"></script>
     <script defer src="/js/docs.js"></script>
-    <script defer src="/js/toc.js"></script>
     <script defer src="/js/search.js"></script>
     {%- include analytics/polldaddy.html -%}
 </body>

js/docs.js

@@ -82,19 +82,21 @@ function walkTree(tree) {
     }
 }
 
-function renderNav(docstoc) {
-    for (let i = 0; i < docstoc.horizontalnav.length; i++) {
-        if (docstoc.horizontalnav[i].path === pageURL || pageIsInSection(docstoc[docstoc.horizontalnav[i].node])) {
-            // This is the current section. Set the corresponding header-nav link
-            // to active, and build the left-hand (vertical) navigation
-            document.getElementById(docstoc.horizontalnav[i].node).closest("li").classList.add("active")
-            walkTree(docstoc[docstoc.horizontalnav[i].node]);
-            document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
+function renderNav() {
+    getJSON( "/js/toc.json", function( data ) {
+        for (const item of data.horizontalnav) {
+            if (item.path === pageURL || pageIsInSection(data[item.node])) {
+                // This is the current section. Set the corresponding header-nav link
+                // to active, and build the left-hand (vertical) navigation
+                _('#'+item.node).closest("li").classList.add("active")
+                walkTree(data[item.node]);
+                _("#jsTOCLeftNav").innerHTML = outputLetNav.join("");
+            }
         }
-    }
-    // Scroll the current menu item into view. We actually pick the item *above*
-    // the current item to give some headroom above
-    scrollMenuItem("#jsTOCLeftNav a.currentPage")
+        // Scroll the current menu item into view. We actually pick the item *above*
+        // the current item to give some headroom above
+        scrollMenuItem("#jsTOCLeftNav a.currentPage")
+    });
 }
 
 // Scroll the given menu item into view. We actually pick the item *above*
@@ -256,3 +258,5 @@ window.onload = function () {
         $('.nav-tabs > li > a[data-group="' + group + '"]').tab("show");
     });
 };
+
+ready(renderNav);

js/metadata.js js/metadata.jsonjs/metadata.js renamed to js/metadata.json

@@ -1,7 +1,7 @@
 ---
 layout: null
 ---
-const pages = [
+[
 {%- for page in site.html_pages -%}
     {%- if page.hide_from_sitemap != nil or page.notoc != nil -%}
         {%- continue -%}

js/search.js

@@ -191,4 +191,9 @@ function queryString()
     return vars;
 }
 
-$(document).ready(bindSearch);
+let pages = []
+
+ready(() => {
+    getJSON( "/js/metadata.json", data => pages = data);
+    bindSearch()
+})

js/theme-switcher.js

@@ -2,6 +2,14 @@
 const _ = s => document.querySelector(s);
 const ready = f => document.readyState !== 'loading' ? f() : document.addEventListener('DOMContentLoaded', f)
 
+function getJSON(url, fn) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.responseType = 'json';
+    xhr.onload = () => xhr.status === 200 ? fn(xhr.response) : null;
+    xhr.send();
+}
+
 const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
 const selectedTheme = window.localStorage ? localStorage.getItem("theme") : null;
 

js/toc.js

@@ -0,0 +1,4 @@
+---
+layout: null
+---
+{{ site.data.toc | jsonify }}