mag-component-layout-list

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

npm install mag-component-layout-list

Usage

Add the singleton to the scope:

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

Create layout list instance:

var layoutList = new LayoutList({
    // mag-component-list config
    cycle: false,
    className: 'list',

    data: [
        {
            // mag-component-layout config.data
            items: [
                new Button({value: 'Ok'}),
                new Button({value: 'Cancel'}),
                new Button({value: 'Exit'})
            ]
        },
        {
            // mag-component-layout config.data
            items: [
                HTMLElement1,
                HTMLElement2
            ],
            value: someItemData2
        },
        {
            items: [
                  {
                     className: 'star',
                     name: '$icon'
                  },
                  {
                      value: 'Some text',
                      name: '$text'
                  }
              ],
              click: function () {
                  // do something
              },
              name: 'starItem'
          },
          {
              items: [
                  'Hello world',
                  {
                      value: 'hi',
                      className: 'status'
                  }
              ],
              value:{
                  uri: 'http://55.55.55.55/some'
              },
              click: someHandler
          }
        
    ],

    // custom render function
    render: function ( $item, config ) {},

    noData: 'No items',
    fixedData: true,
    size: 3,
    focusIndex: 0,
    propagate: false,
    type: LayoutList.prototype.TYPE_HORIZONTAL,
    events: {
        'focus:item': function ( event ) {
            console.log(event);
        },
        'click:item': function ( event ) {
            console.log(event);
        }
    }
});

layoutList.links.starItem.links.$text.innerText = 'new cool text';

To change data after creation:

layoutList.setData({
    focusIndex: 0,
    data: [
        {
            items: [
                  {
                     className: 'star'
                  },
                  'Some text'
              ],
              click: function () {
                  // do something
              }
          },
          {
              items: [
                  'Hello world',
                  {
                      value: 'hi',
                      className: 'status'
                  }
              ],
              value:{
                  uri: 'http://55.55.55.55/some'
              },
              click: someHandler
          },
          {
              items: [
                  {
                      className: 'big',
                      value: ' Some'
                  },
                  {
                      value: new Input()
                  }
              ]
          }
    ]
});

To change focus position:

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