Auto generate interactive table of contents for user-guide. (#1818)

author: Yong He <yonghe@outlook.com> 2021-04-24 00:19:32 -0700
committer: GitHub <noreply@github.com> 2021-04-24 00:19:32 -0700
commit: 4f83d48b28b417a16d7caa834a9248b1bd50cdb8 (patch)
tree: d36710d45fc0dcb07f110390c85868cfa2b4f2a5 /docs/_layouts/user-guide.html
parent: 9a5672d7b8a155117a2c3f8375e3b8a5b43d91b7 (diff)
1 files changed, 169 insertions, 33 deletions
diff --git a/docs/_layouts/user-guide.html b/docs/_layouts/user-guide.html
index 765ddc40a..ad4ad2cd9 100644
--- a/docs/_layouts/user-guide.html
+++ b/docs/_layouts/user-guide.html
@@ -11,57 +11,193 @@
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
   <style>
-    #dividerContainer {
-      height: 98%;
+    #centeringDiv {
+      margin: auto;
+      max-width: 1000px;
+      padding-left: 350px;
     }
 
     #tocColumn {
-      float: left;
-      width: 25%;
-      height: 100%;
-      overflow: auto;
-      margin-right: 20px;
+      width: 350px;
+      position: fixed;
+      overflow-y: auto;
+      box-sizing: border-box;
+      max-height: 100vh;
+    }
+
+    #tocInner {
+      padding: 20px;
     }
 
     #rightColumn {
-      float: left;
-      width: 70%;
-      height: 100%;
-      overflow: auto;
-      padding-left: 20px;
+      padding-left: 40px;
+      padding-right: 40px;
+      padding-top: 20px;
+      border-left-width: 1.5px;
+      border-left-style: solid;
+      border-left-color: #C8C8C8;
     }
 
