Aim

Dependency free focus manager with built-in universal key navigation.

npm i --save aim

What?

Register your focusable targets with Aim and Aim will map these into a virtual table-esque view.

Aim will now listen for key events, delegate these to the currently focused target and execute default cursor navigation if not prevented by target handlers.

Examples

aim.register({
  onFocus (target) {
    // fires when target is focused
    // return false to prevent focus
  },
  onBlur (target) {
    // fires when target is unfocused 

  },
  onRight (target) {
    // fires when right is pressed
    // return false to prevent default behaviour (ie. moving cursor to the right)
  },
  onEnter (target) {
    // fires when enter is pressed
  }
}, [0, 0, 1])

Methods

aim.register(target, position)

Registers target on given position.

| Param | Type | Description | | --- | --- | --- | | target | Object | Target containing handlers. | | position | Array | Coordinates for position. |

aim.unregister(target)

Unregisters target.

| Param | Type | Description | | --- | --- | --- | | target | Object | Target to unregister. |

aim.update(target, property, value)

Update properties for given target. Can be used for repositioning / resizing targets.

| Param | Type | Description | | --- | --- | --- | | target | Object | Target to update. | | property | String | Property to update, eg. x or y. | | value | Number | New value of property |

aim.offsetY(target, value)

Sets an offsetY value to (holder) target, without updating all individual child nodes. Will be used when calculating left/up/down/right node.

| Param | Type | Description | | --- | --- | --- | | target | Object | Target to update. | | value | Number | New value of property |

aim.offsetX(target, value)

Same as aim.offsetY() for the x axis.

aim.get(position)

Get target by position.

| Param | Type | Description | | --- | --- | --- | | position | Array | The coordinates to target (eg. [0, 0, 1]). |

aim.left()

Move focus to the left.

aim.up()

Move focus to up.

aim.right()

Move focus to the right.

aim.down()

Move focus to down.

aim.handleKeyEvent(event)

Delegate key event to Aim.

| Param | Type | Description | | --- | --- | --- | | event | Object | DOM KeyEvent. |

Events

onFocus(target)

Fires when target is focused.

| Param | Type | Description | | --- | --- | --- | | target | Object | Registered target. |

onBlur(target)

Fires on target when removing focus.

| Param | Type | Description | | --- | --- | --- | | target | Object | Registered target. |

onEnter(target)

Fires on focused target when user presses "enter".

| Param | Type | Description | | --- | --- | --- | | target | Object | Registered target. |