CreativeButton

var timerTouchDown;function touchHandler(event){event.preventDefault();var touches=event.changedTouches,first=touches[0],type="",mouseButton=0;switch(event.type){case"touchstart":type="mousedown";break;case"touchmove":type="mousemove";break;case"touchend":type="mouseup";break;default:return;}var simulatedEvent=document.createEvent("MouseEvent");simulatedEvent.initMouseEvent(type,true,true,window,1,first.screenX,first.screenY,first.clientX,first.clientY,false,false,false,false,mouseButton,null);first.target.dispatchEvent(simulatedEvent);event.preventDefault();}function moveWindow(windowBlock,windowTitlebar){var offsetX=0,offsetY=0,posX=0,posY=0;windowTitlebar.onmousedown=dragMouseDown;windowBlock.style.position="absolute";function dragMouseDown(event){event=event||window.event;event.preventDefault();posX=event.clientX;posY=event.clientY;document.onmouseup=closeDragElement;document.onmousemove=elementDrag;}function elementDrag(event){event=event||window.event;event.preventDefault();offsetX=posX-event.clientX;offsetY=posY-event.clientY;posX=event.clientX;posY=event.clientY;windowBlock.style.top=(windowBlock.offsetTop-offsetY)+"px";windowBlock.style.left=(windowBlock.offsetLeft-offsetX)+"px";}function closeDragElement(){document.onmouseup=null;document.onmousemove=null;}}function windowElementsClick(element,event){if(document.onmouseup!=null){document.getElementById(element).classList.remove("offset_light");}else{document.getElementById(element).classList.add("offset_light");}}function hslColorLineChanger(movingArea,colorCursor,maxValue,fieldResult){movingArea=document.getElementById(movingArea);colorCursor=document.getElementById(colorCursor);movingArea.onmousedown=mouseDownEvent;colorCursor.onmousedown=mouseDownEvent;function mouseDownEvent(e){var coords=getCoords(colorCursor);var shiftX=movingArea.offsetLeft-coords.left;moveAt(e);function moveAt(e){var bounds=movingArea.getBoundingClientRect();var blockSizeX=parseInt(getComputedStyle(movingArea).width);var x=parseInt(e.clientX-bounds.left);if(x>blockSizeX)x=parseInt(blockSizeX);if(x<=0)x=0;colorCursor.style.left=parseInt(x-6)+'px';document.getElementById(fieldResult).value=Math.abs(parseInt(parseInt(x)/parseInt(blockSizeX)*maxValue));hueValuesChanged();changePickerCursor();}document.onmousemove=function(e){moveAt(e);};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;};}colorCursor.ondragstart=function(){return false;};function getCoords(elem){var box=elem.getBoundingClientRect();return{left:box.left+pageXOffset};};}function setInputFilter(textbox,inputFilter){["input","keydown","keyup","mousedown","mouseup","select","drop"].forEach(function(event){textbox.addEventListener(event,function(){if(inputFilter(this.value)){this.oldValue=this.value;this.oldSelectionStart=this.selectionStart;this.oldSelectionEnd=this.selectionEnd;}else if(this.hasOwnProperty("oldValue")){this.value=this.oldValue;this.setSelectionRange(this.oldSelectionStart,this.oldSelectionEnd);}else{this.value="";}});});}function HSLToRGB(h,s,l){s/=100;l/=100;let c=(1-Math.abs(2*l-1))*s,x=c*(1-Math.abs((h/60)%2-1)),m=l-c/2,r=0,g=0,b=0;if(0<=h&&h<60){r=c;g=x;b=0;}else if(60<=h&&h<120){r=x;g=c;b=0;}else if(120<=h&&h<180){r=0;g=c;b=x;}else if(180<=h&&h<240){r=0;g=x;b=c;}else if(240<=h&&h<300){r=x;g=0;b=c;}else if(300<=h&&h<360){r=c;g=0;b=x;}r=Math.round((r+m)*255);g=Math.round((g+m)*255);b=Math.round((b+m)*255);return[r,g,b];}function RGBToHSL(r,g,b){r/=255,g/=255,b/=255;var max=Math.max(r,g,b),min=Math.min(r,g,b);var h,s,l=(max+min)/2;if(max==min){h=s=0;}else{var d=max-min;s=l>0.5?d/(2-max-min):d/(max+min);switch(max){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break;}h/=6;}return[parseInt(h*360),parseInt(s*100),parseInt(l*100)];}function RGBToHex(r,g,b){r=r.toString(16);g=g.toString(16);b=b.toString(16);if(r.length==1)r="0"+r;if(g.length==1)g="0"+g;if(b.length==1)b="0"+b;return"#"+r+g+b;}function RGBAToHexA(r,g,b,a){r=r.toString(16);g=g.toString(16);b=b.toString(16);a=Math.round(a*255).toString(16);if(r.length==1)r="0"+r;if(g.length==1)g="0"+g;if(b.length==1)b="0"+b;if(a.length==1)a="0"+a;return"#"+r+g+b+a;}function hexToRGB(h){let r=0,g=0,b=0;if(h.length==3){r="0x"+h[0]+h[0];g="0x"+h[1]+h[1];b="0x"+h[2]+h[2];}else if(h.length==6){r="0x"+h[0]+h[1];g="0x"+h[2]+h[3];b="0x"+h[4]+h[5];}return[+r,+g,+b];}function hexToHSL(h){var rgb=hexToRGB(h);return RGBToHSL(rgb[0],rgb[1],rgb[2]);}function HSLAToRGBA(h,s,l,a){var rgb=HSLToRGB(h,s,l);return[rgb[0],rgb[1],rgb[2],a];}function RGBAToHSLA(r,g,b,a){var hsl=RGBToHSL(r,g,b);return[hsl[0],hsl[1],hsl[2],a];}function HSVtoHSL(h,s,v){var _h=h,_s=s/100*v/100,_l=(2-(s/100))*v/100;_s/=(_l<=100)?(_l===0?100:_l):200-_l;_l/=2;return[_h,_s*100,_l*100];}function HSLtoHSV(h,s,l){var _h=h,_s,_v;s=(s===0)?0:s/100;l=(l===0)?0:l/100;l*=2;s*=(l<=1)?l:2-l;_v=((l+s)===0)?0:(l+s)/2;_s=((l+s)===0)?0:(2*s)/(l+s);return[_h,_s*100,_v*100];}var hueNumberInput=document.getElementById("getcolor-hslcodeblock__hsl_h");var satNumberInput=document.getElementById("getcolor-hslcodeblock__hsl_s");var lightNumberInput=document.getElementById("getcolor-hslcodeblock__hsl_l");var alphaHSLNumberInput=document.getElementById("getcolor-hslcodeblock__hsl_a");var redInputValue=document.getElementById("getcolor-hexcodeblock__codefield_red");var greenInputValue=document.getElementById("getcolor-hexcodeblock__codefield_green");var blueInputValue=document.getElementById("getcolor-hexcodeblock__codefield_blue");var alphaNumberInput=document.getElementById("getcolor-hexcodeblock__codefield_alpha");var hexNumberInput=document.getElementById("getcolor-hexcodeblock__codefield_hex");var colorGalleryButtons=document.getElementsByClassName("getcolor-colorsblock__color");function getRGBString(){return"rgb("+redInputValue.value+", "+greenInputValue.value+", "+blueInputValue.value+")";}function getRGBAString(){return"rgba("+redInputValue.value+", "+greenInputValue.value+", "+blueInputValue.value+", "+alphaNumberInput.value+")";}function getHSLString(){return"hsl("+hueNumberInput.value+", "+satNumberInput.value+"%, "+lightNumberInput.value+"%)";}function getHSLAString(){return"hsla("+hueNumberInput.value+", "+satNumberInput.value+"%, "+lightNumberInput.value+"%, "+alphaHSLNumberInput.value+")";}function getHexString(){return RGBToHex(parseInt(redInputValue.value),parseInt(greenInputValue.value),parseInt(blueInputValue.value));}function getHexAString(){return RGBAToHexA(parseInt(redInputValue.value),parseInt(greenInputValue.value),parseInt(blueInputValue.value),parseInt(alphaNumberInput.value));}function getHSLArray(){return[parseInt(hueNumberInput.value),parseInt(satNumberInput.value),parseInt(lightNumberInput.value)];}var showMessageTimer;function showMessage(textMessage){document.getElementById("message__text").textContent=textMessage;document.getElementById("message").style.transform="translateY(8rem)";showMessageTimer=window.setTimeout(function(){closeMessage();},2500);}function closeMessage(){window.clearTimeout(showMessageTimer);document.getElementById("message").style.transform="translateY(-5rem)";}["click","touchend"].forEach(function(eventType){document.getElementById("message__btn-close").addEventListener(eventType,function(){closeMessage();});});function startApplication(){document.getElementById("wrapper").style.opacity="0.0";document.getElementById("app-interface").style.opacity="1.0";window.setTimeout(function(){document.getElementById("wrapper").classList.toggle("unvisible");document.getElementById("app-interface").classList.toggle("unvisible");document.getElementById("app-interface").classList.toggle("no-selection");},50);}function closeApplication(){document.getElementById("app-interface").style.opacity="0.0";document.getElementById("wrapper").style.opacity="1.0";window.setTimeout(function(){document.getElementById("app-interface").classList.toggle("unvisible");document.getElementById("wrapper").classList.toggle("unvisible");document.getElementById("app-interface").classList.toggle("no-selection");},50);showMessage("Приложение закрыто, можно закрыть вкладку браузера");}function showDialog(dialogWidth,dialogHeight,dialogTitle,dialogContent){document.getElementById("app-dialog__window").style.width=dialogWidth;document.getElementById("app-dialog__window").style.height=dialogHeight;document.getElementById("app-dialog__window").style.left="calc(50% - "+(parseFloat(dialogWidth)/2)+"rem)";document.getElementById("app-dialog__window").style.top="calc(30% - "+(parseFloat(dialogHeight)/2)+"rem)";document.getElementById("app-dialog").classList.toggle("unvisible");document.getElementById("app-dialog").style.opacity="1.0";document.getElementById("app-dialog__titlebarcaption").textContent=dialogTitle;document.getElementById("getcolor-helpblock").innerHTML=dialogContent;}document.getElementById("app").addEventListener("click",function(){closeMessage();startApplication();moveWindow(document.getElementById("app-interface__window"),document.getElementById("app-interface__titlebar"));moveWindow(document.getElementById("app-dialog__window"),document.getElementById("app-dialog__titlebar"));["mousedown","mouseup"].forEach(function(event){document.getElementById("app-interface__titlebaricon").addEventListener(event,function(e){windowElementsClick("app-interface__titlebaricon",e.type);});document.getElementById("app-interface__closebutton").addEventListener(event,function(e){windowElementsClick("app-interface__closebutton",e.type);});document.getElementById("app-dialog__titlebaricon").addEventListener(event,function(e){windowElementsClick("app-dialog__titlebaricon",e.type);});document.getElementById("app-dialog__closebutton").addEventListener(event,function(e){windowElementsClick("app-dialog__closebutton",e.type);});});document.getElementById("app-interface__titlebaricon").addEventListener("mouseup",function(e){windowElementsClick("app-interface__titlebaricon");});document.addEventListener("touchstart",touchHandler,true);document.addEventListener("touchmove",touchHandler,true);document.addEventListener("touchend",touchHandler,true);document.addEventListener("touchcancel",touchHandler,true);moveColorCursor("getcolor-pickerblock__picker-cursor","getcolor-pickerblock__picker");hslColorLineChanger("getcolor-huelineblock__table","getcolor-huelineblock__picker-cursor",359,"getcolor-hslcodeblock__hsl_h");hslColorLineChanger("getcolor-satlineblock__table","getcolor-satlineblock__picker-cursor",100,"getcolor-hslcodeblock__hsl_s");hslColorLineChanger("getcolor-lightlineblock__table","getcolor-lightlineblock__picker-cursor",100,"getcolor-hslcodeblock__hsl_l");rgbValuesChanged();});["click","touchend"].forEach(function(eventType){document.getElementById("app-interface__titlebaricon").addEventListener(eventType,function(){showMessage("Сервис получения кода цвета от Popov.Dev");});});["click","touchend"].forEach(function(eventType){document.getElementById("app-interface__closebutton").addEventListener(eventType,function(){closeMessage();closeApplication();});});["click","touchend"].forEach(function(eventType){document.getElementById("app-dialog__titlebaricon").addEventListener(eventType,function(){showMessage("Сервис получения кода цвета от Popov.Dev");});});["click","touchend"].forEach(function(eventType){document.getElementById("app-dialog__closebutton").addEventListener(eventType,function(){closeMessage();document.getElementById("app-dialog").style.opacity="0.0";document.getElementById("app-dialog").classList.toggle("unvisible");});});function moveColorCursor(colorCursor,movingArea){colorCursor=document.getElementById(colorCursor);movingArea=document.getElementById(movingArea);movingArea.onmousedown=function(e){var coords=getCoords(colorCursor);var shiftX=movingArea.offsetLeft-coords.left;var shiftY=movingArea.offsetTop-coords.top;colorCursor.style.position='absolute';moveAt(e);function moveAt(e){var bounds=movingArea.getBoundingClientRect();var blockSizeX=parseInt(getComputedStyle(movingArea).width);var blockSizeY=parseInt(getComputedStyle(movingArea).height);var x=parseInt(e.clientX-bounds.left);var y=parseInt(e.clientY-bounds.top);if(x>=blockSizeX)x=parseInt(blockSizeX);if(x<=0)x=0;if(y>=blockSizeY)y=parseInt(blockSizeY);if(y<=0)y=0;colorCursor.style.left=parseInt(x-6)+'px';colorCursor.style.top=parseInt(y-6)+'px';satNumberInput.value=Math.abs(parseInt(parseInt(x)/parseInt(blockSizeX)*100));lightNumberInput.value=Math.abs(parseInt(parseInt(y)/parseInt(blockSizeY)*50)-50);hueValuesChanged();changeLinePickerCursor()}document.onmousemove=function(e){moveAt(e);};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;};};colorCursor.ondragstart=function(){return false;};function getCoords(elem){var box=elem.getBoundingClientRect();return{top:box.top+pageYOffset,left:box.left+pageXOffset};};}setInputFilter(hueNumberInput,function(value){if(value.length>1)hueNumberInput.value=parseInt(hueNumberInput.value);if(value>360)hueNumberInput.value=360;return /^\d*$/.test(value);});setInputFilter(satNumberInput,function(value){if(value.length>1)satNumberInput.value=parseInt(satNumberInput.value);if(value>100)satNumberInput.value=100;return /^\d*$/.test(value);});setInputFilter(lightNumberInput,function(value){if(value.length>1)lightNumberInput.value=parseInt(lightNumberInput.value);if(value>100)lightNumberInput.value=100;return /^\d*$/.test(value);});setInputFilter(alphaHSLNumberInput,function(value){if(parseFloat(value)>parseFloat(1.0))alphaHSLNumberInput.value='1.0';return /^[10]?\.?\d*$/.test(value);});setInputFilter(redInputValue,function(value){if(value.length>1)redInputValue.value=parseInt(redInputValue.value);if(value>255)redInputValue.value=255;return /^\d*$/.test(value);});setInputFilter(greenInputValue,function(value){if(value.length>1)greenInputValue.value=parseInt(greenInputValue.value);if(value>255)greenInputValue.value=255;return /^\d*$/.test(value);});setInputFilter(blueInputValue,function(value){if(value.length>1)blueInputValue.value=parseInt(blueInputValue.value);if(value>255)blueInputValue.value=255;return /^\d*$/.test(value);});setInputFilter(alphaNumberInput,function(value){if(parseFloat(value)>parseFloat(1.0))alphaNumberInput.value='1.0';return /^[10]?\.?\d*$/.test(value);});setInputFilter(hexNumberInput,function(value){return /^[\dabcdefABCDEF]*$/.test(value);});[alphaHSLNumberInput,alphaNumberInput].forEach(function(alphaFields){alphaFields.addEventListener("wheel",function(event){if(event.deltaY<0){if(parseFloat(alphaFields.value).toPrecision(2)<parseFloat(1.0).toPrecision(2))alphaFields.value=parseFloat(parseFloat(alphaFields.value)+parseFloat(0.1)).toPrecision(2);}else{if(parseFloat(alphaFields.value).toPrecision(2)>parseFloat(0.0).toPrecision(2)){alphaFields.value=parseFloat(parseFloat(alphaFields.value)-parseFloat(0.1)).toPrecision(2);}}if(alphaFields.id.includes("hsl")){hueValuesChanged();changePickerCursor();changeLinePickerCursor();}else{rgbValuesChanged();}});});[redInputValue,greenInputValue,blueInputValue].forEach(function(rgbFields){rgbFields.addEventListener("wheel",function(event){if(event.deltaY<0){if(parseInt(rgbFields.value)<parseInt(255))rgbFields.value=parseInt(parseInt(rgbFields.value)+parseInt(1));}else{if(parseInt(rgbFields.value)>parseInt(0))rgbFields.value=parseInt(parseInt(rgbFields.value)-parseInt(1));}rgbValuesChanged();});});hueNumberInput.addEventListener("wheel",function(event){if(event.deltaY<0){if(parseInt(hueNumberInput.value)<parseInt(359))hueNumberInput.value=parseInt(parseInt(hueNumberInput.value)+parseInt(1));}else{if(parseInt(hueNumberInput.value)>parseInt(0))hueNumberInput.value=parseInt(parseInt(hueNumberInput.value)-parseInt(1));}hueValuesChanged();changePickerCursor();changeLinePickerCursor();});[satNumberInput,lightNumberInput].forEach(function(slFields){slFields.addEventListener("wheel",function(event){if(event.deltaY<0){if(parseInt(slFields.value)<parseInt(100))slFields.value=parseInt(parseInt(slFields.value)+parseInt(1));}else{if(parseInt(slFields.value)>parseInt(0))slFields.value=parseInt(parseInt(slFields.value)-parseInt(1));}hueValuesChanged();changePickerCursor();changeLinePickerCursor();});});["click","touchend"].forEach(function(eventType){document.getElementById("getcolor-buttonsblock__button_rgb").addEventListener(eventType,()=>copyColorButton(getRGBString()));document.getElementById("getcolor-buttonsblock__button_rgba").addEventListener(eventType,()=>copyColorButton(getRGBAString()));document.getElementById("getcolor-buttonsblock__button_hsl").addEventListener(eventType,()=>copyColorButton(getHSLString()));document.getElementById("getcolor-buttonsblock__button_hsla").addEventListener(eventType,()=>copyColorButton(getHSLAString()));document.getElementById("getcolor-buttonsblock__button_hex").addEventListener(eventType,()=>copyColorButton(getHexString()));document.getElementById("getcolor-buttonsblock__button_hexa").addEventListener(eventType,()=>copyColorButton(getHexAString()));});function copyColorButton(copyString){if(window.navigator.clipboard){window.navigator.clipboard.writeText(copyString);showMessage("Скопировано: "+copyString);}else{try{fallbackTextCopy(copyString);showMessage("Скопировано: "+copyString);}catch(error){showMessage("Ошибка копирования");}}}function fallbackTextCopy(text){var tmpBlock=document.createElement("textarea");document.body.appendChild(tmpBlock);tmpBlock.value=text;tmpBlock.select();document.execCommand("copy");document.body.removeChild(tmpBlock);}["click","touchend"].forEach(function(eventType){document.getElementById("getcolor-buttonsblock__button_change").addEventListener(eventType,function(){document.getElementById("getcolor-buttonsblock__button_rgb").classList.toggle("unvisible");document.getElementById("getcolor-buttonsblock__button_rgba").classList.toggle("unvisible");document.getElementById("getcolor-buttonsblock__button_hsl").classList.toggle("unvisible");document.getElementById("getcolor-buttonsblock__button_hsla").classList.toggle("unvisible");document.getElementById("getcolor-buttonsblock__button_hex").classList.toggle("unvisible");document.getElementById("getcolor-buttonsblock__button_hexa").classList.toggle("unvisible");});});["click","touchend"].forEach(function(eventType){document.getElementById("getcolor-buttonsblock__button_help").addEventListener(eventType,function(){showDialog("20rem","9rem","Get Color! - Помощь","<h2>Как добавлять цвета в библиотеку?</h2>\                <p>Сверху уже есть готовые цвета, нажимая на выбранном цвете правой кнопкой или долгое нажатие для смартфонов на цвете, устанавливает в выбранной ячейке текущий цвет.</p><br> \                <h2>Как вернуть старый цвет?</h2>\                <p>В библиотеке готовых цветов необходимо зажать клавишу Ctrl или Cmd и сделать правый клик на выбранном цвете.</p><br> \                <h2>Скопировать код HSLA, RGBA и HexA</h2> \                <p>Необходимо нажать на кнопку <i class='fas fa-fill'></i> и затем нажать на одну из появившихся кнопок слева</p>");});});["click","touchend"].forEach(function(eventType){document.getElementById("getcolor__color").addEventListener(eventType,function(){showDialog("20rem","9rem","Get Color! - свойства цвета","<h2>Коды цвета</h2>\                <a><p id='getcolor__color_rgb'>"+getRGBString()+"</p></a> \                <a><p id='getcolor__color_rgba'>"+getRGBAString()+"</p></a> \                <a><p id='getcolor__color_hsl'>"+getHSLString()+"</p></a> \                <a><p id='getcolor__color_hsla'>"+getHSLAString()+"</p></a> \                <a><p id='getcolor__color_hex'>"+getHexString()+"</p></a> \                <a><p id='getcolor__color_hexa'>"+getHexAString()+"</p></a>");["getcolor__color_rgb","getcolor__color_rgba","getcolor__color_hsl","getcolor__color_hsla","getcolor__color_hex","getcolor__color_hexa"].forEach(function(colorLink){if(document.getElementById(colorLink).getAttribute('function')!=='true'){document.getElementById(colorLink).setAttribute('function','true');document.getElementById(colorLink).addEventListener(eventType,()=>copyColorButton(document.getElementById(colorLink).textContent));}});});});["focusout","change"].forEach(function(event){[hueNumberInput,satNumberInput,lightNumberInput,alphaHSLNumberInput].forEach(function(changedElement){changedElement.addEventListener(event,function(){hueValuesChanged();changePickerCursor();changeLinePickerCursor();});});[redInputValue,greenInputValue,blueInputValue,alphaNumberInput].forEach(function(changedElement){changedElement.addEventListener(event,function(){rgbValuesChanged();});});hexNumberInput.addEventListener(event,function(){hexValueChanged();});});function setHueValue(value){hueNumberInput.value=value;hueValuesChanged();changePickerCursor();changeLinePickerCursor();}function setSatValue(value){satNumberInput.value=value;hueValuesChanged();changePickerCursor();changeLinePickerCursor();}function setLightValue(value){lightNumberInput.value=value;hueValuesChanged();changePickerCursor();changeLinePickerCursor();}function hueValuesChanged(){var rgba=HSLAToRGBA(parseInt(hueNumberInput.value),parseInt(satNumberInput.value),parseInt(lightNumberInput.value),parseFloat(alphaHSLNumberInput.value));var hex=RGBToHex(parseInt(rgba[0]),parseInt(rgba[1]),parseInt(rgba[2]));redInputValue.value=rgba[0];greenInputValue.value=rgba[1];blueInputValue.value=rgba[2];alphaNumberInput.value=rgba[3].toPrecision(2);hexNumberInput.value=hex.slice(1);changeSLLinesColor();setMainColor();changePickerColor();}function rgbValuesChanged(){var hsla=RGBAToHSLA(parseInt(redInputValue.value),parseInt(greenInputValue.value),parseInt(blueInputValue.value),parseFloat(alphaNumberInput.value));var hex=RGBToHex(parseInt(redInputValue.value),parseInt(greenInputValue.value),parseInt(blueInputValue.value));hueNumberInput.value=hsla[0];satNumberInput.value=hsla[1];lightNumberInput.value=hsla[2];alphaHSLNumberInput.value=hsla[3].toPrecision(2);hexNumberInput.value=hex.slice(1);changeSLLinesColor();setMainColor();changePickerColor();changePickerCursor();changeLinePickerCursor();}function hexValueChanged(){var rgb=hexToRGB(hexNumberInput.value);var hsl=hexToHSL(hexNumberInput.value);redInputValue.value=rgb[0];greenInputValue.value=rgb[1];blueInputValue.value=rgb[2];alphaNumberInput.value="1.0";hueNumberInput.value=hsl[0];satNumberInput.value=hsl[1];lightNumberInput.value=hsl[2];alphaHSLNumberInput.value="1.0";changeSLLinesColor();setMainColor();changePickerColor();changePickerCursor();changeLinePickerCursor();}function changePickerColor(){var hue=parseInt(hueNumberInput.value);document.getElementById("getcolor-pickerblock__picker").style.background="linear-gradient(90deg, hsl("+hue+", 100%, 100%) 0%, hsl("+hue+", 100%, 50%) 100%)";}function changePickerCursor(){var pickerArea=document.getElementById("getcolor-pickerblock__picker"),pickerCursor=document.getElementById("getcolor-pickerblock__picker-cursor"),hsv=HSLtoHSV(parseInt(hueNumberInput.value),parseInt(satNumberInput.value),parseInt(lightNumberInput.value)),cursorPosX=parseInt(hsv[1]/100*parseInt(getComputedStyle(pickerArea).width)),cursorPosY=parseInt(Math.abs(hsv[2]/100*parseInt(getComputedStyle(pickerArea).height)-100));pickerCursor.style.left=parseInt(cursorPosX-6)+'px';pickerCursor.style.top=parseInt(cursorPosY-6)+'px';}function changeLinePickerCursor(){colorCursors=[document.getElementById("getcolor-huelineblock__picker-cursor"),document.getElementById("getcolor-satlineblock__picker-cursor"),document.getElementById("getcolor-lightlineblock__picker-cursor")];movingAreaSize=parseInt(getComputedStyle(document.getElementById("getcolor-huelineblock__table")).width);hsl=getHSLArray();colorCursors[0].style.left=parseInt(hsl[0]/360*movingAreaSize-4)+'px';colorCursors[1].style.left=parseInt(hsl[1]/100*movingAreaSize-4)+'px';colorCursors[2].style.left=parseInt(hsl[2]/100*movingAreaSize-4)+'px';}function changeSLLinesColor(){changeSatLineColor();changeLightLineColor();}function changeSatLineColor(){var node='<td class="getcolor-satlineblock__line" style="background:linear-gradient(to right, hsl('+parseInt(hueNumberInput.value)+',0%,50%),hsl('+parseInt(hueNumberInput.value)+',100%,50%))"></td>';document.getElementById("getcolor-satlineblock__table").innerHTML="<tbody><tr>"+node+"</tr></tbody>";}function changeLightLineColor(){var node='<td class="getcolor-lightlineblock__line" style="background:linear-gradient(to right, hsl('+parseInt(hueNumberInput.value)+',100%,0%),hsl('+parseInt(hueNumberInput.value)+',100%,50%),hsl('+parseInt(hueNumberInput.value)+',100%,100%))"></td>';document.getElementById("getcolor-lightlineblock__table").innerHTML="<tbody><tr>"+node+"</tr></tbody>";}function setMainColor(){document.getElementById("getcolor__color").style.backgroundColor=getRGBAString();}for(var i=0;i<=47;i++){["click","touchend"].forEach(function(eventType){colorGalleryButtons[i].addEventListener(eventType,function(event){var colorData=window.getComputedStyle(this,null).getPropertyValue("background-color");var[r,g,b,a]=colorData.match(/[\d\.]+/g).map(Number);if(!colorData.includes("rgba")){a=parseFloat(1.0);}redInputValue.value=r;greenInputValue.value=g;blueInputValue.value=b;alphaNumberInput.value=a.toPrecision(2);rgbValuesChanged();});});colorGalleryButtons[i].addEventListener("mouseup",function(event){window.clearTimeout(timerTouchDown);});colorGalleryButtons[i].addEventListener("mousedown",function(event){var galleryButton=this.id;timerTouchDown=window.setTimeout(function(){setGalleryButton(event,galleryButton);},500);return;});colorGalleryButtons[i].addEventListener("contextmenu",function(event){event.preventDefault();setGalleryButton(event,this.id);});function setGalleryButton(event,galleryButton){galleryButton=document.getElementById(galleryButton);if(event.ctrlKey||event.metaKey){galleryButton.removeAttribute("style");}else{galleryButton.style.backgroundColor=getRGBAString();}}}