CreativeButton.js
js/CreativeButton.js · 28.4 КБ
CreativeButton.js
js
importOmModule("/js/ButtonInformation.js");
/* Result Button */
mainResultButton = document.getElementById("creativebutton-result__button");
/******************* Content Buttons Logic ***************************/
function contentButtonHandler(buttonID) {
contentButton = document.getElementById(buttonID);
childElements = contentButton.parentNode.getElementsByClassName(contentButton.parentNode.id
+ "__element");
for (childElement of childElements) {
childElement.classList.toggle("unvisible");
}
}
/* Content buttons add listener */
["creativebutton-normalstate__button_content", "creativebutton-hoverstate__button_content",
"creativebutton-pressedstate__button_content", "creativebutton-normalstate__button_back",
"creativebutton-hoverstate__button_back", "getcolor-gradientsettings__buttonradial",
"getcolor-gradientsettings__buttonlinear",
"creativebutton-pressedstate__button_back"].forEach(function(buttonID){
["click", "touchend"].forEach(function(eventType){
document.getElementById(buttonID).addEventListener(eventType, function(){
contentButtonHandler(buttonID);
});
});
});
/**************** END: Content Buttons Logic *************************/
/******************* App menu ***************************/
/* Open menu button handler */
function appMenuOpen(menuoverlayID, dataInfo = "app") {
menuOverlay = document.getElementById(menuoverlayID);
titleBarSize = parseFloat(window.getComputedStyle(
document.getElementById("app-interface__titlebar")).getPropertyValue("height"))
+ parseFloat(window.getComputedStyle(
document.getElementById("app-interface__titlebar")).getPropertyValue("padding-top"))
+ parseFloat(window.getComputedStyle(
document.getElementById("app-interface__titlebar")).getPropertyValue("padding-bottom"));
windowContentSize = parseFloat(window.getComputedStyle(
document.getElementById("app-interface__content")).getPropertyValue("height"));
menuOverlay.style.top = titleBarSize + "px";
menuOverlay.style.height = windowContentSize + "px";
if (menuOverlay.getElementsByClassName("creativebutton-menuoverlay__element").length > 3)
menuOverlay.style.left = "-4px";
if (dataInfo != "app") {
menuOverlay.setAttribute('data-info', dataInfo);
}
["click", "touchend"].forEach(function(eventType){
menuOverlay.getElementsByClassName("creativebutton-menuoverlay__element_close")[0].addEventListener(
eventType, function(){
appMenuClose(menuoverlayID);
});
});
}
/* Close menu button handler */
function appMenuClose(menuoverlayID) {
document.getElementById(menuoverlayID).style.height = "0%";
}
["click", "touchend"].forEach(function(eventType){
document.getElementById("creativebutton-managebutton__button_menu").addEventListener(eventType, function(){
appMenuOpen("creativebutton-menuoverlay_app");
});
});
/**************** END: App menu *************************/
/******************** Button customize ******************/
/* Button caption */
fieldButtonCaption = document.getElementById("creativebutton-managebutton__field_buttonname");
fieldButtonCaption.addEventListener("input", function(){
mainResultButton.textContent = fieldButtonCaption.value;
});
/* Change font size button handlers */
["click", "touchend", "input", "keyup", "propertychange"].forEach(function(eventType){
["creativebutton-normalstate__fontsize", "creativebutton-hoverstate__fontsize",
"creativebutton-pressedstate__fontsize"].forEach(function(fieldID){
document.getElementById(fieldID).addEventListener(eventType, function(){
// Добавить функцию проверки поля на цифры
document.getElementById(fieldID).setAttribute("data-info",
document.getElementById(fieldID).value);
changeFontSize(fieldID);
});
});
});
/* Change font size function */
// creativebutton-pressedstate__fontsize
function changeFontSize(elementID) {
currentState = elementID.split("__")[0].split("-")[1].slice(0, -5);
currentSizeField = document.getElementById("creativebutton-" + currentState + "state__fontsize");
currentMetric = document.getElementById("creativebutton-" + currentState + "state__button_fontmetric");
buttonInformation.setProperty(currentState, "fontsize", parseInt(currentSizeField.value));
switch(currentState){
case "normal":
setResultButtonToNormal();
mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
+ currentMetric.textContent.replace(/\s/g, "");
setResultButtonToHover();
mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
+ currentMetric.textContent.replace(/\s/g, "");
document.getElementById("creativebutton-hoverstate__fontsize").value
= parseInt(currentSizeField.value.replace(/\s/g, ""));
document.getElementById("creativebutton-hoverstate__button_fontmetric").textContent
= document.getElementById("creativebutton-normalstate__button_fontmetric").textContent;
setResultButtonToPressed();
mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
+ currentMetric.textContent.replace(/\s/g, "");
document.getElementById("creativebutton-pressedstate__fontsize").value
= parseInt(currentSizeField.value.replace(/\s/g, ""));
document.getElementById("creativebutton-pressedstate__button_fontmetric").textContent
= document.getElementById("creativebutton-normalstate__button_fontmetric").textContent;
setResultButtonToNormal();
break;
case "hover":
setResultButtonToHover();
mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
+ currentMetric.textContent.replace(/\s/g, "");
setResultButtonToNormal();
break;
case "pressed":
setResultButtonToPressed();
mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
+ currentMetric.textContent.replace(/\s/g, "");
setResultButtonToNormal();
}
}
/* Metric enum */
var metricsEnum;
(function (metricsEnum) {
metricsEnum[metricsEnum["px"] = "px"] = "pt";
metricsEnum[metricsEnum["pt"] = "pt"] = "em";
metricsEnum[metricsEnum["em"] = "em"] = "px";
})(metricsEnum || (metricsEnum = {}));
/* Font metric */
["click", "touchend"].forEach(function(eventType){
["creativebutton-normalstate__button_fontmetric", "creativebutton-hoverstate__button_fontmetric",
"creativebutton-pressedstate__button_fontmetric"].forEach(function(buttonID){
document.getElementById(buttonID).addEventListener(eventType, function(){
this.textContent = metricsEnum[this.textContent.replace(/\s/g, "")];
currentSizeField = document.getElementById("creativebutton-"
+ buttonID.split("__")[0].split("-")[1].slice(0, -5)
+ "state__fontsize");
if (this.textContent == "px") { // em to px
currentSizeField.value =
(parseFloat(currentSizeField.getAttribute("data-info")) * 16).toFixed();
currentSizeField.setAttribute("data-info",
(parseFloat(currentSizeField.getAttribute("data-info")) * 16));
}
else if (this.textContent == "pt") { // px to pt
currentSizeField.value =
(parseFloat(currentSizeField.getAttribute("data-info")) * 0.75).toFixed();
currentSizeField.setAttribute("data-info",
(parseFloat(currentSizeField.getAttribute("data-info")) * 0.75));
}
else if (this.textContent == "em") { // pt to em
currentSizeField.value =
(parseFloat(currentSizeField.getAttribute("data-info")) * 0.08333333333333334).toFixed();
currentSizeField.setAttribute("data-info",
(parseFloat(currentSizeField.getAttribute("data-info")) * 0.08333333333333334));
}
changeFontSize(buttonID);
});
});
});
/* Font family */
["click", "touchend"].forEach(function(eventType){
["creativebutton-normalstate__button_font", "creativebutton-hoverstate__button_font",
"creativebutton-pressedstate__button_font"].forEach(function(buttonID){
document.getElementById(buttonID).addEventListener(eventType, function(){
appMenuOpen("creativebutton-menuoverlay_font",
buttonID.split("__")[0].split("-")[1].slice(0, -5));
});
});
});
/* Select font family */
["click", "touchend"].forEach(function(eventType){
["creativebutton-menuoverlay__element_arial", "creativebutton-menuoverlay__element_courier",
"creativebutton-menuoverlay__element_georgia", "creativebutton-menuoverlay__element_impact",
"creativebutton-menuoverlay__element_roboto", "creativebutton-menuoverlay__element_times",
"creativebutton-menuoverlay__element_verdana"].forEach(function(buttonID){
document.getElementById(buttonID).addEventListener(eventType, function(){
currentState = document.getElementById("creativebutton-menuoverlay_font").getAttribute("data-info");
setValueButtonFont("creativebutton-" + currentState + "state__button_font",
this.textContent, currentState);
appMenuClose("creativebutton-menuoverlay_font");
});
});
});
/* Font family full names */
const fontFamilyNames = {"arial": "Arial, sans-serif", "courier": "Courier New, sans-serif",
"georgia": "Georgia, sans-serif", "impact": "Impact, sans-serif",
"roboto": "'Roboto', sans-serif", "times": "Times New Roman, sans-serif",
"verdana": "Verdana, sans-serif"};
/* Set value for button font family */
function setValueButtonFont(buttonID, buttonFont, currentState) {
buttonElement = document.getElementById(buttonID);
buttonElement.setAttribute("data-info", buttonFont);
if (buttonFont.length > 13)
buttonElement.textContent = buttonFont.slice(0, 10) + "...";
else
buttonElement.textContent = buttonFont;
switch(currentState) {
case "normal":
setResultButtonToNormal();
mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
setResultButtonToHover();
mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
setResultButtonToPressed();
mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
setResultButtonToNormal();
document.getElementById("creativebutton-hoverstate__button_font").textContent
= buttonElement.textContent;
document.getElementById("creativebutton-pressedstate__button_font").textContent
= buttonElement.textContent;
break;
case "hover":
setResultButtonToHover();
mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
setResultButtonToNormal();
break;
case "pressed":
setResultButtonToPressed();
mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
setResultButtonToNormal();
break;
}
}
/* Color buttons pressed */
["click", "touchend"].forEach(function(eventType){
document.getElementById("creativebutton-managebutton__button_code").addEventListener(eventType, function(){
openCodeDialogWindow();
});
["creativebutton-normalstate__button_border", "creativebutton-hoverstate__button_border",
"creativebutton-pressedstate__button_border"].forEach(function(buttonID){
document.getElementById(buttonID).addEventListener(eventType, function(){
openBorderDialogWindow(buttonID.split("__")[0].split("-")[1].slice(0, -5));
});
});
["creativebutton-normalstate__button_color", "creativebutton-hoverstate__button_color",
"creativebutton-pressedstate__button_color"].forEach(function(buttonID){
document.getElementById(buttonID).addEventListener(eventType, function(){
openColorDialogWindow(buttonID.split("__")[0].split("-")[1].slice(0, -5));
});
});
["creativebutton-normalstate__button_shadow", "creativebutton-hoverstate__button_shadow",
"creativebutton-pressedstate__button_shadow"].forEach(function(buttonID){
document.getElementById(buttonID).addEventListener(eventType, function(){
openShadowDialogWindow(buttonID.split("__")[0].split("-")[1].slice(0, -5));
});
});
});
/* Open Code Dialog function */
function openCodeDialogWindow() {
codeDialogWindow = document.getElementById("codedialog-interface__window");
window.setTimeout(function(){
if (codeDialogWindow.classList.contains("unvisible")) {
codeDialogWindow.classList.toggle("unvisible");
codeDialogWindow.style.zIndex = openedWindows.length;
document.getElementById("app-interface__window").style.zIndex -= 1;
codeDialogWindow.style.opacity = "1.0";
codeDialogWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(codeDialogWindow).getPropertyValue("height")) / 2) + "px)";
codeDialogWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(codeDialogWindow).getPropertyValue("width")) / 2) + "px)";
document.getElementById("codedialog-codeblock__codetab_css").click();
displayLineNumbers("codedialog", "css");
highlightCssCode("codedialog", "css");
}
}, 5);
// TODO: Add function for reset settings in dialog window
}
/* States names enum */
const stateNames = {"normal": "Нормальный", "hover": "Наведение", "pressed": "Нажатие",
"text": "Тень текста", "button": "Тень кнопки", "border": "Граница"};
/* Open Color Dialog function */
function openColorDialogWindow(currentState, callWindowID="app-interface__window") {
let colorDialogWindow = document.getElementById("getcolor-interface__window");
let callWindow = document.getElementById(callWindowID);
colorDialogWindow.setAttribute("data-info", currentState);
document.getElementById("getcolor-interface__titlebarcaption").textContent = "Диалог цвета - " + stateNames[currentState];
window.setTimeout(function(){
if (colorDialogWindow.classList.contains("unvisible")) {
colorDialogWindow.classList.toggle("unvisible");
colorDialogWindow.style.opacity = "1.0";
colorDialogWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(colorDialogWindow).getPropertyValue("height")) / 2) + "px)";
colorDialogWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(colorDialogWindow).getPropertyValue("width")) / 2) + "px)";
}
colorDialogWindow.style.zIndex = openedWindows.length;
callWindow.style.zIndex -= 1;
changeLinePickerCursor();
}, 50);
updateSettingsColorDialog(currentState, callWindow);
}
/* Open Shadow Dialog function */
function openShadowDialogWindow(currentState) {
let shadowDialogWindow = document.getElementById("shadowdialog-interface__window");
shadowDialogWindow.setAttribute("data-info", currentState);
document.getElementById("shadowdialog-interface__titlebarcaption").textContent = "Свойства тени - " + stateNames[currentState];
window.setTimeout(function(){
if (shadowDialogWindow.classList.contains("unvisible")) {
shadowDialogWindow.classList.toggle("unvisible");
shadowDialogWindow.style.zIndex = openedWindows.length;
document.getElementById("app-interface__window").style.zIndex -= 1;
shadowDialogWindow.style.opacity = "1.0";
shadowDialogWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(shadowDialogWindow).getPropertyValue("height")) / 2) + "px)";
shadowDialogWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(shadowDialogWindow).getPropertyValue("width")) / 2) + "px)";
}
}, 5);
updateSettingsShadowDialog(currentState);
}
/* Open Border Dialog function */
function openBorderDialogWindow(currentState) {
borderDialogWindow = document.getElementById("borderdialog-interface__window");
borderDialogWindow.setAttribute("data-info", currentState);
document.getElementById("borderdialog-interface__titlebarcaption").textContent = "Настройки границы - " + stateNames[currentState];
window.setTimeout(function(){
if (borderDialogWindow.classList.contains("unvisible")) {
borderDialogWindow.classList.toggle("unvisible");
borderDialogWindow.style.zIndex = openedWindows.length;
document.getElementById("app-interface__window").style.zIndex -= 1;
borderDialogWindow.style.opacity = "1.0";
borderDialogWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(borderDialogWindow).getPropertyValue("height")) / 2) + "px)";
borderDialogWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(borderDialogWindow).getPropertyValue("width")) / 2) + "px)";
}
}, 5);
updateSettingsBorderDialog(currentState);
}
/**********************/
/***************** END: Button customize ****************/
/* Result button */
mainResultButton.addEventListener("mouseenter", function(){
saveStyleButton();
mainResultButton.classList = ["creativebutton-result__hoverbutton"];
setStyleButton();
});
mainResultButton.addEventListener("mouseleave", function(){
saveStyleButton();
mainResultButton.classList = ["creativebutton-result__normalbutton"];
setStyleButton();
});
["mousedown", "touchstart"].forEach(function(eventType){
mainResultButton.addEventListener(eventType, function(){
saveStyleButton();
mainResultButton.classList = ["creativebutton-result__pressedbutton"];
setStyleButton();
});
});
["mouseup", "touchend"].forEach(function(eventType){
mainResultButton.addEventListener(eventType, function(){
saveStyleButton();
mainResultButton.classList = ["creativebutton-result__hoverbutton"];
setStyleButton();
});
});
/* Change current state of result button to normal */
function setResultButtonToNormal() {
saveStyleButton();
mainResultButton.classList = ["creativebutton-result__normalbutton"];
setStyleButton();
}
/* Change current state of result button to hover */
function setResultButtonToHover() {
saveStyleButton();
mainResultButton.classList = ["creativebutton-result__hoverbutton"];
setStyleButton();
}
/* Change current state of result button to pressed */
function setResultButtonToPressed() {
saveStyleButton();
mainResultButton.classList = ["creativebutton-result__pressedbutton"];
setStyleButton();
}
/* Storage for result button for all states */
resultButtonStyles = ["", "", ""];
/* Save current style of button to resultButtonStyles */
function saveStyleButton() {
currentState = mainResultButton.className.split("__")[1].slice(0, -6);
switch(currentState) {
case "normal":
resultButtonStyles[0] = mainResultButton.style.cssText;
break;
case "hover":
resultButtonStyles[1] = mainResultButton.style.cssText;
break;
case "pressed":
resultButtonStyles[2] = mainResultButton.style.cssText;
break;
}
}
/* Set saved style of button from resultButtonStyles */
function setStyleButton() {
currentState = mainResultButton.className.split("__")[1].slice(0, -6);
switch(currentState) {
case "normal":
mainResultButton.style.cssText = resultButtonStyles[0];
break;
case "hover":
mainResultButton.style.cssText = resultButtonStyles[1];
break;
case "pressed":
mainResultButton.style.cssText = resultButtonStyles[2];
break;
}
}
/* Temlates button click handler */
["click", "touchend"].forEach(function(eventType){
document.getElementById("creativebutton-menuoverlay__element_templatebasic").addEventListener(eventType, () => {
setButtonTemplate("basic");
appMenuClose("creativebutton-menuoverlay_app");
});
document.getElementById("creativebutton-menuoverlay__element_templatecreative").addEventListener(eventType, () => {
setButtonTemplate("creative");
appMenuClose("creativebutton-menuoverlay_app");
});
document.getElementById("creativebutton-menuoverlay__element_templatesolid").addEventListener(eventType, () => {
setButtonTemplate("solid");
appMenuClose("creativebutton-menuoverlay_app");
});
});
/* Set button to selected template */
function setButtonTemplate(templateName) {
buttonInformation.setTemplate(getTemplateButton(templateName));
// Установить все значения кнопки в соответствии со значениями ButtonInformation
var currentStates = ["normal", "hover", "pressed"];
var backgroundString, rgbaValues, buttonNumberElement;
currentStates.forEach((currentState) => {
switchCurrentStateMainResultButton(currentState);
document.getElementById("creativebutton-" + currentState + "state__fontsize").value = buttonInformation.getProperty(
currentState, "fontsize");
document.getElementById("creativebutton-" + currentState + "state__fontsize").setAttribute("data-info",
buttonInformation.getProperty(currentState, "fontsize"));
document.getElementById("creativebutton-" + currentState + "state__button_fontmetric").textContent = "px";
document.getElementById("creativebutton-" + currentState + "state__button_font").textContent = buttonInformation.getProperty(
currentState, "fontfamily");
document.getElementById("creativebutton-" + currentState + "state__button_font").setAttribute("data-info", buttonInformation.getProperty(
currentState, "fontfamily"));
mainResultButton.style.fontSize = buttonInformation.getProperty(currentState, "fontsize") + "px";
mainResultButton.style.fontFamily = fontFamilyNames[buttonInformation.getProperty(
currentState, "fontfamily").split(" ")[0].toLowerCase()];
if (buttonInformation.getProperty(currentState, "bordersize") > 0) {
rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "bordercolor"));
mainResultButton.style.border = buttonInformation.getProperty(currentState, "bordersize")
+ "px " + buttonInformation.getProperty(currentState, "bordertype")
+ " rgba(" + rgbaValues[0] + ", " + rgbaValues[1] + ", " + rgbaValues[2] + ", "
+ rgbaValues[3].toPrecision(2) + ")";
} else {
mainResultButton.style.border = "";
}
if (buttonInformation.getProperty(currentState, "borderradius") > 0) {
mainResultButton.style.borderRadius = buttonInformation.getProperty(currentState, "borderradius") + "px";
} else {
mainResultButton.style.borderRadius = "";
}
if ((buttonInformation.getProperty(currentState, "paddingtop") > 0) ||
(buttonInformation.getProperty(currentState, "paddingbottom") > 0) ||
(buttonInformation.getProperty(currentState, "paddingright") > 0) ||
(buttonInformation.getProperty(currentState, "paddingleft") > 0)) {
mainResultButton.style.padding = buttonInformation.getProperty(currentState, "paddingtop") + "px "
+ buttonInformation.getProperty(currentState, "paddingright") + "px "
+ buttonInformation.getProperty(currentState, "paddingbottom") + "px "
+ buttonInformation.getProperty(currentState, "paddingleft") + "px";
} else {
mainResultButton.style.padding = "";
}
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"));
mainResultButton.style.boxShadow = 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) + ")";
} else {
mainResultButton.style.boxShadow = "";
}
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"));
mainResultButton.style.textShadow = 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) + ")";
} else {
mainResultButton.style.textShadow = "";
}
mainResultButton.style.color = buttonInformation.getProperty(currentState, "textcolor");
if (buttonInformation.getProperty(currentState, "layers").length > 1) {
mainResultButton.style.background = generateGradientBackgroundString(currentState);
} else {
rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "colors")[0]);
mainResultButton.style.background = "rgba(" + [rgbaValues[0], rgbaValues[1],
rgbaValues[2], rgbaValues[3].toPrecision(2)].toString().replaceAll(",", ", ") + ")";
}
cStateIterator = 0;
currentStates.forEach((cState) => {
if (cState == currentState) {
buttonNumberElement = document.getElementsByClassName("getcolor-gradientsblock")[0].children[cStateIterator];
if (buttonInformation.getProperty(currentState, "layers").length > 1)
backgroundString = generateGradientBackgroundString(currentState);
else {
rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "colors")[0]);
backgroundString = "rgba(" + [rgbaValues[0], rgbaValues[1],
rgbaValues[2], rgbaValues[3].toPrecision(2)].toString().replaceAll(",", ", ") + ")";
}
buttonNumberElement.style.background = backgroundString;
buttonNumberElement.setAttribute("data-info", "background: " + backgroundString);
}
cStateIterator++;
});
});
setResultButtonToNormal();
}
/* On start application set parameters */
function onRunningCreativeButtonApp() {
buttonInformation.setTemplate(getTemplateButton("basic"));
document.getElementById("creativebutton-normalstate__fontsize").value = buttonInformation.getProperty(
"normal", "fontsize");
changeFontSize("creativebutton-normalstate__fontsize");
setValueButtonFont("creativebutton-normalstate__button_font",
document.getElementById("creativebutton-menuoverlay__element_"
+ buttonInformation.getProperty("normal", "fontfamily").split(" ")[0].toLowerCase()).textContent,
"normal");
}