Layout list component

Layout list is a component to build user interface, an instance of Component module. It is based on mag-component-list and mag-component-layout.

Installation

1npm install mag-component-layout-list

Usage

Add the singleton to the scope:

1var LayoutList = require('mag-component-layout-list');

Create layout list instance:

1var layoutList = new LayoutList({
2    // mag-component-list config
3    cycle: false,
4    className: 'list',
5
6    data: [
7        {
8            // mag-component-layout config.data
9            items: [
10                new Button({value: 'Ok'}),
11                new Button({value: 'Cancel'}),
12                new Button({value: 'Exit'})
13            ]
14        },
15        {
16            // mag-component-layout config.data
17            items: [
18                HTMLElement1,
19                HTMLElement2
20            ],
21            value: someItemData2
22        },
23        {
24            items: [
25                  {
26                     className: 'star',
27                     name: '$icon'
28                  },
29                  {
30                      value: 'Some text',
31                      name: '$text'
32                  }
33              ],
34              click: function () {
35                  // do something
36              },
37              name: 'starItem'
38          },
39          {
40              items: [
41                  'Hello world',
42                  {
43                      value: 'hi',
44                      className: 'status'
45                  }
46              ],
47              value:{
48                  uri: 'http://55.55.55.55/some'
49              },
50              click: someHandler
51          }
52        
53    ],
54
55    // custom render function
56    render: function ( $item, config ) {},
57
58    noData: 'No items',
59    fixedData: true,
60    size: 3,
61    focusIndex: 0,
62    propagate: false,
63    type: LayoutList.prototype.TYPE_HORIZONTAL,
64    events: {
65        'focus:item': function ( event ) {
66            console.log(event);
67        },
68        'click:item': function ( event ) {
69            console.log(event);
70        }
71    }
72});
73
74layoutList.links.starItem.links.$text.innerText = 'new cool text';
75

To change data after creation:

1layoutList.setData({
2    focusIndex: 0,
3    data: [
4        {
5            items: [
6                  {
7                     className: 'star'
8                  },
9                  'Some text'
10              ],
11              click: function () {
12                  // do something
13              }
14          },
15          {
16              items: [
17                  'Hello world',
18                  {
19                      value: 'hi',
20                      className: 'status'
21                  }
22              ],
23              value:{
24                  uri: 'http://55.55.55.55/some'
25              },
26              click: someHandler
27          },
28          {
29              items: [
30                  {
31                      className: 'big',
32                      value: ' Some'
33                  },
34                  {
35                      value: new Input()
36                  }
37              ]
38          }
39    ]
40});

To change focus position:

1layoutList.focusIndex(index);

Development mode

There is a global var DEVELOP which activates additional consistency checks and protection logic not available in release mode.

Contribution

If you have any problem or suggestion please open an issue here. Pull requests are welcomed with respect to the JavaScript Code Style.

License

mag-component-layout-list is released under the MIT License.