Published
Edited
Jan 8, 2019
Importers
viewof options = createControls({
id: 'toggleControl',
type: 'toggle',
defaultValue: true
}, {
id: 'selectControl',
type: 'select',
selections: [
{ value: 'firstValue' },
{ value: 'secondValue', title: 'Second Value' }
],
defaultValue: 'firstValue'
})
function createControls (...configs) {
const form = html`<form style="display: flex;"></form>`
configs.forEach(config => {
const createControl = createControlByType[config.type]
const control = createControl(config)
form.append(control)
})
form.oninput = () => {
form.value = _.reduce(form.elements, (memo, input) => {
memo[input.name] = input.type === 'checkbox' ? input.checked : input.value
return memo
}, {})
}
form.oninput()
return form
}
function createToggle ({ id, title, defaultValue = false}) {
title = title || id
const toggle = html`
<div style="margin: 10px;">
<label>${title}</label>
<input name="${id}" type="checkbox" ${defaultValue ? 'checked' : ''}>
</div>
`
return toggle
}
function createSelect ({ id, title, selections = [], defaultValue }) {
title = title || id
const select = html`
<div style="margin: 10px;">
<label>${title}</label>
<select name="${id}">
${selections.map(createSelection)}
</select>
</div>
`
return select
}
function createSelection ({ value, title }) {
title = title || value
return html`<option value="${value}">${title}</option>`
}
createControlByType = ({
toggle: createToggle,
select: createSelect
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
