ShadowDialog.js

/* Range widgets connect to field widgets */
["input", "change"].forEach(function(eventType){
    [].forEach.call(document.getElementsByClassName("shadowdialog-optionblock__range"), function(rangeWidget){
        rangeWidget.addEventListener(eventType, () => onRangeWidgetValueChanged(rangeWidget));
    });
    [].forEach.call(document.getElementsByClassName("shadowdialog-optionblock__field"), function(rangeField){
        rangeField.addEventListener(eventType, () => onRangeWidgetValueChanged(rangeField));
    });
});

/* Reset optionblock button handler */
["click", "touchend"].forEach(function(eventType){
    [].forEach.call(document.getElementsByClassName("shadowdialog-optionblock__button"), function(resetButton){
        resetButton.addEventListener(eventType, () => onButtonResetOptionBlockClicked(resetButton));
    });
});

/* RGBA fields input filter */
[].forEach.call(document.getElementsByClassName("shadowdialog-rgbacodeblock__rgba"),
    (colorField) => setTimeout(function(){
        onDialogColorFieldsChanged(colorField);
    }, 50)
);

/* Change color */
["click", "touchend"].forEach(function(eventType){
    [].forEach.call(document.getElementsByClassName("shadowdialog-rgbacodeblock__resultcolor"), function(resultColorButton){
        resultColorButton.addEventListener(eventType, function(){
            openColorDialogWindow(resultColorButton.id.split("__")[1].split("_")[1],
                "shadowdialog-interface__window");
        });
    });
});

/* Text shadow type name */
var textShadowTypeEnum;
(function (textShadowTypeEnum) {
    textShadowTypeEnum[textShadowTypeEnum["Нет"] = "Нет"] = "Тень";
    textShadowTypeEnum[textShadowTypeEnum["Тень"] = "Тень"] = "Нет";
})(textShadowTypeEnum || (textShadowTypeEnum = {}));

/* Box shadow type names */
var boxShadowTypeEnum;
(function (boxShadowTypeEnum) {
    boxShadowTypeEnum[boxShadowTypeEnum["Нет"] = "Нет"] = "Снаружи";
    boxShadowTypeEnum[boxShadowTypeEnum["Снаружи"] = "Снаружи"] = "Внутри";
    boxShadowTypeEnum[boxShadowTypeEnum["Внутри"] = "Внутри"] = "Нет";
})(boxShadowTypeEnum || (boxShadowTypeEnum = {}));

/* Box and text shadow type values */
const boxShadowTypeValues = {"Нет": "none", "Снаружи": "", "Внутри": "inset",
                             "none": "Нет", "": "Снаружи", "inset": "Внутри"};
const textShadowTypeValues = {"Нет": "none", "Тень": "true", "none": "Нет", "true": "Тень"};

/* Box and text shadow type button */
["click", "touchend"].forEach((eventType) => {
    [].forEach.call(document.getElementsByClassName("shadowdialog-buttonshadow__button"), function(shadowButton){
        shadowButton.addEventListener(eventType, (e) => setNextShadowType(e.target));
    })
});

/* Set next shadow type */
function setNextShadowType(buttonShadowType) {
    let currentInterface = buttonShadowType.id.split("-")[0];
    let currentState = document.getElementById(currentInterface + "-interface__window").getAttribute("data-info");
    
    if (buttonShadowType.id.split("__")[1].split("_")[1].slice(0, -10) == "box") {
        buttonShadowType.textContent = boxShadowTypeEnum[buttonShadowType.textContent.replace(/\s/g, "")];
        setShadowType(currentState, buttonShadowType,
            boxShadowTypeValues[buttonShadowType.textContent.replace(/\s/g, "")]);
    } else {
        buttonShadowType.textContent = textShadowTypeEnum[buttonShadowType.textContent.replace(/\s/g, "")];
        setShadowType(currentState, buttonShadowType,
            textShadowTypeValues[buttonShadowType.textContent.replace(/\s/g, "")]);
    }
    
    setCodeToCodeAreaBlock("shadowdialog", getActiveShadowDialogTab().id.split("__")[1].split("_")[1],
        generateCodeShadowDialog(currentState));
}

