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-listUsage
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
DEVELOPwhich 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.