Focos is a DOM navigation tool. It tracks elements on the screen defined by a custom grid. It's simple, simply bind keys for navigation, "up", "down", "left", "right". Works with any input device that triggers key press 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.

<script src="https://cdn.jsdelivr.net/gh/verdebydesign/focos/dist/latest/focos.min.js"></script>
<script>
  window.focos({/* Settings */});
<script>

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"
                 }
                });
                
16
17
18
19
12
13
14
15
8
9
10
11
4
5
6
7
1
2
3
4