Class: Component

stb/component~ Component

new Component(configopt)

Base component implementation.

Visual element that can handle sub-components. Each component has a DOM element container $node with a set of classes: "component" and some specific component class names depending on the hierarchy, for example "page". Each component has a unique ID given either from $node.id or from data.id. If not given will generate automatically.

Parameters:
Name Type Attributes Default Description
config Object <optional>
 {}

init parameters

Properties
Name Type Attributes Default Description
id Element <optional>

component unique identifier (generated if not set)
$node Element <optional>

DOM element/fragment to be a component outer container
$body Element <optional>

DOM element/fragment to be a component inner container (by default is the same as $node)
$content Element <optional>

DOM element/fragment to be appended to the $body
parent Component <optional>

link to the parent component which has this component as a child
children Array.<Component> <optional>
 []

list of components in this component
events Object.<string, function()> <optional>
 {}

list of event callbacks
visible boolean <optional>
 true

component initial visibility state flag
focusable boolean <optional>
 true

component can accept focus or not
Source:
Fires:
Example
var component = new Component({
    $node: document.getElementById(id),
    events: {
        click: function () { ... }
    }
});
component.add( ... );
component.focus();

Extends

  • Emitter

Members

$body :Element

DOM inner handle. In simple cases is the same as $node.

Type:
  • Element
Source:

$node :Element

DOM outer handle.

Type:
  • Element
Source:

children :Array.<Component>

List of all children components.

Type:
  • Array.<Component>
Source:

focusable :boolean

Component can accept focus or not.

Type:
  • boolean
Source:

parent :Component

Link to the parent component which has this component as a child.

Type:
  • Component
Source:

(readonly) visible :boolean

Component visibility state flag.

Type:
  • boolean
Source:

Methods

add(…childopt)

Add a new component as a child.

Parameters:
Name Type Attributes Description
child Component <optional>
<repeatable>

variable number of elements to append
Source:
Example
panel.add(
    new Button( ... ),
    new Button( ... )
);

blur() → {boolean}

Remove focus. Change page.activeComponent and notify subscribers.

Source:
Fires:
Returns:

operation status

Type
boolean

focus() → {boolean}

Activate the component. Notify the owner-page and apply CSS class.

Source:
Fires:
Returns:

operation status

Type
boolean

hide() → {boolean}

Make the component hidden and notify subscribers.

Source:
Fires:
Returns:

operation status

Type
boolean

remove()

Delete this component and clear all associated events.

Source:
Fires:

show(data) → {boolean}

Make the component visible and notify subscribers.

Parameters:
Name Type Description
data Object

custom data which passed into handlers
Source:
Fires:
Returns:

operation status

Type
boolean

Events

add

A child component is added.

Type:
  • Object
Properties:
Name Type Description
child Component

new component added
Source:

blur

Remove focus from this component.

Source:

click

Mouse click event.

Type:
  • Object
Properties:
Name Type Description
event Event

click event data
Source:

focus

Make this component focused.

Source:

hide

Make the component hidden.

Source:

remove

Delete this component.

Source:

show

Make the component visible.

Source: