Web developer and autodidact with an interest in creative coding.
viewof demoDrag = Inputs.form(
[0, .3, .6, 1].map((value, i) => Inputs.range([0, 1], {
value,
step: .01,
label: `Input #${i + 1}`,
})),
{ template: sortTemplate() }
)
function sortCheckboxes(form) {
const checked = el => el.firstElementChild.checked;
const parent = form.querySelector(":scope > div");
// Make note of the original order.
const indices = new Map(Array.from(parent.children, (n, i) => [n, i]));
// Sort checked boxes to the front.
const sort = (a, b) => checked(b) - checked(a) || indices.get(a) - indices.get(b);
form.addEventListener("input", e => sortChildren(parent, e.target, sort));
parent.append(...[...parent.children].sort(sort));
return form;
}
sortCheckboxes(
Inputs.checkbox(["alpha", "beta", "gamma", "delta", "epsilon"], {
label: "Selection",
value: ["delta", "beta"],
})
)
import {inputTemplate} from "@mootari/input-template"
viewof demoType = inputTemplate(
Inputs.form(
["dog", "cat", "wolf", "mouse"].map(value => Inputs.text({value})),
{ template: sortTemplate((a, b) => a.value.localeCompare(b.value)) }
),
{ label: "Animals" }
)
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.
