Skip to content

Commit dc672f6

Browse files
jeonghee27jeonghee27
authored
Merge pull request w3c#2 from WICG/master
Merge latest master branch to demo branch
2 parents 474a4a1 + 77e8a5a commit dc672f6

24 files changed

+1067
-897
lines changed

‎demo/blog/blog-utils.js

-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@
33
* Copyright 2018 LG Electronics Inc. All rights reserved.
44
*
55
*/
6-
window.addEventListener("load", function() {
7-
// load SpatNav polyfill
8-
focusNavigationHeuristics();
9-
});
10-
116
function swapTabContents(evt, tabName) {
127
// Declare all variables
138
var i, tabcontent, tablink;

‎demo/blog/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
<link rel="stylesheet" href="blog-style.css">
1313
<script src="blog-utils.js"></script>
1414
<script src="../../polyfill/spatnav-heuristic.js"></script>
15-
<script src="../../polyfill/spatnav-api.js"></script>
1615
</head>
1716

1817
<body>
@@ -230,11 +229,11 @@
230229
</div>
231230
<!-- Feed Section end -->
232231

233-
<!-- Sample Section start -->
232+
<!-- Sample Section start -->
234233
<div id="sample" class="col-sm-9 tabcontent" style="display: none; --spatial-navigation-contain: contain;">
235234
<iframe class="sampleFrame" src="../index.html" tabindex="0" frameborder="0" style="overflow-y: scroll;"></iframe>
236235
</div>
237-
<!-- Sample Section start -->
236+
<!-- Sample Section end -->
238237

239238
</div>
240239
</body>

‎demo/calendar/calendar-utils.js

-9
This file was deleted.

‎demo/calendar/index.html

-2
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,4 @@
192192
</div>
193193
</body>
194194
<script src="../../polyfill/spatnav-heuristic.js"></script>
195-
<script src="../../polyfill/spatnav-api.js"></script>
196-
<script src="calendar-utils.js"></script>
197195
</html>

‎demo/index.html

+2-5
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,9 @@
88
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
99
<link rel="stylesheet" href="style.css">
1010
<script src="../polyfill/spatnav-heuristic.js"></script>
11-
<script src="../polyfill/spatnav-api.js"></script>
1211
<script type="text/javascript">
1312
window.addEventListener("load", function() {
14-
// load SpatNav polyfill
15-
focusNavigationHeuristics();
16-
13+
1714
let iframes = document.getElementsByTagName("iframe");
1815
let iframesDescriptions = document.getElementsByClassName("iframe-description");
1916
for(let i = 0; i < iframes.length; i++) {
@@ -135,7 +132,7 @@ <h3 id="getSpatnavContainer">* getSpatnavContainer()</h3>
135132

136133
<h3 id="focusableAreas">* focusableAreas(optional FocusableAreasOptions)</h3>
137134
<p class="iframe-description"></p>
138-
<iframe src="sample/api_focusableAreas.html"></iframe>\
135+
<iframe src="sample/api_focusableAreas.html"></iframe>
139136

140137
<h3 id="spatNavSearch">* spatNavSearch(arg)</h3>
141138
<p class="iframe-description"></p>

‎demo/sample/api_focusableAreas.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta name="application-name" content="API : focusableAreas()">
77
<meta name="author" content="jeonghee Ahn">
8-
<meta name="description" content="element.focusableAreas() return all focusable elements within the element.
9-
You can check the result of element.focusableAreas() as border-color whenever container element get focus.">
8+
<meta name="description" content="element.focusableAreas() returns all focusable elements within the element.
9+
You can check the result of element.focusableAreas() via 'border-color' whenever the element gains the focus.">
1010
<link rel="stylesheet" href="spatnav-style.css">
1111
<script src="spatnav-utils.js"></script>
1212
<script src="../../polyfill/spatnav-heuristic.js"></script>
13-
<script src="../../polyfill/spatnav-api.js"></script>
1413
<script type="text/javascript">
1514
let previousAreas;
1615
const init = function(e) {

‎demo/sample/api_getSpatnavContainer.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta name="application-name" content="API : getSpatnavContainer()">
77
<meta name="author" content="jeonghee Ahn">
8-
<meta name="description" content="element.getSpatnavContainer() return nearest ancestor node which is spatial navigation container (a.k.a. spatnav container). You can check the result of element.getSpatnavContainer() as background-color whenever focus is changed.">
8+
<meta name="description" content="element.getSpatnavContainer() returns the nearest ancestor node which is the spatial navigation container (a.k.a. spatnav container).
9+
You can check the result of element.getSpatnavContainer() via 'background-color' whenever focus is changed.">
910
<link rel="stylesheet" href="spatnav-style.css">
1011
<script src="spatnav-utils.js"></script>
1112
<script src="../../polyfill/spatnav-heuristic.js"></script>
12-
<script src="../../polyfill/spatnav-api.js"></script>
1313
<script type="text/javascript">
1414
let previousContainer;
1515
const init = function(e) {

‎demo/sample/api_navigate.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta name="application-name" content="Default Spatial Navigation Behavior">
77
<meta name="author" content="Jeonghee Ahn">
8-
<meta name="description" content="navigate ({dir}) moves the focus to a specific direction. In this demo page, you can use WASD key to move the focus in red container.">
8+
<meta name="description" content="window.navigate ({dir}) moves the focus in a specific direction.
9+
When the foucs moves inside the element with the red border., you can move the focus with WASD keys.">
910
<link rel="stylesheet" href="spatnav-style.css">
1011
<script src="spatnav-utils.js"></script>
1112
<script src="../../polyfill/spatnav-heuristic.js"></script>
12-
<script src="../../polyfill/spatnav-api.js"></script>
1313
<script type="text/javascript">
1414
let previousTarget;
1515
const init = function(e) {

‎demo/sample/api_spatNavSearch.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta name="application-name" content="API :spatNavSearch()">
77
<meta name="author" content="jeonghee Ahn">
8-
<meta name="description" content="element.spatNavSearch(SpatNavSearchOptions) return next best target. You can check the result of element.spatNavSearch() as border-color.">
8+
<meta name="description" content="element.spatNavSearch(SpatNavSearchOptions) returns the best candidate which will gain the focus.
9+
You can check the result of element.spatNavSearch() as 'border-color'.">
910
<link rel="stylesheet" href="spatnav-style.css">
1011
<script src="spatnav-utils.js"></script>
1112
<script src="../../polyfill/spatnav-heuristic.js"></script>
12-
<script src="../../polyfill/spatnav-api.js"></script>
1313
<script type="text/javascript">
1414
let previousTarget;
1515

‎demo/sample/api_spatnav_contain.html

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
<link rel="stylesheet" href="spatnav-style.css">
1010
<script src="spatnav-utils.js"></script>
1111
<script src="../../polyfill/spatnav-heuristic.js"></script>
12-
<script src="../../polyfill/spatnav-api.js"></script>
1312
</head>
1413
<body>
1514
<div style="width:600px; height: 400px; padding: 20px;">

‎demo/sample/heurisitic_candidates_same_distance.html

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<link rel="stylesheet" href="spatnav-style.css">
1111
<script src="spatnav-utils.js"></script>
1212
<script src="../../polyfill/spatnav-heuristic.js"></script>
13-
<script src="../../polyfill/spatnav-api.js"></script>
1413
</head>
1514
<body>
1615
<div tabindex="0" class="box b1" style="position: absolute; left: 80px; top: 20px;"></div>

‎demo/sample/heuristic_default_move.html

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<link rel="stylesheet" href="spatnav-style.css">
1111
<script src="spatnav-utils.js"></script>
1212
<script src="../../polyfill/spatnav-heuristic.js"></script>
13-
<script src="../../polyfill/spatnav-api.js"></script>
1413
</head>
1514

1615
<body>

‎demo/sample/heuristic_iframe.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
<meta name="description" content="The iframe Element is considered as a container that can give priority to the internal elements in spatial navigation. You can test spatial navigation behavior in the iframe element using arrow keys.">
99

1010
<link rel="stylesheet" href="spatnav-style.css">
11-
<script src="spatnav-utils.js"></script>
11+
<script src="spatnav-utils.js"></script>
1212
<script src="../../polyfill/spatnav-heuristic.js"></script>
13-
<script src="../../polyfill/spatnav-api.js"></script>
1413
</head>
1514
<body>
1615
<iframe src="heuristic_iframe_sub.html" tabindex="0" class="container c2"></iframe>

‎demo/sample/heuristic_iframe_sub.html

-8
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,6 @@
66

77
<link rel="stylesheet" href="spatnav-style.css">
88
<script src="../../polyfill/spatnav-heuristic.js"></script>
9-
<script src="../../polyfill/spatnav-api.js"></script>
10-
<script type="text/javascript">
11-
window.addEventListener("load", function() {
12-
13-
// load SpatNav polyfill
14-
focusNavigationHeuristics();
15-
});
16-
</script>
179
</head>
1810
<body>
1911
<div tabindex="0" class="box b3" style="left: 80px; top: 20px"></div>

‎demo/sample/heuristic_input_elements.html

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<link rel="stylesheet" href="spatnav-style.css">
1111
<script src="spatnav-utils.js"></script>
1212
<script src="../../polyfill/spatnav-heuristic.js"></script>
13-
<script src="../../polyfill/spatnav-api.js"></script>
1413

1514
</head>
1615
<body>

‎demo/sample/heuristic_non_scrollable_iframe.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="application-name" content="iframe Element">
7+
<meta name="author" content="Jihye Hong">
8+
<meta name="description" content="The iframe Element is considered as a container that can give priority to the internal elements in spatial navigation. You can test spatial navigation behavior in the iframe element using arrow keys.">
9+
10+
<link rel="stylesheet" href="spatnav-style.css">
11+
<script src="spatnav-utils.js"></script>
12+
<script src="../../polyfill/spatnav-heuristic.js"></script>
13+
</head>
14+
<body>
15+
<iframe src="heuristic_non_scrollable_iframe_element.html" tabindex="0" class="container c2"></iframe>
16+
<div tabindex="0" class="box b1" style="left: 70px; top: -180px;"></div>
17+
<div tabindex="0" class="box b1" style="left: 180px; top: -120px;"></div>
18+
<div tabindex="0" class="box b1" style="left: 20px; top: -90px;"></div>
19+
<div tabindex="0" class="box b1" style="left: 190px; top: -50px;"></div>
20+
</body>
21+
</html>

‎demo/sample/heuristic_non_scrollable_iframe_element.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<link rel="stylesheet" href="spatnav-style.css">
8+
<script src="../../polyfill/spatnav-heuristic.js"></script>
9+
</head>
10+
<body>
11+
<div tabindex="0" class="box b3" style="left: 80px; top: 20px"></div>
12+
<div tabindex="0" class="box b3" style="left: 150px; top: 30px"></div>
13+
<div tabindex="0" class="box b3" style="left: 20px; top: 70px"></div>
14+
<div tabindex="0" class="box b3" style="left: 130px; top: 100px"></div>
15+
</body>
16+
</html>

‎demo/sample/heuristic_overflow_regions.html

-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
<link rel="stylesheet" href="spatnav-style.css">
1212
<script src="spatnav-utils.js"></script>
1313
<script src="../../polyfill/spatnav-heuristic.js"></script>
14-
<script src="../../polyfill/spatnav-api.js"></script>
1514
</head>
1615

1716
<body>

‎demo/sample/heuristic_scrollable.html

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<link rel="stylesheet" href="spatnav-style.css">
1111
<script src="spatnav-utils.js"></script>
1212
<script src="../../polyfill/spatnav-heuristic.js"></script>
13-
<script src="../../polyfill/spatnav-api.js"></script>
1413
</head>
1514
<body>
1615
<div class="container c1" tabindex="0" style="overflow-y: scroll;">

‎demo/sample/heuristic_text_type_elements.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="application-name" content="Spatial Navigation on the text">
8+
<meta name="author" content="Jihye Hong">
9+
<meta name="description" content="You can check the default spatial navigation behavior on the text type focusable element.">
10+
11+
<link rel="stylesheet" href="spatnav-style.css">
12+
<script src="spatnav-utils.js"></script>
13+
<script src="../../polyfill/spatnav-heuristic.js"></script>
14+
</head>
15+
16+
<body>
17+
<div class="container" tabindex="0" style="height: 800px; width: 600px; overflow-y: scroll;">
18+
<h2><a href="https://github.com/WICG/spatial-navigation" target="blink">Spatial Navigation</a></h2>
19+
<br>
20+
This is a <a href="https://github.com/WICG/spatial-navigation" target="blink">repository</a> for making the Web excellently embrace the
21+
<a href="https://wicg.github.io/spatial-navigation/" target="blink">spatial navigation</a>'s features so that
22+
the Web technology can be propagated into <a href="https://www.merriam-webster.com/dictionary/several" target="blink">several</a> industries such as TV, IVI, game console,
23+
and upcoming smart devices as well as PC and mobile for <a href="https://a11yproject.com/" target="blink">a11y</a>.
24+
25+
<h3>Details</h3>
26+
<ol>
27+
<li>Read the <a href="https://github.com/WICG/spatial-navigation/blob/master/explainer.md" target="blink">Explainer</a></li>
28+
<li>Read the <a href="https://wicg.github.io/spatial-navigation/" target="blink">Spec</a></li>
29+
<li>See the <a href="https://github.com/WICG/spatial-navigation/blob/master/implStatus.md" target="blink">Implementation Status</a></li>
30+
<li>Try the <a href="https://wicg.github.io/spatial-navigation/demo/" target="blink">Demo</a></li>
31+
<li>Give feedback on <a href="https://github.com/WICG/spatial-navigation/issues" target="blink">issues</a></li>
32+
</ol>
33+
34+
<h3>Overview</h3>
35+
36+
Spatial navigation (aka Spatnav) is the ability to navigate between focusable elements based on their position
37+
within a structured document. Spatial navigation is often called 'directional navigation'
38+
which enables four(4) directional navigation. Users are usually familiar with the 2-way navigation
39+
using tab key for the forward direction and shift+tab key for the backward direction,
40+
but not familiar with the 4-way navigation using arrow keys.
41+
Regarding TV remote control, game console pad, IVI jog dial with 4-way keys, and
42+
Web accessibility, the spatial navigation has been a rising important input mechanism in several industries.
43+
If the Web can embrace the spatial navigation and efficiently support the functionalities in Web engines and W3C APIs,
44+
it will be more promising technology for existing products as mentioned above and various upcoming smart devices.
45+
</div>
46+
</body>
47+
</html>

‎demo/sample/spatnav-style.css

+4
Original file line numberDiff line numberDiff line change
@@ -153,3 +153,7 @@ pre.code-area {
153153
border-style: solid;
154154
border-color: #555 transparent transparent transparent;
155155
}
156+
157+
a {
158+
border-bottom: 1px dashed #00b176b0;
159+
}

‎demo/sample/spatnav-utils.js

-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
window.addEventListener("load", function() {
2-
3-
// load SpatNav polyfill
4-
focusNavigationHeuristics();
5-
62
let list = document.querySelectorAll("meta");
73
let application_name, application_author, application_description;
84
// get the data such as name, author, and description

‎polyfill/README.md

+36-6
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ or scroll the page, as appropriate.
1818
For more details, see [the specification](https://wicg.github.io/spatial-navigation/)
1919
or [its explainer document](https://wicg.github.io/spatial-navigation/explainer.html).
2020

21-
## Why use the Polyfill
21+
## Why Use the Polyfill
2222

2323
Eventually, we expect spatial navigation to be natively supported by browsers.
2424
However, this is not yet the case.
@@ -31,6 +31,36 @@ it order to test the behavior it defines in various situations.
3131

3232
## Current Status
3333

34+
### Browser Support
35+
With the polyfill, the Spatial Navigation has been tested and known to work in the following browsers:
36+
37+
<table>
38+
<tr>
39+
<td align="center">
40+
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/chrome/chrome_48x48.png" alt="Chrome"><br>
41+
49+
42+
</td>
43+
<td align="center">
44+
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/firefox/firefox_48x48.png" alt="Firefox"><br>
45+
61+
46+
</td>
47+
<td align="center">
48+
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/safari/safari_48x48.png" alt="Safari"><br>
49+
11.1+
50+
</td>
51+
<td align="center">
52+
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/edge/edge_48x48.png" alt="Edge"><br>
53+
17+
54+
</td>
55+
<td align="center">
56+
<img src="https://raw.github.com/alrra/browser-logos/39.2.2/src/opera/opera_48x48.png" alt="Opera"><br>
57+
36+
58+
</td>
59+
</tr>
60+
</table>
61+
62+
### Remaining Issues
63+
3464
The polyfill is not yet complete.
3565
It roughly matches the specification
3666
but does not yet follow it closely,
@@ -54,17 +84,17 @@ enabling spatial navigation.
5484

5585
Users can now user the keyboard's arrow keys to navigate the page.
5686

57-
### Handling <code>keydown</code> event
58-
In the polyfill, <a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown"><code>keydown</code> event</a> triggers the spatial navigation.
59-
Also, the <code>keydown</code> event handler is attached to the window object.
87+
### Handling Browser Events
88+
In the polyfill, <a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown"><code>keydown</code> event</a> and <a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup"><code>mouseup</code> event</a> are used for the spatial navigation.
89+
The event handlers of those are attached to the window object.
6090

6191
We recommend to use it with the polyfill as below:
6292

63-
* If you want to use the <code>keydown</code> event handler for other usages besides the spatial navigation,
93+
* If you want to use those event handlers for other usages besides the spatial navigation,
6494
* attach the event handler on the children of window object
6595
or
6696
* call the event handler during the capturing phase of the event.
67-
* If you don't want the <code>keydown</code> event work with the spatial navigation, call <code>preventDefault()</code> for it.
97+
* If you don't want those events work with the spatial navigation, call <code>preventDefault()</code>.
6898

6999
### Using the APIs
70100

0 commit comments

Comments
 (0)