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
Element 1 Element 2 Element 3
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
Element 1 Element 2 Element 3
Event listener
documentbody;
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;
Refresh navigation after DOM update
navigation;
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; documentbody;
Debug mode
navigation;