input = (settings = {}, type) => {
if (typeof settings !== "object") {
return "Please provide a value!";
}
const theme = settings.theme ? settings.theme : "default",
initialize =
settings.initialize != undefined
? settings.initialize
: type === "button"
? false
: true,
on =
type == "button" ? "onclick" : type === "select" ? "onchange" : "oninput";
setGlobalStyles(theme);
const objs = {
title: createElement("title", settings.title, theme, settings),
desc: createElement("desc", settings.desc, theme, settings),
output:
type === "slider"
? createElement("output", settings.value, theme, settings)
: type == "checkbox"
? createElement("output", settings.label, theme, settings)
: "",
settings,
value: settings.value
};
objs.additionalElement = settings.additionalElement
? createElement(
settings.additionalElement.name,
settings.additionalElement.value,
theme,
settings
)
: "";
(objs[type] = createElement(type, settings.value, theme, settings)),
(objs.div = createElement(
"div",
[objs.title, objs[type], objs.output, objs.additionalElement, objs.desc],
theme,
settings
));
if (type === "slider") {
objs.div.min = settings.min;
objs.div.max = settings.max;
objs.div.step = settings.step;
}
objs[type][on] = () => {
if (!settings.preventUpdate) {
objs.div.update();
}
if (type === "slider")
objs.progress =
(objs.value - settings.min) / (settings.max - settings.min);
if (settings.utilities) {
for (let [key, func] of Object.entries(settings.utilities)) {
func(settings[key], objs);
}
}
if (settings[on]) settings[on](objs);
};
objs.div.update = (value = objs[type].value || settings.value) => {
value = isNaN(value) ? value : +value;
if (type === "checkbox" && objs.value != false) {
value = false;
} else if (type === "checkbox") {
value = settings.value;
}
objs.value = value;
if (type != "select") {
objs[type].value = value;
}
objs.div.value = objs.value;
if (type != "checkbox" && objs.output) {
objs.output.textContent = objs.value;
}
objs.div.dispatchEvent(new CustomEvent("input", { bubbles: true }));
};
if (settings.preventUpdate) objs.div.update();
if (initialize) {
objs[type][on]();
} else if (!settings.preventUpdate) {
objs.div.update();
}
return objs.div;
}
select = (settings = {}) => {
if (
typeof settings.options != "object" ||
Object.keys(settings.options).length == 0
) {
return "Please provide at least one option!";
}
if (Array.isArray(settings.options)) {
settings.options = settings.options.reduce(
(obj, key) => Object.assign(obj, { [key]: key }),
{}
);
}
let options = "";
for (let [key, value] of Object.entries(settings.options)) {
options += `<option ${
key == settings.selected ? "selected" : ""
} value = "${value}">${key}</option>`;
}
settings.value = options;
settings.additionalElement = {
name: "caret",
value: `<path d = 'M0,1.5 6,8.5 12,1.5'>`
};
return input(settings, "select");
}
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.
