From 0b6bb3238285c6cc609fe271dcfeef97750c44e7 Mon Sep 17 00:00:00 2001 From: Tatiana Iskandar Date: Wed, 29 Nov 2017 23:21:24 -0800 Subject: [PATCH] Scrollable Layout Grid Example: Add Pagination (#558) For issue #544, adds previous and next buttons for paging through the search result grid in the third example. Activating previous or next is the same as pressing page up/down keys when focus is inside the grid. --- examples/grid/LayoutGrids.html | 47 ++++++++++++++++++------------- examples/grid/css/layoutGrids.css | 14 +++++++++ examples/grid/js/dataGrid.js | 29 +++++++++++-------- examples/grid/js/layoutGrids.js | 35 +++++++++++++++++------ 4 files changed, 85 insertions(+), 40 deletions(-) diff --git a/examples/grid/LayoutGrids.html b/examples/grid/LayoutGrids.html index ac2a090ff9..56d6393800 100644 --- a/examples/grid/LayoutGrids.html +++ b/examples/grid/LayoutGrids.html @@ -184,10 +184,13 @@

Example 3: Scrollable Search Results

Search Results for "W3C WAI-ARIA"

-

Showing results 1 to 5 of 19

+
+ Showing results 1 to 5 of 19 +
+
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
Web content and Web applications more accessible to people with disabilities.
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
attributes. However, they are maintained conceptually distinct to clarify subtle ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
Formats Working Group of the Web Accessibility Initiative. The Working ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
to develop technologies that enhance accessibility of web content for ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
aria-keyshortcuts , expands roles that can be used in combo boxes, adds a ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
and properties of all roles. A formal RDF / OWL representation of all the ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
understanding of how to use WAI-ARIA to create an accessible Rich Internet ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
conformance requirements, or terms that this specification module ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
default implicit ARIA semantics is unnecessary and is NOT RECOMMENDED as ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
Accessible Rich Internet Applications Suite. When we add significant ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
as desktop GUI applications by adding metadata to markup technologies ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
application ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
WAI-ARIA [ ARIA ] to create accessible rich internet applications. It described ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
especially helps with dynamic content and advanced user interface ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
to people with disabilities requires semantic information about widgets, ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
draft: ... This document is part of the WAI-ARIA suite described in the WAI-ARIA ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
document ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
element) and states and properties supported by the roles. Authors need to ...
-
+ World Wide Web Consortium Search Results for "W3C WAI-ARIA"
+
+ + +

Notes

diff --git a/examples/grid/css/layoutGrids.css b/examples/grid/css/layoutGrids.css index e3145d8bb2..58e637c95b 100644 --- a/examples/grid/css/layoutGrids.css +++ b/examples/grid/css/layoutGrids.css @@ -165,3 +165,17 @@ #add-recipient-input { font-size: 14px; } + +.ex3_result_header { + margin: 0px; + font-style: normal; + font-weight: bold; +} +.ex3_result_indices { + margin-bottom: 40px; +} + +.ex3_pagination { + margin-top: 40px; + text-align: center; +} diff --git a/examples/grid/js/dataGrid.js b/examples/grid/js/dataGrid.js index cabc474ad4..93b538517c 100644 --- a/examples/grid/js/dataGrid.js +++ b/examples/grid/js/dataGrid.js @@ -610,22 +610,27 @@ aria.Grid.prototype.checkPageChange = function (event) { } var key = event.which || event.keyCode; - var startIndex; - if (key === aria.KeyCode.PAGE_UP || key === aria.KeyCode.PAGE_DOWN) { + if (key === aria.KeyCode.PAGE_UP) { event.preventDefault(); + this.movePageUp(); + } + else if (key === aria.KeyCode.PAGE_DOWN) { + event.preventDefault(); + this.movePageDown(); + } +}; - if (key === aria.KeyCode.PAGE_UP) { - startIndex = Math.max(this.perPage - 1, this.topIndex); - this.showFromRow(startIndex, false); - } - else { - startIndex = this.topIndex + this.perPage - 1; - this.showFromRow(startIndex, true); - } +aria.Grid.prototype.movePageUp = function () { + var startIndex = Math.max(this.perPage - 1, this.topIndex - 1); + this.showFromRow(startIndex, false); + this.focusCell(startIndex, this.focusedCol); +}; - this.focusCell(startIndex, this.focusedCol); - } +aria.Grid.prototype.movePageDown = function () { + var startIndex = this.topIndex + this.perPage; + this.showFromRow(startIndex, true); + this.focusCell(startIndex, this.focusedCol); }; /** diff --git a/examples/grid/js/layoutGrids.js b/examples/grid/js/layoutGrids.js index b594b505ca..c4e2f896bc 100644 --- a/examples/grid/js/layoutGrids.js +++ b/examples/grid/js/layoutGrids.js @@ -11,28 +11,48 @@ var aria = aria || {}; */ window.addEventListener('load', function () { + // Setup Example 1 var ex1 = document.getElementById('ex1'); var ex1Grid = new aria.Grid(ex1.querySelector('[role="grid"]')); + // Setup Example 2 var ex2 = document.getElementById('ex2'); var ex2Grid = new aria.Grid(ex2.querySelector('[role="grid"]')); + var pillList = new PillList( + ex2Grid, + document.getElementById('add-recipient-input'), + document.getElementById('add-recipient-button'), + document.getElementById('form-action-text') + ); + + // Setup Example 3 var ex3 = document.getElementById('ex3'); var ex3Grid = new aria.Grid(ex3.querySelector('[role="grid"]')); var startIndexText = document.getElementById('ex3_start_index'); var endIndexText = document.getElementById('ex3_end_index'); + var previousButton = document.getElementById('ex3_pageup_button'); + var nextButton = document.getElementById('ex3_pagedown_button'); ex3Grid.setPaginationChangeHandler(function (startIndex, endIndex) { startIndexText.innerText = startIndex + 1; endIndexText.innerText = endIndex + 1; + if (startIndex <= 0) { + previousButton.setAttribute('disabled', 'true'); + } + else { + previousButton.removeAttribute('disabled'); + } + if (endIndex >= 18) { + nextButton.setAttribute('disabled', 'true'); + } + else { + nextButton.removeAttribute('disabled'); + } }); + previousButton.addEventListener('click', ex3Grid.movePageUp.bind(ex3Grid)); + nextButton.addEventListener('click', ex3Grid.movePageDown.bind(ex3Grid)); - var pillList = new PillList( - ex2Grid, - document.getElementById('add-recipient-input'), - document.getElementById('add-recipient-button'), - document.getElementById('form-action-text') - ); - + // Setup NUX; activates when the first grid cell is focused var gridNUX = document.getElementById('grid-nux'); var firstGridCell = document.querySelector('#ex1 [tabindex="0"]'); var NUXclose = document.getElementById('close-nux-button'); @@ -51,7 +71,6 @@ window.addEventListener('load', function () { } }); }; - firstGridCell.addEventListener('focus', setupInstructions); });