Add the bit-toc component

Right now it’s removed and re-added to the DOM every time a new page is loaded. Waiting for bit-docs/bit-docs-html-toc#26 to be implemented. Part of canjs/canjs#4744
canjs · Apr 30, 2019 · 1d22976 · 1d22976
1 parent 919796a
commit 1d22976
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/make-example.js b/make-example.js
@@ -28,7 +28,8 @@ var siteConfig = {
             //  we get an error without this, here, though
             "steal-stache": "^4.0.1",
             "steal-conditional": "^0.3.6",
-            "bit-docs-html-codepen-link": "^1.0.0"
+            "bit-docs-html-codepen-link": "^1.0.0",
+            "bit-docs-html-toc": "^1.1.1"
         },
         staticDist: [
             path.join(__dirname, "dist", "static")

diff --git a/static/canjs.js b/static/canjs.js
@@ -156,6 +156,18 @@ function init() {
 		sidebarViewModel.selectedPageName = window.docObject.name;
 	}
 
+	// Set up the client-side TOC
+	var tocContainer = document.querySelector("#scroll-toc");
+	var oldToc = document.querySelector("bit-toc");
+	if (oldToc) {
+		tocContainer.removeChild(oldToc);
+	}
+	var newToc = document.createElement("bit-toc");
+	newToc.depth = window.docObject.outline;
+	newToc.headingContainerSelector = "#right > article";
+	newToc.scrollSelector = "#scroll-toc";
+	tocContainer.appendChild(newToc);
+
 	hasShownSearch = true;
 }
 

diff --git a/templates/content.mustache b/templates/content.mustache
@@ -22,4 +22,6 @@
       {{/with}}
 
   </div>
+  <div class="column" id="scroll-toc">
+  </div>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,4 +22,6 @@ @@
           {{/with}}
       </div>
+      <div class="column" id="scroll-toc">
+      </div>
     </div>