/
rhsl.min.js
1 lines (1 loc) · 14.1 KB
/
rhsl.min.js
1
"use strict";var rhslCurrentElement=function(){var e=!1;return function(t){if(!t&&!1!==t)return e;t||(t=!1),e=t}}();function rhslFirstFunction(e){var t=document.querySelectorAll("[rhslcolor]");if(e)for(var r=0;r<t.length;r++)rhslAddRemove(t[r],!1,!0);for(r=0;r<t.length;r++)t[r].value?rhslAddRemove(t[r],t[r].value):rhslAddRemove(t[r])}function rhslAddRemove(e,t,r){try{if(!e)throw"No element was provided.";if("BUTTON"!==e.tagName&&"INPUT"!==e.tagName)throw"Element is not <button> or <input>.";if("INPUT"===e.tagName&&e.type&&"text"!==e.type)throw"Input type must be empty or text."}catch(e){return void console.error("RHSL: Error while trying to add/remove an EventListener: "+e)}r?(e.removeEventListener("click",rhslToggle,!1),e.removeEventListener("input",rhslOnInput,!1)):(t||(console.warn("RHSL: Color not provided. Using #FFFFFF."),t="#FFFFFF"),e.addEventListener("click",rhslToggle,!1),e.addEventListener("input",rhslOnInput,!1),rhslFineChange(e,rhslColorConverter(t,!0)));"refresh"===r&&rhslAddRemove(e,t)}function rhslOnInput(e){rhslToggle(e,!1,!0);var t=rhslColorConverter(e.target.value,!0,!0);t[0]=Math.round(t[0]),t[1]=Math.round(t[1]),t[2]=Math.round(t[2]),rhslFineChange(e.target,t,!1,!0)}function rhslToggle(e,t,r){if(document.getElementById("rhslcolorpickercontainer"))document.body.removeChild(document.getElementById("rhslcolorpickercontainer")),document.body.removeEventListener("mousedown",rhslHideColorPicker,!0),rhslCurrentElement(!1);else{t||(t=e.target);var l,o,n,s,i,h=t.getAttribute("rhslcolor");if(h){h=rhslProperties(h);for(var a=0;a<h.length;a++)h[a][0].match(/^size$/)?l=h[a][1]:h[a][0].match(/^align$/)?o=h[a][1]:h[a][0].match(/^theme$/)?u=h[a][1]:h[a][0].match(/^hsltype$/)?n=h[a][1]:h[a][0].match(/^padding$/)?s=h[a][1]:h[a][0].match(/^inputs$/)&&(i=h[a][1])}if(l&&Array.isArray(l)?((isNaN(l[0])||l[0]<75)&&(l[0]=180),(isNaN(l[1])||l[1]<75)&&(l[1]=150)):l=[180,150],(!s||s<0)&&(s=7),o||(o="left"),n||(n="normal"),"dark"===u)u=["border-color: #555; background: #333;","border-color: #000;","border-color: #000; background: #111; color: #FFF;"];else if(Array.isArray(u)){for(a=0;a<4;a++){if(!u[a])if(2===a)u[a]="#000";else{if(3!==a){u[a]="transparent";continue}u[a]="#FFF"}u[a]=rhslColorConverter(u[a]),u[a]="rgb("+u[a][0]+", "+u[a][1]+", "+u[a][2]+")"}u=["border-color: "+u[0]+"; background: "+u[1]+";","border-color: "+u[2]+";","border-color: "+u[2]+"; background: "+u[3]+"; color:"+rhslContrast(rhslColorConverter(u[3]))+";"]}else var u=["border-color: #AAA; background: #DDD;","border-color: #555;","border-color: #555; background: #EEE; color: #000;"];if("luv"===n&&window.hsluv){var c=rhslColorConverter(t.value);c=window.hsluv.rgbToHsluv([c[0]/255,c[1]/255,c[2]/255]);var d="linear-gradient(90deg, #EA0064, #D34800, #AC6700, #957200, #817900, #6A8000, #3F8700, #00894B, #00876A, #00867C, #00848B, #00829C, #007EB7, #2A6CFF, #A23EFF, #CD00E2, #D900BC, #E20097, #EA0064)",g="linear-gradient(rgba(119, 119, 119, 0), rgba(119, 119, 119, 1))",m="linear-gradient(#FFFFFF, "+window.hsluv.hsluvToHex([c[0],c[1],90])+", "+window.hsluv.hsluvToHex([c[0],c[1],80])+", "+window.hsluv.hsluvToHex([c[0],c[1],70])+", "+window.hsluv.hsluvToHex([c[0],c[1],60])+", "+window.hsluv.hsluvToHex([c[0],c[1],50])+", "+window.hsluv.hsluvToHex([c[0],c[1],40])+", "+window.hsluv.hsluvToHex([c[0],c[1],30])+", "+window.hsluv.hsluvToHex([c[0],c[1],20])+", "+window.hsluv.hsluvToHex([c[0],c[1],10])+", #000000)"}else{c=rhslColorConverter(t.value,!0),Math.round(c[0]),Math.round(c[1]),Math.round(c[2]);var v=Math.round(c[0])+", "+Math.round(c[1])+"%";d="linear-gradient(90deg, hsl(0, 100%, 50%), hsl(20, 100%, 50%), hsl(40, 100%, 50%), hsl(60, 100%, 50%), hsl(80, 100%, 50%), hsl(100, 100%, 50%), hsl(120, 100%, 50%), hsl(140, 100%, 50%), hsl(160, 100%, 50%), hsl(180, 100%, 50%), hsl(200, 100%, 50%), hsl(220, 100%, 50%), hsl(240, 100%, 50%), hsl(260, 100%, 50%), hsl(280, 100%, 50%), hsl(300, 100%, 50%), hsl(320, 100%, 50%), hsl(340, 100%, 50%), hsl(360, 100%, 50%))",g="linear-gradient(hsla(0, 0%, 50%, 0), hsla(0, 0%, 50%, 1))",m="linear-gradient(hsl("+v+", 100%), hsl("+v+", 50%), hsl("+v+", 0%))"}var f=Math.round(c[0]/360*l[0]-10),p=Math.round(l[1]-1-c[1]/100*(l[1]-1)-10),b=Math.round(l[1]-c[2]/100*l[1]-10);if("true"===i){if(l[0]>=140)var A=" justify-content: center;";else A="";i="<style>.rhslcolorinputs input, .rhslcolorinputs button {"+u[2]+'}</style><div class="rhslcolorinputs" style="margin: '+s+++"px; margin-top: 0; width: "+(Number(l[0])+23+Number(s))+"px;"+A+'"><input type="number" class="rhslcolorinput" oninput="rhslColorPicker(this.parentElement.parentElement.children[0], false, true, [this.value,,], true)" min="0" max="360" value="'+Math.round(c[0])+'"><input type="number" class="rhslcolorinput" oninput="rhslColorPicker(this.parentElement.parentElement.children[0], false, true, [,this.value,], true)" min="0" max="100" value="'+Math.round(c[1])+'"><input type="number" class="rhslcolorinput" oninput="rhslColorPicker(this.parentElement.parentElement.children[0], false, true, [,,this.value], true)" min="0" max="100" value="'+Math.round(c[2])+'"><button type="button" onclick="rhslToggle(false, this.parentElement.parentElement);">X</button></div>'}else i="";var y=document.createElement("div");y.id="rhslcolorpickercontainer",y.setAttribute("style",u[0]),y.innerHTML='<div class="rhslcolormousearea" onmousemove="rhslColorPicker(this, event);" onclick="rhslColorPicker(this, event, true);" style="padding: '+s+++'px;"><div class="rhslcolorpicker" style="background: '+d+"; "+u[1]+'"><div style="background: '+g+"; width: "+l[0]+"px; height: "+l[1]+'px;"><img src="data:image/gif;base64,R0lGODlhFAAUAIABAAAAAP///yH5BAEKAAEALAAAAAAUABQAAAImjH8AyJ3rolFS0uouZno/D4aZQkJIiaJNaoqu14Ex3Mo1/c6bbhQAOw==" class="rhslcolorpickerselected" style="top: '+p+"px; left: "+f+'px;"></div></div><div class="rhslcolorpickerside" style="background: '+m+"; "+u[1]+" margin-left: "+s+'px;"><img src="data:image/gif;base64,R0lGODlhFAAUAIABAAAAAP///yH5BAEKAAEALAAAAAAUABQAAAIdjI+py+0Po5yg2ouz3nmG64GUFXLmeXrqyrZuUwAAOw==" class="rhslcolorpickerselected" style="top: '+b+'px; left: -2px;"></div></div>'+i,document.body.appendChild(y),document.body.addEventListener("mousedown",rhslHideColorPicker,!0),rhslCurrentElement(t),rhslAlignElement(y,t,o)}r&&rhslToggle(e,t)}function rhslProperties(e,t){(e=e.split(";")).pop();for(var r=0;r<e.length;r++)if(" "===e[r].charAt(0)&&(e[r]=e[r].substring(1)),e[r]=e[r].split(":")," "===e[r][1].charAt(0)&&(e[r][1]=e[r][1].substring(1)),e[r][1].match(",")){e[r][1]=e[r][1].split(",");for(var l=0;l<e[r][1].length;l++)" "===e[r][1][l].charAt(0)&&(e[r][1][l]=e[r][1][l].substring(1))}if(t)for(r=0;r<e.length;r++)if(e[r][0].match(t)){e=e[r][1];break}return e}function rhslAlignElement(e,t,r,l){var o=rhslGetPosition(t,!0);if(e.style.top=o[1]+t.offsetHeight+1+"px",l||(l=1),"left"===r&&l<4)(n=o[0]-5)+e.offsetWidth>document.body.offsetWidth?rhslAlignElement(e,t,"right",++l):e.style.left=n+"px";else if("right"===r&&l<4){(n=o[0]+t.offsetWidth-e.offsetWidth+5)<0?rhslAlignElement(e,t,"left",++l):e.style.left=n+"px"}else if("center"===r||l>=4){var n;((n=o[0]-(e.offsetWidth-t.offsetWidth)/2)<0||n+e.offsetWidth/2>document.body.offsetWidth)&&l<4?rhslAlignElement(e,t,"left",++l):e.style.left=n+"px"}}function rhslHideColorPicker(e){var t=e.target||e.srcElement,r=document.getElementById("rhslcolorpickercontainer");t===r||isChildOf(t,r)||rhslToggle()}function isChildOf(e,t){return e.parentNode===t||null!==e.parentNode&&isChildOf(e.parentNode,t)}function rhslColorPicker(e,t,r,l,o){if(t.which&&t.buttons||r){var n=e.children[0],s=e.children[1],i=rhslGetPosition(n);if(l)var h=Math.round(l[0]/360*n.clientWidth),a=Math.round((100-l[1])/100*n.clientHeight),u=Math.round((100-l[2])/100*s.clientHeight);else{h=t.clientX,a=t.clientY;if(h>=rhslGetPosition(s)[0]){u=a-i[1];h=!1,a=!1}else{u=!1;h-=i[0],a-=i[1]}if(window.getSelection)var c=window.getSelection();else if(document.selection)c=document.selection.createRange();c&&c.rangeCount&&c.removeAllRanges(),c&&c.text>""&&document.selection.empty()}var d=rhslCurrentElement();if(d.getAttribute("rhslcolor").match(/hsltype: ?luv;/)&&window.hsluv)var g=!0;else g=!1;if(h||0===h){h<0&&(h=0),h>n.clientWidth&&(h=n.clientWidth),n.children[0].firstElementChild.style.left=h-10+"px";var m=Math.round(h/n.clientWidth*360)}else m=Math.round((Number(n.children[0].firstElementChild.style.left.match(/-?\d+/))+10)/n.clientWidth*360);if(a||0===a){a<0&&(a=0),a>n.clientHeight&&(a=n.clientHeight),n.children[0].firstElementChild.style.top=a-10+"px";var v=Math.round((n.clientHeight-a)/n.clientHeight*100)}else v=Math.round(Math.abs(Number(n.children[0].firstElementChild.style.top.match(/-?\d+/))+10-n.clientHeight)/n.clientHeight*100);if(u||0===u){u<0&&(u=0),u>s.clientHeight&&(u=s.clientHeight),s.firstElementChild.style.top=u-10+"px";var f=Math.round((n.clientHeight-u)/n.clientHeight*100)}else f=Math.round(Math.abs(Number(s.firstElementChild.style.top.match(/-?\d+/))+10-n.clientHeight)/n.clientHeight*100);if(s.style.background=g?"linear-gradient(#FFFFFF, "+window.hsluv.hsluvToHex([m,v,90])+", "+window.hsluv.hsluvToHex([m,v,80])+", "+window.hsluv.hsluvToHex([m,v,70])+", "+window.hsluv.hsluvToHex([m,v,60])+", "+window.hsluv.hsluvToHex([m,v,50])+", "+window.hsluv.hsluvToHex([m,v,40])+", "+window.hsluv.hsluvToHex([m,v,30])+", "+window.hsluv.hsluvToHex([m,v,20])+", "+window.hsluv.hsluvToHex([m,v,10])+", #000000)":"linear-gradient(hsl("+m+", "+v+"%, 100%), hsl("+m+", "+v+"%, 50%), hsl("+m+", "+v+"%, 0%))",d.getAttribute("rhslcolor").match(/inputs: ?true;/)&&!o){l=[m,v,f];for(var p=document.getElementsByClassName("rhslcolorinput"),b=0;b<p.length;b++)p[b].value=l[b]}rhslFineChange(d,[m,v,f],g),d.hasAttribute("oninput")&&d.oninput(),r&&d.hasAttribute("onchange")&&d.onchange()}}function rhslGetPosition(e,t){if(e=e.getBoundingClientRect(),t)var r=window.pageXOffset||document.documentElement.scrollLeft,l=window.pageYOffset||document.documentElement.scrollTop,o=e.left+r,n=e.top+l;else o=e.left,n=e.top;return[o,n]}function rhslFineChange(e,t,r,l){var o,n,s=e.getAttribute("rhslcolor");if(s){s=rhslProperties(s);for(var i=0;i<s.length;i++)s[i][0].match(/^update-self$/)?o=s[i][1]:s[i][0].match(/^update-linked$/)&&(n=s[i][1])}var h=t;o||(o=["bg-color","hex"]);var a=rhslContrast(rhslColorParser(t,"rgb",r,!0),r);if(t=rhslColorParser(t,o[1],r),(o[0].match(/\+text$/)||"text"===o[0]&&"INPUT"!==e.tagName)&&(e.innerHTML=t),o[0].match(/^bg-color(\+text)?$/)?(e.style.background=t,e.style.color=a):o[0].match(/^bg-only(\+text)?$/)?e.style.background=t:o[0].match(/^text-color(\+text)?$/)?e.style.color=t:o[0].match(/^border-color(\+text)?$/)?e.style.borderColor=t:o[0].match(/^outline-color(\+text)?$/)&&(e.style.outlineColor=t),l||(e.value=t),n){var u;Array.isArray(n)||(n=[n]);for(i=0;i<n.length;i++)t=h,u=n[i].replace(/[\(\)]/g,"").split(" "),document.getElementById(u[0])&&(e=document.getElementById(u[0]),u[1]||(u[1]="bg+text"),u[2]||(u[2]="hex"),a=rhslContrast(rhslColorParser(t,"rgb",r,!0),r),t=rhslColorParser(t,u[2],r),(u[1].match(/\+text$/)||"text"===u[1]&&"INPUT"!==e.tagName)&&(e.innerHTML=t),u[1].match(/^bg-color(\+text)?$/)?(e.style.background=t,e.style.color=a):u[1].match(/^bg-only(\+text)?$/)?e.style.background=t:u[1].match(/^text-color(\+text)?$/)?e.style.color=t:u[1].match(/^border-color(\+text)?$/)?e.style.borderColor=t:u[1].match(/^outline-color(\+text)?$/)&&(e.style.outlineColor=t),e.value=t)}}function rhslColorConverter(e,t,r){var l=!1;if((e.match(/^#[\dA-F]{3}$/i)||e.match(/^#[\dA-F]{4}$/i))&&(e="#"+(e=[e.charAt(1),e.charAt(2),e.charAt(3)])[0]+e[0]+e[1]+e[1]+e[2]+e[2]),(e.match(/^#[\dA-F]{6}$/i)||e.match(/^#[\dA-F]{8}$/i))&&(e="rgb("+parseInt(e.substr(1,2),16)+", "+parseInt(e.substr(3,2),16)+", "+parseInt(e.substr(5,2),16)+")"),e.match(/^rgb/)){e=(e=e.replace(/[rgba()]/g,"")).split(","),(!Array.isArray(e)||e.length>4)&&(l=!0);for(var o=0;o<3;o++)(e[o]<0||e[o]>255||isNaN(e[o]))&&(l=!0);if(!l)return t?((e=rgbToHsl(e[0],e[1],e[2]))[0]*=360,e[1]*=100,e[2]*=100):(e[0]=Number(e[0]),e[1]=Number(e[1]),e[2]=Number(e[2])),e}else if(e.match(/^hsl/)){if(e=(e=e.replace(/[hsla%()]/g,"")).split(","),(!Array.isArray(e)||e.length>4)&&(l=!0),(e[0]<0||e[0]>360||isNaN(e[0]))&&(l=!0),(e[1]<0||e[1]>100||isNaN(e[1]))&&(l=!0),(e[2]<0||e[2]>100||isNaN(e[2]))&&(l=!0),!l)return t?(e[0]=Number(e[0]),e[1]=Number(e[1]),e[2]=Number(e[2])):(e[0]/=360,e[1]/=100,e[2]/=100,e=hslToRgb(e[0],e[1],e[2])),e}else l=!0;if(l)return r||console.warn("RHSL: The color must be in either of these formats: #0F0, #00FF00, rgb(0, 255, 0) or hsl(120, 100%, 50%). Their alpha counterparts are supported, but the color picker will discard the alpha value provided. If using HSL values, the hue must not be over 360. Using #000000."),[0,0,0]}function rhslColorParser(e,t,r,l){return t.match(/^rgb$/)?(r?((e=window.hsluv.hsluvToRgb(e))[0]*=255,e[1]*=255,e[2]*=255):e=rhslColorConverter("hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)"),e[0]=Math.round(e[0]),e[1]=Math.round(e[1]),e[2]=Math.round(e[2]),l||(e="rgb("+e[0]+", "+e[1]+", "+e[2]+")")):t.match(/^hsl$/)?(r&&((e=window.hsluv.hsluvToRgb(e))[0]=Math.round(255*e[0]),e[1]=Math.round(255*e[1]),e[2]=Math.round(255*e[2]),e=rhslColorConverter("rgb("+e[0]+", "+e[1]+", "+e[2]+")",!0)),e[0]=Math.round(e[0]),e[1]=Math.round(e[1]),e[2]=Math.round(e[2]),l||(e="hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)")):r?e=window.hsluv.hsluvToHex(e).toUpperCase():((e=[(e=rhslColorConverter("hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)"))[0].toString(16),e[1].toString(16),e[2].toString(16)])[0].length<2&&(e[0]="0"+e[0]),e[1].length<2&&(e[1]="0"+e[1]),e[2].length<2&&(e[2]="0"+e[2]),e="#"+e.join("").toUpperCase()),e}function rhslContrast(e,t){e.forEach(rhslSrgbMadness);var r=.2126*e[0]+.7152*e[1]+.0722*e[2],l=Math.round(1.05/(r+.05)*10)/10;return Math.round((r+.05)/.05*10)/10>l?"#000000":"#FFFFFF"}function rhslSrgbMadness(e,t,r){(e/=255)<=.03928?e/=12.92:e=Math.pow((e+.055)/1.055,2.4),r[t]=e}function rgbToHsl(e,t,r){e/=255,t/=255,r/=255;var l,o,n=Math.max(e,t,r),s=Math.min(e,t,r),i=(n+s)/2;if(n==s)l=o=0;else{var h=n-s;switch(o=i>.5?h/(2-n-s):h/(n+s),n){case e:l=(t-r)/h+(t<r?6:0);break;case t:l=(r-e)/h+2;break;case r:l=(e-t)/h+4}l/=6}return[l,o,i]}function hslToRgb(e,t,r){var l,o,n;if(0==t)l=o=n=r;else{var s=function(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e},i=r<.5?r*(1+t):r+t-r*t,h=2*r-i;l=s(h,i,e+1/3),o=s(h,i,e),n=s(h,i,e-1/3)}return[Math.round(255*l),Math.round(255*o),Math.round(255*n)]}window.onload=function(){rhslFirstFunction()};