KaiOS Spatial Navigation

Question

I have tried to add a Spatial Navigation to my apps on KaiOS, but I can't achieve it. The Page has very low information.

Example, when I add the following code:

function nav(move) {
    var next = currentIndex + move;
    var items = document.querySelectorAll('.items');
    var targetElement = items[next];
    targetElement.focus();
}

I get this error:

currentIndex is not defined

Maybe you have some working example with Spatial Navigation?

Answer 1

KaiOS is still trying to improve their doc recently...

currentIndex refers to current tabIndex number which you focused on, They haven't given full example.

I'd suggest to use your own navigation implementation or go with navigation library which is already available as open source.

https://github.com/svarunan/firefox-os-sample-app - No library used, a Sample Kaios app

https://github.com/luke-chang/js-spatial-navigation - Generic Navigation library using arrow keys

Answer 2

KAIOS recently updated a lot of new things in their official website. Still a long way to go to build a community and proper documentation. Go through the below library it might save you with ton's of extra lines.

NaviboardJS !

Best of Luck!