Treegrid example: Add "Open in Codepen" button (pull #1694)

* Add open in codepen button to treegrid example * Move SVGs to inline definitions * Treegrid: Move init file to javascript file Co-authored-by: Matt King <a11yThinker@Gmail.com>
w3c · Dec 22, 2020 · 7351ed1 · 7351ed1
1 parent 9da71ca
commit 7351ed1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 40 deletions.
diff --git a/examples/treegrid/css/expand-icon-highlighted.svg b/examples/treegrid/css/expand-icon-highlighted.svg
diff --git a/examples/treegrid/css/expand-icon.svg b/examples/treegrid/css/expand-icon.svg
diff --git a/examples/treegrid/css/treegrid-1.css b/examples/treegrid/css/treegrid-1.css
@@ -91,7 +91,8 @@
   cursor: pointer;
 
   /* Load both right away so there is no lag when we need the other */
-  background-image: url("expand-icon.svg"), url("expand-icon-highlighted.svg");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='black' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A"),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='hsl(216, 94%25, 50%25)' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
 }
 
@@ -104,5 +105,5 @@
 #treegrid tr[aria-expanded] > td:focus:first-child::before,
 #treegrid tr:focus > td[aria-expanded]:first-child::before,
 #treegrid tr > td[aria-expanded]:focus:first-child::before {
-  background-image: url("expand-icon-highlighted.svg");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='hsl(216, 94%25, 50%25)' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A");
 }
diff --git a/examples/treegrid/js/treegrid-1.js b/examples/treegrid/js/treegrid-1.js
@@ -1,5 +1,4 @@
 'use strict';
-/* exported TreeGrid */
 function TreeGrid(treegridElem, doAllowRowFocus, doStartRowFocus) {
   function initAttributes() {
     // Make sure focusable elements are not in the tab order
@@ -521,3 +520,35 @@ function TreeGrid(treegridElem, doAllowRowFocus, doStartRowFocus) {
     true
   );
 }
+
+/* Init Script for TreeGrid */
+/* Get an object where each field represents a URL parameter */
+function getQuery() {
+  if (!getQuery.cached) {
+    getQuery.cached = {};
+    const queryStr = window.location.search.substring(1);
+    const vars = queryStr.split('&');
+    for (let i = 0; i < vars.length; i++) {
+      const pair = vars[i].split('=');
+      // If first entry with this name
+      getQuery.cached[pair[0]] = pair[1] && decodeURIComponent(pair[1]);
+    }
+  }
+  return getQuery.cached;
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Supports url parameter ?cell=force or ?cell=start (or leave out parameter)
+  var cellParam = getQuery().cell;
+  var doAllowRowFocus = cellParam !== 'force';
+  var doStartRowFocus = doAllowRowFocus && cellParam !== 'start';
+  TreeGrid(
+    document.getElementById('treegrid'),
+    doAllowRowFocus,
+    doStartRowFocus
+  );
+  var choiceElem = document.getElementById(
+    'option-cell-focus-' + (cellParam || 'allow')
+  );
+  choiceElem.setAttribute('aria-current', 'true');
+});
diff --git a/examples/treegrid/treegrid-1.html b/examples/treegrid/treegrid-1.html
@@ -36,34 +36,6 @@
   }
 </style>
 <script src="js/treegrid-1.js" type="text/javascript"></script>
-<script>
-/* Init Script for TreeGrid */
-/* Get an object where each field represents a URL parameter */
-/* global TreeGrid */
-function getQuery () {
-  if (!getQuery.cached) {
-    getQuery.cached = {};
-    const queryStr = window.location.search.substring(1);
-    const vars = queryStr.split('&');
-    for (let i = 0; i<vars.length; i++) {
-      const pair = vars[i].split('=');
-      // If first entry with this name
-      getQuery.cached[pair[0]] = pair[1] && decodeURIComponent(pair[1]);
-    }
-  }
-  return getQuery.cached;
-}
-
-document.addEventListener('DOMContentLoaded', function () {
-  // Supports url parameter ?cell=force or ?cell=start (or leave out parameter)
-  var cellParam = getQuery().cell;
-  var doAllowRowFocus = cellParam !== 'force';
-  var doStartRowFocus = doAllowRowFocus && cellParam !== 'start';
-  TreeGrid(document.getElementById('treegrid'), doAllowRowFocus, doStartRowFocus);
-  var choiceElem = document.getElementById('option-cell-focus-' + (cellParam || 'allow'));
-  choiceElem.setAttribute('aria-current', 'true');
-});
-</script>
 </head>
 <body>
   <nav aria-label="Related Links" class="feedback">
@@ -127,7 +99,9 @@ <h2>Example Usage Options</h2>
     <li>A screen reader user can easily understand the UI when all information in a row is announced as a single string without any separation.</li>
   </ul>
   <section>
-    <h2 id="ex_label">Example</h2>
+    <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>
     <!--
       Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
@@ -490,7 +464,7 @@ <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>
+    <ul id="css_js_files">
       <li>
         CSS:
         <a href="css/treegrid-1.css" type="text/css">treegrid-1.css</a>
@@ -513,7 +487,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
       If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
       -->
     <script>
-      sourceCode.add('sc1', 'ex1');
+      sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
       sourceCode.make();
     </script>
   </section>