21:null 22:["$","title",null,{"children":"Color Picker (with alpha) and optional pickrOptions, see Code | Leonel Galán | Observable"}] 27:T712,function colorPicker(defaultValue, format, pickrOptions = {}) { // 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: false, opacity: true, hue: true, }, ...pickrOptions, }); }; // 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; }28:[] 25:{"id":"2f5bc64de12c3563","slug":"color-picker-with-alpha-and-optional-pickroptions-see-code","title":"Color Picker (with alpha) and optional pickrOptions, see Code","thumbnail":"573abf99ef937fa9e2d6e4b3ce89e9269c8262bb031594174d7508b517e59afd","access_level":"public","create_time":"$D2020-02-18T15:41:22.056Z","update_time":"$D2020-02-18T15:45:01.722Z","view_time":null,"first_public_time":"$D2020-02-18T15:44:08.827Z","has_unpublished_edits":null,"fork":{"id":"0c800138c487d3e1","slug":"color-picker","title":"Color Picker (with alpha)","owner":{"id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron"}},"stars":1,"starred":false,"owner":{"type":"team","id":"08803bed5855b191","login":"leonelgalan","name":"Leonel Galán","avatar_url":"https://avatars-next.observableusercontent.com/40c238eeb4b1cd55df10deb2c6c6f6b1c96337f0ee41c76a5d5636bd81f4ae4a","tier":"starter_2024","bio":"I'm a Software Developer. Rails, React and Python enthusiast. Director of Technology at Epifany & Stealz. @d3 learner"},"version":867,"publish_version":867,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9c12cd818087e4b","login":"leonelgalan","name":"Leonel Galán","avatar_url":"https://avatars-next.observableusercontent.com/40c238eeb4b1cd55df10deb2c6c6f6b1c96337f0ee41c76a5d5636bd81f4ae4a","tier":null,"bio":"I'm a Software Developer. Rails, React and Python enthusiast. Director of Technology at Epifany & Stealz. @d3 learner"}],"members":[{"type":"individual","id":"b9c12cd818087e4b","login":"leonelgalan","name":"Leonel Galán","avatar_url":"https://avatars-next.observableusercontent.com/40c238eeb4b1cd55df10deb2c6c6f6b1c96337f0ee41c76a5d5636bd81f4ae4a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color Picker (with alpha) and optional pickrOptions, see Code","cells":[{"id":0,"value":"md`# Color Picker (with alpha) and optional pickrOptions, see **Code**\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`\n\\`\\`\\`js\nimport {colorPicker} from \"@leonelgalan/color-picker-with-alpha-and-optional-pickroptions-see-code\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"viewof nameExample = colorPicker(\"steelblue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"viewof hexExample = colorPicker(\"#eee\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"styles = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"tinycolor = require(\"tinycolor2@1.4.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W28","stdlib":"1"}} 26:"$25:body"