script.js

var colorData = {
    mainColor: {
        name: 'Main Color (gradient)',
        hexValue: '',
    },

    mainColor_: {
        name: '',
        hexValue: '',
    },

    onMainTextColor: {
        name: 'Toolbar text color',
        hexValue: '',
    },

    onMainIconColor: {
        name: 'Toolbar icon color (gradient)',
        hexValue: '',
    },

    onMainIconColor_: {
        name: '',
        hexValue: '',
    },

    focusedMainColor: {
        name: 'Toolbar focused item color (gradient)',
        hexValue: '',
    },

    focusedMainColor_: {
        name: '',
        hexValue: '',
    },

    backgroundColor: {
        name: 'Background color',
        hexValue: '',
    },

    textColor: {
        name: 'Text color',
        hexValue: '',
    },

    descriptionColor: {
        name: 'Description text color',
        hexValue: '',
    },

    captionColor: {
        name: 'Caption text color',
        hexValue: '',
    },

    iconColor: {
        name: 'Icons color (gradient)',
        hexValue: '',
    },

    iconColor_: {
        name: '',
        hexValue: '',
    },

    borderColor: {
        name: 'Textfield border color',
        hexValue: '',
    },

    checkboxColor: {
        name: 'Checkbox ring color (gradient)',
        hexValue: '',
    },

    gotoColor: {
        name: 'Goto chevron color',
        hexValue: '',
    },

    checkboxColor_: {
        name: '',
        hexValue: '',
    },

    gotoColor_: {
        name: '',
        hexValue: '',
    },

    focusedBackgroundColor: {
        name: 'Focused item color (gradient)',
        hexValue: '',
    },

    focusedBackgroundColor_: {
        name: '',
        hexValue: '',
    },

    focusedTextColor: {
        name: 'Focused text color',
        hexValue: '',
    },

    focusedDescriptionColor: {
        name: 'Focused description text color',
        hexValue: '',
    },

    focusedCaptionColor: {
        name: 'Focused caption text color',
        hexValue: '',
    },

    focusedIconColor: {
        name: 'Focused icons color (gradient)',
        hexValue: '',
    },

    focusedIconColor_: {
        name: '',
        hexValue: '',
    },

    focusedBorderColor: {
        name: 'Focused item border color',
        hexValue: '',
    },

    selectedCheckboxColor: {
        name: 'Selected checkbox color (gradient)',
        hexValue: '',
    },

    focusedCheckboxColor: {
        name: 'Focused checkbox color (gradient)',
        hexValue: '',
    },

    focusedGotoColor: {
        name: 'Focused goto chevron color (gradient)',
        hexValue: '',
    },

    selectedCheckboxColor_: {
        name: '',
        hexValue: '',
    },

    focusedCheckboxColor_: {
        name: '',
        hexValue: '',
    },

    focusedGotoColor_: {
        name: '',
        hexValue: '',
    },

    activeIconColor: {
        name: '[unused] Icons badge color (gradient)',
        hexValue: '',
    },

    activeIconColor_: {
        name: '',
        hexValue: '',
    },

    unreadBackgroundColor: {
        name: 'Unread chat background color (gradient)',
        hexValue: '',
    },

    unreadBackgroundColor_: {
        name: '',
        hexValue: '',
    },

    unreadCloudForegroundColor: {
        name: 'Unread badge text color',
        hexValue: '',
    },

    unreadCloudBackgroundColor: {
        name: 'Unread badge color (gradient)',
        hexValue: '',
    },

    unreadCloudBackgroundColor_: {
        name: '',
        hexValue: '',
    },

    focusedUnreadCloudForegroundColor: {
        name: 'Focused unread badge text color',
        hexValue: '',
    },

    focusedUnreadCloudBackgroundColor: {
        name: 'Unread badge color (gradient)',
        hexValue: '',
    },

    focusedUnreadCloudBackgroundColor_: {
        name: '',
        hexValue: '',
    },

    itemSeparatorColor: {
        name: 'Separator color',
        hexValue: '',
    },

    footerColor: {
        name: 'Content footer color',
        hexValue: '',
    },

    nonLoadedContentColor: {
        name: 'Nonloaded content color',
        hexValue: '',
    },

    sliderColor: {
        name: 'Slider color (gradient)',
        hexValue: '',
    },

    sliderColor_: {
        name: '',
        hexValue: '',
    },

    sliderLoadedColor: {
        name: 'Loaded part slider color (gradient)',
        hexValue: '',
    },

    sliderLoadedColor_: {
        name: '',
        hexValue: '',
    },

    sliderButtonColor: {
        name: 'Slider knob color (gradient)',
        hexValue: '',
    },

    sliderButtonColor_: {
        name: '',
        hexValue: '',
    },

    focusedSliderButtonColor: {
        name: 'Focused slider knob color (gradient)',
        hexValue: '',
    },

    focusedSliderButtonColor_: {
        name: '',
        hexValue: '',
    },

    sliderButtonBorderColor: {
        name: 'Slider knob border color',
        hexValue: '',
    },

    userMessageColor: {
        name: 'Sent message color (gradient)',
        hexValue: '',
    },

    userMessageColor_: {
        name: '',
        hexValue: '',
    },

    somebodyMessageColor: {
        name: 'Received message color (gradient)',
        hexValue: '',
    },

    somebodyMessageColor_: {
        name: '',
        hexValue: '',
    },

    userMessageBorderColor: {
        name: 'Sent message border color',
        hexValue: '',
    },

    somebodyMessageBorderColor: {
        name: 'Received message border color',
        hexValue: '',
    },

    actionMessageColor: {
        name: 'Chat action color',
        hexValue: '',
    },

    userMessageQuoteColor: {
        name: 'Sent quote bar color',
        hexValue: '',
    },

    somebodyMessageQuoteColor: {
        name: 'Received quote bar color',
        hexValue: '',
    },

    messageContentBackgroundColor: {
        name: 'Chat background color',
        hexValue: '',
    },

    spinnerIconColor: {
        name: 'Spinner color',
        hexValue: '',
    },

    onlineIconColor: {
        name: 'Online badge color',
        hexValue: '',
    },

    onlineBackgroundColor: {
        name: 'Online badge background color',
        hexValue: '',
    },

    dimmColor: {
        name: 'Dimming color',
        hexValue: '',
    },

    msgFieldBackgroundColor: {
        name: 'Message textfield color',
        hexValue: '',
    },

    likeColor: {
        name: 'Like color (gradient)',
        hexValue: '',
    },

    likeColor_: {
        name: '',
        hexValue: '',
    },

    likeTextColor: {
        name: 'Like counter color',
        hexValue: '',
    },

    focusedLikeColor: {
        name: 'Focused like color (gradient)',
        hexValue: '',
    },

    focusedLikeColor_: {
        name: '',
        hexValue: '',
    },

    focusedLikeTextColor: {
        name: 'Focused like counter color',
        hexValue: '',
    },

    scrollColor: {
        name: 'Scrollbar color',
        hexValue: '',
    },

    footerLineColor: {
        name: 'Content footer shadow',
        hexValue: '',
    },

    popupColor: {
        name: 'Popup color',
        hexValue: '',
    },

    focusedSliderButtonBorderColor: {
        name: 'Focused slider knob border color',
        hexValue: '',
    },

    mutedUnreadCloudBackgroundColor: {
        name: 'Muted unread badge color (gradient)',
        hexValue: '',
    },

    mutedUnreadCloudBackgroundColor_: {
        name: '',
        hexValue: '',
    },

    focusedMutedUnreadCloudBackgroundColor: {
        name: 'Focused muted unread badge color (gradient)',
        hexValue: '',
    },

    focusedMutedUnreadCloudBackgroundColor_: {
        name: '',
        hexValue: '',
    },

}

