Button Example: Moved SVG for mute button to external file (pull #333)

The svg for the toggle button was inline in the button.html file. To be consistent with other examples and with the template, moved that svg code to an svg file.
w3c · Mar 20, 2017 · ff402d0 · ff402d0
1 parent 5ea0e2b
commit ff402d0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 41 deletions.
diff --git a/examples/button/button.html b/examples/button/button.html
@@ -15,35 +15,6 @@
 <script src="js/button.js" type="text/javascript"></script>
 </head>
 <body>
-  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 0; height: 0;">
-    <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>
   <main>
     <h1>Button Examples</h1>
     <p>
@@ -62,12 +33,18 @@ <h1>Button Examples</h1>
     </ul>
   <section>
     <h2 id="ex_label">Example</h2>
+
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
     <div id="example">
       <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
       <div tabindex="0" role="button" id="action">Print Page</div>
       <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
-      <a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute <svg aria-hidden="true"><use xlink:href="#icon-sound"></use></svg></a>
+      <a tabindex="0" role="button" id="toggle" aria-pressed="false">
+        Mute 
+        <svg aria-hidden="true">
+          <use xlink:href="images/mute.svg#icon-sound"></use>
+        </svg>
+      </a>
     </div>
     <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>
@@ -162,16 +139,15 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
     <ul>
-    <li>
-      CSS:
-      <a href="css/button.css" type="tex/css">button.css</a>
-    </li>
-    <li>
-      Javascript:
-      <a href="js/button.js" type="text/javascript">button.js</a>
-    </li>
+      <li>
+        CSS:
+        <a href="css/button.css" type="tex/css">button.css</a>
+      </li>
+      <li>
+        Javascript:
+        <a href="js/button.js" type="text/javascript">button.js</a>
+      </li>
     </ul>
   </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
@@ -9,6 +9,9 @@
 *   Author: Jon Gunderson
 */
 
+var ICON_MUTE_URL  = 'images/mute.svg#icon-mute';
+var ICON_SOUND_URL = 'images/mute.svg#icon-sound';
+
 function init () {
   // Create variables for the various buttons
   var actionButton = document.getElementById('action');
@@ -68,12 +71,12 @@ function toggleButtonState (event) {
 
   var icon = button.getElementsByTagName('use')[0];
   var currentIconState = icon.getAttribute('xlink:href');
-  var newIconState = '#icon-mute';
+  var newIconState = ICON_MUTE_URL;
 
   // If aria-pressed is set to true, set newState to false
   if (currentState === 'true') {
     newState = 'false';
-    newIconState = '#icon-sound';
+    newIconState = ICON_SOUND_URL;
   }
 
   // Set the new aria-pressed state on the button