30:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }31:[] 2e:{"title":"Cas9","cells":[{"id":159,"value":"md`# Cas9`","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof moleculeCode = text({placeholder: \"5F9R\", description: \"Change PDB code above\",value:\"5F9R\",submit:\"Load\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewport = DOM.element(\"div\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewport.id=\"viewport\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewport.style.height=\"400px\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"stage.setSpin(true);","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"stage.loadFile(\"rcsb://\"+moleculeCode).then(d=>{\n d.addRepresentation(\"spacefill\",{color: \"moleculetype\"})\n stage.autoView();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"stage = new NGL.Stage( \"viewport\" ,{ backgroundColor: \"white\" });","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"NGL = require(\"https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.37/dist/ngl.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"addLegend(viewport,\"Source: PDB 5F9R - Cas9\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"function addLegend(div,legendText){\n let legend=DOM.element(\"div\")\n legend.innerText=legendText;\n legend.style=\"font-family:sans-serif;position:absolute;z-index:20;bottom:0;background-color:white;padding:5px;border:1px solid #141414\";\n div.append(legend)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"function text(config = {}) {\n const {\n value,\n title,\n description,\n autocomplete = \"off\",\n maxlength,\n minlength,\n pattern,\n placeholder,\n size,\n submit\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"text\",\n title,\n description,\n submit,\n attributes: {\n value,\n autocomplete,\n maxlength,\n minlength,\n pattern,\n placeholder,\n size\n }\n });\n form.output.remove();\n form.input.style.fontSize = \"1em\";\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"d3format=d3","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}