iTV.js Framework {{itv.version}} : Template - Mosaic Interactions

{{ itv.getIndex('myList1') + "-" + itv.getIndex('myList2') + "-" + itv.getIndex('myList3') + " : " + myMultiList[itv.getIndex('myList1')].data[itv.getIndex('myList2')].data[itv.getIndex('myList3')] }}

To do:

Press navigational keys "up", "down", "left", "right" and enter.
When finished, press "back" to go back to the demo list.

Expected result:

When you move left or right on the first row, the item is immediatly selected and updates the contents of the other lists + text below.
When you move left or right on the second row, the item is not selected. You must press enter to select an item then it updates the contents of the last list + text below.
When you move left or right on the last row, the item is immediatly selected and updates the contents of the text below.
When you move up or down, the focus moves to the currently selected item of the list above or below.
The focus style has priority over the selected style due to the fact that the focus state is defined after the selected state in the CSS.

Remark:

Please view the source of this HTML document to check out the code that makes it work the way it does.