Navigate HTML elements in two dimensions with non-pointer devices.
CC0-1.0 License
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.
npm i device-navigation
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>
`;
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);
}
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.