I am trying to develop a basic Tizen tv application. for that, I've created two anchor tags and a button. the code is as follows.
<!DOCTYPE html>
<html>
<head>
<title>ReactSampleApp</title>
<style>
body,html{
position:absolute;
padding:0px;
margin:0px;
width:100%;
height:100%;
background:#fff;
}
</style>
<script src="js/main.js"></script>
</head>
<body>
<a href="./page2.html">
<button>click here for some music</button>
</a>
<a href="./page3.html">
<button>click here to go to page3</button>
</a>
<button onclick="function(){alert(0)}">click here for an alert</button>
</body>
</html>
as you can see it's just a normal sample HTML page that traverses to different pages upon these button clicks.
and it works fine, so no problems there.
the problem lies while focusing on the elements. well, it's not exactly a problem just my doubt.
window.onload = function() {
// add eventListener for keydown
document.addEventListener('keydown', function(e) {
switch(e.keyCode){
case 37: //LEFT arrow
break;
case 38: //UP arrow
break;
case 39: //RIGHT arrow
break;
case 40: //DOWN arrow
break;
case 13: //OK button
// window.open("/page2.html");
break;
case 10009:
tizen.application.getCurrentApplication().exit();
break;
default:
console.log('Key code : ' + e.keyCode);
break;
}
});
};
this code is from my main.js file.
I just wrote it to handle the key events - up, down, left, right, and enter. now inside this switch block, I was able to write alerts and was able to interact with the page. but now instead of alerts I want to give regular up, down, left, right, enter inputs.
meaning - say if there was a grid(a dynamic one). How do I focus on elements by traversing them horizontally or vertically? do I need to write explicit code or am I missing something here? does Tizen provide this basic traversal of web elements with input keys?
Thanks in advance
To develop spatial navigation, I would recommend Luke Chang's js-spatial-navigation. There's a ReactJS wrapper for this library, but it's hardly ever updated and I had to make modifications to it myself to get it working kind-of-properly. The library Xoundboy suggested is a good library as well, but, at least to me, it seemed way too complicated to implement properly, and for Tizen, JS Spatial Navigation works very well and it's easy-ish to implement.