Box

Box

Very simple container who can just contains list of any AbstractElement

Constructor

new Box(data)

Parameters:
Name Type Description
data iBoxConstructor

Object with parameters.
Source:
Example
let box = new Box();

Extends

Methods

addListener(value) → {void}

Add new event listener

Parameters:
Name Type Description
value Listener

Listener object
Overrides:
Source:

children(List) → {Array.<iElementClass>}

To get/set children. This method define contains of his self

Parameters:
Name Type Description
List Array.<iElementClass> | undefined

of children elements if need to reDefine the list
Source:
Example
let children = box.children([
      new Txt("Some text"),
      new Button("Click me")
 ]);
 box.children()[1].label("Don't click me");

className(value) → {string}

Get/Set style-classes

Parameters:
Name Type Description
value String

To set new string of style-classes
Overrides:
Source:

data((optional), To) → {any}

Get object of data from each input field.

Parameters:
Name Type Description
(optional) Object | undefined

Defined object for result value
To boolean | undefined

skip disabled fields if it is 'true'
Source:
Example
let box = new Box({
     children: [
         new Box({children[new Input({name: 'login', value: 'user'})]}),
         new Input({name: 'name', value: 'Anna'})
     ]
 });
 let data = box.data({}, true); // {'login': 'user', 'name': 'Anna'}
 let data_with_disabled = box.data(); // {'login': 'user', 'name': 'Anna'}

find(id, result) → {iElementClass|undefined}

Deep search an element by id

Parameters:
Name Type Description
id number

of element
result array | undefined

of search
Source:
Example
let box = new Box({
     children: [
         new Box({children[new Input({name: 'login', value: 'user'})]}),
         new Input({name: 'name', value: 'Anna'})
     ]
 });
 let boxElement = box.find( box.get(0)._key );

form((optional), To) → {Array.<any>}

Get array of data from each input field.

Parameters:
Name Type Description
(optional) Array | undefined

Defined object for result value
To boolean | undefined

skip disabled fields if it is 'true'
Source:
Example
let box = new Box({
     children: [
         new Box({children[new Input({name: 'login', value: 'user'})]}),
         new Input({name: 'name', value: 'Anna'})
     ]
 });
 let data = box.form(); // [['login', 'user'], ['name', 'Anna']]

get(value) → {AbstractElement|undefined}

To get any element by number from children.

Parameters:
Name Type Description
value number

Number of children.
Source:
Example
let element = box.get(0);
 // same result
 let element = box.children()[0];

last() → {AbstractElement|undefined}

To get last element from children.

Source:
Example
let element = box.last();

layout(element) → {string|undefined}

Get/Set name of layout.

Parameters:
Name Type Description
element string

(optional) Value can be one of:

'elements-small', 'elements-medium', 'elements-big', 'elements-huge', 'grid-small', 'grid-medium', 'grid-big', 'grid-huge', 'grid-column', 'grid-row', 'wrap', 'nowrap', 'picture-text'

Description of each layout will update soon
Source:
Example
box.layout('elements-big');

length(Define/Cut) → {number}

To get/set count of children. This method define contains of his self

Parameters:
Name Type Description
Define/Cut number | undefined

the length of list of children
Source:
Example
let length = box.length(1); // to remove all elements except first one.

listen(name, cb, after) → {Listener}

To listen event from this component

Parameters:
Name Type Description
name string

Name of event
cb function

Callback for fired event
after boolean

For phase before changes if "false" (by default) or after changes if "true"
Overrides:
Source:

move(Number, New) → {boolean}

To move a child element to new position

Parameters:
Name Type Description
Number number

of element position
New number

number of element position
Source:
Example
let box = new Box({
     children: [
         new Box({children[new Input({name: 'login', value: 'user'})]}),
         new Input({name: 'name', value: 'Anna'})
         new CheckBox({name: 'name', value: 'Nona'})
     ]
 });
 let boxElement = box.move( 2, 0 ); // CheckBox(from 2 to 0), Box, Input

pop() → {AbstractElement|undefined}

To remove an element from end.

Source:
Example
let input = box.pop();

To open popup layer

Parameters:
Name Type Description
element AbstractElement

(optional) Root element of popup layer.
closeble boolean

(optional) To close popup layer if it click on background.
Source:
anyElement.listener("onClick", function() {
     box.popup(new Button("Are you sure?"))
 });

push(data) → {AbstractElement}

To add to end new AbstractElement element.

Parameters:
Name Type Description
data AbstractElement

Object with parameters.
Source:
Example
let input = box.push(new Input());

remove(value) → {AbstractElement|undefined}

To remove any element from children.

Parameters:
Name Type Description
value AbstractElement | number

AbstractElement or number of children to remove.
Source:
Example
let input = box.unshift(new Input());

removeListener(value) → {void}

To remove installed event listener

Parameters:
Name Type Description
value Listener

Listener object
Overrides:
Source:

removeListeners() → {void}

To remove all installed event listeners

Overrides:
Source:

shift() → {AbstractElement|undefined}

To remove an element from top.

Source:
Example
let input = box.shift();

trigger(value) → {Action}

To fire event

Parameters:
Name Type Description
value Action | string

Action object
Overrides:
Source:

unshift(data) → {AbstractElement}

To add to benin new AbstractElement element.

Parameters:
Name Type Description
data AbstractElement

Object with parameters.
Source:
Example
let input = box.unshift(new Input());

valid((optional), To) → {Array.<iFieldClass>}

To launch validation of all contains fields.

Parameters:
Name Type Description
(optional) Array | undefined

Defined object for result value
To boolean | undefined

skip disabled fields if it is 'true'
Source:
Example
let validator = new Validator({
    cb: (v:string) => {return v.length >= 4},
    message: "Minimal length is 4 characters",
 });

 let box = new Box({
     children: [
         new Box({children[new Input({name: 'login', value: 'user'})]}),
         new Input({name: 'name', value: 'Anna', validator: validator})
     ]
 });

 let list_of_invalid_fields = box.valid();