30:T988,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()), onSave: c => setValue(c.toRGBA().toString()), comparison: false, showAlways: false, components: { preview: true, opacity: false, hue: true, interaction: { // hex: true, // hex option (hexadecimal representation of the rgba value) // rgba: true, // rgba option (red green blue and alpha) // hsla: true, // hsla option (hue saturation lightness and alpha) // hsva: true, // hsva option (hue saturation value and alpha) // cmyk: true, // cmyk option (cyan mangenta yellow key ) // input: true, // input / output element // clear: true, // Button which provides the ability to select no color, save: true // Save button }, } }); }; // 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; }31:[{"id":"5be6e297cc3acb9a322ab5e3ccf93bad9d65d94f14e177a199d205fa6ceb8655d0091fd8432b6e864144543584105f615542a2be7e28a1fd6c682e4876faf28a","href":"https://static.observableusercontent.com/files/5be6e297cc3acb9a322ab5e3ccf93bad9d65d94f14e177a199d205fa6ceb8655d0091fd8432b6e864144543584105f615542a2be7e28a1fd6c682e4876faf28a","name":"pickr-widget-0.2.0.min.js","type":"application/javascript","lastModified":1639583305918.536,"size":24220},{"id":"05b991b39e48c683b57a1765e7039bb7ddcec0739663582970516388c8495ee1f78a54283ec6d138647862f4c748ef9ebb989da7efe44da0d50f6f1523902d34","href":"https://static.observableusercontent.com/files/05b991b39e48c683b57a1765e7039bb7ddcec0739663582970516388c8495ee1f78a54283ec6d138647862f4c748ef9ebb989da7efe44da0d50f6f1523902d34","name":"tinycolor2-0.4.1.js","type":"application/javascript","lastModified":1639583354265.422,"size":36698}] 2e:{"title":"Color Picker","cells":[{"id":0,"value":"md`# Color Picker \n\nThis notebooks stores pickr-widget and tinycolor as file attachments for increased reliability.\n\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"},{"id":249,"value":"md`\n\\`\\`\\`js\nimport {colorPicker} from \"@shaunlebron/color-picker\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"d3.select('#pickr').empty()","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"viewof nameExample = colorPicker(\"steelblue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"viewof hexExample = colorPicker(\"#eee\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"viewof rgbExample = colorPicker(\"rgb(219, 44, 44)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"viewof rgbaExample = colorPicker(\"rgba(64, 161, 0, 0.77)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof hslExample = colorPicker(\"hsl(220, 53%, 43%)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"viewof hsvaExample = colorPicker(\"hsva(240, 69%, 66%, 0.4)\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":258,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"styles = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"tinycolor","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"// tinycolor = require(\"tinycolor2@1.4.1\")\n\ntinycolor = require(await FileAttachment(\"tinycolor2-0.4.1.js\").url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"// Pickr = require(\"pickr-widget@0.2.0\")\n// Pickr = require(\"pickr-widget\")\n\n\nPickr = require(await FileAttachment(\"pickr-widget-0.2.0.min.js\").url())","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}