109 lines
3.0 KiB
JavaScript
109 lines
3.0 KiB
JavaScript
|
const m = require('mithril')
|
||
|
|
const components = require('../../components')
|
||
|
|
|
||
|
|
exports.view = function(ctlr, graphic, vm) {
|
||
|
|
if (!graphic.settings.properties) {
|
||
|
|
graphic.settings.properties = []
|
||
|
|
}
|
||
|
|
if (graphic.settings.properties.length === 0) {
|
||
|
|
return [
|
||
|
|
m('p', 'No properties have been defined.'),
|
||
|
|
m('p', 'Click settings to create and define properties to display.'),
|
||
|
|
]
|
||
|
|
}
|
||
|
|
return [
|
||
|
|
graphic.settings.properties.map((prop, index) =>
|
||
|
|
m('label', { key: index }, [
|
||
|
|
prop,
|
||
|
|
m('input[type=text]', {
|
||
|
|
value: vm.current[prop] || '',
|
||
|
|
oninput: vm.updated.bind(vm, prop, 'current'),
|
||
|
|
}),
|
||
|
|
])
|
||
|
|
),
|
||
|
|
components.presetList(vm),
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
exports.settings = function(cltr, graphic, vm) {
|
||
|
|
return [
|
||
|
|
m('label', [
|
||
|
|
'Name',
|
||
|
|
m('input[type=text]', {
|
||
|
|
value: graphic.name,
|
||
|
|
oninput: vm.updated.bind(vm, 'name'),
|
||
|
|
}),
|
||
|
|
]),
|
||
|
|
m('label', [
|
||
|
|
'HTML (',
|
||
|
|
m('a', { href: 'https://lodash.com/docs#template', target: '_blank' }, 'variables'),
|
||
|
|
' available: ',
|
||
|
|
graphic.settings.properties.map(prop =>
|
||
|
|
`<%- ${prop} %>`
|
||
|
|
).join(', '),
|
||
|
|
')',
|
||
|
|
m('p', `<div id="${graphic.name}">`),
|
||
|
|
m('textarea', {
|
||
|
|
rows: '4',
|
||
|
|
oninput: vm.updated.bind(null, 'settings.html'),
|
||
|
|
value: graphic.settings.html || '',
|
||
|
|
}),
|
||
|
|
m('p', `</div>`),
|
||
|
|
]),
|
||
|
|
m('label', [
|
||
|
|
'CSS',
|
||
|
|
m('textarea', {
|
||
|
|
rows: '4',
|
||
|
|
oninput: vm.updated.bind(null, 'settings.css'),
|
||
|
|
value: graphic.settings.css || '',
|
||
|
|
})
|
||
|
|
]),
|
||
|
|
m('label', [
|
||
|
|
'Main property',
|
||
|
|
m('select', {
|
||
|
|
onchange: vm.updated.bind(vm, 'settings.main'),
|
||
|
|
}, graphic.settings.properties.map((prop, index) =>
|
||
|
|
m('option', {
|
||
|
|
key: 'prop-list-' + index,
|
||
|
|
value: prop,
|
||
|
|
selected: prop === graphic.settings.main,
|
||
|
|
}, prop)
|
||
|
|
))
|
||
|
|
]),
|
||
|
|
m('label', 'Properties'),
|
||
|
|
m('div', [
|
||
|
|
graphic.settings.properties.map((prop, index) =>
|
||
|
|
m('.row', { key: 'add-prop-' + index }, [
|
||
|
|
m('div', { class: 'small-10 columns panel-graphic-property-item' },
|
||
|
|
m('input[type=text]', {
|
||
|
|
readonly: true,
|
||
|
|
value: prop,
|
||
|
|
})
|
||
|
|
),
|
||
|
|
m('div', { class: 'small-2 columns' },
|
||
|
|
m('a.panel-graphic-property-remove.button.alert', {
|
||
|
|
onclick: vm.removeProperty.bind(vm, prop),
|
||
|
|
}, 'Remove')
|
||
|
|
)
|
||
|
|
])
|
||
|
|
),
|
||
|
|
]),
|
||
|
|
m('.row', [
|
||
|
|
m('div', { class: 'small-10 columns panel-graphic-property-item' },
|
||
|
|
m('input[type=text]', {
|
||
|
|
value: vm.newProperty(),
|
||
|
|
oninput: m.withAttr('value', vm.newProperty),
|
||
|
|
})
|
||
|
|
),
|
||
|
|
m('div', { class: 'small-2 columns' },
|
||
|
|
m('a.panel-graphic-property-add.button', {
|
||
|
|
onclick: vm.addProperty.bind(vm),
|
||
|
|
}, 'Add')
|
||
|
|
),
|
||
|
|
]),
|
||
|
|
m('a.panel-graphic-delete.button.alert', {
|
||
|
|
onclick: vm.remove.bind(vm),
|
||
|
|
}, 'Delete graphic'),
|
||
|
|
]
|
||
|
|
}
|