-    .toc_list {
+    .toc_root_list {
       list-style-type: none;
-      padding-left:20px;
+      list-style-position: outside;
+      background-color: initial;
+      padding-left: 0px;
+    }
+    .toc_list {
+        padding-left: 16px;
+        background-color: initial;
+        list-style-type: none;
+        margin-bottom: 0px;
+    }
+    .toc_item {
+        cursor: pointer;
+        user-select: none;
+        list-style-type: none;
+        padding-left: 0px;
+        padding-top: 5px;
+    }
+    .toc_item_expanded::before {
+        content: "\25be";
+        cursor: pointer;
+    }
+    .toc_item_collapsed::before {
+        content: "\25b8";
+        cursor: pointer;
+    }
+    .toc_item_leaf {
+        padding-left: 14px;
+        cursor: pointer;
+        list-style-type: none;
+    }
+    .toc_span:hover
+    {
+      color: #303080
     }
   </style>
   {% seo %}
 </head>
 
 <body>
-  <div id="container">
-    <div class="inner" style="padding:40px;width:1000px">
-      <div id="dividerContainer">
-        <div id="tocColumn">
-          {% include user-guide-toc.html %}
-        </div>
-        <div id="rightColumn">
-          <section id="main_content">
-            {{ content }}
-          </section>
+    <div id="tocColumn">
+      <div id="tocInner">
+        {% include_relative user-guide-toc.html %}
+      </div>
+    </div>
+    <div id="centeringDiv">
+      <div id="rightColumn">
+        <section id="main_content">
+          {% include anchor_headings.html html=content anchorBody="" %}
+        </section>
 
-          <footer>
-            {% if site.github.is_project_page %}
-            {{ site.title | default: site.github.repository_name }} is maintained by <a
-              href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a><br>
-            {% endif %}
-            This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.
-          </footer>
-        </div>
+        <footer>
+          {% if site.github.is_project_page %}
+          {{ site.title | default: site.github.repository_name }} is maintained by <a
+            href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a><br>
+          {% endif %}
+          This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.
+        </footer>
       </div>
     </div>
-  </div>
+  <script>
+    var tocColumn = document.getElementById("tocColumn");
+    var rightColumn = document.getElementById("rightColumn");
+    function updatePosition()
+    {
+      tocColumn.style.left = (rightColumn.getBoundingClientRect().x - tocColumn.getBoundingClientRect().width) + "px";
+    }
+    window.addEventListener("resize", updatePosition);
+    updatePosition();
+  </script>
+
+  <script>
+    var tocItemsArray = [];
+    var selectedItem = null;
+
+    function expandItem(e) {
+      if (e == selectedItem)
+        e.style["font-weight"] = "bold";
+      var childList = e.getElementsByClassName("toc_list");
+      if (childList.length == 0)
+        return;
+      childList[0].style.display = "block";
+      childList[0].style["font-weight"] = "normal";
+      e.setAttribute("class", "toc_item toc_item_expanded");
+    }
+    function collapseItem(e) {
+      var childList = e.getElementsByClassName("toc_list");
+      if (childList.length == 0)
+        return;
+      childList[0].style.display = "none";
+      e.setAttribute("class", "toc_item toc_item_collapsed");
+    }
+    function tocSpanOnClick(e)
+    {
+      if (event.srcElement != null && event.srcElement.parentElement != null)
+      {
+        var link = event.srcElement.parentElement.getAttribute("data-link");
+        if (link != null)
+        {
+          var poundIndex = link.indexOf("#");
+          if (poundIndex == -1)
+            window.location.href = link + ".html";
+          else
+            window.location.href = link.substr(0, poundIndex) + ".html#" + link.substr(poundIndex+1, link.length - poundIndex - 1);
+        }
+      }
+      event.stopPropagation();
+    }
+    function tocItemOnClick(e)
+    {
+      if (event.srcElement == null) return;
+      // Toggle expanded/collapsed state.
+      if (event.srcElement.getAttribute("class").endsWith("toc_item_collapsed"))
+        expandItem(event.srcElement);
+      else if (event.srcElement.getAttribute("class").endsWith("toc_item_expanded"))
+        collapseItem(event.srcElement);
+      event.stopPropagation();
+    }
+    var path = window.location.pathname;
+    var pageName = path.split("/").pop();
+    var currentPageID = pageName.substr(0, pageName.lastIndexOf("."));
+
+    var tocLists = document.getElementsByClassName("toc_root_list");
+    for (var i = 0; i < tocLists.length; i++) {
+      var tocList = tocLists[i];
+      var items = tocList.getElementsByTagName("li")
+      for (var j = 0; j < items.length; j++)
+        tocItemsArray.push(items[j]);
+    }
+    for (var i = 0; i < tocItemsArray.length; i++) {
+      var item = tocItemsArray[i];
+      if (item.getAttribute("data-link") == currentPageID)
+        selectedItem = item;
+      if (item.getElementsByTagName("li").length != 0) {
+        collapseItem(item);
+      }
+      else {
+        item.setAttribute("class", "toc_item toc_item_leaf");
+      }
+      item.addEventListener("click", tocItemOnClick);
+      var innerSpan = item.getElementsByTagName("span");
+      if (innerSpan.length != 0)
+      {
+        innerSpan[0].addEventListener("click", tocSpanOnClick);
+        innerSpan[0].setAttribute("class", "toc_span");
+      }
+    }
+    var curItem = selectedItem;
+    while (curItem != null) {
+      expandItem(curItem);
+      curItem = curItem.parentElement;
+      if (curItem != null && curItem.getAttribute("class") != null &&
+        curItem.getAttribute("class").startsWith("toc_list"))
+        curItem = curItem.parentElement;
+      if (curItem != null && curItem.getAttribute("class") != null &&
+        curItem.getAttribute("class").startsWith("toc_root_list"))
+        break;
+    }
+  </script>
 
   {% if site.google_analytics %}
   <script>
author	Yong He <yonghe@outlook.com>	2021-04-24 00:19:32 -0700
committer	GitHub <noreply@github.com>	2021-04-24 00:19:32 -0700
commit	4f83d48b28b417a16d7caa834a9248b1bd50cdb8 (patch)
tree	d36710d45fc0dcb07f110390c85868cfa2b4f2a5 /docs/_layouts/user-guide.html
parent	9a5672d7b8a155117a2c3f8375e3b8a5b43d91b7 (diff)