2b:null 2c:["$","title",null,{"children":"Color Picker (with alpha) | Dandelion Mané | Observable"}] 31:T7c8,function colorPicker(defaultValue, format) { // Set desired color format. format = format || tinycolor(defaultValue).getFormat(); // Build container element. const container = html`

${styles}

`; 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: true, opacity: true, hue: true, interaction: { hex: true, rgba: true, hsla: true, hsva: true, cmyk: true, input: true, clear: true, save: false } } }); }; // 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; }32:[] 2f:{"id":"3fda94e2f3c42f8d","slug":"color-picker-with-alpha","title":"Color Picker (with alpha)","thumbnail":"5a16e67df046ab736d046c0d8ebb12b3f25d4545bc8dcca0eba8b5e230df1505","access_level":"public","create_time":"$D2019-10-18T04:10:52.368Z","update_time":"$D2019-10-18T04:17:06.783Z","view_time":null,"first_public_time":"$D2019-10-18T04:12:42.413Z","fork":{"id":"0c800138c487d3e1","slug":"color-picker","title":"Color Picker (with alpha)","owner":{"id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron"}},"stars":2,"starred":false,"owner":{"type":"team","id":"a69215024e86d1f3","login":"decentralion","name":"Dandelion Mané","avatar_url":"https://avatars-next.observableusercontent.com/3cf971d47c5a169db17c4aa1b64802a03047db2aaff78b2c5c3d591435dcad32","tier":"starter_2024"},"version":868,"publish_version":868,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a01498699547be9","login":"decentralion","name":"Dandelion Mané","avatar_url":"https://avatars-next.observableusercontent.com/3cf971d47c5a169db17c4aa1b64802a03047db2aaff78b2c5c3d591435dcad32","tier":null}],"members":[{"type":"individual","id":"8a01498699547be9","login":"decentralion","name":"Dandelion Mané","avatar_url":"https://avatars-next.observableusercontent.com/3cf971d47c5a169db17c4aa1b64802a03047db2aaff78b2c5c3d591435dcad32","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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 \"@decentralion/color-picker-with-alpha\"\n\\`\\`\\`\n\n**Thank you @shaunlebron for setting this up; this is a fork which slightly tweaks the settings for creating color pickers.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"viewof nameExample = colorPicker(\"steelblue\")","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":"$31","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":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"