2d:null 2e:["$","title",null,{"children":"Make Input | bitcraft lab | Observable"}] 33:[] 31:{"id":"7f1c5d5b359c9670","slug":"make-input","title":"Make Input","thumbnail":"e5a43be7246d642aee64da419e134158d72664f743cff830ee880d4683458342","access_level":"public","create_time":"$D2019-07-22T21:06:02.018Z","update_time":"$D2019-07-26T19:17:51.228Z","view_time":null,"first_public_time":"$D2019-07-22T21:38:42.675Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0cb69ecc40ac5ee3","login":"bitcraftlab","name":"bitcraft lab","avatar_url":"https://avatars-next.observableusercontent.com/920b55c55412823e1d3a3c4de2fc64a2dcd69d9bf815d431699e4d243c24d9aa","tier":"starter_2024"},"version":267,"publish_version":267,"role":null,"authored":false,"authors":[{"type":"individual","id":"d2b759f455e26bb3","login":"bitcraftlab","name":"bitcraft lab","avatar_url":"https://avatars-next.observableusercontent.com/920b55c55412823e1d3a3c4de2fc64a2dcd69d9bf815d431699e4d243c24d9aa","tier":null}],"members":[{"type":"individual","id":"d2b759f455e26bb3","login":"bitcraftlab","name":"bitcraft lab","avatar_url":"https://avatars-next.observableusercontent.com/920b55c55412823e1d3a3c4de2fc64a2dcd69d9bf815d431699e4d243c24d9aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Make Input","cells":[{"id":0,"value":"md`\n# Make Input\n\n*Small collection of views to quickly create inputs from data*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`### Make Choice\nChose objects from a key value dictionary\n\n- keys are displayed as choices\n- values can be anything (such as functions)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function makeChoice(label = \"\", choices = {}, selected = null, callback = () => {}) {\n \n const choice = selected || Object.keys(choices)[0];\n let s = `

${label}: ` : ``;\n let e = html`

${label}:

`;\n const input = e.querySelector('input');\n e.value = input.checked = checked;\n input.addEventListener('change', (evt) => {\n e.value = input.checked;\n e.dispatchEvent(new CustomEvent(\"input\"));\n evt.preventDefault();\n evt.stopPropagation();\n return false;\n });\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`### Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof reverse = makeToggle('reverse', true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"(s => reverse ? s.split('').reverse().join('') : s)(\"A simple example for a boolean toggle in action\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"