2f:T499,function checkbox(object, initialize = true, width = 300) { const checkbox = html`` const check = checkbox.getElementsByTagName("path")[0]; checkbox.value = initialize; // typeof initialize == 'undefined' ? true : initialize; check.style.visibility = checkbox.value ? 'visible' : 'hidden'; checkbox.onclick = () => { checkbox.value = !checkbox.value; check.style.visibility = checkbox.value ? 'visible' : 'hidden'; checkbox.dispatchEvent(new CustomEvent("input")); }; return checkbox; }30:[] 2d:{"title":"SVG Checkbox","cells":[{"id":0,"value":"md`# SVG Checkbox\n\nThis notebook builds from Mike Bostock's [Form Input](/@mbostock/form-input) and turns his reactive SVG label into a reusable and customizable checkbox. To use it as is:\n\n\\`\\`\\`js\nimport {checkbox} from \"@pbogden/svg-checkbox\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof object = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"md`### The label\n\nThe form function returns a reactive reference that's used in this label.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"html`\n ${Object.assign(svg``, {\n textContent: object.message\n })}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"md`### The checkbox`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"viewof checkbox1 = checkbox({label: object.message, fill: object.fill, size: object.size})","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"viewof checkbox2 = checkbox({label: object.message2, fill: object.fill, size: object.size}, false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"viewof checkbox3 = checkbox({label: \"Here's the API.\", \n fill: `hsl(${object.hue},100%,50%)`, \n size: 24}, \n true, // initial value, checked == true\n width / 2) // width","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"[checkbox1, checkbox2, checkbox3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`### References\n\n* [SVGLength](https://developer.mozilla.org/en-US/docs/Web/API/SVGLength) -- MDN\n * Nice example shows how to inspect an SVG element\n* [Coordinate systems](https://www.w3.org/TR/SVG/coords.html#Units) -- W3 docs\n * If the width or height presentation attributes on the outermost svg element are in user units (i.e., no unit identifier has been provided), then the value is assumed to be equivalent to the same number of \"px\" units.\n* [CDATA](https://developer.mozilla.org/en-US/docs/Web/API/CDATASection) -- MDN\n * The SVGLength example uses CDATA to inspect the SVG with JavaScript`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}