Add emu-figure and emu-table

tc39 · Aug 20, 2015 · 9f1b88a · 9f1b88a
1 parent 47280f4
commit 9f1b88a
Show file tree

Hide file tree

Showing 11 changed files with 202 additions and 32 deletions.
diff --git a/css/elements.css b/css/elements.css
@@ -280,15 +280,20 @@ figure figcaption {
     text-align: center;
 }
 
-table.real-table {
+emu-table table {
+  margin: 0 auto;
+}
+
+emu-table table, table.real-table {
     border-collapse: collapse;
 }
-table.real-table td, table.real-table th {
+
+emu-table td, emu-table th, table.real-table td, table.real-table th {
     border: 1px solid black;
     padding: 0.4em;
     vertical-align: baseline;
 }
-table.real-table th {
+emu-table th, emu-table thead td, table.real-table th {
     background-color: #eeeeee;
 }
 

diff --git a/lib/Example.js b/lib/Example.js
@@ -38,7 +38,7 @@ module.exports = class Example extends Builder {
 
     const captionElem = this.spec.doc.createElement('figcaption');
     captionElem.textContent = caption;
-    this.node.childNodes[0].appendChild(captionElem);
+    this.node.childNodes[0].insertBefore(captionElem, this.node.childNodes[0].firstChild);
   }
 };
 
diff --git a/lib/Figure.js b/lib/Figure.js
@@ -0,0 +1,40 @@
+'use strict';
+const Builder = require('./Builder');
+
+module.exports = class Figure extends Builder {
+  constructor(spec, node) {
+    super(spec, node);
+    this.type = node.nodeName.split('-')[1].toLowerCase();
+    this.number = ++spec._figureCounts[this.type];
+    this.id = node.getAttribute('id');
+
+    if (this.id) {
+      spec.biblio[this.type + 's'][this.id] = {
+        location: '',
+        id: this.id,
+        number: this.number
+      };
+    }
+    this.isInformative = node.hasAttribute('informative');
+    this.caption = node.getAttribute('caption');
+  }
+
+  build() {
+    this.node.innerHTML = '<figure>' + this.node.innerHTML + '</figure>';
+
+    let caption = this.type.charAt(0).toUpperCase() + this.type.slice(1);
+    caption += ' ' + this.number;
+
+    if (this.isInformative) {
+      caption += ' (Informative)';
+    }
+
+    if (this.caption) {
+      caption += ': ' + this.caption;
+    }
+
+    const captionElem = this.spec.doc.createElement('figcaption');
+    captionElem.textContent = caption;
+    this.node.childNodes[0].insertBefore(captionElem, this.node.childNodes[0].firstChild);
+  }
+};
diff --git a/lib/Spec.js b/lib/Spec.js
@@ -18,6 +18,7 @@ const ProdRef = require('./ProdRef');
 const Grammar = require('./Grammar');
 const Xref = require('./Xref');
 const Eqn = require('./Eqn');
+const Figure = require('./Figure');
 
 const NO_CLAUSE_AUTOLINK = ['PRE', 'CODE', 'EMU-CLAUSE', 'EMU-ALG', 'EMU-PRODUCTION', 'EMU-GRAMMAR', 'EMU-XREF', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'EMU-EQN'];
 const clauseTextNodesUnder = utils.textNodesUnder(NO_CLAUSE_AUTOLINK);
@@ -36,21 +37,30 @@ module.exports = class Spec {
     this.fetch = fetch;
     this.subclauses = [];
     this._numberer = ClauseNumbers.iterator();
+    this._figureCounts = {
+      table: 0,
+      figure: 0
+    };
+
     this.externalBiblio = {
       clauses: {},
       ops: {},
       productions: {},
       terms: {},
       examples: {},
-      notes: {}
+      notes: {},
+      tables: {},
+      figures: {}
     };
     this.biblio = {
       clauses: {},
       ops: {},
       productions: {},
       terms: {},
       examples: {},
-      notes: {}
+      notes: {},
+      tables: {},
+      figures: {}
     };
     this._prodsByName = {};
 
@@ -105,6 +115,7 @@ module.exports = class Spec {
       .then(this.buildAll.bind(this, 'emu-alg', Algorithm))
       .then(this.buildAll.bind(this, 'emu-production', Production))
       .then(this.buildAll.bind(this, 'emu-prodref', ProdRef))
+      .then(this.buildAll.bind(this, 'emu-figure, emu-table', Figure))
       .then(this.buildAll.bind(this, 'dfn', Dfn))
       .then(this.highlightCode.bind(this))
       .then(this.autolink.bind(this))
@@ -239,7 +250,7 @@ module.exports = class Spec {
   }
 
   lookupBiblioEntryById(id) {
-    const types = ['clause', 'production', 'example', 'note'];
+    const types = ['clause', 'production', 'example', 'note', 'figure', 'table'];
     for (let i = 0; i < types.length; i++) {
       const type = types[i];
       const entry = this.spec.biblio[type + 's'][id] || this.spec.externalBiblio[type + 's'][id];

diff --git a/lib/Xref.js b/lib/Xref.js
@@ -45,6 +45,12 @@ module.exports = class Xref extends Builder {
       case 'note':
         buildFigureLink(this.spec, xref, entry.entry, 'Note');
         break;
+      case 'table':
+        buildFigureLink(this.spec, xref, entry.entry, 'Table');
+        break;
+      case 'figure':
+        buildFigureLink(this.spec, xref, entry.entry, 'Figure');
+        break;
       default:
         console.log('Warning: found unknown biblio entry (this is a bug, please file it)');
       }
@@ -92,21 +98,25 @@ function buildAOLink(xref, entry) {
 
 function buildFigureLink(spec, xref, entry, type) {
   if (xref.textContent.trim() === '') {
-    // first need to find the associated clause
-    const clauseEntry = spec.lookupBiblioEntryById(entry.clauseId);
-    if (clauseEntry.type !== 'clause') {
-      console.log('Warning: could not find parent clause for ' + type + ' id ' + entry.id);
-    }
+    if (entry.clauseId) {
+      // first need to find the associated clause
+      const clauseEntry = spec.lookupBiblioEntryById(entry.clauseId);
+      if (clauseEntry.type !== 'clause') {
+        console.log('Warning: could not find parent clause for ' + type + ' id ' + entry.id);
+      }
 
-    const parentClause = utils.parent(xref, ['EMU-CLAUSE', 'EMU-INTRO', 'EMU-ANNEX']);
-    if (parentClause && parentClause.id === clauseEntry.entry.id) {
-      xref.innerHTML = buildXrefLink(entry, type + ' ' + entry.number);
-    } else {
-      if (xref.hasAttribute('title')) {
-        xref.innerHTML = buildXrefLink(entry, clauseEntry.entry.title + ' ' + type + ' ' + entry.number);
+      const parentClause = utils.parent(xref, ['EMU-CLAUSE', 'EMU-INTRO', 'EMU-ANNEX']);
+      if (parentClause && parentClause.id === clauseEntry.entry.id) {
+        xref.innerHTML = buildXrefLink(entry, type + ' ' + entry.number);
       } else {
-        xref.innerHTML = buildXrefLink(entry, clauseEntry.entry.number + ' ' + type + ' ' + entry.number);
+        if (xref.hasAttribute('title')) {
+          xref.innerHTML = buildXrefLink(entry, clauseEntry.entry.title + ' ' + type + ' ' + entry.number);
+        } else {
+          xref.innerHTML = buildXrefLink(entry, clauseEntry.entry.number + ' ' + type + ' ' + entry.number);
+        }
       }
+    } else {
+      xref.innerHTML = buildXrefLink(entry, type + ' ' + entry.number);
     }
   } else {
     xref.innerHTML = buildXrefLink(entry, xref.innerHTML);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ecmarkup",
-  "version": "2.0.0-beta3",
+  "version": "2.0.0-beta4",
   "description": "Custom element definitions and core utilities for markup that specifies ECMAScript and related technologies.",
   "main": "lib/ecmarkup.js",
   "scripts": {

diff --git a/test/example.html.baseline b/test/example.html.baseline
@@ -7,19 +7,19 @@
 
 <emu-clause id="sec-example">
   <h1><span class="secnum">1</span>Example Section<span class="utils"><span class="anchor"><a href="#sec-example">#</a></span></span></h1>
-  <emu-example><figure>
+  <emu-example><figure><figcaption>Example (Informative)</figcaption>
     Examples inside clauses are numbered and have captions. Captions are optional.
-  <figcaption>Example (Informative)</figcaption></figure></emu-example>
+  </figure></emu-example>
 
   <emu-clause id="sec-example-subclause">
     <h1><span class="secnum">1.1</span>Example Subclause<span class="utils"><span class="anchor"><a href="#sec-example-subclause">#</a></span></span></h1>
-    <emu-example caption="An example"><figure>
+    <emu-example caption="An example"><figure><figcaption>Example 1 (Informative): An example</figcaption>
       Multiple examples are numbered similar to notes
-    <figcaption>Example 1 (Informative): An example</figcaption></figure></emu-example>
+    </figure></emu-example>
 
-    <emu-example caption="A second example"><figure>
+    <emu-example caption="A second example"><figure><figcaption>Example 2 (Informative): A second example</figcaption>
       So this becomes example 2.
-    <figcaption>Example 2 (Informative): A second example</figcaption></figure></emu-example>
+    </figure></emu-example>
   </emu-clause>
 </emu-clause>
 

diff --git a/test/figure.html b/test/figure.html
@@ -0,0 +1,31 @@
+<pre class=metadata>toc: false</pre>
+<link rel="stylesheet" href="css/elements.css">
+<emu-figure id="figure-1">
+  this is a figure!
+</emu-figure>
+
+<emu-figure id="figure-2" informative caption="Informative figure">
+  this is a figure!
+</emu-figure>
+
+<emu-table id="table-1" caption="An example table">
+  <table>
+    <thead>
+      <tr><td>Column 1</td><td>Column 2</td></tr>
+    </thead>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+  </table>
+</emu-table>
+
+<emu-table id="table-2" caption="An example table 2" informative>
+  <table>
+    <tr><th>Column 1</th><th>Column 2</th></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+  </table>
+</emu-table>
diff --git a/test/figure.html.baseline b/test/figure.html.baseline
@@ -0,0 +1,33 @@
+<!doctype html>
+<head></head><body>
+<link rel="stylesheet" href="css/elements.css">
+<emu-figure id="figure-1"><figure><figcaption>Figure 1</figcaption>
+  this is a figure!
+</figure></emu-figure>
+
+<emu-figure id="figure-2" informative="" caption="Informative figure"><figure><figcaption>Figure 2 (Informative): Informative figure</figcaption>
+  this is a figure!
+</figure></emu-figure>
+
+<emu-table id="table-1" caption="An example table"><figure><figcaption>Table 1: An example table</figcaption>
+  <table>
+    <thead>
+      <tr><td>Column 1</td><td>Column 2</td></tr>
+    </thead>
+    <tbody><tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+  </tbody></table>
+</figure></emu-table>
+
+<emu-table id="table-2" caption="An example table 2" informative=""><figure><figcaption>Table 2 (Informative): An example table 2</figcaption>
+  <table>
+    <tbody><tr><th>Column 1</th><th>Column 2</th></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+    <tr><td>Value</td><td>Value 2</td></tr>
+  </tbody></table>
+</figure></emu-table>
+</body>
diff --git a/test/xref.html b/test/xref.html
@@ -47,6 +47,10 @@ <h1>Clause Title</h1>
   <emu-xref href="#note-2" title></emu-xref> <!-- examples in current clause shouldn't include clause name -->
   <emu-xref href="#note-2">with link text</emu-xref>
 
+  <!-- refs to figures and tables -->
+  <emu-xref href="#table-1"></emu-xref>
+  <emu-xref href="#figure-1"></emu-xref>
+
   <emu-clause id="sec-abstract-op" aoid="AbstractOp">
     <h1>AbstractOp</h1>
     <emu-alg>
@@ -73,6 +77,22 @@ <h1>AbstractOp</h1>
   <emu-note id="note-2">
     This is a note!
   </emu-note>
+
+  <emu-figure id="figure-1">
+    this is a figure!
+  </emu-figure>
+
+  <emu-table id="table-1" caption="An example table">
+    <table>
+      <thead>
+        <tr><td>Column 1</td><td>Column 2</td></tr>
+      </thead>
+      <tr><td>Value</td><td>Value 2</td></tr>
+      <tr><td>Value</td><td>Value 2</td></tr>
+      <tr><td>Value</td><td>Value 2</td></tr>
+      <tr><td>Value</td><td>Value 2</td></tr>
+    </table>
+  </emu-table>
 </emu-clause>
 
 <emu-grammar>

diff --git a/test/xref.html.baseline b/test/xref.html.baseline
@@ -48,30 +48,50 @@
   <emu-xref href="#note-2" title=""><a href="#note-2">Note 1</a></emu-xref> <!-- examples in current clause shouldn't include clause name -->
   <emu-xref href="#note-2"><a href="#note-2">with link text</a></emu-xref>
 
+  <!-- refs to figures and tables -->
+  <emu-xref href="#table-1"><a href="#table-1">Table 1</a></emu-xref>
+  <emu-xref href="#figure-1"><a href="#figure-1">Figure 1</a></emu-xref>
+
   <emu-clause id="sec-abstract-op" aoid="AbstractOp">
     <h1><span class="secnum">1.1</span>AbstractOp<span class="utils"><span class="anchor"><a href="#sec-abstract-op">#</a></span></span></h1>
     <emu-alg><ol><li>Return.</li></ol></emu-alg>
 
-    <emu-example id="example-2" caption="Foo Caption"><figure>
+    <emu-example id="example-2" caption="Foo Caption"><figure><figcaption>Example 1 (Informative): Foo Caption</figcaption>
       This is an example
-    <figcaption>Example 1 (Informative): Foo Caption</figcaption></figure></emu-example>
+    </figure></emu-example>
 
-    <emu-example id="example-3" caption="Foo Caption"><figure>
+    <emu-example id="example-3" caption="Foo Caption"><figure><figcaption>Example 2 (Informative): Foo Caption</figcaption>
       This is an example
-    <figcaption>Example 2 (Informative): Foo Caption</figcaption></figure></emu-example>
+    </figure></emu-example>
 
     <emu-note id="note-1"><span class="note">Note</span>
       This is another note
     </emu-note>
   </emu-clause>
 
-  <emu-example id="example-1" caption="Foo Caption"><figure>
+  <emu-example id="example-1" caption="Foo Caption"><figure><figcaption>Example (Informative): Foo Caption</figcaption>
     This is an example
-  <figcaption>Example (Informative): Foo Caption</figcaption></figure></emu-example>
+  </figure></emu-example>
 
   <emu-note id="note-2"><span class="note">Note</span>
     This is a note!
   </emu-note>
+
+  <emu-figure id="figure-1"><figure><figcaption>Figure 1</figcaption>
+    this is a figure!
+  </figure></emu-figure>
+
+  <emu-table id="table-1" caption="An example table"><figure><figcaption>Table 1: An example table</figcaption>
+    <table>
+      <thead>
+        <tr><td>Column 1</td><td>Column 2</td></tr>
+      </thead>
+      <tbody><tr><td>Value</td><td>Value 2</td></tr>
+      <tr><td>Value</td><td>Value 2</td></tr>
+      <tr><td>Value</td><td>Value 2</td></tr>
+      <tr><td>Value</td><td>Value 2</td></tr>
+    </tbody></table>
+  </figure></emu-table>
 </emu-clause>
 
 <emu-grammar><emu-production name="TestProduction" type="lexical" id="prod-TestProduction">