diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5172429 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index b335ae5..3874ac2 100644 --- a/README.md +++ b/README.md @@ -27,11 +27,11 @@ npm i random-color-pearl ``` ## Or Import - + ```js -import('random-color-pearl'); +import("random-color-pearl"); ``` - + Then simply use the web component as: ```html @@ -52,11 +52,14 @@ Then simply use the web component as: | `height` | Sets the height of the SVG element | `92px` | | `username` | If provided, hashes the username to generate colors | `undefined` | | `colors` | If provided, fills the svg with the given colors | `undefined` | +| `title` | Adds an accessible title to the svg | `avatar` | ## Set the Color Values ```html - + ``` > ⚠️ Note: this will not set the color values if `username` is provided already with a truthy value. As basic purpose of profile pic / avatar is to set unique pearls using `username` attribute, it has preference over the `colors` string. @@ -64,11 +67,11 @@ Then simply use the web component as: ## Get the Color values ```js - document.addEventListener("DOMContentLoaded", () => { - const svg = document.getElementById("pearl-svg"); - if (svg instanceof RandomColorSvg) { - svg.getColors(); // Use this as you want! - } +document.addEventListener("DOMContentLoaded", () => { + const svg = document.getElementById("pearl-svg"); + if (svg instanceof RandomColorSvg) { + svg.getColors(); // Use this as you want! + } }); ``` diff --git a/index.html b/index.html index 23eafe9..e1aa589 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + + avatar @@ -39,13 +40,16 @@ class RandomColorSvg extends HTMLElement { this.shadowRoot.appendChild(template.content.cloneNode(true)); } static get observedAttributes() { - return ["width", "height", "username", "colors"]; + return ["width", "height", "username", "colors", "title"]; } attributeChangedCallback(name, oldValue, newValue) { if (name === "width" || name === "height") { this.updateSize(); } + if (name === "title") { + this.updateTitle(); + } if (name === "username" && oldValue !== newValue) { this.generateColors(); } @@ -54,6 +58,12 @@ class RandomColorSvg extends HTMLElement { } } + updateTitle() { + const svg = this.shadowRoot.querySelector("svg"); + const title = svg.querySelector("title"); + title.textContent = this.getAttribute("title"); + } + updateSize() { const svg = this.shadowRoot.querySelector("svg"); svg.setAttribute("width", this.getAttribute("width") || "92"); @@ -67,13 +77,12 @@ class RandomColorSvg extends HTMLElement { const colors = this.getAttribute("colors"); this.updateSize(); + this.updateTitle(); if (username) { this.generateColors(); - } - else if (colors) { + } else if (colors) { this.generateColorsFromArray(colors); - } - else { + } else { const color1 = `#${((Math.random() * 0xffffff) << 0) .toString(16) .padStart(6, "0")}`; @@ -120,7 +129,10 @@ class RandomColorSvg extends HTMLElement { hash = (hash << 5) - hash + char; hash |= 0; } - const baseColors = [this.generateBaseColor(hash), this.generateBaseColor(hash + 10)]; + const baseColors = [ + this.generateBaseColor(hash), + this.generateBaseColor(hash + 10), + ]; let hexString = ""; const color1 = baseColors[0]; const color2 = baseColors[1]; @@ -135,7 +147,7 @@ class RandomColorSvg extends HTMLElement { const letters = "0123456789ABCDEF"; let color = "#"; for (let i = 0; i < 6; i++) { - const value = (hashHex >> (i * 4)) & 0xF; + const value = (hashHex >> (i * 4)) & 0xf; color += letters[value]; } return color; @@ -195,7 +207,7 @@ class RandomColorSvg extends HTMLElement { getColors() { const svgElement = this.shadowRoot.querySelector("svg"); const allPath = svgElement.querySelectorAll("path"); - const colors = Array.from(allPath).map(path => path.getAttribute("fill")); + const colors = Array.from(allPath).map((path) => path.getAttribute("fill")); return colors; } } diff --git a/src/randomColorSvg.min.js b/src/randomColorSvg.min.js index c15181d..d2fa0f1 100644 --- a/src/randomColorSvg.min.js +++ b/src/randomColorSvg.min.js @@ -6,6 +6,7 @@ const template=document.createElement("template");template.innerHTML=` } + avatar @@ -29,4 +30,4 @@ const template=document.createElement("template");template.innerHTML=` - `;class RandomColorSvg extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(template.content.cloneNode(!0))}static get observedAttributes(){return["width","height","username","colors"]}attributeChangedCallback(a,b,c){("width"===a||"height"===a)&&this.updateSize(),"username"===a&&b!==c&&this.generateColors(),"colors"===a&&this.generateColorsFromArray(c)}updateSize(){const a=this.shadowRoot.querySelector("svg");a.setAttribute("width",this.getAttribute("width")||"92"),a.setAttribute("height",this.getAttribute("height")||"92")}connectedCallback(){const a=this.shadowRoot.querySelector("svg"),b=a.querySelectorAll("path"),c=this.getAttribute("username"),d=this.getAttribute("colors");if(this.updateSize(),c)this.generateColors();else if(d)this.generateColorsFromArray(d);else{const a=`#${(16777215*Math.random()<<0).toString(16).padStart(6,"0")}`,c=`#${(16777215*Math.random()<<0).toString(16).padStart(6,"0")}`;for(const d of b){const b=this.randomColorBetween(a,c);d.setAttribute("fill",b)}}}generateColors(){const a=this.getAttribute("username");if(a){const b=this.hashTo90Hex(a),c=this.splitTo15Colors(b),d=this.shadowRoot.querySelector("svg"),e=d.querySelectorAll("path");e.forEach((a,b)=>{const d=c[b%c.length];a.setAttribute("fill",d)})}}generateColorsFromArray(a){const b=this.shadowRoot.querySelector("svg"),c=b.querySelectorAll("path"),d=a.split(",");c.forEach((a,b)=>{a.setAttribute("fill",d[b%d.length])})}hashTo90Hex(a){let b=0;for(let c=0;cc;c++){const d=15&a>>4*c;b+="0123456789ABCDEF"[d]}return b}generateShades(a,b){const c=[],d=this.hexToRgb(a),e=this.hexToRgb(b);for(let f=1;15>=f;f++){const a=f/15,h=Math.round(d[0]*(1-a)+e[0]*a),i=Math.round(d[1]*(1-a)+e[1]*a),g=Math.round(d[2]*(1-a)+e[2]*a);c.push(this.rgbToHex(h,i,g).slice(1))}return c.join("")}splitTo15Colors(a){const b=[];for(let c=0;90>c;c+=6)b.push(`#${a.slice(c,c+6)}`);return b}hexToRgb(a){let b=parseInt(a.slice(1),16);return[255&b>>16,255&b>>8,255&b]}rgbToHex(a,c,d){return"#"+(16777216+(a<<16)+(c<<8)+d).toString(16).slice(1).toUpperCase()}randomColorBetween(a,c){let d=this.hexToRgb(a),e=this.hexToRgb(c),f=Math.floor(Math.random()*(e[0]-d[0]+1))+d[0],h=Math.floor(Math.random()*(e[1]-d[1]+1))+d[1],g=Math.floor(Math.random()*(e[2]-d[2]+1))+d[2];return this.rgbToHex(f,h,g)}getColors(){const a=this.shadowRoot.querySelector("svg"),b=a.querySelectorAll("path"),c=Array.from(b).map(a=>a.getAttribute("fill"));return c}}customElements.define("random-color-svg",RandomColorSvg); \ No newline at end of file + `;class RandomColorSvg extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(template.content.cloneNode(!0))}static get observedAttributes(){return["width","height","username","colors","title"]}attributeChangedCallback(_,$,t){("width"===_||"height"===_)&&this.updateSize(),"title"===_&&this.updateTitle(),"username"===_&&$!==t&&this.generateColors(),"colors"===_&&this.generateColorsFromArray(t)}updateTitle(){let _=this.shadowRoot.querySelector("svg"),$=_.querySelector("title");$.textContent=this.getAttribute("title")}updateSize(){let _=this.shadowRoot.querySelector("svg");_.setAttribute("width",this.getAttribute("width")||"92"),_.setAttribute("height",this.getAttribute("height")||"92")}connectedCallback(){let _=this.shadowRoot.querySelector("svg"),$=_.querySelectorAll("path"),t=this.getAttribute("username"),e=this.getAttribute("colors");if(this.updateSize(),this.updateTitle(),t)this.generateColors();else if(e)this.generateColorsFromArray(e);else{let l=`#${(16777215*Math.random()<<0).toString(16).padStart(6,"0")}`,r=`#${(16777215*Math.random()<<0).toString(16).padStart(6,"0")}`;for(let o of $){let i=this.randomColorBetween(l,r);o.setAttribute("fill",i)}}}generateColors(){let _=this.getAttribute("username");if(_){let $=this.hashTo90Hex(_),t=this.splitTo15Colors($),e=this.shadowRoot.querySelector("svg"),l=e.querySelectorAll("path");l.forEach((_,$)=>{let e=t[$%t.length];_.setAttribute("fill",e)})}}generateColorsFromArray(_){let $=this.shadowRoot.querySelector("svg"),t=$.querySelectorAll("path"),e=_.split(",");t.forEach((_,$)=>{_.setAttribute("fill",e[$%e.length])})}hashTo90Hex(_){let $=0;for(let t=0;t<_.length;t++){let e=_.charCodeAt(t);$=($<<5)-$+e,$|=0}let l=[this.generateBaseColor($),this.generateBaseColor($+10),],r="",o=l[0],i=l[1];for(let s=0;s>4*t&15;$+="0123456789ABCDEF"[e]}return $}generateShades(_,$){let t=[],e=this.hexToRgb(_),l=this.hexToRgb($);for(let r=1;r<=15;r++){let o=r/15,i=Math.round(e[0]*(1-o)+l[0]*o),s=Math.round(e[1]*(1-o)+l[1]*o),C=Math.round(e[2]*(1-o)+l[2]*o);t.push(this.rgbToHex(i,s,C).slice(1))}return t.join("")}splitTo15Colors(_){let $=[];for(let t=0;t<90;t+=6)$.push(`#${_.slice(t,t+6)}`);return $}hexToRgb(_){let $=parseInt(_.slice(1),16);return[$>>16&255,$>>8&255,255&$]}rgbToHex(_,$,t){return"#"+(16777216+(_<<16)+($<<8)+t).toString(16).slice(1).toUpperCase()}randomColorBetween(_,$){let t=this.hexToRgb(_),e=this.hexToRgb($),l=Math.floor(Math.random()*(e[0]-t[0]+1))+t[0],r=Math.floor(Math.random()*(e[1]-t[1]+1))+t[1],o=Math.floor(Math.random()*(e[2]-t[2]+1))+t[2];return this.rgbToHex(l,r,o)}getColors(){let _=this.shadowRoot.querySelector("svg"),$=_.querySelectorAll("path"),t=Array.from($).map(_=>_.getAttribute("fill"));return t}}customElements.define("random-color-svg",RandomColorSvg); \ No newline at end of file