30:[] 2e:{"title":"Inline Inputs","cells":[{"id":0,"value":"md`# Inline Inputs\n\nSometimes you might want to put inputs inline in your Markdown, rather than as separate cells. This is a little trickier, but possible, and you can even synchronize multiple inputs if you desire. Here’s an example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`This is a range input ${bind(html``, viewof apples)}.\n\nThis is a number input ${bind(html``, viewof apples)}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`You can also do a standalone input:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"bind(html``, viewof apples)","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`All of these inputs are synchronized using a [view](/@mbostock/synchronized-views):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof apples = new View(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`The view’s value can be referenced reactively:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"new Array(apples + 1).join(\"🍎\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`To bind a given *input* to a *view*, you need bidirectional listening: the *input* needs to listen to the *view* (to update the *input*’s value), and the *view* needs to listen to the *input* (to update the *view*’s value). This is a [disposable view](/@mbostock/disposal).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"function bind(input, view) {\n const value = [\"range\", \"number\"].includes(input.type) ? \"valueAsNumber\" : \"value\";\n var update;\n if (input.type == \"file\") {\n update = () => { };\n input.oninput = () => { view.value = input.files };\n }\n else if (input.type == \"radiogroup\") {\n update = () => { input.setter(view.value) };\n input.oninput = () => { view.value = input.getter() };\n }\n else if (input.type == \"checkbox\") {\n update = () => input.checked = view.value;\n input.oninput = () => view.value = input.checked;\n } \n else {\n update = () => input[value] = view.value;\n input.oninput = () => view.value = input[value];\n }\n view.addEventListener(\"input\", update);\n disposal(input).then(() => view.removeEventListener(\"input\", update));\n return update(), input;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`### Some useful gui components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"makeSlider = function (options={}) {\n let {min=0,max=10,step=0.1,size=\"10em\"} = options;\n return html``\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"makeFile = function (options={}) {\n let {multiple=false, accept=undefined, size=\"20em\"} = options;\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"makeColor = function (options={}) {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"makeSelect = function(opt={}) {\n let {options=[]} = opt;\n let sel = html``;\n for (let o of options) {\n sel.append(html``)\n }\n return sel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"makeNumber = function (options={}) {\n let {min=0,max=10,step=0.1,size=\"4em\"} = options\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"makeCheckbox = function () {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"makeRadioGroup = function (opt = {}) {\n let {options=[]} = opt;\n let sel = html``;\n sel.style.display = 'inline-block';\n sel.type = 'radiogroup';\n let name = \"group\"+options.join(\"\");\n let buttons = new Map();\n for (let o of options) {\n let button = html``;\n buttons.set(o, button);\n sel.append(buttons.get(o));\n sel.append(html` ${o} `);\n }\n sel.setter = function(value) {\n for (let [key,button] of buttons) { \n button.checked = (key == value) \n }\n }\n sel.getter = function () {\n for (let [key,button] of buttons) {\n if (button.checked) return key;\n }\n }\n return sel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"makeCheckGroup = function (opt = {}) {\n let {options=[]} = opt;\n let sel = html``;\n sel.style.display = 'inline-block';\n sel.type = 'radiogroup';\n let name = \"group\"+options.join(\"\");\n let buttons = new Map();\n for (let o of options) {\n let button = html``;\n buttons.set(o, button);\n sel.append(button);\n sel.append(html` ${o} `);\n }\n sel.setter = function(checked) {\n let i = 0;\n for (let [key,button] of buttons) { \n button.checked = checked[i++] \n }\n }\n sel.getter = function () {\n let checked = [];\n let i = 0;\n for (let [key,button] of buttons) {\n checked [i++] = button.checked;\n }\n return checked\n }\n return sel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`## Combo bind/make components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"bindSlider = (options,view) => bind(makeSlider(options),view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"bindNumber = (options,view) => bind(makeNumber(options),view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"bindSelect = (options,view) => bind(makeSelect(options),view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"bindFile = (options,view) => bind(makeFile(options),view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"bindColor = (options,view) => bind(makeColor(options),view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"bindCheckbox = (options,view) => bind(makeCheckbox(options),view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"bindCheckGroup = (options,view) => bind(makeCheckGroup(options),view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"bindRadioGroup = (options,view) => bind(makeRadioGroup(options),view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"bindSliderNumber = (options,view) => html`${bindSlider(options,view)} ${bindNumber(options,view)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`### Example:`","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"md `X: ${bindSelect({options:[\"a\",\"b\",\"c\"]}, viewof x)} Y:${bindSliderNumber ({min:0,max:10,step:0.1}, viewof y)}\n\nZ: ${bindCheckbox(\"z\", viewof z)}\n\nW: ${bindRadioGroup ({options:[\"a\",\"b\",\"c\"]}, viewof w)}\n\nS: ${bindCheckGroup ({options:[\"a\",\"b\",\"c\"]}, viewof s)}\n\nF: ${bindFile({multiple:true, accept:\".png,.jpg\", size:'20em'}, viewof f)}\n\nC: ${bindColor({}, viewof c)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"md`#### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"viewof x = new View(\"a\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"viewof y = new View (5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"viewof z = new View(false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof w = new View(\"b\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"viewof s = new View([false,true,true])","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"viewof f = new View(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"viewof c = new View(\"#ffaa00\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"[x,y,z,w,s] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"{\n const div = html`

`;\n div.append(html`

Image:

`);\n for (var j = 0; j < f.length; j++) {\n let file = f[j];\n let img = html``\n img.src = await Files.url(f[j]);\n div.append(img);\n }\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"md`### Imports`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}