Skip to content

Commit 9f1b88a

Browse files
bterlsonbterlson
committed
Add emu-figure and emu-table
1 parent 47280f4 commit 9f1b88a

11 files changed

+202
-32
lines changed

‎css/elements.css

+8-3
Original file line numberDiff line numberDiff line change
@@ -280,15 +280,20 @@ figure figcaption {
280280
text-align: center;
281281
}
282282

283-
table.real-table {
283+
emu-table table {
284+
margin: 0 auto;
285+
}
286+
287+
emu-table table, table.real-table {
284288
border-collapse: collapse;
285289
}
286-
table.real-table td, table.real-table th {
290+
291+
emu-table td, emu-table th, table.real-table td, table.real-table th {
287292
border: 1px solid black;
288293
padding: 0.4em;
289294
vertical-align: baseline;
290295
}
291-
table.real-table th {
296+
emu-table th, emu-table thead td, table.real-table th {
292297
background-color: #eeeeee;
293298
}
294299

‎lib/Example.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ module.exports = class Example extends Builder {
3838

3939
const captionElem = this.spec.doc.createElement('figcaption');
4040
captionElem.textContent = caption;
41-
this.node.childNodes[0].appendChild(captionElem);
41+
this.node.childNodes[0].insertBefore(captionElem, this.node.childNodes[0].firstChild);
4242
}
4343
};
4444

‎lib/Figure.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
'use strict';
2+
const Builder = require('./Builder');
3+
4+
module.exports = class Figure extends Builder {
5+
constructor(spec, node) {
6+
super(spec, node);
7+
this.type = node.nodeName.split('-')[1].toLowerCase();
8+
this.number = ++spec._figureCounts[this.type];
9+
this.id = node.getAttribute('id');
10+
11+
if (this.id) {
12+
spec.biblio[this.type + 's'][this.id] = {
13+
location: '',
14+
id: this.id,
15+
number: this.number
16+
};
17+
}
18+
this.isInformative = node.hasAttribute('informative');
19+
this.caption = node.getAttribute('caption');
20+
}
21+
22+
build() {
23+
this.node.innerHTML = '<figure>' + this.node.innerHTML + '</figure>';
24+
25+
let caption = this.type.charAt(0).toUpperCase() + this.type.slice(1);
26+
caption += ' ' + this.number;
27+
28+
if (this.isInformative) {
29+
caption += ' (Informative)';
30+
}
31+
32+
if (this.caption) {
33+
caption += ': ' + this.caption;
34+
}
35+
36+
const captionElem = this.spec.doc.createElement('figcaption');
37+
captionElem.textContent = caption;
38+
this.node.childNodes[0].insertBefore(captionElem, this.node.childNodes[0].firstChild);
39+
}
40+
};

‎lib/Spec.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const ProdRef = require('./ProdRef');
1818
const Grammar = require('./Grammar');
1919
const Xref = require('./Xref');
2020
const Eqn = require('./Eqn');
21+
const Figure = require('./Figure');
2122

2223
const NO_CLAUSE_AUTOLINK = ['PRE', 'CODE', 'EMU-CLAUSE', 'EMU-ALG', 'EMU-PRODUCTION', 'EMU-GRAMMAR', 'EMU-XREF', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'EMU-EQN'];
2324
const clauseTextNodesUnder = utils.textNodesUnder(NO_CLAUSE_AUTOLINK);
@@ -36,21 +37,30 @@ module.exports = class Spec {
3637
this.fetch = fetch;
3738
this.subclauses = [];
3839
this._numberer = ClauseNumbers.iterator();
40+
this._figureCounts = {
41+
table: 0,
42+
figure: 0
43+
};
44+
3945
this.externalBiblio = {
4046
clauses: {},
4147
ops: {},
4248
productions: {},
4349
terms: {},
4450
examples: {},
45-
notes: {}
51+
notes: {},
52+
tables: {},
53+
figures: {}
4654
};
4755
this.biblio = {
4856
clauses: {},
4957
ops: {},
5058
productions: {},
5159
terms: {},
5260
examples: {},
53-
notes: {}
61+
notes: {},
62+
tables: {},
63+
figures: {}
5464
};
5565
this._prodsByName = {};
5666

@@ -105,6 +115,7 @@ module.exports = class Spec {
105115
.then(this.buildAll.bind(this, 'emu-alg', Algorithm))
106116
.then(this.buildAll.bind(this, 'emu-production', Production))
107117
.then(this.buildAll.bind(this, 'emu-prodref', ProdRef))
118+
.then(this.buildAll.bind(this, 'emu-figure, emu-table', Figure))
108119
.then(this.buildAll.bind(this, 'dfn', Dfn))
109120
.then(this.highlightCode.bind(this))
110121
.then(this.autolink.bind(this))
@@ -239,7 +250,7 @@ module.exports = class Spec {
239250
}
240251

241252
lookupBiblioEntryById(id) {
242-
const types = ['clause', 'production', 'example', 'note'];
253+
const types = ['clause', 'production', 'example', 'note', 'figure', 'table'];
243254
for (let i = 0; i < types.length; i++) {
244255
const type = types[i];
245256
const entry = this.spec.biblio[type + 's'][id] || this.spec.externalBiblio[type + 's'][id];

‎lib/Xref.js

+22-12
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@ module.exports = class Xref extends Builder {
4545
case 'note':
4646
buildFigureLink(this.spec, xref, entry.entry, 'Note');
4747
break;
48+
case 'table':
49+
buildFigureLink(this.spec, xref, entry.entry, 'Table');
50+
break;
51+
case 'figure':
52+
buildFigureLink(this.spec, xref, entry.entry, 'Figure');
53+
break;
4854
default:
4955
console.log('Warning: found unknown biblio entry (this is a bug, please file it)');
5056
}
@@ -92,21 +98,25 @@ function buildAOLink(xref, entry) {
9298

9399
function buildFigureLink(spec, xref, entry, type) {
94100
if (xref.textContent.trim() === '') {
95-
// first need to find the associated clause
96-
const clauseEntry = spec.lookupBiblioEntryById(entry.clauseId);
97-
if (clauseEntry.type !== 'clause') {
98-
console.log('Warning: could not find parent clause for ' + type + ' id ' + entry.id);
99-
}
101+
if (entry.clauseId) {
102+
// first need to find the associated clause
103+
const clauseEntry = spec.lookupBiblioEntryById(entry.clauseId);
104+
if (clauseEntry.type !== 'clause') {
105+
console.log('Warning: could not find parent clause for ' + type + ' id ' + entry.id);
106+
}
100107

101-
const parentClause = utils.parent(xref, ['EMU-CLAUSE', 'EMU-INTRO', 'EMU-ANNEX']);
102-
if (parentClause && parentClause.id === clauseEntry.entry.id) {
103-
xref.innerHTML = buildXrefLink(entry, type + ' ' + entry.number);
104-
} else {
105-
if (xref.hasAttribute('title')) {
106-
xref.innerHTML = buildXrefLink(entry, clauseEntry.entry.title + ' ' + type + ' ' + entry.number);
108+
const parentClause = utils.parent(xref, ['EMU-CLAUSE', 'EMU-INTRO', 'EMU-ANNEX']);
109+
if (parentClause && parentClause.id === clauseEntry.entry.id) {
110+
xref.innerHTML = buildXrefLink(entry, type + ' ' + entry.number);
107111
} else {
108-
xref.innerHTML = buildXrefLink(entry, clauseEntry.entry.number + ' ' + type + ' ' + entry.number);
112+
if (xref.hasAttribute('title')) {
113+
xref.innerHTML = buildXrefLink(entry, clauseEntry.entry.title + ' ' + type + ' ' + entry.number);
114+
} else {
115+
xref.innerHTML = buildXrefLink(entry, clauseEntry.entry.number + ' ' + type + ' ' + entry.number);
116+
}
109117
}
118+
} else {
119+
xref.innerHTML = buildXrefLink(entry, type + ' ' + entry.number);
110120
}
111121
} else {
112122
xref.innerHTML = buildXrefLink(entry, xref.innerHTML);

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ecmarkup",
3-
"version": "2.0.0-beta3",
3+
"version": "2.0.0-beta4",
44
"description": "Custom element definitions and core utilities for markup that specifies ECMAScript and related technologies.",
55
"main": "lib/ecmarkup.js",
66
"scripts": {

‎test/example.html.baseline

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@
77

88
<emu-clause id="sec-example">
99
<h1><span class="secnum">1</span>Example Section<span class="utils"><span class="anchor"><a href="#sec-example">#</a></span></span></h1>
10-
<emu-example><figure>
10+
<emu-example><figure><figcaption>Example (Informative)</figcaption>
1111
Examples inside clauses are numbered and have captions. Captions are optional.
12-
<figcaption>Example (Informative)</figcaption></figure></emu-example>
12+
</figure></emu-example>
1313

1414
<emu-clause id="sec-example-subclause">
1515
<h1><span class="secnum">1.1</span>Example Subclause<span class="utils"><span class="anchor"><a href="#sec-example-subclause">#</a></span></span></h1>
16-
<emu-example caption="An example"><figure>
16+
<emu-example caption="An example"><figure><figcaption>Example 1 (Informative): An example</figcaption>
1717
Multiple examples are numbered similar to notes
18-
<figcaption>Example 1 (Informative): An example</figcaption></figure></emu-example>
18+
</figure></emu-example>
1919

20-
<emu-example caption="A second example"><figure>
20+
<emu-example caption="A second example"><figure><figcaption>Example 2 (Informative): A second example</figcaption>
2121
So this becomes example 2.
22-
<figcaption>Example 2 (Informative): A second example</figcaption></figure></emu-example>
22+
</figure></emu-example>
2323
</emu-clause>
2424
</emu-clause>
2525

‎test/figure.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<pre class=metadata>toc: false</pre>
2+
<link rel="stylesheet" href="css/elements.css">
3+
<emu-figure id="figure-1">
4+
this is a figure!
5+
</emu-figure>
6+
7+
<emu-figure id="figure-2" informative caption="Informative figure">
8+
this is a figure!
9+
</emu-figure>
10+
11+
<emu-table id="table-1" caption="An example table">
12+
<table>
13+
<thead>
14+
<tr><td>Column 1</td><td>Column 2</td></tr>
15+
</thead>
16+
<tr><td>Value</td><td>Value 2</td></tr>
17+
<tr><td>Value</td><td>Value 2</td></tr>
18+
<tr><td>Value</td><td>Value 2</td></tr>
19+
<tr><td>Value</td><td>Value 2</td></tr>
20+
</table>
21+
</emu-table>
22+
23+
<emu-table id="table-2" caption="An example table 2" informative>
24+
<table>
25+
<tr><th>Column 1</th><th>Column 2</th></tr>
26+
<tr><td>Value</td><td>Value 2</td></tr>
27+
<tr><td>Value</td><td>Value 2</td></tr>
28+
<tr><td>Value</td><td>Value 2</td></tr>
29+
<tr><td>Value</td><td>Value 2</td></tr>
30+
</table>
31+
</emu-table>

‎test/figure.html.baseline

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<head></head><body>
3+
<link rel="stylesheet" href="css/elements.css">
4+
<emu-figure id="figure-1"><figure><figcaption>Figure 1</figcaption>
5+
this is a figure!
6+
</figure></emu-figure>
7+
8+
<emu-figure id="figure-2" informative="" caption="Informative figure"><figure><figcaption>Figure 2 (Informative): Informative figure</figcaption>
9+
this is a figure!
10+
</figure></emu-figure>
11+
12+
<emu-table id="table-1" caption="An example table"><figure><figcaption>Table 1: An example table</figcaption>
13+
<table>
14+
<thead>
15+
<tr><td>Column 1</td><td>Column 2</td></tr>
16+
</thead>
17+
<tbody><tr><td>Value</td><td>Value 2</td></tr>
18+
<tr><td>Value</td><td>Value 2</td></tr>
19+
<tr><td>Value</td><td>Value 2</td></tr>
20+
<tr><td>Value</td><td>Value 2</td></tr>
21+
</tbody></table>
22+
</figure></emu-table>
23+
24+
<emu-table id="table-2" caption="An example table 2" informative=""><figure><figcaption>Table 2 (Informative): An example table 2</figcaption>
25+
<table>
26+
<tbody><tr><th>Column 1</th><th>Column 2</th></tr>
27+
<tr><td>Value</td><td>Value 2</td></tr>
28+
<tr><td>Value</td><td>Value 2</td></tr>
29+
<tr><td>Value</td><td>Value 2</td></tr>
30+
<tr><td>Value</td><td>Value 2</td></tr>
31+
</tbody></table>
32+
</figure></emu-table>
33+
</body>

‎test/xref.html

+20
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ <h1>Clause Title</h1>
4747
<emu-xref href="#note-2" title></emu-xref> <!-- examples in current clause shouldn't include clause name -->
4848
<emu-xref href="#note-2">with link text</emu-xref>
4949
50+
<!-- refs to figures and tables -->
51+
<emu-xref href="#table-1"></emu-xref>
52+
<emu-xref href="#figure-1"></emu-xref>
53+
5054
<emu-clause id="sec-abstract-op" aoid="AbstractOp">
5155
<h1>AbstractOp</h1>
5256
<emu-alg>
@@ -73,6 +77,22 @@ <h1>AbstractOp</h1>
7377
<emu-note id="note-2">
7478
This is a note!
7579
</emu-note>
80+
81+
<emu-figure id="figure-1">
82+
this is a figure!
83+
</emu-figure>
84+
85+
<emu-table id="table-1" caption="An example table">
86+
<table>
87+
<thead>
88+
<tr><td>Column 1</td><td>Column 2</td></tr>
89+
</thead>
90+
<tr><td>Value</td><td>Value 2</td></tr>
91+
<tr><td>Value</td><td>Value 2</td></tr>
92+
<tr><td>Value</td><td>Value 2</td></tr>
93+
<tr><td>Value</td><td>Value 2</td></tr>
94+
</table>
95+
</emu-table>
7696
</emu-clause>
7797
7898
<emu-grammar>

‎test/xref.html.baseline

+26-6
Original file line numberDiff line numberDiff line change
@@ -48,30 +48,50 @@
4848
<emu-xref href="#note-2" title=""><a href="#note-2">Note 1</a></emu-xref> <!-- examples in current clause shouldn't include clause name -->
4949
<emu-xref href="#note-2"><a href="#note-2">with link text</a></emu-xref>
5050

51+
<!-- refs to figures and tables -->
52+
<emu-xref href="#table-1"><a href="#table-1">Table 1</a></emu-xref>
53+
<emu-xref href="#figure-1"><a href="#figure-1">Figure 1</a></emu-xref>
54+
5155
<emu-clause id="sec-abstract-op" aoid="AbstractOp">
5256
<h1><span class="secnum">1.1</span>AbstractOp<span class="utils"><span class="anchor"><a href="#sec-abstract-op">#</a></span></span></h1>
5357
<emu-alg><ol><li>Return.</li></ol></emu-alg>
5458

55-
<emu-example id="example-2" caption="Foo Caption"><figure>
59+
<emu-example id="example-2" caption="Foo Caption"><figure><figcaption>Example 1 (Informative): Foo Caption</figcaption>
5660
This is an example
57-
<figcaption>Example 1 (Informative): Foo Caption</figcaption></figure></emu-example>
61+
</figure></emu-example>
5862

59-
<emu-example id="example-3" caption="Foo Caption"><figure>
63+
<emu-example id="example-3" caption="Foo Caption"><figure><figcaption>Example 2 (Informative): Foo Caption</figcaption>
6064
This is an example
61-
<figcaption>Example 2 (Informative): Foo Caption</figcaption></figure></emu-example>
65+
</figure></emu-example>
6266

6367
<emu-note id="note-1"><span class="note">Note</span>
6468
This is another note
6569
</emu-note>
6670
</emu-clause>
6771

68-
<emu-example id="example-1" caption="Foo Caption"><figure>
72+
<emu-example id="example-1" caption="Foo Caption"><figure><figcaption>Example (Informative): Foo Caption</figcaption>
6973
This is an example
70-
<figcaption>Example (Informative): Foo Caption</figcaption></figure></emu-example>
74+
</figure></emu-example>
7175

7276
<emu-note id="note-2"><span class="note">Note</span>
7377
This is a note!
7478
</emu-note>
79+
80+
<emu-figure id="figure-1"><figure><figcaption>Figure 1</figcaption>
81+
this is a figure!
82+
</figure></emu-figure>
83+
84+
<emu-table id="table-1" caption="An example table"><figure><figcaption>Table 1: An example table</figcaption>
85+
<table>
86+
<thead>
87+
<tr><td>Column 1</td><td>Column 2</td></tr>
88+
</thead>
89+
<tbody><tr><td>Value</td><td>Value 2</td></tr>
90+
<tr><td>Value</td><td>Value 2</td></tr>
91+
<tr><td>Value</td><td>Value 2</td></tr>
92+
<tr><td>Value</td><td>Value 2</td></tr>
93+
</tbody></table>
94+
</figure></emu-table>
7595
</emu-clause>
7696

7797
<emu-grammar><emu-production name="TestProduction" type="lexical" id="prod-TestProduction">

0 commit comments

Comments
 (0)