Published
Edited
Sep 1, 2020
c
viewof c = combo({
slab: 'slider',
sinit: 25,
clab: 'boolean',
cbool: true,
width: '550px',
widthLab: '60px'
})
{
const btn = html`<button name=do>update c`;
btn.onclick = () => {
const s = Math.floor(Math.random() * 100);
const c = s > 50;
const v = { s, c };
// viewof c.value = v;
// viewof c.dispatchEvent(new CustomEvent('input'));
viewof c.update(v);
};
return btn;
}
r
viewof r = recursive([
{
slab: 'slider1',
sinit: 25,
clab: 'boolean1',
cbool: true,
width: '550px',
widthLab: '90px'
},
{
slab: 'slider22',
sinit: 80,
clab: 'boolean22',
cbool: false,
width: '650px',
widthLab: '90px'
}
])
{
const btn = html`<button name=do>update r`;
btn.onclick = () => {
const s1 = Math.floor(Math.random() * 100);
const c1 = s1 > 50;
const s2 = Math.floor(Math.random() * 100);
const c2 = s2 > 25;
const v = [{ s: s1, c: c1 }, { s: s2, c: c2 }];
// viewof r.value = v;
// viewof r.dispatchEvent(new CustomEvent('input'));
viewof r.update(v);
};
return btn;
}
function recursive(arr) {
const wrapper = html`<div style="border:1px solid red;padding:5px">`;
wrapper.value = [];
const combos = [];
for (const [k, config] of Object.entries(arr)) {
const c = combo(config);
combos.push(c);
wrapper.append(c);
wrapper.value[k] = c.value;
}
return Object.assign(wrapper, {
update(value) {
for (const [k, v] of Object.entries(value)) combos[k].update(v);
}
});
}
function combo({
slab = 'slabel',
sinit = 50,
clab = 'clab',
cbool = true,
width,
widthLab
}) {
const buildWrapper = () =>
html`<div style="border:1px gray solid;width:${width};padding:3px;padding-left:8px;">`;
const buildContain = () =>
html`<div style="display:flex;justify-content:left;align-items:center">`;
const buildLabel = lab =>
html`<div style="font:16px Arial;margin-right:1.0em;width:${widthLab}">${lab}`;
const buildOutput = () =>
html`<output style="font:14px Menlo,Consolas,monospace;margin-left:1.0em;">`;
const wrapper = buildWrapper();
const s = buildContain();
const labelS = buildLabel(slab);
const slider = html`<input type=range value=${sinit}>`;
const outputS = buildOutput();
const oninputS = e => {
e && e.preventDefault();
const v = +slider.value;
outputS.value = v;
wrapper.value.s = v;
wrapper.dispatchEvent(new CustomEvent("input", { bubbles: true }));
};
slider.addEventListener('input', oninputS);
s.append(labelS);
s.append(slider);
s.append(outputS);
s.append(outputS);
const c = buildContain();
const labelC = buildLabel(clab);
const checkbox = html`<input type=checkbox value=${cbool}>`;
const outputC = buildOutput();
const onchangeC = e => {
e && e.preventDefault();
const v = checkbox.checked;
outputC.value = v;
wrapper.value.c = v;
wrapper.dispatchEvent(new CustomEvent("input", { bubbles: true }));
};
checkbox.addEventListener('change', onchangeC);
c.append(labelC);
c.append(checkbox);
c.append(outputC);
wrapper.append(s);
wrapper.append(c);
wrapper.value = { s: sinit, c: cbool };
oninputS();
onchangeC();
invalidation.then(() => {
slider.removeEventListener('input', oninputS);
checkbox.removeEventListener('change', onchangeC);
});
const actions = { slider: oninputS, checkbox: onchangeC };
const dom = { slider, checkbox };
return Object.assign(wrapper, {
update(value) {
for (const [k, v] of Object.entries(value)) {
if (k === 's') {
dom.slider.value = v;
actions.slider();
}
if (k === 'c') {
dom.checkbox.checked = v;
actions.checkbox();
}
}
}
});
}
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.
