spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
93 lines (88 loc) • 4.35 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="API : focusableAreas()">
<meta name="author" content="jeonghee Ahn">
<meta name="description" content="element.focusableAreas() returns all focusable elements within the element.
You can check the result of element.focusableAreas() via <b>'red outline' whenever the container gains the focus.</b>">
<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
<link class="codestyle" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
let previousAreas;
const init = function(e) {
const containers = document.getElementsByClassName('container');
for(container of containers) {
container.addEventListener('focus', function(e) {
previousAreas && previousAreas.forEach(focusable => {
focusable.style.border = '';
});
var selectValue = document.getElementById('option').value;
const focusableAreas = e.target.focusableAreas({'mode': selectValue});
focusableAreas && focusableAreas.forEach(focusable => {
focusable.style.outline = '5px solid red';
});
previousAreas = focusableAreas;
});
container.addEventListener('focusout', function(e) {
previousAreas && previousAreas.forEach(focusable => {
focusable.style.outline = '';
});
});
}
onChangeSelect();
};
function onChangeSelect() {
let selectValue = document.getElementById('option').value;
let codeElement = document.getElementById('code');
codeElement.innerText = ` // sequence<Node> focusableAreas()
const focusableAreas = e.target.focusableAreas({'mode': '${selectValue}'});
if(focusableAreas) {
focusableAreas.forEach(focusable => {
focusable.style.outline = '5px solid red';
});
}`;
hljs.highlightBlock(codeElement);
}
</script>
</head>
<body onload="init()">
<div style="width:600px; height: 300px; padding: 20px;">
<h4>
<span>spatnav container 1(Document)</span> >
<span class="c1">spatnav container 2</span> >
<span class="c2">spatnav container 3</span>
</h4>
<button class="box" style="top:100px; left:20px;"></button>
<button class="box" style="top:98px; left:180px;"></button>
<div class="container c1" tabindex="0" style="position: relative; left:110px; width:500px; height:200px; overflow-x: scroll;">
<button class="box b2" style="top:78px; left:25px;"></button>
<div class="container c2" tabindex="0" style="position: relative; left:110px; width:250px; height:100px; --spatial-navigation-contain: contain;">
<button class="box b3" style="top:40px; left:60px;"></button>
<button class="box b3" style="top:30px; left:200px;"></button>
</div>
<button class="box b2" style="top:-80px; left:300px;"></button>
<button class="box b2" style="top:-90px; left:420px;"></button>
<button class="box b2" style="top: 150px; left:300px;"></button>
<button class="box b2" style="top: 80px; left:250px;"></button>
</div>
<button class="box" style="top:-119px; left:400px;"></button>
<button class="box" style="top:-120px; left:650px;"></button>
</div>
<div class="code-select">
focusableAreasOptions :
<select id="option" onchange="onChangeSelect()" style="margin: 0 20px">
<option value="visible" selected>{'mode': 'visible'}</option>
<option value="all">{'mode': 'all'}</option>
</select>
</div>
<pre class="code-area">
<code id="code"></code>
</pre>
</body>
</html>