2d:null 2e:["$","title",null,{"children":"Controls | Colin Casey | Observable"}] 33:[] 31:{"id":"d6d5c4508553c517","slug":"controls","title":"Controls","thumbnail":"9b0834afc33ea3d3d36c56b54da7211b701deb16324b986b79bd6d48424a055c","access_level":"public","create_time":"$D2019-01-06T01:52:40.738Z","update_time":"$D2019-01-08T03:27:01.935Z","view_time":null,"first_public_time":"$D2019-01-06T02:55:23.408Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5e8b7d21ee76b4f8","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":"starter_2024"},"version":75,"publish_version":75,"role":null,"authored":false,"authors":[{"type":"individual","id":"e498c9db30bfdcca","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":null}],"members":[{"type":"individual","id":"e498c9db30bfdcca","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Controls","cells":[{"id":0,"value":"md`# Controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"options","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof options = createControls({\n id: 'toggleControl',\n type: 'toggle',\n defaultValue: true\n}, {\n id: 'selectControl',\n type: 'select',\n selections: [\n { value: 'firstValue' },\n { value: 'secondValue', title: 'Second Value' }\n ],\n defaultValue: 'firstValue'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function createControls (...configs) {\n const form = html``\n \n configs.forEach(config => {\n const createControl = createControlByType[config.type] \n const control = createControl(config)\n form.append(control)\n })\n \n form.oninput = () => {\n form.value = _.reduce(form.elements, (memo, input) => {\n memo[input.name] = input.type === 'checkbox' ? input.checked : input.value\n return memo\n }, {})\n }\n form.oninput()\n \n return form\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function createToggle ({ id, title, defaultValue = false}) {\n title = title || id\n const toggle = html`\n

\n ${title}\n \n

\n `\n return toggle\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function createSelect ({ id, title, selections = [], defaultValue }) {\n title = title || id\n const select = html`\n

\n ${title}\n \n

\n `\n return select\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"function createSelection ({ value, title }) {\n title = title || value\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"createControlByType = ({\n toggle: createToggle,\n select: createSelect\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"