NavGroups

In Development

NavGroup is a flexible and powerful react component for creating ui navigation base around big screen TV's. It allows you to quickly map out a web layout that can be controlled via a keyboard, similar to the type of experience you might find on TV's.

Built With

React: A JavaScript library for building user interfaces

TypeScript: JavaScript that scales.

Setup

For production use install NavGroups using NPM and include it in your own React build process using webpack.

bash $ npm install -save NavGroups

import * as React from "react";
import * as ReactDOM from "react-dom";
import { NgController, NavGroup, NavItem } from "nav-groups";

Development

$ git clone https://github.com/Devine-Davies/NavGroups.git
$ cd NavGroups
$ npm install
$ npm run dev        - Deployment environment
$ npm run start      - Deployment environment
$ npm run prepublish - Deployment environment

HTML Markup & Props

Below illustrates the type of markup used to construct the navgroups react componant. The exsample is given in the from of TSX

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { NgController, NavGroup, NavItem } from "nav-groups";

const App = () => (
    <div className='window' >
        <NavGroup name="main-menu" direction="vertical" onLeft="" onRight="ng:last"  >
            <NavItem>Movies</NavItem>
            <NavItem>Music</NavItem>
            <NavItem>Profile</NavItem>
            <NavItem >Setting</NavItem>
        </NavGroup>
        <NavGroup name="movie-list" onLeft="ng:main-menu" onLeft="" >
            <NavItem>Movie .01</NavItem>
            <NavItem>Movie .02</NavItem>
            <NavItem>Movie .03</NavItem>
            <NavItem>Movie .04</NavItem>
        </NavGroup>
    </div>
);

ReactDOM.render(<App />, document.getElementById("example") );

Setting Props for NavGroup && NavItem

| Setting props | Avalable | Type | Description | |------------------ |------------|------------|-----------------------------------------------------------------| | name | NG & NI | String | The name you wish to give the navitem/navgroup. If none given a random one will be generated. | | activeClassName | NG & NI | String | Class name given to an active navgroup/navitem | | direction | NG | String | Can except "horizontal" or "vertical" the key binding will the change depending on the direction specified | | indicateActiveItem | NG | Boolean | When decleard on a group attr, the group will add the class of the item name to it's self | | historyItem | NG | Boolean | Tells the navgroup to remember to remember the last selected navitem and use that as the first selected navitem when entering. | | startingPoint | NI | Boolean | Is the main item that will be select when first entering the group. | | entryPoint | NI | Boolean | Use this navitem as the first selected item wehn entering a navgroup, takes priority over historyItem. |

Action Props & Instructions

Action props define what type of interaction you want the navgroup/navitem and every action needs an instruction. The Example below show's how these actions are binded to either the NavGroup and NavItem components.

<NavGroup name="movie-list" onLeft="" >
    <NavItem onLeft="" onDown="" >Movie .01</NavItem>
</NavGroup>

Action Props

| Action prop | Avalable | Description | |------------------ |----------|---------------------------------------------| | onEnter | NG & NI | Invoked via the enterkey (↵) | | onBack | NG & NI | Invoked via the backkey (←) is invoked | | onUp | NG & NI | Invoked via the up arrow key (▲) or W | | onRight | NG & NI | Invoked via the right arrow key(►) or D | | onDown | NG & NI | Invoked via the down arrow key(▼) or S | | onLeft | NG & NI | Invoked via the left aorrow key(◄) or A |

Default actions are applied and change occordadly depending on the direction of navgroup.

| Action prop | Vertical | Horizontal | |------------------ |----------|------------| | onUp | ni:prev | ng:prev | | onRight | ng:next | ni:next | | onDown | ni:next | ng:next | | onLeft | ng:prev | ni:prev |

Action instructions

Instructions contain infromation on how the navgroup/navitem should respond when an action has been invoked.

Navgroup instructions

| Instructions | is default | Description | |---------------|------------|-----------------------------------------------------------------------| | ng:next | default | next navgroup | | ng:prev | default | previous navgroup | | ng:last | | Go to last selected navgroup | | ng:{{#}} | | Go to the given navgroup by index | | ng:{{name}} | | Go to the navgroup by name | | hook:{{name}} | | add the name of your custom hook (must be set up in custom methods ) |

Navitem instructions

| Instructions | is default | Description | |---------------|------------|-----------------------------------------------------------------------| | ni:next | default | next navitem | | ni:prev | default | previous navitem | | ni:last | | Go to last item | | ni:first | | Go to first item | | ni:{{#}} | | Go to the given index of an item | | ni:{{name}} | | Go to the item with that name |

It's important to note that NavItem's take priority over NavGroup's instructions.

Instructions can be concatenated together by using the pipe operator (| ) For example ng:{{#}}|ni:{{#}}

Programmatically run instruction

Instructions can be invoke via the NgController by calling the run_instructions() methord and then passing the instruction string.

import { NgController, NavGroup, NavItem } from "navgroups";

NgController.run_instructions( 'ng:menu|ni:profile' )

Authors

Rhys Devine-Davies - Profile

License

This project is licensed under the MIT License - see the LICENSE.md file for details`