2d:null 2e:["$","title",null,{"children":"Form Inputs | Marcel Saaro | Observable"}] 33:[] 31:{"id":"266cdbe0ca7bc7c9","slug":"form-inputs","title":"Form Inputs","thumbnail":"dce66092361bb4f83046a1d32ee2d744fa8f32bfbcca500f1cbb4e98649d552e","access_level":"public","create_time":"$D2020-03-03T13:57:24.114Z","update_time":"$D2020-03-05T16:16:08.715Z","view_time":null,"first_public_time":"$D2020-03-04T16:01:12.566Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"431e1d97af358cda","login":"marcel112358","name":"Marcel Saaro","avatar_url":"https://avatars-next.observableusercontent.com/79649c704b8eca4524d85d45b511992b3a7466f915fa25412dddb42e7b463050","tier":"starter_2024"},"version":321,"publish_version":321,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a0f9e98073455f3","login":"marcel112358","name":"Marcel Saaro","avatar_url":"https://avatars-next.observableusercontent.com/79649c704b8eca4524d85d45b511992b3a7466f915fa25412dddb42e7b463050","tier":null}],"members":[{"type":"individual","id":"7a0f9e98073455f3","login":"marcel112358","name":"Marcel Saaro","avatar_url":"https://avatars-next.observableusercontent.com/79649c704b8eca4524d85d45b511992b3a7466f915fa25412dddb42e7b463050","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Form Inputs","cells":[{"id":0,"value":"md`# Form Inputs\n\nThis is a small wrapper to add muliple input fields in a single field and add an output div next do it.\n\nThe famous [inputs](https://observablehq.com/@jashkenas/inputs) from [@jashkenas](https://observablehq.com/@jashkenas) are also supported. \n\n~~~js\nimport {multiInput} from \"@marcel112358/form-inputs\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`## Just a small example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`\\`multiInput()\\` has two arguments \\`inputs\\` and \\`config\\` that are both JavaScript Objects. The possible properties are pretty self-explanatory as you can see in the example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"viewof inputValues = multiInput(\n {\n brightness: slider({ value: 0 }),\n fontSize: slider({\n min: 1,\n max: 100,\n step: 1,\n value: 72,\n title: \"Text Size\",\n description: \"Set the text size between 1px and 100px\"\n }),\n // properties starting with `ignore_` are ignored\n // in the output object.\n ignore_br: html`

HTML Element

`,\n text: html``\n },\n {\n // If `outputId` is not set there wont be an output div\n outputId: \"testli\",\n wrapperDivClass: \"row\",\n inputDivClass: \"col\",\n outputDivClass: \"col output\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"{\n // Draw the svg\n const dimensions = { width: 800, height: 500 };\n const margin = { top: 30, right: 30, bottom: 30, left: 30 };\n const outputId = \"#testli\";\n\n const color = d3\n .scaleLinear()\n .range([\"#ffffff\", \"#000000\"])\n .domain([0, 1]);\n\n // Create the svg object\n d3.select(outputId)\n .selectAll(\"*\")\n .remove();\n\n const svg = d3\n .select(outputId)\n .append(\"svg\")\n .attr(\"viewBox\", [0, 0, dimensions.width, dimensions.height])\n .style(\"max-width\", `${width}px`)\n .style(\"background-color\", color(1 - inputValues.brightness));\n\n // Draw the title\n svg\n .append(\"text\")\n .attr(\"x\", \"50%\")\n .attr(\"y\", \"50%\")\n .attr(\"text-anchor\", \"middle\")\n .style(\"fill\", color(inputValues.brightness))\n .style(\"font-size\", inputValues.fontSize)\n .style(\"alignment-baseline\", \"central\")\n .text(`${inputValues.text}`);\n\n // And return the values for everyone to see\n return inputValues;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md`## The actual code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"function multiInput(inputs, config) {\n const wrapper = html`

`;\n\n const input = html`

`;\n wrapper.append(input);\n\n if (config.outputId) {\n const output = html`

`;\n wrapper.append(output);\n }\n\n for (var prop in inputs) input.append(inputs[prop]);\n\n var get_values = function() {\n var value = {};\n for (var prop in inputs)\n if (!prop.includes(\"ignore_\")) value[prop] = inputs[prop].value;\n return (wrapper.value = value);\n };\n\n wrapper.value = get_values();\n wrapper.oninput = get_values;\n\n return wrapper;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"