import {persistentSelect} from "@bumbeishvili/utils"
viewof d1Error = persistentSelect(["Spring", "Summer", "Fall", "Winter"])
function persistentSelectImpl(config = {},newKey) {
let {
value: formValue,
title,
description,
submit,
multiple,
size,
key,
options
} = Array.isArray(config) ? {options: config} : config;
if(!key && !newKey) {
throw `Please provide unique key for select
persistentSelect({key:"uniqKey",options:[1,2]})
or
persistentSelect([1,2],"uniqKey")`
}else{
if(newKey){
key = newKey;
}
}
const localValue = localStorage.getItem(key);
if(localValue){
formValue = JSON.parse(localValue);
}
let stringified = false;
options = options.map(
o => {
if(typeof o === "object"){
return o;
}
stringified = true;
return { value: JSON.stringify(o), label: o }
}
);
// return key
const form = input({
type: "select",
title,
stringified,
description,
submit,
getValue: input => {
const selected = Array.prototype.filter
.call(input.options, i => i.selected)
.map(i => i.value);
localStorage.setItem(key,JSON.stringify(selected))
return multiple ? selected : selected[0];
},
form: html`
<form>
<select name="input" ${
multiple ? `multiple size="${size || options.length}"` : ""
}>
${options.map(({ value, label }) => Object.assign(html`<option>`, {
value,
selected: Array.isArray(formValue)
? formValue.includes(value)
: formValue === value,
textContent: label
}))}
</select>
</form>
`
});
form.output.remove();
return form;
}
function input(config) {
let {
stringified,
form,
type = "text",
attributes = {},
action,
getValue,
title,
description,
format,
display,
submit,
options
} = config;
const wrapper = html`<div></div>`;
if (!form)
form = html`<form>
<input name=input type=${type} />
</form>`;
Object.keys(attributes).forEach(key => {
const val = attributes[key];
if (val != null) form.input.setAttribute(key, val);
});
if (submit)
form.append(
html`<input name=submit type=submit style="margin: 0 0.75em" value="${
typeof submit == "string" ? submit : "Submit"
}" />`
);
form.append(
html`<output name=output style="font: 14px Menlo, Consolas, monospace; margin-left: 0.5em;"></output>`
);
if (title)
form.prepend(
html`<div style="font: 700 0.9rem sans-serif;">${title}</div>`
);
if (description)
form.append(
html`<div style="font-size: 0.85rem; font-style: italic;">${description}</div>`
);
if (format) format = typeof format === "function" ? format : d3format.format(format);
if (action) {
action(form);
} else {
const verb = submit
? "onsubmit"
: type == "button"
? "onclick"
: type == "checkbox" || type == "radio"
? "onchange"
: "oninput";
form[verb] = e => {
e && e.preventDefault();
let value = getValue ? getValue(form.input) : form.input.value;
if(stringified){
if(Array.isArray(value)){
value.forEach(function(d,i,arr){
arr[i] = JSON.parse(d);
})
}else{
value = JSON.parse(value);
}
}
if (form.output) {
const out = display ? display(value) : format ? format(value) : value;
if (out instanceof window.Element) {
while (form.output.hasChildNodes()) {
form.output.removeChild(form.output.lastChild);
}
form.output.append(out);
} else {
form.output.value = out;
}
}
form.value = value;
if (verb !== "oninput"){
form.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
};
if (verb !== "oninput")
wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault();
if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault();
form[verb]();
}
while (form.childNodes.length) {
wrapper.appendChild(form.childNodes[0]);
}
form.append(wrapper);
return form;
}
d3format = require("d3-format@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.
