Skip to content

Commit 7351ed1

Browse files
spectranautmcking65
spectranaut
and
mcking65
authored
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 <[email protected]>
1 parent 9da71ca commit 7351ed1

File tree

5 files changed

+40
-40
lines changed

5 files changed

+40
-40
lines changed

‎examples/treegrid/css/expand-icon-highlighted.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎examples/treegrid/css/expand-icon.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎examples/treegrid/css/treegrid-1.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@
9191
cursor: pointer;
9292

9393
/* Load both right away so there is no lag when we need the other */
94-
background-image: url("expand-icon.svg"), url("expand-icon-highlighted.svg");
94+
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"),
95+
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");
9596
background-repeat: no-repeat;
9697
}
9798

@@ -104,5 +105,5 @@
104105
#treegrid tr[aria-expanded] > td:focus:first-child::before,
105106
#treegrid tr:focus > td[aria-expanded]:first-child::before,
106107
#treegrid tr > td[aria-expanded]:focus:first-child::before {
107-
background-image: url("expand-icon-highlighted.svg");
108+
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");
108109
}

‎examples/treegrid/js/treegrid-1.js

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
'use strict';
2-
/* exported TreeGrid */
32
function TreeGrid(treegridElem, doAllowRowFocus, doStartRowFocus) {
43
function initAttributes() {
54
// Make sure focusable elements are not in the tab order
@@ -521,3 +520,35 @@ function TreeGrid(treegridElem, doAllowRowFocus, doStartRowFocus) {
521520
true
522521
);
523522
}
523+
524+
/* Init Script for TreeGrid */
525+
/* Get an object where each field represents a URL parameter */
526+
function getQuery() {
527+
if (!getQuery.cached) {
528+
getQuery.cached = {};
529+
const queryStr = window.location.search.substring(1);
530+
const vars = queryStr.split('&');
531+
for (let i = 0; i < vars.length; i++) {
532+
const pair = vars[i].split('=');
533+
// If first entry with this name
534+
getQuery.cached[pair[0]] = pair[1] && decodeURIComponent(pair[1]);
535+
}
536+
}
537+
return getQuery.cached;
538+
}
539+
540+
document.addEventListener('DOMContentLoaded', function () {
541+
// Supports url parameter ?cell=force or ?cell=start (or leave out parameter)
542+
var cellParam = getQuery().cell;
543+
var doAllowRowFocus = cellParam !== 'force';
544+
var doStartRowFocus = doAllowRowFocus && cellParam !== 'start';
545+
TreeGrid(
546+
document.getElementById('treegrid'),
547+
doAllowRowFocus,
548+
doStartRowFocus
549+
);
550+
var choiceElem = document.getElementById(
551+
'option-cell-focus-' + (cellParam || 'allow')
552+
);
553+
choiceElem.setAttribute('aria-current', 'true');
554+
});

‎examples/treegrid/treegrid-1.html

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -36,34 +36,6 @@
3636
}
3737
</style>
3838
<script src="js/treegrid-1.js" type="text/javascript"></script>
39-
<script>
40-
/* Init Script for TreeGrid */
41-
/* Get an object where each field represents a URL parameter */
42-
/* global TreeGrid */
43-
function getQuery () {
44-
if (!getQuery.cached) {
45-
getQuery.cached = {};
46-
const queryStr = window.location.search.substring(1);
47-
const vars = queryStr.split('&');
48-
for (let i = 0; i<vars.length; i++) {
49-
const pair = vars[i].split('=');
50-
// If first entry with this name
51-
getQuery.cached[pair[0]] = pair[1] && decodeURIComponent(pair[1]);
52-
}
53-
}
54-
return getQuery.cached;
55-
}
56-
57-
document.addEventListener('DOMContentLoaded', function () {
58-
// Supports url parameter ?cell=force or ?cell=start (or leave out parameter)
59-
var cellParam = getQuery().cell;
60-
var doAllowRowFocus = cellParam !== 'force';
61-
var doStartRowFocus = doAllowRowFocus && cellParam !== 'start';
62-
TreeGrid(document.getElementById('treegrid'), doAllowRowFocus, doStartRowFocus);
63-
var choiceElem = document.getElementById('option-cell-focus-' + (cellParam || 'allow'));
64-
choiceElem.setAttribute('aria-current', 'true');
65-
});
66-
</script>
6739
</head>
6840
<body>
6941
<nav aria-label="Related Links" class="feedback">
@@ -127,7 +99,9 @@ <h2>Example Usage Options</h2>
12799
<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>
128100
</ul>
129101
<section>
130-
<h2 id="ex_label">Example</h2>
102+
<div class="example-header">
103+
<h2 id="ex_label">Example</h2>
104+
</div>
131105
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
132106
<!--
133107
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>
490464
<section>
491465
<h2>Javascript and CSS Source Code</h2>
492466
<!-- 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. -->
493-
<ul>
467+
<ul id="css_js_files">
494468
<li>
495469
CSS:
496470
<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>
513487
If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
514488
-->
515489
<script>
516-
sourceCode.add('sc1', 'ex1');
490+
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
517491
sourceCode.make();
518492
</script>
519493
</section>

0 commit comments

Comments
 (0)