Deprecate content list control

make-example.js

@@ -17,7 +17,8 @@ generate(docMap, {
     templates: path.join(__dirname, "templates"),
     dependencies: {
       "can": "2.3.28",
-      "bit-docs-donejs-theme": __dirname
+      "bit-docs-donejs-theme": __dirname,
+      "bit-docs-html-toc": "^0.5.0"
     }
   },
   dest: path.join(__dirname, "site"),

static/handle-page-anchors.js

@@ -0,0 +1,86 @@
+module.exports = function() {
+  var headings = {};
+  var collected = collectHeadings();
+
+  collected.each(function() {
+    var $el = $(this);
+    var id = $el.attr("id");
+
+    if (id) headings[id] = true;
+  });
+
+  collected.each(function() {
+    var $el = $(this);
+    var id = $el.attr("id");
+
+    if (!id) {
+      id = makeAnchorHeadingId($el.text());
+      var token = getUniqueToken(id, headings);
+
+      id += token > 0 ? "-" + token : "";
+      headings[id] = true;
+
+      $el.attr("id", id);
+    }
+
+    $el.prepend(anchorTemplate({ id: id }));
+  });
+
+  // hijack anchor page jumps, animate scroll
+  $('a[href*="#"]:not([href="#"])').on("click", function() {
+    if (
+      location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") ||
+      location.hostname == this.hostname
+    ) {
+      var offset = -55;
+      var $jumpTo = $(this.hash);
+
+      var distance = Math.abs(
+        $("body").scrollTop() - ($jumpTo.offset().top + offset)
+      );
+      var duration = Math.max(500, distance / 6000 * 250);
+
+      $("html, body").animate(
+        {
+          scrollTop: $jumpTo.offset().top + offset
+        },
+        duration
+      );
+    }
+  });
+
+  // module helpers
+
+  function getUniqueToken(id, headings) {
+    var token = 0;
+    var uniq = id;
+
+    while (headings[uniq]) {
+      token += 1;
+      uniq = id + "-" + token;
+    }
+
+    return token;
+  }
+
+  function collectHeadings() {
+    return $("body:not(.donejs):not(.community)").find("h2, h3, h4, h5");
+  }
+
+  function makeAnchorHeadingId(anchorText) {
+    return (anchorText || "")
+      .replace(/\s/g, "-") // replace spaces with dashes
+      .replace(/[^\w\-]/g, "") // remove punctuation
+      .toLowerCase();
+  }
+
+  function anchorTemplate(ctx) {
+    var id = encodeURIComponent(ctx.id);
+
+    return '<a class="linkToHeader" href="#s' +
+      this.id +
+      '">' +
+      '<img src="static/img/link.svg">' +
+      "</a>";
+  }
+};

static/static.js

@@ -1,8 +1,8 @@
 var $ = require("jquery");
-var ContentList = require("./content_list");
-var FrameHelper = require("./frame_helper");
 var Versions = require("./versions");
+var FrameHelper = require("./frame_helper");
 var Highlighter = require("./js/line-highlight");
+var handlePageAnchors = require("./handle-page-anchors");
 
 require("./js/collapse");
 require("./js/dropdown");
@@ -26,14 +26,16 @@ for (var i = 0; i < codes.length; i++) {
 
 prettyPrint();
 
-new ContentList(".contents");
 new FrameHelper(".docs");
 new Versions($("#versions, .sidebar-title:first"));
 
 $("textarea").click(function() {
   this.select();
 });
 
+// perform a smooth page scroll to anchors on the same page
+$(handlePageAnchors);
+
 if ($(".twitter-follow-button").length) {
   // replace the "Follow @canjs!" link with a little wiget with follower count.
   $("#twitter-wjs").remove();
@@ -194,20 +196,6 @@ var getNavToHeaderEl = function(hEl) {
   return $("section.contents a[href*='" + id + "']");
 };
 
-$("section.comment h3").each(function() {
-  //fix duplicate id problem
-  var ids = $('[id="' + this.id + '"]');
-  if (ids.length > 1 && ids[0] === this) {
-    var navTo = getNavToHeaderEl(ids);
-    ids.each(function(x, el) {
-      var aEl = navTo.get(x);
-      aEl.href = aEl.href.replace(el.id, el.id + x);
-
-      el.id = el.id + x;
-    });
-  }
-});
-
 var getSpyableElementFromPoint = (function() {
   var lastElAtPoint, x, y;
   var fromThese = $("section.comment > *");
@@ -367,76 +355,30 @@ $(window).scroll(function() {
   }
 });
 
-$("body:not(.donejs):not(.community)").find("h3, h4, h5").each(function() {
-  if (!this.id) {
-    var tag = this.tagName.toLowerCase();
-    var prevTag = "h" + (parseInt(tag.replace(/h(\d)/, "$1")) - 1);
-    var prevEl = $(this).prevAll(prevTag).get(0);
-    var prevId = prevEl ? prevEl.id : "";
-
-    this.id = prevId + "__" + $(this).text().replace(/[^a-z0-9]/gi, "");
-  }
-  var html = "<a class='linkToHeader' href='#section=" + this.id + "'>";
-  html += "<img src='static/img/link.svg'>";
-  html += "</a>";
-  $(this).prepend(html);
-});
-
-//hijack guide page jumps, animate scroll
+// hijack guide page jumps, animate scroll
 $(function() {
-  var clickFn = function() {
+  $("section.contents a").on("click", function(evt) {
     var thisLi = $(this).closest("li");
+
     if ($("section.contents").is(".active") && thisLi.is("ol > li > ol > li")) {
       $(".scroll-spy-title").click();
     }
-  };
-
-  $("section.contents a").each(function() {
-    this.href = this.href.replace("#", "#section=");
-
-    $(this).on("click", clickFn);
-
-    return true;
   });
 
   var hashOnLoad = window.location.hash;
-  if (hashOnLoad) {
-    var jumpTo = hashOnLoad.replace(/.*?#section=/, "#");
-    if ($(jumpTo).length) {
-      var offset = -55;
-      $("html, body").animate(
-        {
-          scrollTop: $(jumpTo).offset().top + offset
-        },
-        500
-      );
-    }
-  }
-});
+  var $jumpTo = $(hashOnLoad);
 
-window.addEventListener(
-  "hashchange",
-  function(hashChangeEvent) {
+  if (hashOnLoad && $jumpTo.length) {
     var offset = -55;
-    var newHash = hashChangeEvent.newURL.replace(/.*?(#.*)/g, "$1");
-
-    if (newHash.indexOf("#section=") === -1) return;
-
-    var jumpTo = newHash.replace(/.*?#section=/, "#");
-    var distance = Math.abs(
-      $("body").scrollTop() - ($(jumpTo).offset().top + offset)
-    );
-    var duration = Math.max(500, distance / 6000 * 250);
 
     $("html, body").animate(
       {
-        scrollTop: $(jumpTo).offset().top + offset
+        scrollTop: $jumpTo.offset().top + offset
       },
-      duration
+      500
     );
-  },
-  false
-);
+  }
+});
 
 $(window).scroll(function() {
   if (!isMobileSize) return;

templates/content.mustache

@@ -32,7 +32,7 @@ rendering the "regular" content }}
 			{{/unless}}
 
 			{{#unless hideArticle}}
-			<section class="contents">
+			<section class="contents on-this-page-container">
 			</section>
 			{{/unless}}
 

templates/layout.mustache

@@ -143,7 +143,6 @@
 
 	<div class="scroll-spy-title hidden-md hidden-lg">
     <span class="menu-indicator menus-closed"></span>
-    <div style="display: none;" class="on-this-page-container"></div>
 		<div id="scrollSpyCurrentH2" class="h2Only">Table of Contents</div>
 		<div id="scrollSpyCurrentH3"></div>
 	</div>