2e:null 2f:["$","title",null,{"children":"Color Picker (with alpha) | Protomaps | Observable"}] 34:T719,function colorPicker(defaultValue, options = {}) { // Set desired color format. let format = options.format || tinycolor(defaultValue).getFormat(); // Build container element. const container = html`

${styles}

${options.description || ""}

`; const picker = container.querySelector("#picker"); const label = container.querySelector("#label"); // Set color value. const setValue = colorStr => { // Create color object from string. const color = tinycolor(colorStr); // Hex doesn't support alpha (but will in CSS4), so force RGB if alpha is < 1. const actualFormat = tinycolor(color.toString(format)).getFormat(); const forceRGB = actualFormat === "hex" && color.getAlpha() < 1; // Create desired output color string and display it. const finalColorStr = color.toString(forceRGB ? "rgb" : format); label.innerHTML = finalColorStr; // Notify Observable about change in value. container.value = finalColorStr; container.dispatchEvent(new window.Event("input")); }; setValue(defaultValue); // Setup Pickr. const setupPickr = () => { new Pickr({ el: picker, default: tinycolor(defaultValue).toString("rgb"), onChange: c => setValue(c.toRGBA().toString()), comparison: false, components: { preview: false, opacity: true, hue: true } }); }; // For some reason, Pickr doesn't want to set the default color unless the element is mounted, // so we wait for it to mount here. const interval = setInterval(() => { if (document.body.contains(container)) { clearInterval(interval); setupPickr(); } }, 100); return container; }35:[] 32:{"id":"54f784428c76256b","slug":"color-picker","title":"Color Picker (with alpha)","thumbnail":"1c5501c1600221c20de1cc44be339835e16db5177868385bfb231e042e26667a","access_level":"public","create_time":"$D2021-08-09T23:56:08.528Z","update_time":"$D2021-08-09T23:58:34.198Z","view_time":null,"first_public_time":"$D2021-08-09T23:58:47.158Z","has_unpublished_edits":null,"fork":{"id":"0c800138c487d3e1","slug":"color-picker","title":"Color Picker (with alpha)","owner":{"id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9155771b236ecacc","login":"protomaps","name":"Protomaps","avatar_url":"https://avatars-next.observableusercontent.com/85f49610348c4ff58a6b1d4b11a7f4f711e6ce28e2e5450f869a6db2bd97d966","tier":"starter_2024"},"version":868,"publish_version":868,"role":null,"authored":false,"authors":[{"type":"individual","id":"795280345015fde4","login":"protomaps","name":"Protomaps","avatar_url":"https://avatars-next.observableusercontent.com/85f49610348c4ff58a6b1d4b11a7f4f711e6ce28e2e5450f869a6db2bd97d966","tier":null}],"members":[{"type":"individual","id":"795280345015fde4","login":"protomaps","name":"Protomaps","avatar_url":"https://avatars-next.observableusercontent.com/85f49610348c4ff58a6b1d4b11a7f4f711e6ce28e2e5450f869a6db2bd97d966","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Color Picker (with alpha)","cells":[{"id":0,"value":"md`# Color Picker (with alpha)\n\\`\\` doesn't support [alpha](https://github.com/w3c/html/issues/1422), so here's [Pickr](https://github.com/Simonwep/pickr) trimmed down for Observable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`\n\\`\\`\\`js\nimport {colorPicker} from \"@shaunlebron/color-picker\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"viewof nameExample = colorPicker(\"steelblue\",{description:\"Example Text\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"viewof hexExample = colorPicker(\"#eee\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"viewof rgbExample = colorPicker(\"rgb(219, 44, 44)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"viewof rgbaExample = colorPicker(\"rgba(64, 161, 0, 0.77)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof hslExample = colorPicker(\"hsl(220, 53%, 43%)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"viewof hsvaExample = colorPicker(\"hsva(240, 69%, 66%, 0.4)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"md`## Formatting\n- Color string is formatted according to the initial value (first arg).\n- Optionally pass an explicit [TinyColor format string](https://github.com/bgrins/TinyColor#tostring) as second arg.\n - e.g. \\`\"hex\", \"rgb\", \"hsl\", \"hsv\", \"name\"\\`\n\n## Known issues\n- Pickr seems to be lossy\n - i.e. moving the knobs to original position may not return original value\n- Pickr modal is occluded by expanded cells.\n- Trying to adjust Pickr modal size (width,height,padding) throws off the knob positions, so we're stuck with the default.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"styles = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"tinycolor = require(\"tinycolor2@1.4.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Pickr = require(\"pickr-widget@0.2.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"