spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
232 lines (200 loc) • 11.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base target="_blank">
<title>Spatial Navigation Demo Collection</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="icon"
type="image/png"
href="favicon.png" />
<link rel="stylesheet" href="style.css">
<script src="../polyfill/spatial-navigation-polyfill.js"></script>
<script type="text/javascript">
window.addEventListener("load", function() {
const iframes = document.getElementsByTagName('iframe');
const iframesDescriptions = document.getElementsByClassName('iframe-description');
for(let i = 0; i < iframes.length; i++) {
// Get Inner Doc and set background color
let innerDoc = iframes[i].contentDocument || iframes[i].contentWindow.document;
innerDoc.children[0].style.background = '#e4e4e4';
// remove description button in iframe
let info_panel = innerDoc.getElementById('info_panel');
if (info_panel)
(info_panel.style.display = 'none');
let folder_btn = innerDoc.getElementById('folder_btn');
if (folder_btn)
(folder_btn.style.display = 'none');
// Add description
let descriptionPanel = innerDoc.getElementById('description_panel');
if (descriptionPanel) {
iframesDescriptions[i].innerHTML = descriptionPanel.innerHTML;
}
}
});
window.addEventListener('keydown', function(e) {
if(e.keyCode == 8) { // backspace button
let polyfilEnableSwitch = document.getElementById('polyfill-enable-switch');
polyfilEnableSwitch.checked = !polyfilEnableSwitch.checked;
polyfilEnableChanged();
e.preventDefault();
}
});
function polyfilEnableChanged() {
let polyfilEnableSwitch = document.getElementById('polyfill-enable-switch');
let polyfilStateDiv = document.getElementById('polyfill-state');
// toggle spatialNavigation
window.__spatialNavigation__.keyMode = (window.__spatialNavigation__.keyMode === 'NONE' ? 'ARROW' : 'NONE');
if(polyfilEnableSwitch.checked) {
polyfilStateDiv.classList.remove('deactivate');
} else {
polyfilStateDiv.classList.add('deactivate');
}
}
</script>
</head>
<body>
<header>
<div class="title">
<img id="icon-image" src="./mark.png" width="50px"/>
Spatial Navigation Laboratory
</div>
<div id="polyfill-state">
<span class="activate-description">
All demo pages support spatial navigation. Please use arrow keys for moving the focus.
</span>
<span class="deactivate-description">
Spatial navigation polyfill is deactivated. Please use tab key for moving the focus.
</span>
<label class="switch">
<input type="checkbox" id="polyfill-enable-switch" onchange="polyfilEnableChanged()" checked>
<div class="slider"></div>
</label>
</div>
</header>
<div class="flex-box">
<nav id="side-nav" aria-labelledby="menu-label">
<div class="menu">
<a href="#intro" target="_self">• Introduction</a>
<a href="#processing-model" target="_self">• Processing model</a>
<a href="#default-focus-moving" class="submenu" target="_self">• Basic spatial navigation</a>
<a href="#overflow-regions" class="submenu" target="_self">• Overflow regions</a>
<a href="#scrollable-region" class="submenu" target="_self">• Scrollable region</a>
<a href="#iframe-element" class="submenu" target="_self">• <iframe> element</a>
<a href="#input-elements" class="submenu" target="_self">• <input> elements</a>
<a href="#spatnav-drawing-board" class="submenu" target="_self">• Drawing board</a>
<a href="#event" target="_self">• Navigation event</a>
<a href="#navigation-events" class="submenu" target="_self">• Spatial navigation events</a>
<a href="#prevent-default" class="submenu" target="_self">• Prevent default navigation event</a>
<a href="#api" target="_self">• Javascript APIs</a>
<a href="#getSpatialNavigationContainer" class="submenu" target="_self">• getSpatialNavigationContainer</a>
<a href="#focusableAreas" class="submenu" target="_self">• focusableAreas</a>
<a href="#spatialNavSearch" class="submenu" target="_self">• spatialNavigationSearch</a>
<a href="#navigate" class="submenu" target="_self">• navigate</a>
<a href="#controlling" target="_self">• CSS Properties</a>
<a href="#spatial-navigation-container" class="submenu" target="_self">• spatial-navigation-contain</a>
<a href="#spatial-navigation-action" class="submenu" target="_self">• spatial-navigation-action</a>
<a href="#spatial-navigation-function" class="submenu" target="_self">• spatial-navigation-function</a>
<a href="#demo" target="_self">• Web applications</a>
<br>
<div>
</nav>
<main>
<div class="basic-padding">
<p>This site aims to show several behaviors of spatial navigation using <a class="inline_link" href="https://github.com/WICG/spatial-navigation/tree/master/polyfill">a polyfill</a>.</p>
<p>Please use only arrow keys with several shortcuts to navigate all pages.</p>
<p>Submit bug reports, requests and comments on <a href="https://github.com/WICG/spatial-navigation/issues" title="github issues">github issues</a>.</p>
<div class="card-view gold">
<h2 tabIndex="0" id="intro">1. Why spatial navigation?</h2>
<a href="https://github.com/WICG/spatial-navigation/blob/master/README.md" title="why spatial navigation">Introduction of spatial navigation</a>
</div>
<div class="card-view">
<h2 tabIndex="0" id="processing-model">2. Processing model <a href="https://drafts.csswg.org/css-nav-1/#processing-model" target="_blank"><img src="link.png" width="20px"/></a></h2>
<h3 id ="default-focus-moving">* Spatial navigation behavior by default</h3>
<p class="iframe-description"></p>
<iframe src="sample/heuristic_default_move.html"></iframe>
<h3 id="overflow-regions">* Various overflow regions</h3>
<p class="iframe-description"></p>
<iframe src="sample/heuristic_overflow_regions.html"></iframe>
<h3 id="scrollable-region">* Scrollable region</h3>
<p class="iframe-description"></p>
<iframe src="sample/heuristic_scrollable.html" style="height:350px;"></iframe>
<h3 id="iframe-element">* <iframe> element</h3>
<p class="iframe-description"></p>
<iframe src="sample/heuristic_iframe.html" style="height:350px;"></iframe>
<h3 id="input-elements">* <input> elements</h3>
<p class="iframe-description"></p>
<iframe src="sample/heuristic_input_elements.html"></iframe>
<h3 id="spatnav-drawing-board">* Drawing board</h3>
<p class="iframe-description"></p>
<iframe src="sample/heuristic_drawing_board.html" style="height:600px;"></iframe>
</div>
<div class="card-view">
<h2 tabIndex="0" id="event">3. Navigation event <a href="https://drafts.csswg.org/css-nav-1/#events-navigationevent" target="_blank"><img src="link.png" width="20px"/></a></h2>
<h3 id="navigation-events">* Spatial navigation events</h3>
<p class="iframe-description"></p>
<iframe src="sample/api_navigate_event.html" style="height:720px;"></iframe>
<h3 id="spatnav-drawing-board">* Prevent default navigation event</h3>
<p class="iframe-description"></p>
<iframe src="sample/api_prevent_navbeforefocus.html" style="height:570px;"></iframe>
</div>
<div class="card-view">
<h2 tabIndex="0" id="api">4. Javascript APIs</h2>
<h3 id="getSpatialNavigationContainer">* getSpatialNavigationContainer() <a href="https://drafts.csswg.org/css-nav-1/#dom-element-getspatialnavigationcontainer" target="_blank"><img src="link.png" width="20px"/></a></h3>
<p class="iframe-description"></p>
<iframe src="sample/api_getSpatialNavigationContainer.html" style="height:550px;"></iframe>
<h3 id="focusableAreas">* focusableAreas(optional focusableAreasOptions) <a href="https://drafts.csswg.org/css-nav-1/#dom-element-focusableareas" target="_blank"><img src="link.png" width="20px"/></a></h3>
<p class="iframe-description"></p>
<iframe src="sample/api_focusableAreas.html" style="height:600px;"></iframe>
<h3 id="spatialNavSearch">* spatialNavigationSearch() <a href="https://drafts.csswg.org/css-nav-1/#dom-element-spatialnavigationsearch" target="_blank"><img src="link.png" width="20px"/></a></h3>
<p class="iframe-description"></p>
<iframe class="api-sample" src="sample/api_spatialNavigationSearch.html" style="height:650px;"></iframe>
<h3 id="navigate">* navigate(dir) <a href="https://drafts.csswg.org/css-nav-1/#dom-window-navigate" target="_blank"><img src="link.png" width="20px"/></a></h3>
<p class="iframe-description"></p>
<iframe class="api-sample" src="sample/api_navigate.html" style="height:600px;"></iframe>
</div>
<div class="card-view">
<h2 tabIndex="0" id="controlling">5. CSS Properties <a href="https://drafts.csswg.org/css-nav-1/#declarative" target="_blank"><img src="link.png" width="20px"/></a></h2>
<h3 id="spatial-navigation-container">* Spatial navigation container</h3>
<p class="iframe-description"></p>
<iframe src="sample/api_spatial_navigation_contain.html" style="height:450px;"></iframe>
<h3 id="spatial-navigation-action">* Spatial navigation action</h3>
<p class="iframe-description"></p>
<iframe src="sample/api_spatial_navigation_action.html"></iframe>
<h3 id="spatial-navigation-function">* Spatial navigation function</h3>
<p class="iframe-description"></p>
<iframe src="sample/api_spatial_navigation_function.html"></iframe>
</div>
<div class="card-view">
<h2 tabIndex="0" id="demo">6. Web applications demo</h2>
<a href="blog/index.html" class="demo-thumbnail" style="margin-right: 30px;"><img src="blog/thumbnail.png" width="380px"/><br>* Blog app</a>
<a href="calendar/index.html" class="demo-thumbnail"><img src="calendar/thumbnail.png" width="380px"/><br>* Calender app</a>
</div>
</div>
</main>
</div>
<footer class="basic-padding text-align">
<div>
<a href="https://drafts.csswg.org/css-nav-1/explainer">
Explainer
</a>
<a href="https://drafts.csswg.org/css-nav-1/">
Spec
</a>
<a href="https://drafts.csswg.org/css-nav-1/#js-api">
API
</a>
<a href="https://github.com/WICG/spatial-navigation">
GitHub
</a>
</div>
<div>
Give feedback on
<a href="https://github.com/WICG/spatial-navigation/issues">issues</a>
or via
<a href="mailto://lgewst@gmail.com" rel="nofollow">email</a>
</div>
</footer>
</body>
</html>