Object.seal(colorData);
var defb64 = "RURJIiEm________1NTUdZ3sR268____AAAAPj4-d3d3lJSUZGRk1NTUlJSUlJSUZGRkZGRkdZ3sR268________________1NTUR268CdAJ________BpcG1NTU1NTUdZ3sR2686e706e70____dZ3sR268dZ3s____1NTU3t7e5OTk1NTUxMTE5OTkdZ3sR2685OTkxMTEdZ3sR268tLS0ytn4kajX5OTkxMTEip_KtLS0lJSUR268ZGRk________Snao____AAAA_____4B-yElH_11b_4B-yElH_11bAAAA3t7e____3t7egoKCZmZm____1NTUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA";

var importedb64 = defb64;
var themeName = 'NewTheme'
var themeEngVer = '3.0.1'


// window.onbeforeunload = function (){
//     return "Unsaved changes will be lost";
// };

Coloris({
    themeMode: 'auto',
    alpha: false,
    format: 'hex',
});

function propChanger(prop) {
    if (prop.name === 'theme-name')
        themeName = prop.value
    if (prop.name === 'theme-eng-ver')
        themeEngVer = prop.value
}

function clearBox(elementID) {
    document.getElementById(elementID).innerHTML = "";
}

function fileHandler(input) {
    let file = input.files[0];
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function () {
        let fileArr = reader.result.split('\n');
        if (fileArr.length === 4) {
            if (fileArr[0] === "VK4ME Theme") {
                themeName = fileArr[1];
                themeEngVer = fileArr[2];
                importedb64 = fileArr[3];
                document.getElementsByName('theme-name')[0].value = themeName;
                document.getElementsByName('theme-eng-ver')[0].value = themeEngVer;
                previewInit();
            }
        } else
            alert("Wrong file. Try another one.")
    }
    reader.onerror = function () {
        console.log(reader.error);
    };
}

