add page numbers after ToC entries (#579)

Author: michaelficarra

css/print.css

@@ -21,7 +21,7 @@ export default function makeMenu(spec: Spec) {
   pinContainer.appendChild(pinHeader);
   pinContainer.appendChild(pinList);
 
-  const toc = Toc.build(spec, true);
+  const toc = Toc.build(spec, { expandy: true });
 
   const tocContainer = spec.doc.createElement('div');
   tocContainer.setAttribute('id', 'menu-toc');

src/Menu.ts

@@ -582,7 +582,7 @@ export default class Spec {
       this.log('Building table of contents...');
 
       if (this.opts.oldToc) {
-        new Toc(this).build();
+        new Toc(this).build(2);
       } else {
         ({ js: tocJs, eles: commonEles } = makeMenu(this));
       }

src/Spec.ts

@@ -8,12 +8,12 @@ export default class Toc {
     this.spec = spec;
   }
 
-  build() {
+  build(maxDepth: number = Infinity) {
     if (this.spec.subclauses.length === 0) {
       return;
     }
 
-    const html = Toc.build(this.spec);
+    const html = Toc.build(this.spec, { maxDepth });
     const tocContainer = this.spec.doc.createElement('div');
     tocContainer.setAttribute('id', 'toc');
     tocContainer.innerHTML = '<h2>Table of Contents</h2>' + html;
@@ -26,7 +26,11 @@ export default class Toc {
     this.spec.doc.body.setAttribute('class', bodyClass + ' oldtoc');
   }
 
-  static build(level: Spec | Clause, expandy?: boolean) {
+  static build(level: Spec | Clause, { maxDepth = Infinity, expandy = false } = {}) {
+    if (maxDepth <= 0) {
+      return '';
+    }
+
     let html = '<ol class="toc">';
 
     level.subclauses.forEach(sub => {
@@ -45,7 +49,7 @@ export default class Toc {
         html += '<span class="secnum">' + sub.number + '</span> ';
       }
       html += shorten(sub.titleHTML) + '</a>';
-      if (sub.subclauses.length > 0) html += Toc.build(sub, expandy);
+      if (sub.subclauses.length > 0) html += Toc.build(sub, { maxDepth: maxDepth - 1, expandy });
       html += '</li>';
     });
 

src/Toc.ts

@@ -8,7 +8,7 @@
   <li><span>Toggle pinning of the current clause</span><code>p</code></li>
   <li><span>Jump to <i>n</i>th pin</span><code>1-9</code></li>
 </ul></div><div id="spec-container">
-<div id="toc"><h2>Table of Contents</h2><ol class="toc"><li><a href="#sec-intro" title="Intro">Intro</a><ol class="toc"><li><a href="#sec-intro2" title="Sub Intro">Sub Intro</a></li></ol></li><li><a href="#sec-clause" title="Clause Foo(a, b)"><span class="secnum">1</span> Clause Foo(<var>a</var>, <var>b</var>)</a><ol class="toc"><li><a href="#Foo" title="Sub Clause"><span class="secnum">1.1</span> Sub Clause</a></li></ol></li><li><a href="#sec-number" title="Explicit number"><span class="secnum">7</span> Explicit number</a><ol class="toc"><li><a href="#sec-number1" title="Automatic number inside explicit number"><span class="secnum">7.1</span> Automatic number inside explicit number</a></li><li><a href="#sec-number2" title="Nested explicit number"><span class="secnum">7.4</span> Nested explicit number</a></li><li><a href="#sec-number3" title="Automatic number after explicit number"><span class="secnum">7.5</span> Automatic number after explicit number</a></li><li><a href="#sec-number-nested" title="Multi-step explicit numbers"><span class="secnum">7.6</span> Multi-step explicit numbers</a><ol class="toc"><li><a href="#sec-number-multi-step" title="Multi-step explicit numbers"><span class="secnum">7.6.1.1</span> Multi-step explicit numbers</a></li><li><a href="#sec-number-multi-step-1" title="Automatic number after explicit number"><span class="secnum">7.6.1.2</span> Automatic number after explicit number</a><ol class="toc"><li><a href="#sec-number-multi-step-inner" title="Nested clause after explicit multi-step number"><span class="secnum">7.6.1.2.1</span> Nested clause after explicit multi-step number</a></li></ol></li><li><a href="#sec-number-multi-step-2" title="Increasing multi-step explicit numbers"><span class="secnum">7.6.2.1</span> Increasing multi-step explicit numbers</a></li></ol></li></ol></li><li><a href="#sec-annex" title="Annex"><span class="secnum">A</span> Annex</a><ol class="toc"><li><a href="#sec-annex2" title="Sub-annex"><span class="secnum">A.1</span> Sub-annex</a></li></ol></li></ol></div><emu-intro id="sec-intro">
+<div id="toc"><h2>Table of Contents</h2><ol class="toc"><li><a href="#sec-intro" title="Intro">Intro</a><ol class="toc"><li><a href="#sec-intro2" title="Sub Intro">Sub Intro</a></li></ol></li><li><a href="#sec-clause" title="Clause Foo(a, b)"><span class="secnum">1</span> Clause Foo(<var>a</var>, <var>b</var>)</a><ol class="toc"><li><a href="#Foo" title="Sub Clause"><span class="secnum">1.1</span> Sub Clause</a></li></ol></li><li><a href="#sec-number" title="Explicit number"><span class="secnum">7</span> Explicit number</a><ol class="toc"><li><a href="#sec-number1" title="Automatic number inside explicit number"><span class="secnum">7.1</span> Automatic number inside explicit number</a></li><li><a href="#sec-number2" title="Nested explicit number"><span class="secnum">7.4</span> Nested explicit number</a></li><li><a href="#sec-number3" title="Automatic number after explicit number"><span class="secnum">7.5</span> Automatic number after explicit number</a></li><li><a href="#sec-number-nested" title="Multi-step explicit numbers"><span class="secnum">7.6</span> Multi-step explicit numbers</a></li></ol></li><li><a href="#sec-annex" title="Annex"><span class="secnum">A</span> Annex</a><ol class="toc"><li><a href="#sec-annex2" title="Sub-annex"><span class="secnum">A.1</span> Sub-annex</a></li></ol></li></ol></div><emu-intro id="sec-intro">
   <h1>Intro</h1>
   <emu-intro id="sec-intro2">
     <h1>Sub Intro</h1>