naviboard JS

Naviboard is a library for navigation with the help of keyboard/keypad in the feature phone web applications(e.g kaiOS applications). This library helps developer to think about logic rather than thinking about handling navigation in their web page by simple API's. Developers working on feature phones which need navigation support from keypad to browse in their native application will surely be benefited with this small javascipt library.It auto generates a navigation schema based on desired navigation according to design.

Naviboard is available as a NPM module for use with node.js. If you don't use node to install the library then you can simply include naviboard.js or naviboard.min.js from the dist folder in this repo. These files are UMD wrapped so they can be used with or without a module loader such as requireJS.

 npm install naviboard

Steps to setup:

• Developer can include it directly or by CDN link in index.html like below:

<script src="https://cdn.jsdelivr.net/npm/naviboard@latest-version/dist/naviboard.min.js"></script>

• Please check the latest stable version available in the release list.

• After installing/including in index.html naviBoard will be available globally.Its ready to use like below:

Whenever the component(Angular, React etc) or the web page is initiating the loading, considering below as the first step: Give class navigable to the elements which require navigation under a parent component.

<div class="wrapper" id='ParentElementID'>
    <div class="box a navigable">A</div>
    <div class="box b navigable">B</div>
    <div class="box c navigable">C</div>
    <div class="box d navigable">D</div>
    <div class="box e navigable">E</div>
</div>

Now give id as arguement to the API setNavigation eg. ParentElementID in above case.

 naviBoard.setNavigation('ParentElementID')

• See the Pen exampleNavigation by Aman Sharma (@amanboss9) on CodePen.

• See the Pen Spatial-Navigation Naviboard by Aman Sharma (@amanboss9) on CodePen.

Go to the below link for proper understanding of other API's

• https://jsfiddle.net/amanboss9/zv5hocxq/2/embedded/result

Yippie!! All set to navigate through the elements.

Now when we want to navigate other page or component, we need to destroy the previous component and set the new one for navigation. Its advisable to use destroy method associated with the component like componentWillUnmount() in react or this.$onDestroy in angular v1.6.

 naviBoard.destroyNavigation('ParentElementID')

Other API's:

Whenever the client is getting refreshed(some new DOM element insertion or deletion) we need to handle it with updated navigation schema and for this we use refreshNavigation API.

e.g if a new component has been added in run time we need to update our library for taking care of the newly added element or removed element.

 naviBoard.refreshNavigation('ParentElementID',status)

status could be update ,destroy and refresh depending upon the change in navigation required in application.

• There is one more API for getting the current focused element by navigation. "By navigation" explicitly means that if focus is been hindered by other thing we might lose track of the desired navigation.

Current active element can be used to attach events. Like one can attach click event on element and can use ng-click on top of that.

 naviBoard.getActiveElement()

• You can attach event according to component currently having the access for navigation by getting the current rendered component and can map it to different event.

 naviBoard.getNavigationComponent()

• User can pause the navigation in between as well. For Ex: If a rest call is happening and before the response if user wants to pause the navigation and after response if user wants to again resume navigation, he can by using the below API's.

 naviBoard.pauseNavigation()

 naviBoard.resumeNavigation()

Happy Coding!!!

Use naviboard and suggest changes or modifications required as its a small step for developers to save their time in order to navigate in feature phone/banana phones applications instead writing lot of extra lines.