Button Examples: Add Open in Codepen and inline SVG in HTML using SVG…

… "def"s (pull #1642) * Add codepen to button example * Move SVG image definitions to within the example HTML * Mod examples.js to Remove SVG definitions from source code snippet
w3c · Dec 13, 2020 · b034ccd · b034ccd
1 parent ee15d76
commit b034ccd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 36 deletions.
diff --git a/examples/button/button.html b/examples/button/button.html
@@ -41,7 +41,9 @@ <h1>Button Examples</h1>
     </ul>
 
     <section>
+    <div class="example-header">
       <h2 id="ex_label">Example</h2>
+    </div>
 
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
 
@@ -53,9 +55,39 @@ <h2 id="ex_label">Example</h2>
         <a tabindex="0" role="button" id="toggle" aria-pressed="false">
           Mute
           <svg aria-hidden="true" focusable="false">
-            <use xlink:href="images/mute.svg#icon-sound"></use>
+            <use xlink:href="#icon-sound"></use>
           </svg>
         </a>
+
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">
+          <defs>
+            <symbol id="icon-mute" viewBox="0 0 75 75">
+              <polygon
+                 id="polygon1"
+                 points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
+                 style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;" />
+              <path
+                 id="path3003"
+                 d="M 48.651772,50.269646 69.395223,25.971024"
+                 style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round" />
+              <path
+                 id="path3003-1"
+                 d="M 69.395223,50.269646 48.651772,25.971024"
+                 style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+            </symbol>
+            <symbol id="icon-sound" viewBox="0 0 75 75">
+              <polygon points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
+                style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;"/>
+              <path d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577"
+                style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+              <path d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076"
+                style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+              <path d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
+                style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+            </symbol>
+          </defs>
+        </svg>
+
       </div>
 
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
@@ -154,7 +186,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
     <section>
       <h2>Javascript and CSS Source Code</h2>
 
-      <ul>
+      <ul id="css_js_files">
         <li>
           CSS:
           <a href="css/button.css" type="text/css">button.css</a>
@@ -176,7 +208,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
       <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
       <script>
-        sourceCode.add('source1', 'example');
+        sourceCode.add('source1', 'example', 'ex_label', 'css_js_files');
         sourceCode.make();
       </script>
     </section>

diff --git a/examples/button/images/mute.svg b/examples/button/images/mute.svg
diff --git a/examples/button/js/button.js b/examples/button/js/button.js
@@ -7,8 +7,8 @@
 
 'use strict';
 
-var ICON_MUTE_URL = 'images/mute.svg#icon-mute';
-var ICON_SOUND_URL = 'images/mute.svg#icon-sound';
+var ICON_MUTE_URL = '#icon-mute';
+var ICON_SOUND_URL = '#icon-sound';
 
 function init() {
   var actionButton = document.getElementById('action');

diff --git a/examples/js/examples.js b/examples/js/examples.js
@@ -159,7 +159,10 @@ aria.widget.SourceCode.prototype.createCode = function (
 
     switch (childNode.nodeType) {
       case Node.ELEMENT_NODE:
-        this.createCode(sourceCodeNode, childNode, indentLevel, false);
+        // To remove the SVG definitions from the example's source code, add the id `svg_definitions`
+        if (childNode.id !== 'svg_definitions') {
+          this.createCode(sourceCodeNode, childNode, indentLevel, false);
+        }
         break;
 
       case Node.TEXT_NODE: