nodes-navigation-focus

nodes-navigation-focus is a JS library which automates the focus moviment in the screen.

The library uses the react-hooks to manipulate the DOM and recieve and return infomation about the state of the element.

Installation

Install nodes-navigation-focus with npm

  npm install nodes-navigation-focus

Features

• Manage state of DOM elements
• Move focus state of a complex layout structure
• Allows you recive informartion about the elemenet that is currently focused

API Reference

We have to understand that we will have 2 types of 'uneNavigation' instance.

One that it will be reference to a DOM element that contains an agrupation of elements that will recive the focus.

And another intance that will reference the specific DOM elements that will recive the focus.

Types

You can extract them from the library

  import useNavigation, { types } from 'nodes-navigation-focus'

| Type | Description | | :-------- | :------------------------- | | single | Used to refere to a single DOM element without parent | | line | Used to refere to an array of elements | | matrix | Used to refere to an a array of elements that will be displayed like a matrix| | list | Used to refere to a list of items, | | object | Used to refere to an object |

Parameters

• Common params

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | focusKey | string | Element key | | extraProps | object | object that stores element information |

• Common params for PARENT reference

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | type | string | Required. type of layout structure that | | rememberLastFocused | boolean | Add this option to remember the las element focused in the structure | | onFocusedChildNodeChanges | func | Triggers when the focus in the structure changes | | onOut | object | Triggers when the focus wants to go out of the element | | preferredChildFocusKey | string | Default son key that it will be focused if the references is not specified |

• Common params for SON reference

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | parent | ref | Required. the 'useNavigation' hook will recieve the reference of the parent generated with 'useNavigation' hook | | onMouseOver | func | triggers when mouse over of the element | | onMouseOut | func | triggers when mouse out of the element | | onClick | func | triggers when element is clicked | | onFocusedNode | func | It will triggers when the element is with focus | | onEnterPressedNode | func | Triggers when the element is pressed with enter | | onArrowPress | func | Trigger when element is pulses a key moviment |

• Single type

This type can't have son elements

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | onMove | func | Triggers when focus wants to go another element |

• Line type

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | position | number | position order | | flow | string | If the structure is gonna be in horizontal or in vertical |

• List type

For son:

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | row | number | row order | | position | number | position order |

For parent:

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | startPosition | number | start position of the lsit | | rememberLastFocused | boolean | remember last list focused | | rememberLastRowPosition | boolean | remember last son reference where focused when the focus is moving into the lists |

• Matrix type

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | row | string | row order | | column | object | column order |

Navigation utilities

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | ref | string | Required. The use of this property returned by 'useNavigation' is required to set the reference with the DOM node | | focusSelf | func | a function to focus the current element | | focusSelf | func | a function to focus the current element | | setFocus | func | a function to change focus between structures | | focused | boolean | gives you information if node is currently focused or not | | hasFocusedChild | boolean | gives you information about if it has some son element node focused | | focusKey | string | return the key of the node | | getFocusedNode | func | return information about focused node | | getPressedNode | func | returns information about las pressed node |

useNavigation()

Recieves a ref of a DOM element with a specific configuration and returns a DOM element ref and the state of the element.

Usage/Examples

import useNavigation, { types } from 'nodes-navigation-focus';

const [matrixRef, { focused, setFocus, hasFocusedChild }] = useNavigation({
        type: types.MATRIX,
        focusKey: 'matrix',
        preferredChildFocusKey: 'item-1-1',
        onFocusedChildNodeChanges: (config) => {
            console.log(config)
        },
        onOut: {
            top: () => {
                setFocus('slider')
            },
            left: () => {
                setFocus('menu')
            },
        }
    })

Demo

This is an example of how the focus looks in an application example. Click here to see the full demo.

Authors

• @miquel-lopez-avila

License

Added GNU General Public License v3.0