Class: List

stb/ui/list~ List

new List(configopt)

Base list implementation.

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

Name Description
value actual cell value to render
mark is it necessary or not to render this cell as marked
Parameters:
Name Type Attributes Default Description
config Object <optional>
 {}

init parameters (all inherited from the parent)

Properties
Name Type Attributes Default Description
data 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
size number <optional>
 5

amount of visible items on a page
viewIndex number <optional>
 0

move view window to this position on init
focusIndex number <optional>

list item index to make item focused (move view window to this position)
cycle boolean <optional>
 true

allow or not to jump to the opposite side of a list when there is nowhere to go next
scroll boolean <optional>
 null

associated ScrollBar component link
Source:
Fires:

Extends

  • Component

Members

$focusItem :Element

Link to the currently focused DOM element.

Type:
  • Element
Source:

cycle :boolean

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

Type:
  • boolean
Source:

data :Array

Component data to visualize.

Type:
  • Array
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 list item content. Can be redefined to provide custom rendering.

Type:
  • function
Source:

scroll :ScrollBar

Associated ScrollBar component link.

Type:
  • ScrollBar
Source:

size :number

Amount of visible items on a page.

Type:
  • number
Source:

type :number

Component orientation.

Type:
  • number
Source:

viewIndex :number

Position of the visible window to render.

Type:
  • number
Source:

Methods

focusIndex(index)

Set the given item focused by item index.

Parameters:
Name Type Description
index number

item data index
Source:

focusItem($item) → {boolean}

Highlight the given DOM element as focused. Remove focus from the previously focused item and generate associated event.

Parameters:
Name Type Description
$item Node | Element

element to focus
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 item with data.

Parameters:
Name Type Description
$item Element

item DOM link
data *

associated with this item data
Source:

renderView(index) → {boolean}

Draw the visible window.

Parameters:
Name Type Description
index number

start position to render
Source:
Fires:
Returns:

operation status

Type
boolean

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 list.

Type:
  • Object
Properties:
Name Type Description
direction number

key code initiator of movement
Source:

focus:item

Set focus to a DOM element.

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

old/previous focused HTML element
$curr Element

new/current focused HTML element
Source:

move:view

Shift the visible view window event.

Type:
  • Object
Properties:
Name Type Description
prevIndex number

previous view window position
currIndex number

current view window position
Source:

select:item

Set focus to a list item.

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

new/current focused item
Source: