spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
76 lines (74 loc) • 3.79 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 : getSpatialNavigationContainer()">
<meta name="author" content="Jeonghee Ahn">
<meta name="description" content="element.getSpatialNavigationContainer() returns the nearest ancestor node which is the spatial navigation container of the element.
You can check the result of element.getSpatialNavigationContainer() via <b>'background-color' and 'red outline' whenever focus is changed.</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 previousContainer;
let previousBackground;
const init = function(e) {
const focusables = document.body.focusableAreas({mode: 'all'});
for(focusable of focusables) {
focusable.addEventListener('focus', function(e) {
if(previousContainer) {
previousContainer.style.background = previousBackground;
previousContainer.style.outline = '';
}
const spatnavContainer = e.target.getSpatialNavigationContainer();
previousBackground = spatnavContainer.style.background;
spatnavContainer.style.background = '#F0808099';
spatnavContainer.style.outline = '5px red solid';
previousContainer = spatnavContainer;
});
focusable.addEventListener('focusout', function(e) {
if(previousContainer) {
previousContainer.style.background = previousBackground;
previousContainer.style.outline = '';
}
});
}
};
</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>
<div class="container c1" tabindex="0" style="position: relative; left:110px; width:500px; height:180px; --spatial-navigation-contain: contain;">
<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>
</div>
<button class="box" style="top:-119px; left:400px;"></button>
<button class="box" style="top:-120px; left:650px;"></button>
</div>
<pre class="code-area">
<code>
focusable.addEventListener('focus', function(e) {
let spatnavContainer = e.target.getSpatialNavigationContainer();
spatnavContainer.style.background = '#F0808099';
spatnavContainer.style.outline = '5px red solid';
console.log(spatnavContainer);
});
</code>
</pre>
</body>
</html>