Update clause numbers through the ToC

jyasskin · jyasskin · commit 8e2d26718925 · 2014-02-27T00:26:35.000-08:00
to allow new clauses to be added dynamically in the middle of the document.
diff --git a/clause.html b/clause.html
@@ -16,18 +16,21 @@
 <polymer-element name="cxx-clause" extends="cxx-section">
   <script>
     (function() {
-      var clause_num = 1;
+      function updateTocClauses() {
+        this.super();
+        var toc = document.querySelector('cxx-toc');
+        if (toc) {
+          toc.clauses = document.querySelectorAll('cxx-clause');
+        }
+      }
       Polymer('cxx-clause', {
-        attached: function() {
-          this.super();
-          var my_clause_num = clause_num++;
-
-          this.async(function() {
-            // async() lets the descendant elements upgrade; after which we
-            // need to traverse them to collect section numbers.
-            this.update_sec_nums(my_clause_num);
-          });
+        // Convenience function at the clause level, which gets called from <cxx-toc>.
+        set_clause_num: function(clause_num) {
+          this.update_sec_nums(clause_num);
         },
+
+        attached: updateTocClauses,
+        detached: updateTocClauses,
       });
     })();
   </script>
diff --git a/toc.js b/toc.js
@@ -15,10 +15,12 @@ limitations under the License.
 
 (function() {
     Polymer('cxx-toc', {
-        // Hierarchy :: [{ elem: Element, sections: Hierarchy }]
+        // Hierarchy :: [{ elem: Element, title: H1, sections: Hierarchy }]
         sections: [],
 
-        applyAuthorStyles: true,
+        // Updated with the list of <cxx-clause> elements in the document each
+        // time such an element is attached or detached.
+        clauses: [],
 
         collectSections: function(root) {
             var sections = [];
@@ -33,9 +35,15 @@ limitations under the License.
                     sections: sections};
         },
 
-        created: function() {
-            var clauses = window.document.querySelectorAll('cxx-clause');
-            this.sections = clauses.array().map(this.collectSections, this);
+        clausesChanged: function() {
+            this.sections = this.clauses.array().map(function(clause, index) {
+                clause.set_clause_num(index + 1);
+                return this.collectSections(clause);
+            }, this);
+        },
+
+        attached: function() {
+            this.clauses = document.querySelectorAll('cxx-clause');
         }
     })
 })();
