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
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:
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.
Go to the below link for proper understanding of other API's
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.
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
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.
status could be update ,destroy and refresh depending upon the change in navigation required in application.
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.
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.