2a:null 2b:["$","title",null,{"children":"colorBullet | linard-y | Observable"}] 31:Tebe,colorBullet = (config = {}) => { let { txtLbl = "", format='HEX', defaultColor='#42445A', radius=20, showValueAsString=true, disabled=false } = config; const bullet_container = html``; const defs = d3.select(bullet_container).append("defs"); const hatch_pattern = defs .append("pattern") .attr("id", "hatch") .attr("width", 8) .attr("height", 8) .attr("patternTransform", `rotate(45)`) .attr("patternUnits", "userSpaceOnUse"); //used to make the pattern independent of location of circle hatch_pattern .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', 2*radius) .attr('height', 2*radius) .style('fill', defaultColor); hatch_pattern .append("rect") .attr("width", 2) .attr("height", 8) .attr('opacity', 0.85) .style("fill", '#000'); const output = html`${defaultColor}`; const bullet = d3.select(bullet_container).selectAll(".bullet") .data(d3.range(1)) .enter() .append("path") .attr("class", "bullet") .attr("d", d3.symbol().type(d3.symbolCircle).size(radius**2)()) .attr("fill", disabled?"url(#hatch)":defaultColor) .on("click", () => { bullet_container.dispatchEvent(new Event('input', { bubbles: true })); }); const form = html` `; const pickr = new Pickr({ el: form, useAsButton: true, default: defaultColor, theme: 'classic', defaultRepresentation: format, components: { preview: true, opacity: true, hue: true, interaction: { hex: false, rgba: false, hsva: false, input: true, save: true } } }) .on('init', pickr => { form.value = pickr.getSelectedColor(); form.dispatchEvent(new Event('input', { bubbles: true })); }) .on('save', color => { form.value = color; pickr.hide(); form.dispatchEvent(new Event('input', { bubbles: true })); }) return Object.defineProperty(form, "value", { get: () => output.innerHTML, set: (v) => { switch (format) { case 'HSVA': output.innerHTML = v.toHSVA().toString(0); break; case 'HSLA': output.innerHTML = v.toHSLA().toString(0); break; case 'CMYK': output.innerHTML = v.toCMYK().toString(0); break; case 'RGBA': output.innerHTML = v.toRGBA().toString(0); break; default: output.innerHTML = v.toHEXA(); } bullet.attr("fill", disabled?"url(#hatch)":v.toHEXA()); } }); }32:[] 2e:{"id":"3f8432ed5fd95d14","slug":"colorbullet","title":"colorBullet","thumbnail":"49c1a2900de7249d78a4f9ece845392698045df38b3ad6218566d02aacca8fb6","access_level":"public","create_time":"$D2022-01-31T12:46:37.399Z","update_time":"$D2024-02-25T21:49:20.374Z","view_time":null,"first_public_time":"$D2022-01-31T18:06:42.112Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":238,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"colorBullet","cells":[{"id":0,"value":"# colorBullet\n_a circle-shape color picker_","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"md`\n\\`\\`\\`js\nimport {colorBullet} from \"@linard-y/colorbullet\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`${colorBullet()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof color = colorBullet({txtLbl:\"My favourite color is \", format:'RGBA', defaultColor:'#C37927'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"color","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof color2 = colorBullet({txtLbl:\"Is it a balloon ? \", format:'CMYK', defaultColor:'#0A9505', radius:40, showValueAsString:false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"color2","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"viewof color_dis = colorBullet({defaultColor:'#888', radius:40, showValueAsString:false, disabled:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"Pickr = require(\"https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"