Published unlisted
Edited
Sep 20, 2022
reactiveMultiControlUI = {
const answer = Inputs.radio(["a", "b"]);
const result = Inputs.text({ label: "result", disabled: true });
const checker = () => {
if (submitted > 0) {
if (answer.value == "b") result.value = "correct!";
if (answer.value == "a") result.value = "wrong!";
}
};
answer.addEventListener("input", checker);
invalidation.then(() => answer.removeEventListener("input", checker)); // For every addXXX their is a removeXXX
return Inputs.form([answer, result]);
}
viewof submitted = Inputs.button("Submit")
submitted
Fetchp
image1 = FileAttachment("image@1.png").image()
import { fetchp } from "@tomlarkworthy/fetchp"
dynamicRadio = juice(Inputs.radio, {
options: "[0]",
result: "[1].value"
})
viewof control = dynamicRadio(["a", "b", "c"])
control
logic = {
if (filter === "all") {
viewof control.options.value = ["a", "b", "c"];
} else if (filter === "b,c") {
if (viewof control.result.value == "a") viewof control.result.value = null;
viewof control.options.value = ["b", "c"];
} else if (filter === "a,c") {
if (viewof control.result.value == "b") viewof control.result.value = null;
viewof control.options.value = ["a", "c"];
}
viewof control.dispatchEvent(new Event("input", { bubbles: true }));
}
myRequire = d3Require.requireFrom(async (name) => {
return `${registry}/${name}`;
})
(runImport, myRequire("@securityscorecard/design-system@1.0.0-alpha.148"))
viewof selection = Inputs.select(["red", "green", "blue"])
viewof submit1 = Inputs.textarea({ value: selection, submit: true })
submit1
viewof submit2 = Inputs.textarea({ submit: true, minlength: 1 })
submit2
Inputs.bind(viewof selection, viewof submit2)
viewof submit3 = Inputs.button("submit", {
required: true,
reduce: () => selection
})
submit3
import { tweet } from "@mbostock/tweet"
tweet("1442010098482626563")
I am a mardown cell but I escape to JS and have some smart casting so that if my JS returns a DOM node I can render that too ${html`<input type="range">`}
Look ${function foo() {
const el = document.createElement("h1")
el.innerHTML = "Programmatic Title in embedded markdown";
return el
}()}
viewof foo = {
// Create a view 'foo' with value 'bar'
return Object.defineProperty(md`foo`, "value", {
value: "bar",
writable: true,
enumerable: true
});
}
viewof foo.value
foo
set_value_to_promise = Inputs.button("set new promise", {
reduce: () => {
viewof foo.value = invalidation;
viewof foo.dispatchEvent(new Event('input', { bubbles: true }));
}
})
set_value_to_undefined = Inputs.button("set undefined", {
reduce: () => {
viewof foo.value = undefined;
viewof foo.dispatchEvent(new Event('input', { bubbles: true }));
}
})
md`If you refresh the 'viewof foo.value' cell it will not resolve`
viewof x = Object.assign(Inputs.range([0, 10], { label: "yo", step: 2 }), {
oninput: event => event.isTrusted && event.stopImmediatePropagation(),
onchange: event => event.currentTarget.dispatchEvent(new Event("input"))
})
x
Promises.delay(Number.NaN)
viewof textAreaWithSubmit = Inputs.textarea({
submit: true
})
textAreaWithSubmit
viewof textWithSubmit = Inputs.text({
submit: true
})
textWithSubmit
viewof start = Inputs.text()
viewof middle = {
const middle = Inputs.text();
Inputs.bind(viewof start, middle);
return middle;
}
viewof end = {
const end = Inputs.text();
Inputs.bind(viewof middle, end);
return end;
}
end
start
md`### Repo multi update`
import { exportString } from "@tomlarkworthy/repo1"
exportString
ganja = md`### Ganja.js`
Algebra = require("ganja.js")
Algebra(2, 0, 1, () => {
// 1e1 is the dimension (Y)
// Change to 1e2 to make this a horizontal line
return this.graph([1e1]);
})
viewof cell_a = Inputs.select(["one", "two"])
cell_a
viewof cell_b = Inputs.text()
updater_with_event = {
// You could declare this updating in cell_b too, but I think its more illastrative taking it into its own cell
viewof cell_a.addEventListener("input", (evt) => {
viewof cell_b.value = viewof cell_a.value; // Updates visual appearance but does not trigger dataflow from cell_b
viewof cell_b.dispatchEvent(new Event("input", { bubbles: true }));
});
}
import { view, variable } from "@tomlarkworthy/view"
import { viewroutine, ask } from "@tomlarkworthy/viewroutine"
viewof cell_c = mutableSelection(["a", "b"])
cell_c
cell_c.selection
updater_first_option_using_cell_b = {
viewof cell_b.addEventListener("input", (evt) => {
viewof cell_c.options.value = [viewof cell_b.value, "other"]; // Assign any array of options you like (does nto support in-place mutation like .push)
viewof cell_c.options.dispatchEvent(new Event("input", { bubbles: true }));
});
}
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.
