add support for normative optional attribute (#292)

tc39 · Feb 16, 2021 · 5cfedce · 5cfedce
1 parent f5d4e73
commit 5cfedce
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 113 deletions.
diff --git a/css/elements.css b/css/elements.css
@@ -362,7 +362,6 @@ h1 span.title {
 
 h1 {
   font-size: 2.67em;
-  margin-top: 2em;
   margin-bottom: 0;
   line-height: 1em;
 }
@@ -382,51 +381,6 @@ h6 {
   font-size: 1em;
 }
 
-h1:hover span.utils {
-  display: block;
-}
-
-span.utils {
-  font-size: 18px;
-  line-height: 18px;
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  font-weight: normal;
-}
-
-span.utils:before {
-  content: '⤷';
-  display: inline-block;
-  padding: 0 5px;
-}
-
-span.utils > * {
-  display: inline-block;
-  margin-right: 20px;
-}
-
-h1 span.utils span.anchor a,
-h2 span.utils span.anchor a,
-h3 span.utils span.anchor a,
-h4 span.utils span.anchor a,
-h5 span.utils span.anchor a,
-h6 span.utils span.anchor a {
-  text-decoration: none;
-  font-variant: small-caps;
-}
-
-h1 span.utils span.anchor a:hover,
-h2 span.utils span.anchor a:hover,
-h3 span.utils span.anchor a:hover,
-h4 span.utils span.anchor a:hover,
-h5 span.utils span.anchor a:hover,
-h6 span.utils span.anchor a:hover {
-  color: #333;
-}
-
 emu-intro h1,
 emu-clause h1,
 emu-annex h1 {
@@ -539,6 +493,38 @@ emu-annex {
   display: block;
 }
 
+/* these values are twice the font-size for the <h1> titles for clauses */
+emu-intro,
+emu-clause,
+emu-annex {
+  margin-top: 4em;
+}
+emu-intro emu-intro,
+emu-clause emu-clause,
+emu-annex emu-annex {
+  margin-top: 3.12em;
+}
+emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex {
+  margin-top: 2.5em;
+}
+emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 2.22em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 2em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 1.8em;
+}
+
 /* Figures and tables */
 figure {
   display: block;
@@ -1122,3 +1108,19 @@ li.menu-search-result-term:before {
     display: none;
   }
 }
+
+[normative-optional] {
+  border-left: 5px solid #ff6600;
+  padding: 0.5em;
+  display: block;
+  background: #ffeedd;
+}
+
+.normative-optional-tag {
+  text-transform: uppercase;
+  color: #884400;
+}
+
+.normative-optional-tag a {
+  color: #884400;
+}
diff --git a/docs/elements.css b/docs/elements.css
diff --git a/docs/index.html b/docs/index.html
diff --git a/spec/index.html b/spec/index.html
@@ -166,6 +166,21 @@ <h1>emu-clause</h1>
     <h2>Attributes</h2>
     <p><b>id:</b> Clause id. Must be unique.</p>
     <p><b>aoid:</b> Abstract operation ID. A unique name identifying this clause as an abstract operation. Algorithm steps will auto-link calls to this abstract operation to this clause. If left blank, the aoid will be set to the id of this clause.</p>
+    <p><b>normative-optional:</b> If present, the clause is Normative Optional.</p>
+
+    <h2>Example</h2>
+    <h3>Element</h3>
+    <pre><code class="language-html">
+      &lt;emu-clause id="example-normative-optional" normative-optional>
+        &lt;h1>Example Normative Optional Clause&lt;/h1>
+        &lt;p>This clause is normative optional.&lt;/p>
+      &lt;/emu-clause>
+    </code></pre>
+    <h3>Result</h3>
+    <emu-clause id="example-normative-optional" normative-optional>
+      <h1>Example Normative Optional Clause</h1>
+      <p>This clause is normative optional.</p>
+    </emu-clause>
   </emu-clause>
 
   <emu-clause id="emu-annex">

diff --git a/src/Clause.ts b/src/Clause.ts
@@ -87,24 +87,6 @@ export default class Clause extends Builder {
     }
   }
 
-  buildUtils() {
-    const utilsElem = this.spec.doc.createElement('span');
-    utilsElem.setAttribute('class', 'utils');
-
-    const anchorElem = this.spec.doc.createElement('span');
-    anchorElem.setAttribute('class', 'anchor');
-    anchorElem.innerHTML = '<a href="#' + this.id + '">link</a>';
-
-    const pinElem = this.spec.doc.createElement('span');
-    pinElem.setAttribute('class', 'anchor');
-    pinElem.innerHTML = '<a href="#" class="utils-pin">pin</a>';
-
-    utilsElem.appendChild(anchorElem);
-    utilsElem.appendChild(pinElem);
-
-    this.header.appendChild(utilsElem);
-  }
-
   static async enter({ spec, node, clauseStack, clauseNumberer }: Context) {
     if (!node.id) {
       spec.warn({
@@ -132,7 +114,7 @@ export default class Clause extends Builder {
     clauseStack.push(clause);
   }
 
-  static exit({ spec, clauseStack }: Context) {
+  static exit({ node, spec, clauseStack, inAlg, currentId }: Context) {
     const clause = clauseStack[clauseStack.length - 1];
 
     if (!clause.header) {
@@ -145,7 +127,23 @@ export default class Clause extends Builder {
     clause.buildHeader();
     clause.buildExamples();
     clause.buildNotes();
-    //clause.buildUtils();
+
+    if (node.hasAttribute('normative-optional')) {
+      let tag = spec.doc.createElement('div');
+      tag.className = 'normative-optional-tag';
+      let contents = spec.doc.createTextNode('Normative Optional');
+      tag.append(contents);
+      node.prepend(tag);
+
+      // we've already walked past the text node, so it won't get picked up by the usual process for autolinking
+      spec._textNodes[clause.namespace] = spec._textNodes[clause.namespace] || [];
+      spec._textNodes[clause.namespace].push({
+        node: contents,
+        clause,
+        inAlg,
+        currentId,
+      });
+    }
 
     // clauses are always at the spec-level namespace.
     spec.biblio.add(