Ordering and reordering components
By setting the order property when defining instances the componentManager will add each instance in order. The order property (like any other property) can be changed on the fly.
Ordering is handled by looking at the data-attribute data-order, which means that components will order them selfs alongside elements thats not handled by the componentManager as long as they have an data-order set.
Changing the order on the fly only changes the property on the targeted instance (not all instances), thats why it takes to clicks to see any change on the 'Increment instance 1s ordernr' button the first time (it will then go from one to two - and since there already is an instance with order 2 it wont move)
Example Instance definition
{
"id": "order-instance-1",
"componentId": "order-component",
"order": 1,
"args": {
"background": "aqua"
}
}
Take a look at components.js to see component the setup for this example.
conditions:0components:1instances:5
var componentSettings = {
components: [{
id: 'order-component',
src: 'app.components.FilterComponent'
}],
targets: {
main: [
{
id: 'order-instance-1',
componentId: 'order-component',
order: 1,
args: {
order: '1',
background: '#D5FFE9'
}
},
{
id: 'order-instance-2',
componentId: 'order-component',
order: 2,
args: {
order: '2',
background: '#88FFC2'
}
},
{
id: 'order-instance-3',
componentId: 'order-component',
order: 3,
args: {
order: '3',
background: '#AACCBB'
}
},
{
id: 'order-instance-4',
componentId: 'order-component',
order: 4,
args: {
order: '4',
background: '#6A7F75'
}
},
{
id: 'order-instance-5',
componentId: 'order-component',
order: 5,
args: {
order: '5',
background: '#447F61'
}
}
]
}
}