Skip to content

Commit

Permalink
Merge pull request #379 from aleventhal/treegrid for issue #132
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcking65
mcking65 authored Apr 25, 2017
2 parents d434a25 + 2c2d77c commit f954cb3
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 39 deletions.
47 changes: 13 additions & 34 deletions examples/treegrid/js/treegrid-row-nav-primary-1.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
/* exported TreeGrid */
function TreeGrid (treegridElem, doAllowRowFocus, doStartRowFocus) {
function initAttributes () {
// Make sure focusable elements are not in the tab order
// They will be added back in for the active row
setTabIndexOfFocusableElems(treegrid, -1);
setTabIndexOfFocusableElems(treegridElem, -1);

// Add tabindex="0" to first row, "-1" to other rows
// We will use the roving tabindex method since aria-activedescendant
Expand Down Expand Up @@ -44,7 +45,7 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
}

function getAllRows () {
var nodeList = treegrid.querySelectorAll('tbody > tr');
var nodeList = treegridElem.querySelectorAll('tbody > tr');
return Array.prototype.slice.call(nodeList);
}

Expand All @@ -65,7 +66,7 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
}

function getAllNavigableRows () {
var nodeList = treegrid.querySelectorAll('tbody > tr:not([aria-hidden="true"])');
var nodeList = treegridElem.querySelectorAll('tbody > tr:not([aria-hidden="true"])');
// Convert to array so that we can use array methods on it
return Array.prototype.slice.call(nodeList);
}
Expand All @@ -83,7 +84,7 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
}

function focus (elem) {
elem.tabIndex = -1; // Ensure focusable
elem.tabIndex = 0; // Ensure focusable
elem.focus();
}

Expand All @@ -98,7 +99,8 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
// one treegrid item to another
function onFocusIn (event) {
var newTreeGridFocus =
event.target !== window && treegrid.contains(event.target) && event.target;
event.target !== window && treegridElem.contains(event.target)
&& event.target;

// The last row we considered focused
var oldCurrentRow = enableTabbingInActiveRowDescendants.tabbingRow;
Expand Down Expand Up @@ -154,8 +156,8 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {

function getContainingRow (start) {
var possibleRow = start;
if (treegrid.contains(possibleRow)) {
while (possibleRow !== treegrid) {
if (treegridElem.contains(possibleRow)) {
while (possibleRow !== treegridElem) {
if (possibleRow.localName === 'tr') {
return possibleRow;
}
Expand Down Expand Up @@ -501,34 +503,11 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
}

initAttributes();
treegrid.addEventListener('keydown', onKeyDown);
treegrid.addEventListener('click', onClick);
treegrid.addEventListener('dblclick', onDoubleClick);
treegridElem.addEventListener('keydown', onKeyDown);
treegridElem.addEventListener('click', onClick);
treegridElem.addEventListener('dblclick', onDoubleClick);
// Polyfill for focusin necessary for Firefox < 52
window.addEventListener(window.onfocusin ? 'focusin' : 'focus',
onFocusIn, true);
}

// Get an object where each field represents a URL parameter
// e.g. { tab: 33 }
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';
onReady(document.getElementById('treegrid'), doAllowRowFocus, doStartRowFocus);
});
59 changes: 54 additions & 5 deletions examples/treegrid/treegrid-row-nav-primary-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,56 @@

<!-- js and css for this example. -->
<link href="css/treegrid-row-nav-primary-1.css" rel="stylesheet">
<style>
/* Style the current cell focus option so user know what they're getting */
[aria-current] {
position: relative;
outline: 2px solid green;
outline-offset: 3px;
background-color: #fffff8;
}
[aria-current] > a::before {
display: inline-block;
position: absolute;
content: "Current";
font-size: 80%;
right: -3px;
top: -3px;
padding: 3px 1ch;
background-color: green;
color: white;
font-weight: bold;
}
</style>
<script src="js/treegrid-row-nav-primary-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>
<main>
Expand All @@ -40,9 +89,9 @@ <h1>Treegrid Email Inbox Example</h1>
This same example can be used in three ways.
</p>
<ul>
<li><a href="./treegrid-row-nav-primary-1.html">Rows are focused first, but cells can be focused</a>:<br>Useful when we want to present the treegrid to act primarily like a tree.</li>
<li><a href="./treegrid-row-nav-primary-1.html?cell=start">Cells are focused first, but rows can also be focused</a>:<br>Useful when we want to present the treegrid to act primarily like a grid.</li>
<li><a href="./treegrid-row-nav-primary-1.html?cell=force">Only cells can be focused</a>:<br>Useful when we we are primarily a grid, and we want to simplify the user experience by removing row navigation options.</li>
<li id="option-cell-focus-allow"><a href="./treegrid-row-nav-primary-1.html">Rows are focused first, but cells can be focused</a>:<br>Useful when we want to present the treegrid to act primarily like a tree.</li>
<li id="option-cell-focus-start"><a href="./treegrid-row-nav-primary-1.html?cell=start">Cells are focused first, but rows can also be focused</a>:<br>Useful when we want to present the treegrid to act primarily like a grid.</li>
<li id="option-cell-focus-force"><a href="./treegrid-row-nav-primary-1.html?cell=force">Only cells can be focused</a>:<br>Useful when we we are primarily a grid, and we want to simplify the user experience by removing row navigation options.</li>
</ul>
<p>
Note: no row-only version is provided. A row-only navigation version could be useful when the columns are guaranteed to fit horizontally (no horizontal scrolling necessary), the columns are merely for attractive presentation, as opposed to addressing any need to visit them individually. However, in this case the author can simply follow the tree pattern and present the child treeitem data in columns.
Expand Down Expand Up @@ -354,11 +403,11 @@ <h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/example_name.css" type="tex/css">example_name.css</a>
<a href="css/treegrid-row-nav-primary-1.css" type="tex/css">example_name.css</a>
</li>
<li>
Javascript:
<a href="js/example_name.js" type="text/javascript">example_name.js</a>
<a href="js/treegrid-row-nav-primary-1.js" type="text/javascript">example_name.js</a>
</li>
</ul>
</section>
Expand Down

0 comments on commit f954cb3

Please sign in to comment.