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

Author: Chasen Le Hara

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")

static/canjs.js

@@ -171,6 +171,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);
+
 	if (!surveyAdControl) {
 		// Set up the survey ad control
 		surveyAdControl = new SurveyAdControl("survey-ad");

templates/content.mustache

@@ -22,5 +22,7 @@
       {{/with}}
 
   </div>
+  <div class="column" id="scroll-toc">
+  </div>
 </div>
 {{> survey-ad.mustache}}