value
viewof value = selectFlat({
options: ["A", "B", "C", "D"],
value: "B",
output: false,
description: "your choice"
})
html`${[a, b, c].filter(d => d > 1).join(' × ') || "1"} = ${a * b * c}`
viewof multipleSelect = selectFlat({
options: ["A", "B", "C", "D"],
value: "B",
output: true,
multiple: true,
description: "multiple selection"
})
multipleSelect
function selectFlatStyle(id, show_ouput = false) {
return html`
<style>
#${id} option {
height:1em; width: 1em; display: inline-block; overflow: hidden; background: #f4f4f4; margin-right:1px; border: 0.5px solid black;
color: transparent!important;
}
#${id} option.hovered { background: orange }
#${id} option.hovered:disabled { background: #CCC }
#${id} select {
overflow: hidden; height: 1.5em; border: 0!important;outline: none;
}
#${id} output {
display: ${show_ouput ? "inline-block" : "none"};
}
</style>`;
}
import { input } from "@jashkenas/inputs"
// adapted from "@jashkenas/inputs"
function selectFlat(config = {}) {
let {
value: formValue,
title,
description,
submit,
multiple,
size,
output,
options
} = Array.isArray(config) ? { options: config } : config;
options = options.map(o =>
typeof o === "object" ? o : { value: o, label: o }
);
var currentValue = null;
const id = DOM.uid().id;
const form = input({
type: "select",
title,
description: `${
description ? (output ? `${description}: ` : description) : ""
}<span>`,
submit,
getValue: input => {
if (currentValue !== null) return currentValue;
const selected = Array.prototype.filter
.call(input.options, i => i.selected)
.map(i => i.value);
return multiple ? selected : selected[0];
},
form: html`
<form class=selectBox id=${id}>
<select name="input" ${
multiple ? `multiple size="${size || options.length}"` : ""
}>
${options.map(({ value, label, disabled = false }) =>
Object.assign(html`<option>`, {
value,
selected: Array.isArray(formValue)
? formValue.includes(value)
: formValue === value,
disabled,
textContent: label
})
)}
</select>
${selectFlatStyle(id, output)}
</form>
`
});
form.output.style = "";
d3.select(form)
.select("span")
.node()
.appendChild(form.output);
const s = form.getElementsByTagName("select")[0];
s.size = 2;
d3.select(s)
.on("mouseleave", function() {
currentValue = null;
form.dispatchEvent(new CustomEvent("input"));
})
.selectAll("option")
.on("mouseenter", function() {
d3.select(this).classed("hovered", true);
currentValue = this.disabled ? null : multiple ? [this.value] : this.value;
form.dispatchEvent(new CustomEvent("input"));
})
.on("mouseleave", function() {
d3.select(this).classed("hovered", false);
});
return form;
}
d3 = require("d3-selection@1")
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.
