BorderDialog.js
js/BorderDialog.js · 12.8 КБ
BorderDialog.js
js
/* Change color of border */
["click", "touchend"].forEach(function(eventType){
document.getElementById("borderdialog-rgbacodeblock__resultcolor_border").addEventListener(eventType, function(){
openColorDialogWindow("borderdialog-rgbacodeblock__resultcolor_border".split("__")[1].split("_")[1],
"borderdialog-interface__window");
});
});
/* Range widgets connect to field widgets */
["input", "change"].forEach(function(eventType){
[].forEach.call(document.getElementsByClassName("borderdialog-optionblock__range"), function(rangeWidget){
rangeWidget.addEventListener(eventType, () => onRangeWidgetValueChanged(rangeWidget));
});
[].forEach.call(document.getElementsByClassName("borderdialog-optionblock__field"), function(rangeField){
rangeField.addEventListener(eventType, () => onRangeWidgetValueChanged(rangeField));
});
});
/* Set range new value to field */
function onRangeWidgetValueChanged(rangeWidget){
let currentInterface = rangeWidget.id.split("-")[0];
let currentState = document.getElementById(currentInterface + "-interface__window").getAttribute("data-info");
let targetInput;
if (rangeWidget.id.split("__")[1].split("_")[0] == "range") {
targetInput = rangeWidget.parentElement.getElementsByClassName(
currentInterface + "-optionblock__field")[0];
} else {
targetInput = rangeWidget.parentElement.getElementsByClassName(
currentInterface + "-optionblock__range")[0];
}
targetInput.value = rangeWidget.value;
buttonInformation.setProperty(currentState,
rangeWidget.id.split("__")[1].split("_")[1], rangeWidget.value);
if (currentInterface == "borderdialog") {
setCodeToCodeAreaBlock(currentInterface, "", generateCodeBorderDialog(currentState));
} else {
setCodeToCodeAreaBlock("shadowdialog", getActiveShadowDialogTab().id.split("__")[1].split("_")[1],
generateCodeShadowDialog(currentState));
}
}
/* Set value to range */
function setRangeValue(interfaceName, rangeName, rangeValue) {
let currentState = document.getElementById(interfaceName + "-interface__window").getAttribute("data-info");
let targetRange = document.getElementById(interfaceName + "-optionblock__range_" + rangeName);
let targetRangeField = document.getElementById(interfaceName + "-optionblock__field_" + rangeName);
targetRange.value = targetRangeField.value = rangeValue;
buttonInformation.setProperty(currentState, rangeName, rangeValue);
if (interfaceName == "borderdialog") {
setCodeToCodeAreaBlock(interfaceName, "", generateCodeBorderDialog(currentState));
} else {
setCodeToCodeAreaBlock("shadowdialog", getActiveShadowDialogTab().id.split("__")[1].split("_")[1],
generateCodeShadowDialog(currentState));
}
}
/* Get value of range */
function getRangeValue(interfaceName, rangeName) {
return parseInt(document.getElementById(interfaceName + "-optionblock__field_" + rangeName).value);
}
/* Reset optionblock button handler */
["click", "touchend"].forEach(function(eventType){
[].forEach.call(document.getElementsByClassName("borderdialog-optionblock__button"), function(resetButton){
resetButton.addEventListener(eventType, () => onButtonResetOptionBlockClicked(resetButton));
});
});
/* Reset optionblock button function */
function onButtonResetOptionBlockClicked(resetButton){
let currentInterface = resetButton.parentElement.classList[0].split("-")[0];
let currentRangeName = resetButton.parentElement.getElementsByClassName(
currentInterface + "-optionblock__range")[0].id.split("__")[1].split("_")[1];
setRangeValue(currentInterface, currentRangeName, 0);
}
/* RGBA fields input filter */
[].forEach.call(document.getElementsByClassName("borderdialog-rgbacodeblock__rgba"),
(colorField) => onDialogColorFieldsChanged(colorField)
);
/* On change color code fields */
function onDialogColorFieldsChanged(colorField) {
switch(colorField.id.split("__")[1].split("_")[1].slice(-1)) {
case "a":
onCodeColorAFieldInput(colorField);
break;
default:
onCodeColorRGBFieldInput(colorField);
break;
}
}
/* On RGBA code color fields changed */
function dialogColorCodeFieldsChanged(buttonID) {
let interfaceName = buttonID.split("__")[0].split("-")[0];
let currentState = document.getElementById(interfaceName + "-interface__window").getAttribute("data-info");
let rgbaCodeBlock = document.getElementById(buttonID).parentElement.parentElement;
let resultColorElementID = rgbaCodeBlock.getElementsByClassName(interfaceName + "-rgbacodeblock__resultcolor")[0].id;
let rgbaFields = rgbaCodeBlock.getElementsByClassName(interfaceName + "-rgbacodeblock__rgba");
let rgbaValues = [parseInt(rgbaFields[0].value),
parseInt(rgbaFields[1].value),
parseInt(rgbaFields[2].value),
parseFloat(rgbaFields[3].value)];
let hexaValue = RGBAToHexA(rgbaValues[0], rgbaValues[1], rgbaValues[2], rgbaValues[3]);
var targetColorProperty = resultColorElementID.split("__")[1].split("_")[1];
setResultColor(resultColorElementID + "::before", rgbaValues);
switch(targetColorProperty){
case "border":
buttonInformation.setProperty(currentState, "bordercolor", hexaValue);
break;
case "button":
buttonInformation.setProperty(currentState, "boxshadowcolor", hexaValue);
break;
case "text":
buttonInformation.setProperty(currentState, "textshadowcolor", hexaValue);
break;
}
if (interfaceName == "borderdialog") {
setCodeToCodeAreaBlock(interfaceName, "", generateCodeBorderDialog(currentState));
} else {
setCodeToCodeAreaBlock("shadowdialog", getActiveShadowDialogTab().id.split("__")[1].split("_")[1],
generateCodeShadowDialog(currentState));
}
}
/* Border type button names */
var borderTypeEnum;
(function (borderTypeEnum) {
borderTypeEnum[borderTypeEnum["Сплошная"] = "Сплошная"] = "Точечная";
borderTypeEnum[borderTypeEnum["Точечная"] = "Точечная"] = "Пунктир";
borderTypeEnum[borderTypeEnum["Пунктир"] = "Пунктир"] = "Двойная";
borderTypeEnum[borderTypeEnum["Двойная"] = "Двойная"] = "Внутренняя";
borderTypeEnum[borderTypeEnum["Внутренняя"] = "Внутренняя"] = "Внешняя";
borderTypeEnum[borderTypeEnum["Внешняя"] = "Внешняя"] = "Сплошная";
})(borderTypeEnum || (borderTypeEnum = {}));
/* Border type button values */
const borderTypeValues = { "Сплошная": "solid", "Точечная": "dotted",
"Пунктир": "dashed", "Двойная": "double", "Внутренняя": "inset", "Внешняя": "outset",
"solid": "Сплошная", "dotted": "Точечная", "dashed": "Пунктир", "double": "Двойная",
"inset": "Внутренняя", "outset": "Внешняя" };
/* Change border type button */
["click", "touchend"].forEach((eventType) => {
document.getElementById("borderdialog-section__button_bordertype").addEventListener(
eventType, (e) => setBorderType(borderTypeEnum[e.target.textContent.replace(/\s/g, "")], e.target)
);
});
/* Set border type function */
function setBorderType(borderTypeName, buttonBorderType) {
let currentInterface = buttonBorderType.id.split("-")[0];
let currentState = document.getElementById(currentInterface + "-interface__window").getAttribute("data-info");
buttonBorderType.textContent = borderTypeName;
buttonBorderType.setAttribute("data-info", borderTypeValues[borderTypeName]);
buttonInformation.setProperty(currentState,
buttonBorderType.id.split("__")[1].split("_")[1], borderTypeValues[borderTypeName]);
setCodeToCodeAreaBlock(currentInterface, "", generateCodeBorderDialog(currentState));
}
/* Set settings by current state */
function updateSettingsBorderDialog(currentState) {
setRangeValue("borderdialog", "bordersize", buttonInformation.getProperty(currentState, "bordersize"));
setRangeValue("borderdialog", "borderradius", buttonInformation.getProperty(currentState, "borderradius"));
setRangeValue("borderdialog", "paddingleft", buttonInformation.getProperty(currentState, "paddingleft"));
setRangeValue("borderdialog", "paddingright", buttonInformation.getProperty(currentState, "paddingright"));
setRangeValue("borderdialog", "paddingtop", buttonInformation.getProperty(currentState, "paddingtop"));
setRangeValue("borderdialog", "paddingbottom", buttonInformation.getProperty(currentState, "paddingbottom"));
rgbaFields = document.getElementsByClassName("borderdialog-rgbacodeblock__rgba");
rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "bordercolor"));
rgbaFields[0].value = rgbaValues[0];
rgbaFields[1].value = rgbaValues[1];
rgbaFields[2].value = rgbaValues[2];
rgbaFields[3].value = parseFloat(rgbaValues[3]).toPrecision(2);
dialogColorCodeFieldsChanged(rgbaFields[0].id);
setBorderType(borderTypeValues[buttonInformation.getProperty(currentState, "bordertype")],
document.getElementById("borderdialog-section__button_bordertype"));
setCodeToCodeAreaBlock("borderdialog", "", generateCodeBorderDialog(currentState));
}
/* Generate CSS code for borderdialog */
function generateCodeBorderDialog(currentState) {
var codeContent = "";
if (buttonInformation.getProperty(currentState, "bordersize") > 0) {
rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "bordercolor"));
var codeString = buttonInformation.getProperty(currentState, "bordersize")
+ "px " + buttonInformation.getProperty(currentState, "bordertype")
+ " rgba(" + rgbaValues[0] + ", " + rgbaValues[1] + ", " + rgbaValues[2] + ", "
+ rgbaValues[3].toPrecision(2) + ")";
codeContent += "border: " + codeString + ";\n";
switchCurrentStateMainResultButton(currentState);
mainResultButton.style.border = codeString;
setResultButtonToNormal();
} else {
switchCurrentStateMainResultButton(currentState);
mainResultButton.style.border = "";
setResultButtonToNormal();
}
if (buttonInformation.getProperty(currentState, "borderradius") > 0) {
codeString = buttonInformation.getProperty(currentState, "borderradius") + "px";
codeContent += "border-radius: " + codeString + ";\n";
switchCurrentStateMainResultButton(currentState);
mainResultButton.style.borderRadius = codeString;
setResultButtonToNormal();
} else {
switchCurrentStateMainResultButton(currentState);
mainResultButton.style.borderRadius = "";
setResultButtonToNormal();
}
if ((buttonInformation.getProperty(currentState, "paddingtop") > 0) ||
(buttonInformation.getProperty(currentState, "paddingbottom") > 0) ||
(buttonInformation.getProperty(currentState, "paddingright") > 0) ||
(buttonInformation.getProperty(currentState, "paddingleft") > 0)) {
codeString = buttonInformation.getProperty(currentState, "paddingtop") + "px "
+ buttonInformation.getProperty(currentState, "paddingright") + "px "
+ buttonInformation.getProperty(currentState, "paddingbottom") + "px "
+ buttonInformation.getProperty(currentState, "paddingleft") + "px";
codeContent += "padding: " + codeString + ";";
switchCurrentStateMainResultButton(currentState);
mainResultButton.style.padding = codeString;
setResultButtonToNormal();
} else {
switchCurrentStateMainResultButton(currentState);
mainResultButton.style.padding = "";
setResultButtonToNormal();
}
return codeContent;
}
/* Copy button handler */
["click", "touchend"].forEach(function(eventType){
document.getElementsByClassName("borderdialog-codeblock__copy")[0].addEventListener(eventType, function(e){
copyCodeButtonClicked(e.target);
});
});
/* Switch current state of MainResultButton */
function switchCurrentStateMainResultButton(currentState) {
switch(currentState) {
case "normal":
setResultButtonToNormal();
break;
case "hover":
setResultButtonToHover();
break;
case "pressed":
setResultButtonToPressed();
break;
}
}
/* Paste CSS code in code area by interface name */
function setCodeToCodeAreaBlock(interfaceName, prefix="", codeContent) {
if (prefix != "")
prefix = "_" + prefix;
let codeWidget = document.getElementById(interfaceName + "-codeblock__code" + prefix);
codeWidget.textContent = codeContent;
window.setTimeout(function(){
displayLineNumbers(interfaceName, prefix);
highlightCssCode(interfaceName, prefix);
}, 10);
}