GetColor.js

    /***************************** Touch handler ************************************/
    
    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();
    }
    
    /**************************** END: Touch handler ***************************************/
    
    /***************************** Move Window function ************************************/
    
    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");
        }
    }
    
    /************************** END: Move Window function **********************************/
    
    /***************************** HSL Line color changer NEW ************************************/
    
    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
            };
        };
    }
    
    /************************** END: HSL Line color changer NEW **********************************/
    
    /*************************/
    /* Input filter function */
    
    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 = "";
            }
          });
        });
    }
    
    /* END: Input filter function */
    /******************************/
    
    /**************************************************************************************/
    /***************************** Convert code functions *********************************/
    
    function HSLToRGB(h, s, l) {
        // Must be fractions of 1
        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];
    }

    
    /*************************** END: Convert code functions ******************************/
    
    /***************************** Interface variables ************************************/
    
    /* Fields */
    
    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");
    
    /* END: Fields */
    
    /* Color gallery buttons */
    
    var colorGalleryButtons = document.getElementsByClassName("getcolor-colorsblock__color");
    
    /* END: Color gallery buttons */
    
    /************************* END: Interface variables ***********************************/
    
    /**************************** Output code strings *************************************/
    
    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)];
    }
    
    /************************** END: Output code strings **********************************/
    /**************************************************************************************/
    
    /************************************/
    /* Functions for Popup info message */
    
    /* Timer for Message */
    var showMessageTimer;
    
    /* Shows message width %textMessage% */
    /* When timer is out message is close by closeMessage() */
    function showMessage(textMessage) {
        document.getElementById("message__text").textContent = textMessage;
        document.getElementById("message").style.transform = "translateY(8rem)";
        showMessageTimer = window.setTimeout(function(){closeMessage();}, 2500);
    }
    
    /* Close message and stop timer */
    function closeMessage() {
        window.clearTimeout(showMessageTimer);
        document.getElementById("message").style.transform = "translateY(-5rem)";
    }
    
    /* Message:on button close clicked */
    ["click", "touchend"].forEach(function(eventType){
        document.getElementById("message__btn-close").addEventListener(eventType, function() {
            closeMessage();
        });
    });
    
    /* END: Functions for Popup info message */
    /*****************************************/
    
    /***********************/
    /* Application starter */
    
    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("Приложение закрыто, можно закрыть вкладку браузера");
    }
    
    /* END: Application starter */
    /****************************/
    
    /*****************************/
    /*        Dialog logic       */
    
    /* Dialog show function */
    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;
    }
    
    /*      END: Dialog logic    */
    /*****************************/
    
    /**********************/
    /* Main program logic */

    /* On App component clicked */
    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();
    });
    
    /* On Window's titlebar icon clicked */
    ["click", "touchend"].forEach(function(eventType) {
        document.getElementById("app-interface__titlebaricon").addEventListener(eventType, function(){
            showMessage("Сервис получения кода цвета от Popov.Dev");
        });
    });
    
    /* On Window's titlebar close button clicked */
    ["click", "touchend"].forEach(function(eventType) {
        document.getElementById("app-interface__closebutton").addEventListener(eventType, function(){
            closeMessage();
            closeApplication();
        });
    });
    
    /* On Dialog's titlebar icon clicked */
    ["click", "touchend"].forEach(function(eventType) {
        document.getElementById("app-dialog__titlebaricon").addEventListener(eventType, function(){
            showMessage("Сервис получения кода цвета от Popov.Dev");
        });
    });
    
    /* On Dialog's titlebar close button clicked */
    ["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");
        });
    });
    
    /***************************** Move color cursor function ************************************/
    
    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
            };
        };
    }
    
    /************************** END: Move color cursor function **********************************/
    
    /******************************* HSL BLOCK ****************************************************/
    /* On field input hue */
    setInputFilter(hueNumberInput, function(value) {
        if (value.length > 1)
            hueNumberInput.value = parseInt(hueNumberInput.value);
        
        if (value > 360)
            hueNumberInput.value = 360;
        return /^\d*$/.test(value);
    });
    
    /* On field input sat */
    setInputFilter(satNumberInput, function(value) {
        if (value.length > 1)
            satNumberInput.value = parseInt(satNumberInput.value);
        
        if (value > 100)
            satNumberInput.value = 100;
        return /^\d*$/.test(value);
    });
    
    /* On field input light */
    setInputFilter(lightNumberInput, function(value) {
        if (value.length > 1)
            lightNumberInput.value = parseInt(lightNumberInput.value);
        
        if (value > 100)
            lightNumberInput.value = 100;
        return /^\d*$/.test(value);
    });
    
    // On field input number of alpha
    setInputFilter(alphaHSLNumberInput, function(value) {
        if (parseFloat(value) > parseFloat(1.0))
            alphaHSLNumberInput.value = '1.0';
        return /^[10]?\.?\d*$/.test(value);
    });
    
    
    /******************************* END: HSL BLOCK ***********************************************/
    
    /********************* RGBA-HEX BLOCK **********************************************************/
    /* On field input number of Red */
    setInputFilter(redInputValue, function(value) {
        if (value.length > 1)
            redInputValue.value = parseInt(redInputValue.value);
        
        if (value > 255)
            redInputValue.value = 255;
        return /^\d*$/.test(value);
    });
    
    /* On field input number of Green */
    setInputFilter(greenInputValue, function(value) {
        if (value.length > 1)
            greenInputValue.value = parseInt(greenInputValue.value);
        
        if (value > 255)
            greenInputValue.value = 255;
        return /^\d*$/.test(value);
    });
    
    /* On field input number of Blue */
    setInputFilter(blueInputValue, function(value) {
        if (value.length > 1)
            blueInputValue.value = parseInt(blueInputValue.value);
        
        if (value > 255)
            blueInputValue.value = 255;
        return /^\d*$/.test(value);
    });
    
    // On field input number of alpha
    setInputFilter(alphaNumberInput, function(value) {
        if (parseFloat(value) > parseFloat(1.0))
            alphaNumberInput.value = '1.0';
        return /^[10]?\.?\d*$/.test(value);
    });
    
    /* On field input HEX number */
    setInputFilter(hexNumberInput, function(value) {
        return /^[\dabcdefABCDEF]*$/.test(value);
    });
    /********************* END: RGBA-HEX BLOCK *******************************************************/
    
    /**************************** Mouse numbers scrolling ********************************************/
    
    /* On alpha numbers mouse scrolling event */
    [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();
            }
        });
    });
    
    /* On RGB numbers mouse scrolling event */
    [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();
        });
    });
    
    /* On hue number mouse scrolling event */
    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();
    });
    
    /* On SL numbers mouse scrolling event */
    [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();
        });
    });
    
    
    /**************************** Mouse numbers scrolling ********************************************/
    
    /********************* Buttons block *************************************************************/
    
    /* On copy color code button clicked */
    ["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()));
    });
    
    /* Copy to clipboard color code */
    function copyColorButton(copyString) {
        if (window.navigator.clipboard) {
            window.navigator.clipboard.writeText(copyString);
            showMessage("Скопировано: " + copyString);
        } else {
            try {
                fallbackTextCopy(copyString);
                showMessage("Скопировано: " + copyString);
            } catch(error) {
                showMessage("Ошибка копирования");
            }
        }
    }
    
    /* If browser not support Clipboard API */
    function fallbackTextCopy (text) {
        var tmpBlock = document.createElement("textarea");
        document.body.appendChild(tmpBlock);
        tmpBlock.value = text;
        tmpBlock.select();
        document.execCommand("copy");
        document.body.removeChild(tmpBlock);
    }
    
    /* On button change clicked */
    ["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");
        });
    });
    
    /* On button help clicked */
    ["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>");
        });
    });
    
    /* On button Color clicked */
    ["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));
                }
            });
        });
    });
    
    /******************** END: Buttons Block *********************************************************/
    
    /*********************** Input logic **************************/
    
    ["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();
        });
    });
    
    /******************** END: Input logic ************************/
    
    /************************ HSL line event **********************/
    
    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();
    }
    
    /********************* END: HSL line event ********************/
    
    /******************** Change Value Events *********************/
    
    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();
    }
    
    /***************** END: Change Value Events *******************/
    
    /****************** Color gallery Block **********************/
    
    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();
            }
        }
    }
    
    /*************** END: Color gallery Block *******************/
    
    /* END: Main program logic */
    /***************************/