I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Feb 25
Paused
1 fork
Importers
4 stars
Also listed in…
Reactive Widgets and Inputs
viewof selected = conditionalShow(await navio(penguins), {
label: htl.html`<h3 style="display:inline">Show Navio</h3>`,
checked: this ? this.checked : true, // keep previous value
// checked: false,
returns: (checked, navElem) => (checked ? navElem.value : navElem.value) // what do you want it to return
})
viewof selected.checked
selected
function conditionalShow(
element,
{
label = "Show",
checked = false,
returns = (checked, element) => element?.value || element,
// returns = (checked, element) => checked ? element?.value || element : null, // If you want it to return null when unchecked
bindInput = true,
showValueSummary = true
} = {}
) {
const show = htl.html`${label}`;
const container = htl.html`<div>${element}<div>`;
const valueSummary = htl.html`<output></output>`;
const target = htl.html`<details ${checked ? { open: true } : {}} >
<summary>${show} ${showValueSummary ? valueSummary : ""}</summary>
${container}
</details>`;
function updateValueSummary() {
if (
showValueSummary &&
target.value &&
target.value &&
Array.isArray(target.value)
) {
valueSummary.innerHTML = `(Returns ${target.value.length} elements)`;
} else {
valueSummary.innerHTML = ``;
}
}
function set(evt) {
if (evt) {
evt.stopPropagation();
}
target.value = returns(target.open, element);
target.checked = target.open;
console.log("target.open", target.open, target);
target.dispatchEvent(new Event("input", { bubbles: true }));
updateValueSummary();
}
set();
if (bindInput) {
element.addEventListener("input", set);
}
target.addEventListener("toggle", () => {
target.checked = target.open;
});
return target;
}
import { navio } from "@john-guerra/navio"
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.
