2e:null 2f:["$","title",null,{"children":"Input wrapper | Ian Lyttle | Observable"}] 34:[] 32:{"id":"2b285e35148f94b3","slug":"input-wrapper","title":"Input wrapper","thumbnail":"5869cb370b845da6f66f7a7b4beb6153072c49cb7872b8e36f9af5211c12fd36","access_level":"public","create_time":"$D2022-04-22T18:07:17.895Z","update_time":"$D2022-04-23T13:04:39.261Z","view_time":null,"first_public_time":"$D2022-04-23T00:02:42.398Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":"starter_2024"},"version":90,"publish_version":90,"role":null,"authored":false,"authors":[{"type":"individual","id":"522327b52a854639","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":null}],"members":[{"type":"individual","id":"522327b52a854639","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Input wrapper","cells":[{"id":0,"value":"# Input wrapper\n\nAmong Observable's inputs is [`Inputs.form()`](https://observablehq.com/@observablehq/input-form), a way to combine the views and values of multiple inputs. \n\nAn `Inputs.form()` lets you combine inputs as either an array or an object.\nYou can provide a `template` option, a function that, given an input, returns the input wrapped in HTML provided by the `template`.\n\nThe goal here is to implement that interface for a single input:\n\n- `wrapInput()`, function that takes an input, returns an input wrapped in a template\n- `makeTemplateDetails()`, makes a template function that uses a [`

` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"viewof clicks = wrapInput(Inputs.button(\"OK\", { label: \"Click me\" }), {\n template: makeTemplateDetails({ label: \"Hidden button\" })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"clicks","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"To use in your notebooks:\n\n```js\nimport { wrapInput, makeTemplateDetails } from \"@ijlyttle/input-wrapper\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"## Functions\n\nThe `wrapInput()` function is the main engine; it has parameters:\n\n- `input`: an Observable input, or something like it\n- `options`: object, may contain elements:\n - `template`: a function that takes an `input` and returns the `input` wrapped in some HTML; default is to wrap in a `

`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"// Input, Object -> Input\nfunction wrapInput(input, { template = template } = {}) {\n // heavily inspired by: https://github.com/observablehq/inputs/blob/main/src/form.js\n let value = input.value;\n\n return Object.defineProperty(template(input), \"value\", {\n get() {\n const v = input.value;\n if (!Object.is(v, value)) {\n value = v;\n }\n\n return input.value;\n },\n set(v) {\n input.value = v;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"`makeTemplateDetails()` makes a template function that uses a [`

` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details); it has parameters:\n\n- `options`: object, may contain elements:\n - `label`: label contents, default `\"Input\"`\n - `open`: boolean indicating if details should be initialized open, default `false`\n - `divStyle`: style attribute for enclosing `

`, default `\"\"`\n - `summaryClass`: class attribute for the `

` element, default is to apply \"Observable\" style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"// Object -> (Input -> HTML)\nfunction makeTemplateDetails({\n label = \"Input\",\n open = false,\n divOuterStyle = \"margin-bottom:5px;\",\n divInnerStyle = \"margin-top:5px\",\n summaryClass = \"oi-ec050e\"\n} = {}) {\n label = label || \"\";\n return (input) =>\n html`

\n \n

\n ${label}\n

${input}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"### Internal functions\n\nThe `template()` function is a default for `wrapInput()`; it wraps `input` in a `

`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"// Input -> Input\nfunction template(input) {\n return html`

${input}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"