viewof value = folder(Inputs.range([0, 1], {label: "foo", step: .01, value: Math.random()}),
{ label: "Parameter" })
viewof params = Inputs.form({
common: Inputs.toggle({ value: false, label: "common" }),
color: Inputs.color({label: "color", value: "#4682b4"}),
en: folder(Inputs.form({
foo: Inputs.range([0, 1], {label: "foo", step: .01, value: Math.random()}),
bar: Inputs.range([0, 1], {label: "bar", step: .01, value: Math.random()}),
baz: Inputs.range([0, 1], {label: "baz", step: .01, value: Math.random()})
}), { label: "English", open: true }),
fr: folder(Inputs.form({
toto: Inputs.range([0, 1], {label: "toto", step: .01, value: Math.random()}),
tata: Inputs.range([0, 1], {label: "tata", step: .01, value: Math.random()}),
titi: Inputs.range([0, 1], {label: "titi", step: .01, value: Math.random()}),
}), { label: "French", open: false }),
jp: folder(Inputs.form({
hoge: Inputs.range([0, 1], {label: "hoge", step: .01, value: Math.random()}),
fuga: Inputs.range([0, 1], {label: "fuga", step: .01, value: Math.random()}),
piyo: Inputs.range([0, 1], {label: "piyo", step: .01, value: Math.random()})
}), { label: "Japanese", open: true }),
})
params
folder = {
const className = "ui-folder";
const style = htl.html`<style id="${className}-styles">
details.${className} summary {
list-style-type: none; /* hide the triangle in firefox */
outline: none;
cursor: pointer;
user-select: none;
font: bold var(--monospace-font);
}
details.${className} > summary::marker {
display: none;
}
details.${className} > summary::-webkit-details-marker {
display: none;
}
details.${className} summary:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 6px solid var(--syntax-normal);
border-right: 0;
margin-right: 4px;
}
details[open].${className} summary:before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid var(--syntax-normal);
border-bottom: 0;
margin-left: -2px;
}
<style>`;
return (input, { open = true, label = "" } = {}) => {
if (!document.getElementById(style.id)) document.head.appendChild(style);
const details = htl.html`<details open=${open} class="${className}">
<summary>${label}</summary>
${input}
</details>`;
Object.defineProperty(details, "value", {
get: () => input.value,
set: value => input.value = value
});
return details;
};
}
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.
