Add a <cxx-figure> element analogous to <cxx-table>.

jyasskin · jyasskin · commit 998934fce1a8 · 2014-02-27T22:20:36.000-08:00
Also made tables renumber themselves when they're added or removed from the
document.  This isn't as efficient as it could be, but I can optimize that
later.
diff --git a/figure.html b/figure.html
@@ -0,0 +1,47 @@
+<!-- Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!--
+    Uses the HTML <figure> content model, but automatically adds a number to
+    the <figcaption>.
+-->
+<polymer-element name="cxx-figure" constructor="CxxFigureElement">
+  <template>
+    <style>
+      :host { margin-left: auto; margin-right: auto; }
+      figcaption { white-space: nowrap; text-align: center; }
+      /* @polyfill figcaption figcaption */
+      ::content figcaption { display: inline; }
+
+    </style>
+    <figure>
+      <figcaption>Figure {{figure_num}} — <wbr><content select="figcaption"></content></figcaption>
+      <content></content>
+    </figure>
+  </template>
+  <script>
+    (function() {
+      function renumberFigures() {
+        document.querySelectorAll('cxx-figure').array().forEach(function(figure, index) {
+          figure.figure_num = index + 1;
+        });
+      }
+      Polymer('cxx-figure', {
+        attached: renumberFigures,
+        detached: renumberFigures,
+      });
+    })();
+  </script>
+</polymer-element>
diff --git a/framework.html b/framework.html
@@ -22,6 +22,7 @@
 <link rel="import" href="section.html"/>
 <link rel="import" href="clause.html"/>
 <link rel="import" href="table.html"/>
+<link rel="import" href="figure.html"/>
 <link rel="import" href="definition-section.html"/>
 <link rel="import" href="toc.html"/>
 <link rel="import" href="ref.html"/>
diff --git a/ref.html b/ref.html
@@ -31,7 +31,8 @@
                  ><template if="{{in_elem.index}}">{{in_elem.name}} &#xa7;{{in_elem.index[to]}}</template
                  ><template if="{{!in}}"><a href="#{{to}}"
                    ><template if="{{to_elem.sec_num}}">{{to_elem.sec_num}}</template
-                   ><template if="{{to_elem.table_num}}">Table {{to_elem.table_num}}</template></a></template
+                   ><template if="{{to_elem.table_num}}">Table {{to_elem.table_num}}</template
+                   ><template if="{{to_elem.figure_num}}">Figure {{to_elem.figure_num}}</template></a></template
       ></template
       ><template if="{{insynopsis}}">// <i><template bind="" ref="target_num"></template>, {{to_elem.title_element.textContent}}</i></template
       ><template if="{{!insynopsis}}"><template bind="" ref="target_num"></template></template
diff --git a/ref.js b/ref.js
@@ -43,9 +43,10 @@ limitations under the License.
                 this.async(function() {
                     // Async makes sure the to_elem is upgraded.
                     if (!(this.to_elem instanceof CxxSectionElement ||
-                          this.to_elem instanceof CxxTableElement)) {
+                          this.to_elem instanceof CxxTableElement ||
+                          this.to_elem instanceof CxxFigureElement)) {
                         console.error("Reference from", this,
-                                      "refers to non-section, non-table element",
+                                      "refers to non-section, non-table, non-figure element",
                                       this.to_elem);
                     }
                 });
diff --git a/table.html b/table.html
@@ -40,11 +40,14 @@
   </template>
   <script>
     (function() {
-      var next_table_num = 1;
+      function renumberTables() {
+        document.querySelectorAll('[is=cxx-table]').array().forEach(function(table, index) {
+          table.table_num = index + 1;
+        });
+      }
       Polymer('cxx-table', {
-        created: function() {
-          this.table_num = next_table_num++;
-        }
+        attached: renumberTables,
+        detached: renumberTables,
       });
     })();
   </script>