/* Set shadow type function */
function setShadowType(currentState, buttonShadowType, shadowTypeValue) {
    if (buttonShadowType.id.split("__")[1].split("_")[1].slice(0, -10) == "box") {
        buttonShadowType.setAttribute("data-info", boxShadowTypeValues[boxShadowTypeValues[shadowTypeValue]]);
        buttonInformation.setProperty(currentState,
            buttonShadowType.id.split("__")[1].split("_")[1], shadowTypeValue);
        buttonShadowType.textContent = boxShadowTypeValues[shadowTypeValue];
    } else {
        buttonShadowType.setAttribute("data-info", textShadowTypeValues[boxShadowTypeValues[shadowTypeValue]]);
        buttonInformation.setProperty(currentState,
            buttonShadowType.id.split("__")[1].split("_")[1], shadowTypeValue);
        buttonShadowType.textContent = textShadowTypeValues[shadowTypeValue];
    }
}

/* Copy button handler */
["click", "touchend"].forEach(function(eventType){
    [].forEach.call(document.getElementsByClassName("shadowdialog-codeblock__copy"), function(copyButton){
        copyButton.addEventListener(eventType, function(e){
            copyCodeButtonClicked(e.target);
        });
    });
});

/* Add tab buttons handler */
["click", "touchend"].forEach(function(eventType){
    [].forEach.call(document.getElementsByClassName("shadowdialog-tabssection__tab"), function(tabButton){
        tabButton.addEventListener(eventType, function(){
            shadowDialogSwitchTab(tabButton.id);
        });
    });
});

/* Tabs control */
function shadowDialogSwitchTab(currentTabID) {
    tabSections = document.getElementsByClassName("shadowdialog-tabsection");
    tabButtons = document.getElementsByClassName("shadowdialog-tabssection__tab");

    for (tabSection of tabSections) {
        if (tabSection.classList.contains("unvisible")) {
            if (tabSection.getAttribute("data-info") == getTabTagFromButtonID(currentTabID)) {
                tabSection.classList.toggle("unvisible");
            }
        } else {
            if (tabSection.getAttribute("data-info") != getTabTagFromButtonID(currentTabID)) {
                tabSection.classList.toggle("unvisible");
            }
        }
    }

    for (tabButton of tabButtons) {
        if (tabButton.classList.contains("shadowdialog-tabssection__tab_active")) {
            if (tabButton.id != currentTabID)
                tabButton.classList.toggle("shadowdialog-tabssection__tab_active");
        } else {
            if (tabButton.id == currentTabID)
                tabButton.classList.toggle("shadowdialog-tabssection__tab_active");
        }
    }

    setCodeToCodeAreaBlock("shadowdialog", getActiveShadowDialogTab().id.split("__")[1].split("_")[1],
        generateCodeShadowDialog(currentState));
}

