mag-component-list

List component

List is a component to build user interface, an instance of Component module. May be associated with mag-data-cacher and stb-component-scrollbar.

Installation

npm install mag-component-list

Usage

Add the singleton to the scope:

var List = require('mag-component-list');

Create list instance:

var list = new List({
    cycle: false,
    className: 'list',

    data: [ 
        '0',
        '1',
        '2',
        '3',
        '4'
    ],

    // custom render function
    render: function ( $item, config ) {},
    // data provider to get visible part from all data, may use mag-data-cacher 
    provider: dataProvider,
    // associated ScrollBar component link, may use stb-component-scrollbar
    scroll: new ScrollBar({}),
    size: 3,
    focusIndex: 0,
    propagate: false,
    type: List.prototype.TYPE_HORIZONTAL,
    events: {
        'focus:item': function ( event ) {
            console.log(event);
        },
        'click:item': function ( event ) {
            console.log(event);
        }
    }
});

To change data after creation:

list.setData({
    focusIndex: 0,
    data: [
        'Item 0',
        'Item 1'
    ]
});

To change focus position by index:

list.focusIndex(index);

To change focus item:

list.focusItem($item);

To blur item:

list.blurItem($item);

To mark item:

list.markItem($item, true);

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 problems or suggestions please open an issue according to the contribution rules.

License

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