function b64ToHex() {
    let hexArray = [];
    let b64InputValue = importedb64;
    b64InputValue = atob(b64InputValue.replace(/-/g, "+").replace(/_/g, "/"));
    for (let i = 0, l = b64InputValue.length; i < l; i++) {
        let hex = Number(b64InputValue.charCodeAt(i)).toString(16);
        hexArray.push(hex.length > 1 && hex || "0" + hex);
    }
    let arrayIndex = 2;
    for (let i in colorData) {
        colorData[i].hexValue = hexArray[arrayIndex - 2] + hexArray[arrayIndex - 1] + hexArray[arrayIndex];
        arrayIndex += 3;
    }
    //console.log(colorData);
}

function hexTob64() {
    let hex = '';
    for (let i in colorData) {
        hex += colorData[i].hexValue;
    }
    if (hex.length < 600) {
        hex += '0'.repeat(600 - hex.length);
    }
    let b64Result = ''; /* check if var need instead of let */
    for (let i = 0; i < hex.length; i += 2)
        b64Result += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    b64Result = btoa(b64Result).replace(/\+/g, "-").replace(/\//g, "_");
    //console.log(b64Result);
    importedb64 = b64Result;
}

function listEditor() {
    clearBox('themingElementsList');
    let themingElementsList = document.getElementById("themingElementsList")
    for (let i in colorData) {
        if (i.slice(-1) !== '_') {
            let themingElement = document.createElement('div');
            themingElement.className = "themingElement"
            themingElement.setAttribute("id", "elem-" + i)
            if (i + "_" in colorData) { /* TODO: заменить title на "первый цвет", "второй цвет", onHover="previewEditor(this)"*/
                themingElement.innerHTML = '<span>' + colorData[i].name + '</span>' +
                    '<input data-coloris type="text" title="' + i + '" id="' + i + '" value="#' + colorData[i].hexValue + '" oninput="listListener(this);" class="colorInput">'+
                    '<input data-coloris type="text" title="' + i + '_" id="' + i + '_" value="#' + colorData[i + "_"].hexValue + '" oninput="listListener(this);" class="colorInput">';
                themingElementsList.appendChild(themingElement);
            } else {
                themingElement.innerHTML = '<span>' + colorData[i].name + '</span>' +
                        '<input data-coloris type="text" title="' + i + '" id="' + i + '" value="#' + colorData[i].hexValue + '" oninput="listListener(this);" class="colorInput">';
                themingElementsList.appendChild(themingElement);
            }
        }
    }
}

function previewEditor(inputElem) {
    /*если изменился первый цвет градиента и второй есть в списке цветов */
    if (inputElem.id.slice(-1) !== "_" && inputElem.id + "_" in colorData) {
        let elemPreview = Array.from(document.getElementsByClassName(inputElem.id + 'Preview'))
        let startOfGradient = "#" + colorData[inputElem.id].hexValue
        let endOfGradient = "#" + colorData[inputElem.id + "_"].hexValue
        for (let i in elemPreview) {
            if (elemPreview[i].tagName === 'linearGradient') {
                /*TODO: change getElementsByClassName to getElementById if needed */
                elemPreview[i].children[0].setAttribute("stop-color", startOfGradient)
                elemPreview[i].children[1].setAttribute("stop-color", endOfGradient)
            } else {
                elemPreview[i].style.background = "linear-gradient(" + startOfGradient + ", " + endOfGradient + ")"
            }
        }
    }
    /* иначе если изменился второй цвет */
    else if (inputElem.id.slice(-1) === "_") {
        let elemPreview = Array.from(document.getElementsByClassName(inputElem.id.slice(0, -1) + 'Preview'))
        let startOfGradient = "#" + colorData[inputElem.id.slice(0, -1)].hexValue
        let endOfGradient = "#" + colorData[inputElem.id].hexValue
        for (let i in elemPreview) {
            if (elemPreview[i].tagName === 'linearGradient') {
                elemPreview[i].children[0].setAttribute("stop-color", startOfGradient)
                elemPreview[i].children[1].setAttribute("stop-color", endOfGradient)
            } else {
                elemPreview[i].style.background = "linear-gradient(" + startOfGradient + ", " + endOfGradient + ")"
            }
        }
    }
    /* иначе если второго цвета нет */
    else if (inputElem.id.slice(-1) !== "_" && !(inputElem.id + "_" in colorData)) {
        let elemPreview = Array.from(document.getElementsByClassName(inputElem.id + 'Preview'))
        /*console.log(elemPreview)*/
        for (let i in elemPreview) {
            switch (elemPreview[i].tagName) {
                case "SPAN":
                    elemPreview[i].style.color = "#" + colorData[inputElem.id].hexValue;
                    break;
                case "B":
                    elemPreview[i].style.color = "#" + colorData[inputElem.id].hexValue;
                    break;
                case "svg":
                    elemPreview[i].children[0].setAttribute("fill", "#" + colorData[inputElem.id].hexValue);
                    break;
                case "circle":
                    elemPreview[i].style.fill = "#" + colorData[inputElem.id].hexValue;
                    break;
                case "INPUT":
                    if (elemPreview[i].className === "focusedBorderColorPreview captionColorPreview") {
                        elemPreview[i].style.borderColor = "#" + colorData.focusedBorderColor.hexValue;
                        elemPreview[i].style.color = "#" + colorData.captionColor.hexValue;
                        break;
                    }
                    if (elemPreview[i].className === "borderColorPreview captionColorPreview") {
                        elemPreview[i].style.borderColor = "#" + colorData.borderColor.hexValue;
                        elemPreview[i].style.color = "#" + colorData.captionColor.hexValue;
                        break;
                    }
                    break;
                case "DIV":
                    if (elemPreview[i].className === "somebodyMessageColorPreview somebodyMessageBorderColorPreview") {
                        elemPreview[i].style.borderColor = "#" + colorData.somebodyMessageBorderColor.hexValue;
                        break;
                    }
                    if (elemPreview[i].className === "userMessageColorPreview userMessageBorderColorPreview") {
                        elemPreview[i].style.borderColor = "#" + colorData.userMessageBorderColor.hexValue;
                        break;
                    }
                    if (elemPreview[i].className === "dimmColorPreview") {
                        elemPreview[i].style.background = "#" + colorData[inputElem.id].hexValue;
                        elemPreview[i].style.background = elemPreview[i].style.background.slice(0, -1) + ", 0.6)";
                        break;
                    }
                default:
                    elemPreview[i].style.background = "#" + colorData[inputElem.id].hexValue;
            }
        }
    }
}

function listListener(inputElem) {
    //console.log('changed ' + inputElem.id + ' ' + inputElem.value)
    colorData[inputElem.id].hexValue = inputElem.value.slice(1)
    previewEditor(inputElem)
}

function previewInit() {
    b64ToHex();
    listEditor();
    let colorInputs = Array.from(document.getElementsByClassName('colorInput'));
    for (let i in colorInputs)
        listListener(colorInputs[i])
}

function saveStaticDataToFile() {
    hexTob64();
    let blob = new Blob(["VK4ME Theme\n" + themeName + "\n" + themeEngVer + "\n" + importedb64], {type: "text/plain;charset=utf-8"});
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, themeName + ".theme");
    } else {
        const elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = themeName + ".theme";
        document.body.appendChild(elem);
        elem.click();
        document.body.removeChild(elem);
    }
}

previewInit();