Focos - Verdexdesign

Focos is a navigation library that tracks elements on the screen defined in a grid of a certain size. You can navigate through the grid by using different keys. For navigation Focos uses arrow keys by default, but different bindings may be provided. Multiple bindings to the same action are allowed. You may navigate through the grid below using the bindings defined on the code snippet. Works best with a keyboard, a controller, or any device that triggers key events.

Usage

Get it via jsDelivr or download it from the repository. Links below.

...
<ul>
  <li data-focos-cell="0,0">Item 1</li>
  <li data-focos-cell="1,0">Item 2</li>
  <li data-focos-cell="2,0">Item 3</li>
  <li data-focos-cell="3,0">Item 4</li>
</ul>
...

The markup above will generate a 4x1 focos grid.

Settings

Focos requires a settings object, for initial setup. Options are: gridSize The only required setting for the library. Focos will use the grid size value to construct a grid for navigation through the elements located on specific cells. initialFocus, this cell gets initial focus, as soon as the page loads. step the distance between a point to the next. focusOnClick when this flag is on, cells are focusable on mouse down. keys key bindings for navigation. Multiple keys may be bound to an orientation. A key name such as 'a' or 'ArrowUp' or key code may be provided as a binding.

                window.focos({
                gridSize: "5x4",
                step: 1,
                initialFocus: [0, 4],
                focusOnClick: true,
                keys: {
                    s: "up",
                    z: "down",
                    a: "left",
                    d: "right",
                    37: "up",
                    38: "down",
                    39: "left",
                    40: "right"
                 }
                });