/* Set settings by currentState */
function updateSettingsShadowDialog(currentState) {
    document.getElementById("shadowdialog-tabssection__tab_buttonshadow").click();

    setRangeValue("shadowdialog", "boxshadowx", buttonInformation.getProperty(currentState, "boxshadowx"));
    setRangeValue("shadowdialog", "boxshadowy", buttonInformation.getProperty(currentState, "boxshadowy"));
    setRangeValue("shadowdialog", "boxshadowblur", buttonInformation.getProperty(currentState, "boxshadowblur"));
    setRangeValue("shadowdialog", "boxshadowsize", buttonInformation.getProperty(currentState, "boxshadowsize"));
    setRangeValue("shadowdialog", "textshadowx", buttonInformation.getProperty(currentState, "textshadowx"));
    setRangeValue("shadowdialog", "textshadowy", buttonInformation.getProperty(currentState, "textshadowy"));
    setRangeValue("shadowdialog", "textshadowblur", buttonInformation.getProperty(currentState, "textshadowblur"));

    let rgbaFields = document.getElementsByClassName("shadowdialog-rgbacodeblock__rgba");
    let rgbaValuesButton = HEXAToRGBA(buttonInformation.getProperty(currentState, "boxshadowcolor"));
    let rgbaValuesText = HEXAToRGBA(buttonInformation.getProperty(currentState, "textshadowcolor"));
    rgbaFields[0].value = rgbaValuesButton[0];
    rgbaFields[1].value = rgbaValuesButton[1];
    rgbaFields[2].value = rgbaValuesButton[2];
    rgbaFields[3].value = parseFloat(rgbaValuesButton[3]).toPrecision(2);
    rgbaFields[4].value = rgbaValuesText[0];
    rgbaFields[5].value = rgbaValuesText[1];
    rgbaFields[6].value = rgbaValuesText[2];
    rgbaFields[7].value = parseFloat(rgbaValuesText[3]).toPrecision(2);
    dialogColorCodeFieldsChanged(rgbaFields[0].id);
    dialogColorCodeFieldsChanged(rgbaFields[4].id);
    setShadowType(currentState, document.getElementById("shadowdialog-buttonshadow__button_boxshadowtype"),
        buttonInformation.getProperty(currentState, "boxshadowtype"));
    setShadowType(currentState, document.getElementById("shadowdialog-buttonshadow__button_textshadowtype"),
        buttonInformation.getProperty(currentState, "textshadowtype"));
    setCodeToCodeAreaBlock("shadowdialog", getActiveShadowDialogTab().id.split("__")[1].split("_")[1],
        generateCodeShadowDialog(currentState));
}

/* Get active tab of Shadow Dialog */
function getActiveShadowDialogTab() {
    var activeTab;
    [].forEach.call(document.getElementsByClassName("shadowdialog-tabssection__tab"), (shadowDialogTab) => {
        if (shadowDialogTab.classList.contains("shadowdialog-tabssection__tab_active"))
            activeTab = shadowDialogTab;
    });

    return activeTab;
}

/* Generate CSS code for shadowdialog */
function generateCodeShadowDialog(currentState) {
    var codeContent = "";
    var codeString;
    let currentShadowObject = getActiveShadowDialogTab().id.split("__")[1].split("_")[1].slice(0, -6);
    
    switch (currentShadowObject) {
        case "button":
            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))) {
                let rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState,
                    "boxshadowcolor"));
                codeString = 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) + ")";
                codeContent += "box-shadow: " + codeString + ";";
                switchCurrentStateMainResultButton(currentState);
                mainResultButton.style.boxShadow = codeString;
                setResultButtonToNormal();
            } else {
                switchCurrentStateMainResultButton(currentState);
                mainResultButton.style.boxShadow = "";
                setResultButtonToNormal();
            }
            break;
        case "text":
            if ((buttonInformation.getProperty(currentState, "textshadowtype") != 'none') &&
                ((buttonInformation.getProperty(currentState, "textshadowx") != 0) ||
                (buttonInformation.getProperty(currentState, "textshadowy") != 0) ||
                (buttonInformation.getProperty(currentState, "textshadowblur") != 0))) {
                let rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState,
                    "textshadowcolor"));
                codeString = 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) + ")";
                codeContent += "text-shadow: " + codeString + ";";
                switchCurrentStateMainResultButton(currentState);
                mainResultButton.style.textShadow = codeString;
                setResultButtonToNormal();
            } else {
                switchCurrentStateMainResultButton(currentState);
                mainResultButton.style.textShadow = "";
                setResultButtonToNormal();
            }
            break;
    }

    return codeContent.replace(/\s\s+/g, ' ');
}