Published
Edited
Apr 23, 2022
viewof clicks = wrapInput(Inputs.button("OK", { label: "Click me" }), {
template: makeTemplateDetails({ label: "Hidden button" })
})
clicks
// Input, Object -> Input
function wrapInput(input, { template = template } = {}) {
// heavily inspired by: https://github.com/observablehq/inputs/blob/main/src/form.js
let value = input.value;
return Object.defineProperty(template(input), "value", {
get() {
const v = input.value;
if (!Object.is(v, value)) {
value = v;
}
return input.value;
},
set(v) {
input.value = v;
}
});
}
// Object -> (Input -> HTML)
function makeTemplateDetails({
label = "Input",
open = false,
divOuterStyle = "margin-bottom:5px;",
divInnerStyle = "margin-top:5px",
summaryClass = "oi-ec050e"
} = {}) {
label = label || "";
return (input) =>
html`<div style="${divOuterStyle}">
<details${open ? " open" : ""}>
<summary class="${summaryClass}">
<label>${label}</label>
</summary>
<div style="${divInnerStyle}">${input}</div>
</details>
</div>`;
}
// Input -> Input
function template(input) {
return html`<div>${input}</div>`;
}
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.
