spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
74 lines (68 loc) • 3.76 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Navigation Event">
<meta name="author" content="Jihye Hong">
<meta name="description" content="There are two types of Navigation Event: 'navbeforefocus' and 'navnotarget'.
This shows when each event is triggered.">
<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>
</head>
<body>
<div style="width:600px; height: 400px; padding: 20px;">
<h4>
<span>Document</span> >
<span class="c1">Scroll container</span> >
<span class="c2">Scroll container</span> >
<span class="c3">Scroll container</span>
</h4>
<div class="container c1" tabindex="0" style="position: relative; width:450px; height:300px; overflow-y: scroll; ">
<div class="container c2" tabindex="0" style="position: relative; left:50px; width:300px; height:200px; overflow-y: scroll;">
<div class="container c3" tabindex="0" style="position: relative; left:20px; width:200px; height:120px; overflow-y: scroll;">
<button class="box b3" style="left: 50px; background-color: #00b176b0"></button>
<button class="box b3" style="top: calc(100px * 1); left: 0px; background-color: #00b176b0"></button>
<button class="box b3" style="top: calc(100px * 2); left: -50px; background-color: #00b176b0"></button>
<button class="box b3" style="top: calc(100px * 3); left: 50px; background-color: #00b176b0"></button>
</div>
<button class="box b3" style="top: 50px; left:100px;"></button>
<button class="box b3" style="top: calc(150px * 1); left: 50px;"></button>
<button class="box b3" style="top: calc(150px * 2); left: -10px;"></button>
</div>
</div>
<button class="box" style="left: 250px;"></button>
</div>
<div class="event-log"></div>
</body>
<script type="text/javascript">
let previousAreas;
const containers = document.getElementsByClassName('container');
const logDiv = document.querySelector('.event-log');
for(container of containers) {
container.addEventListener('scroll', function(e) {
appendLog('scroll', `*currentTarget: ${getElementInfoString(e.currentTarget)}, *target: ${getElementInfoString(e.target)}`);
});
}
document.body.addEventListener('navbeforefocus', function(e) {
appendLog('navbeforefocus', `*currentTarget: ${getElementInfoString(e.currentTarget)}, *target: ${getElementInfoString(e.target)}`);
});
document.body.addEventListener('navnotarget', function(e) {
appendLog('navnotarget', `*currentTarget: ${getElementInfoString(e.currentTarget)}, *target: ${getElementInfoString(e.target)}`);
});
function getElementInfoString (element) {
return element.tagName + " " + element.className;
}
function appendLog (eventType, description) {
const newEventDiv = document.createElement('div');
newEventDiv.className = eventType;
newEventDiv.innerHTML = '<b>' + eventType + ' event! </b>' + description;
logDiv.appendChild(newEventDiv);
logDiv.scrollTop = logDiv.scrollHeight;
}
</script>
</html>