device-navigation
TypeScript icon, indicating that this package has built-in type declarations

3.0.2 • Public • Published

device-navigation

Allows navigation between HTML elements in one or two dimensions with non-mouse devices and unifies it with the mouse navigation experience.

Note that this is specifically built for usage within lit or element-vir HTML templates.

Install

npm i device-navigation

Usage

  1. Mark each element that should be navigable with the nav() directive:

    import {html} from 'element-vir';
    import {nav} from 'device-navigation';
    
    const myTemplate = html`
        <div ${nav()}></div>
    `;
  2. Construct a NavController instance, passing in an element which is parent of all navigable elements:

    import {assert} from '@augment-vir/assert';
    import {html} from 'element-vir';
    import {nav, NavController} from 'device-navigation';
    
    const myTemplate = html`
        <main>
            <div ${nav()}></div>
            <div ${nav()}></div>
            <div ${nav()}></div>
        </main>
    `;
    
    function setNavController() {
        const main = document.querySelector('main');
        assert.isDefined(main);
        return new NavController(main);
    }
  3. Call NavController methods from within listeners:

    import {html} from 'element-vir';
    import {nav, NavController, NavDirection} from 'device-navigation';
    
    const myTemplate = html`
        <main>
            <div ${nav()}></div>
            <div ${nav()}></div>
            <div ${nav()}></div>
        </main>
    `;
    
    function setupListeners(navController: NavController) {
        window.addEventListener('keydown', (event) => {
            if (event.code === 'ArrowUp') {
                navController.navigate({
                    allowWrapping: true,
                    direction: NavDirection.Up,
                });
            } else if (event.code === 'ArrowDown') {
                navController.navigate({
                    allowWrapping: true,
                    direction: NavDirection.Down,
                });
            } else if (event.code === 'Enter') {
                navController.enterInto();
            }
            // etc.
        });
    }

To see a full example, see the demo element.

Package Sidebar

Install

npm i device-navigation

Weekly Downloads

91

Version

3.0.2

License

(MIT or CC0 1.0)

Unpacked Size

731 kB

Total Files

87

Last publish

Collaborators

  • electrovir