Web developer and autodidact with an interest in creative coding.
Unlisted
Edited
Jul 7, 2023
function radioDropdown(data, options = {}) {
const css = `
:scope > div {
border: 1px solid #aaa;
margin: 5px 0 4px 0;
position: relative;
height: calc(1em + 7px);
z-index: 999;
display: flex;
flex-direction: column;
}
:scope > div:hover { overflow: visible }
:scope > div:not(:hover):after {
content: "▿";
position: absolute;
right: 4px;
pointer-events: none;
top: 2px;
z-index: 1;
}
:scope input { display: none }
:scope input + label { display: block; margin: 0; padding: 2px 32px 2px 8px }
:scope input:checked + label { order: -1 }
:scope div label { background: #fff; }
:scope div:hover label { background: #eee; }
:scope div label:hover { background: #ddd }
:scope div:hover input:checked + label { background: #ddd }
:scope div:not(:hover) input:not(:checked) + label { visibility: hidden }
`;
const form = Inputs.radio(data, options);
for(const input of [...form.input]) {
const label = input.parentElement;
label.htmlFor = input.id = DOM.uid().id;
label.before(input);
}
const scope = DOM.uid().id;
form.classList.add(scope);
form.append(htl.html`<style>${css.replace(/:scope\b/g, `.${scope}`)}`);
return form;
}
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.
