README
Smart TV navigation
Keyboard navigation for Smart TV applications
Demo
Download
Install with Bower
bower install navigation
Install with npm
npm i smarttv-navigation
Attributes
nv-scope
create scopenv-scope-current
activate scope after bootstrapnv-el
navigation elementnv-el-current
activate after bootstrap
Example
<div nv-scope="menu" nv-scope-current>
<div nv-el nv-el-current>Element 1</div>
<div nv-el>Element 2</div>
<div nv-el>Element 3</div>
</div>
Style, CSS class
nv-scope
add for scopes elementnv-scope-current
add for current scope elementnv-el
add for navigation elementsnv-el-current
add for current navigation element
<div nv-scope="menu" class="nv-scope nv-scope-current" nv-scope-current>
<div nv-el nv-el-current class="nv-el nv-el-current">Element 1</div>
<div nv-el class="nv-el">Element 2</div>
<div nv-el class="nv-el">Element 3</div>
</div>
Event listener
document.body.addEventListener('nv-left', function (event) {
// logic
});
Default event list
nv-left, nv-up, nv-right, nv-down, nv-enter, nv-move, nv-focus
nv-back, nv-red, nv-green, nv-yellow, nv-blue, nv-rw, nv-stop, nv-play, nv-ff, nv-ch_up, nv-ch_down, nv-info, nv-mic
Or use public api:
console.table( navigation.getKeyMapping() );
Refresh navigation after DOM update
navigation.refresh();
Custom events and key mapping
// example [keyCode, eventName, value]
var keyMapping = [
[37, 'left'],
[38, 'up'],
[39, 'right'],
[40, 'down'],
[13, 'enter'],
[27, 'back'],
[403, 'red'],
[404, 'green'],
[405, 'yellow'],
[406, 'blue'],
[412, 'rw'],
[413, 'stop'],
[415, 'play'],
[417, 'ff'],
[33, 'ch_up'],
[34, 'ch_down'],
[457, 'info'],
[48, 'numpad', 0],
[49, 'numpad', 1],
[50, 'numpad', 2],
[51, 'numpad', 3],
[52, 'numpad', 4],
[53, 'numpad', 5],
[54, 'numpad', 6],
[55, 'numpad', 7],
[56, 'numpad', 8],
[57, 'numpad', 9]
];
navigation.addKeyMapping(keyMapping);
document.body.addEventListener('nv-left', function (event) {
// logic
});
Debug mode
navigation.debug(true);