CodeDialog.js

["click", "touchend"].forEach(function(eventType){
    [].forEach.call(document.getElementsByClassName("codedialog-codeblock__codetab"), function(codeTabButton){
        codeTabButton.addEventListener(eventType, function(){
            switchCodeTab(codeTabButton.id);
        });
    });
    document.getElementsByClassName("codedialog-codeblock__copy")[0].addEventListener(eventType, function(e){
        copyCodeButtonClicked(e.target);
    });
});

/* Copy code from code area */
function copyCodeButtonClicked(copyButton) {
    var codeArea;
    var interfaceName = copyButton.classList[0].split("-")[0];
    [].forEach.call(copyButton.parentElement.getElementsByClassName(interfaceName + "-codeblock__codearea"),
        function(activeArea){
        if (!activeArea.classList.contains("unvisible"))
            codeArea = activeArea.getElementsByClassName(interfaceName + "-codeblock__code")[0];
    });
    if (codeArea.textContent != "") {
        copyCodeButton(codeArea.textContent);
    }
}

/* Copy to clipboard code */
function copyCodeButton(copyString) {
    if (window.navigator.clipboard) {
        window.navigator.clipboard.writeText(copyString);
        showMessage("Скопировано!");
    } else {
        try {
            fallbackTextCopy(copyString);
            showMessage("Скопировано!");
        } 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);
}

/* Code tab switch */
function switchCodeTab(buttonID) {
    // codedialog-codeblock__codearea_css
    [].forEach.call(document.getElementsByClassName(buttonID.split("__")[0] + "__codearea"), function(codeArea){
        var clickedButton = document.getElementById(buttonID);
        let currentButton = document.getElementById(
            buttonID.split("__")[0] + "__"
            + buttonID.split("__")[1].split("_")[0] + "_" + codeArea.id.split("__")[1].split("_")[1]
        );
        if (codeArea.id.split("__")[1].split("_")[1] == buttonID.split("__")[1].split("_")[1]) {
            codeArea.classList.remove("unvisible");
            clickedButton.classList.add("codedialog-codeblock__codetab_active");
            if (currentButton.id.split("_")[3] == "html")
                setTimeout(function() {
                    codeArea.getElementsByClassName("codedialog-codeblock__code")[0].innerHTML = '<span style="'
                    + 'color:#58e1fe;">&lt;</span><span style="color:#fe5858;">div</span> <span style="color:#b47ae0'
                    + ';">class</span><span style="color:#58e1fe;">=</span><span style="color:#59e472;">"'
                    + 'CreativeButton"</span><span style="color:#58e1fe;">&gt;</span>' + mainResultButton.textContent
                    + '<span style="color:#58e1fe;">&lt;/</span><span style="color:#fe5858;">div</span><span style'
                    + '="color:#58e1fe;">&gt;</span>';
                }, 5);
            else {
                codeArea.getElementsByClassName("codedialog-codeblock__code")[0].innerHTML = generateCodeCSSDialog();
                displayLineNumbers("codedialog", "css");
                highlightCssCode("codedialog", "css");
            }
        } else {
            codeArea.classList.add("unvisible");
            currentButton.classList.remove("codedialog-codeblock__codetab_active");
        }
    });
}

function generateCodeCSSDialog() {
    var currentState = "normal";
    var codeContent = ".CreativeButton {\n";
    codeContent += generateCodeByCurrentState(currentState) + "\n";
    codeContent += "}\n\n";
    codeContent += ".CreativeButton:hover {\n";
    codeContent += generateCodeByCurrentState(currentState) + "\n";
    codeContent += "}\n\n";
    codeContent += ".CreativeButton:pressed {\n";
    codeContent += generateCodeByCurrentState(currentState) + "\n";
    codeContent += "}";
    return codeContent;
}

