Class: Grid

stb/ui/grid~ Grid

new Grid(configopt)

Base grid/table implementation.

For navigation map implementation and tests see https://gist.github.com/DarkPark/8c0c2926bfa234043ed1.

Each data cell can be either a primitive value or an object with these fields:

Name Description
value actual cell value to render
colSpan amount of cells to merge horizontally
rowSpan amount of cells to merge vertically
mark is it necessary or not to render this cell as marked
focus is it necessary or not to render this cell as focused
disable is it necessary or not to set this cell as disabled
Parameters:
Name Type Attributes Default Description
config Object <optional>
 {}

init parameters (all inherited from the parent)

Properties
Name Type Attributes Default Description
data Array.<Array> <optional>
 []

component data to visualize
render function <optional>

method to build each grid cell content
navigate function <optional>

method to move focus according to pressed keys
cycleX boolean <optional>
 true

allow or not to jump to the opposite side of line when there is nowhere to go next
cycleY boolean <optional>
 true

allow or not to jump to the opposite side of column when there is nowhere to go next
Source:
Fires:
Example
var Grid = require('stb/ui/grid'),
    grid = new Grid({
        data: [
            [1,   2,  3, {value: '4;8;12;16', focus: true, rowSpan: 4}],
            [5,   6,  7],
            [9,  10, 11],
            [13, 14, {value: 15, disable: true}]
        ],
        render: function ( $item, data ) {
            $item.innerHTML = '<div>' + (data.value) + '</div>';
        },
        cycleX: false
    });

Extends

  • Component

Members

$focusItem :Element

Link to the currently focused DOM element.

Type:
  • Element
Source:

cycleX :boolean

Allow or not to jump to the opposite side of line when there is nowhere to go next.

Type:
  • boolean
Source:

cycleY :boolean

Allow or not to jump to the opposite side of column when there is nowhere to go next.

Type:
  • boolean
Source:

data :Array.<Array>

Component data to visualize.

Type:
  • Array.<Array>
Source:

focusX :number

Current navigation map horizontal position.

Type:
  • number
Source:

focusY :number

Current navigation map vertical position.

Type:
  • number
Source:

map :Array.<Array.<Element>>

List of DOM elements representing the component cells. Necessary for navigation calculations.

Type:
  • Array.<Array.<Element>>
Source:

Current active method to move focus according to pressed keys. Can be redefined to provide custom navigation.

Type:
  • function
Source:

renderItem :function

Method to build each grid cell content. Can be redefined to provide custom rendering.

Type:
  • function
Source:

Methods

focusItem($item) → {boolean}

Highlight the given DOM element as focused. Remove focus from the previously focused item.

Parameters:
Name Type Description
$item Node | Element

element to focus
$item.x number

the item horizontal position
$item.y number

the item vertical position
Source:
Fires:
Returns:

operation status

Type
boolean

init(config)

Init or re-init of the component inner structures and HTML.

Parameters:
Name Type Description
config Object

init parameters (subset of constructor config params)
Source:

markItem($item, state)

Set item state and appearance as marked.

Parameters:
Name Type Description
$item Node | Element

element to focus
state boolean

true - marked, false - not marked
Source:

move(direction)

Move focus to the given direction.

Parameters:
Name Type Description
direction number

arrow key code
Source:
Fires:

Default method to move focus according to pressed keys.

Parameters:
Name Type Description
event Event

generated event source of movement
Source:

renderItemDefault($item, data)

Fill the given cell with data. $item.data can contain the old data (from the previous render).

Parameters:
Name Type Description
$item Element

item DOM link
data *

associated with this item data
Source:

Events

blur:item

Remove focus from an element.

Type:
  • Object
Properties:
Name Type Description
$item Element

previously focused HTML element
Source:

click:item

Mouse click event.

Type:
  • Object
Properties:
Name Type Description
$item Element

clicked HTML item
event Event

click event data
Source:

cycle

Jump to the opposite side.

Type:
  • Object
Properties:
Name Type Description
direction number

key code initiator of movement
Source:

overflow

Attempt to go beyond the edge of the grid.

Type:
  • Object
Properties:
Name Type Description
direction number

key code initiator of movement
Source:

focus:item

Set focus to an element.

Type:
  • Object
Properties:
Name Type Description
$prev Element

old/previous focused HTML element
$curr Element

new/current focused HTML element
Source: