From ff402d063a5c71272baf41976bb57057bfa3687a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 20 Mar 2017 11:52:32 -0500 Subject: [PATCH] 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. --- examples/button/button.html | 54 +++++++++------------------------ examples/button/images/mute.svg | 30 ++++++++++++++++++ examples/button/js/button.js | 7 +++-- 3 files changed, 50 insertions(+), 41 deletions(-) create mode 100644 examples/button/images/mute.svg diff --git a/examples/button/button.html b/examples/button/button.html index f531b05540..b4ac4bb7fb 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -15,35 +15,6 @@ - - - - - - - - - - - - - - - -

Button Examples

@@ -62,12 +33,18 @@

Button Examples

Example

+

This Print action button uses a div element.

Print Page

This Mute toggle button uses an a element.

- Mute + + Mute + +
@@ -162,16 +139,15 @@

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

-
diff --git a/examples/button/images/mute.svg b/examples/button/images/mute.svg new file mode 100644 index 0000000000..d0123a3613 --- /dev/null +++ b/examples/button/images/mute.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/button/js/button.js b/examples/button/js/button.js index 625d928164..562933d872 100644 --- 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