function generateCodeByCurrentState(currentState) {
    var codeContent = "  display: inline-block;\n";
    codeContent += "  font-size: " + buttonInformation.getProperty(currentState, "fontsize")
        + buttonInformation.getProperty(currentState, "fontmetric") + ";\n";
    codeContent += "  font-family: "
        + fontFamilyNames[buttonInformation.getProperty(currentState, "fontfamily").split(" ")[0].toLowerCase()] + ";\n";
    codeContent += "  text-align: center;\n  cursor: pointer;\n";
    if (buttonInformation.getProperty(currentState, "bordersize") > 0) {
        rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "bordercolor"));
        codeContent += "  border: " + buttonInformation.getProperty(currentState, "bordersize")
            + "px " + buttonInformation.getProperty(currentState, "bordertype")
            + " rgba(" + rgbaValues[0] + ", " + rgbaValues[1] + ", " + rgbaValues[2] + ", "
            + rgbaValues[3].toPrecision(2) + ")" + ";\n";
    }
    if (buttonInformation.getProperty(currentState, "borderradius") > 0) {
        codeContent += "  border-radius: " + buttonInformation.getProperty(currentState, "borderradius") + "px" + ";\n";
    }
    if ((buttonInformation.getProperty(currentState, "paddingtop") > 0) ||
        (buttonInformation.getProperty(currentState, "paddingbottom") > 0) ||
        (buttonInformation.getProperty(currentState, "paddingright") > 0) ||
        (buttonInformation.getProperty(currentState, "paddingleft") > 0)) {
        codeContent += "  padding: " + buttonInformation.getProperty(currentState, "paddingtop") + "px "
            + buttonInformation.getProperty(currentState, "paddingright") + "px "
            + buttonInformation.getProperty(currentState, "paddingbottom") + "px "
            + buttonInformation.getProperty(currentState, "paddingleft") + "px" + ";\n";
    }
    if (buttonInformation.getProperty(currentState, "layers").length > 1)
        codeContent += "  background: " + generateGradientBackgroundString(currentState) + ";\n";
    else {
        rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "colors")[0]);
        codeContent += "  background: rgba(" + [rgbaValues[0], rgbaValues[1],
            rgbaValues[2], rgbaValues[3].toPrecision(2)].toString().replaceAll(",", ", ") + ");\n";
    }
    rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "textcolor"));
    codeContent += "  color: rgba(" + rgbaValues[0] + ", " + rgbaValues[1] + ", " + rgbaValues[2]
        + ", " + rgbaValues[3].toPrecision(2) + ");\n";
    if ((buttonInformation.getProperty(currentState, "boxshadowtype") != 'none') &&
        ((buttonInformation.getProperty(currentState, "boxshadowx") != 0) ||
        (buttonInformation.getProperty(currentState, "boxshadowy") != 0) ||
        (buttonInformation.getProperty(currentState, "boxshadowblur") != 0) ||
        (buttonInformation.getProperty(currentState, "boxshadowsize") != 0))) {
        rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState,
            "boxshadowcolor"));
        codeContent += "  box-shadow: " + buttonInformation.getProperty(currentState, "boxshadowtype") + " "
            + buttonInformation.getProperty(currentState, "boxshadowx") + "px "
            + buttonInformation.getProperty(currentState, "boxshadowy") + "px "
            + buttonInformation.getProperty(currentState, "boxshadowblur") + "px "
            + buttonInformation.getProperty(currentState, "boxshadowsize") + "px rgba(" + rgbaValues[0] + ", "
            + rgbaValues[1] + ", " + rgbaValues[2] + ", " + rgbaValues[3].toPrecision(2) + ");\n";
    }
    if ((buttonInformation.getProperty(currentState, "textshadowtype") != 'none') &&
        ((buttonInformation.getProperty(currentState, "textshadowx") != 0) ||
        (buttonInformation.getProperty(currentState, "textshadowy") != 0) ||
        (buttonInformation.getProperty(currentState, "textshadowblur") != 0))) {
        rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "textshadowcolor"));
        codeContent += "  text-shadow: " + buttonInformation.getProperty(currentState, "textshadowx") + "px "
            + buttonInformation.getProperty(currentState, "textshadowy") + "px "
            + buttonInformation.getProperty(currentState, "textshadowblur") + "px rgba("
            + rgbaValues[0] + ", " + rgbaValues[1] + ", " + rgbaValues[2] + ", " + rgbaValues[3].toPrecision(2) + ");\n";
    }
    codeContent += "  transition: all 0.3s;";
    return codeContent;
}

/**** Code block ****/

// TODO: Привязать функцию к событию при изменении содержимого блока кода
/* Display line numbers in code block */
//displayLineNumbers("codedialog", "css");

/* Highlight some css code */
//highlightCssCode("codedialog", "css");