From 2f5b5f72145b96b6da5e9fe1e6bb96380a72943d Mon Sep 17 00:00:00 2001 From: Pedro Date: Thu, 13 Jun 2024 22:34:14 -0300 Subject: [PATCH] Fixed dark mode button and added new method to Translate class --- _layouts/base.html | 2 +- index.html | 7 +------ js/cookieclicker.js | 8 ++++---- js/crioscopia.js | 18 ++++++------------ js/dark-mode.js | 29 ++++++++++++++++------------- js/senha.js | 4 ++-- js/text.js | 24 ------------------------ js/translate.js | 35 +++++++++++++++++++++++++++-------- senha.html | 7 +------ 9 files changed, 58 insertions(+), 76 deletions(-) diff --git a/_layouts/base.html b/_layouts/base.html index 670eb51..a38a88c 100644 --- a/_layouts/base.html +++ b/_layouts/base.html @@ -20,8 +20,8 @@ + {{ content }} - \ No newline at end of file diff --git a/index.html b/index.html index af81998..403dd00 100644 --- a/index.html +++ b/index.html @@ -26,9 +26,4 @@

Projetos divertido - - \ No newline at end of file + \ No newline at end of file diff --git a/js/cookieclicker.js b/js/cookieclicker.js index 3dddb9d..53a0a67 100644 --- a/js/cookieclicker.js +++ b/js/cookieclicker.js @@ -36,8 +36,8 @@ function recountAll() { function recountClickerLevel() { clickerCost = Math.ceil(Math.pow(clickerLevel / 1.5, 2)); - setElementString(clickerLevelCounter, new TranslatableText("cookieclicker-clickerlevel", clickerLevel)); - setElementString(upgradeClickerButtonText, new TranslatableText("cookieclicker-clickerlevelbutton", clickerCost)); + translate.setAttribute(clickerLevelCounter, "string", new TranslatableText("cookieclicker-clickerlevel", clickerLevel)); + translate.setAttribute(upgradeClickerButtonText, "string", new TranslatableText("cookieclicker-clickerlevelbutton", clickerCost)); } function recountCookies() { @@ -107,9 +107,9 @@ function upgradeClicker() { } function setCookieString(key, cookieAmount) { - setElementString(cookieCounter, new TranslatableText(key, cookieAmount)); + translate.setAttribute(cookieCounter, "string", new TranslatableText(key, cookieAmount)); } function setWorkerString(key, workerAmount) { - setElementString(workerCounter, new TranslatableText(key, workerAmount)); + translate.setAttribute(workerCounter, "string", new TranslatableText(key, workerAmount)); } \ No newline at end of file diff --git a/js/crioscopia.js b/js/crioscopia.js index 63f07a9..2ac4301 100644 --- a/js/crioscopia.js +++ b/js/crioscopia.js @@ -203,8 +203,7 @@ controls.classList.add("controls"); // Temperature let temperatureControlContainer = document.createElement("div"); let temperatureControlName = document.createElement("div"); -temperatureControlName.innerHTML = translate.translateString('crioscopia.temperatureControl', (temperatureKelvin - 273.15).toFixed(2)); -temperatureControlName.dataset.string = `{"translate":"crioscopia.temperatureControl","with":[{"text":"${(temperatureKelvin - 273.15).toFixed(2)}"}]}`; +translate.setAttribute(temperatureControlName, "string", new TranslatableText("crioscopia.temperatureControl", (temperatureKelvin - 273.15).toFixed(2))); let temperatureControl = document.createElement("input"); temperatureControl.type = "range"; temperatureControl.min = -273.15; @@ -213,32 +212,27 @@ temperatureControl.value = 0; temperatureControl.step = 0.05; temperatureControl.addEventListener("input", (event) => { temperatureKelvin = Number.parseFloat(event.target.value) + 273.15; - temperatureControlName.innerHTML = translate.translateString('crioscopia.temperatureControl', (temperatureKelvin - 273.15).toFixed(2)); - temperatureControlName.dataset.string = `{"translate":"crioscopia.temperatureControl","with":[{"text":"${(temperatureKelvin - 273.15).toFixed(2)}"}]}`; + translate.setAttribute(temperatureControlName, "string", new TranslatableText("crioscopia.temperatureControl", (temperatureKelvin - 273.15).toFixed(2))); }); let defaultTemperatureBtn = document.createElement("button"); defaultTemperatureBtn.addEventListener("click", (event) => { temperatureControl.value = 0; temperatureKelvin = temperatureControl.value + 273.15; - temperatureControlName.innerHTML = translate.translateString('crioscopia.temperatureControl', (temperatureKelvin - 273.15).toFixed(2)); - temperatureControlName.dataset.string = `{"translate":"crioscopia.temperatureControl","with":[{"text":"${(temperatureKelvin - 273.15).toFixed(2)}"}]}`; + translate.setAttribute(temperatureControlName, "string", new TranslatableText("crioscopia.temperatureControl", (temperatureKelvin - 273.15).toFixed(2))); }); -defaultTemperatureBtn.innerHTML = translate.translateString('crioscopia.default'); -defaultTemperatureBtn.dataset.string = '{"translate":"crioscopia.default"}'; +translate.setAttribute(defaultTemperatureBtn, "string", new TranslatableText("crioscopia.default")); // Solvent let solventControlContainer = document.createElement("div"); let solventControlName = document.createElement("label"); solventControlName.setAttribute("for", "solvent-control"); -solventControlName.innerHTML = translate.translateString('crioscopia.solventControl'); -solventControlName.dataset.string = '{"translate":"crioscopia.solventControl"}'; +translate.setAttribute(solventControlName, "string", new TranslatableText("crioscopia.solventControl")); let solventControl = document.createElement("select"); solventControl.id = "solvent-control"; for (let i in solvents) { let solventOption = document.createElement("option"); solventOption.value = i.toString(); - solventOption.innerHTML = translate.translateString('crioscopia.solvent.' + solvents[i].name); - solventOption.dataset.string = `{"translate":"crioscopia.solvent.${solvents[i].name}"}`; + translate.setAttribute(solventOption, "string", new TranslatableText("crioscopia.solvent." + solvents[i].name)); solventControl.appendChild(solventOption); } solventControl.addEventListener("input", (event) => { diff --git a/js/dark-mode.js b/js/dark-mode.js index e306c3c..cb616c7 100644 --- a/js/dark-mode.js +++ b/js/dark-mode.js @@ -1,16 +1,19 @@ -var darkModeButton = document.getElementById("dark-mode-toggle"); +let darkModeButton; -if (localStorage.darkmode == undefined) { - localStorage.darkmode = "false"; -} else if (localStorage.darkmode == "true") { - document.body.classList.add("dark-mode"); - if (darkModeButton) { - translate.whenLoaded(() => { - darkModeButton.innerHTML = translate.translateString('mainpage-disabledarkmode'); - }); - darkModeButton.dataset.string = '{"translate":"mainpage-disabledarkmode"}'; +document.addEventListener("DOMContentLoaded", () => { + darkModeButton = document.getElementById("dark-mode-toggle"); + if (localStorage.darkmode == undefined) { + localStorage.darkmode = "false"; + } else if (localStorage.darkmode == "true") { + document.body.classList.add("dark-mode"); + if (darkModeButton) { + translate.whenLoaded(() => { + darkModeButton.innerHTML = translate.translateString('mainpage-disabledarkmode'); + }); + translate.setAttribute(darkModeButton, "string", new TranslatableText("mainpage-disabledarkmode")); + } } -} +}); function toggleDarkMode() { if (localStorage.darkmode == "false") { @@ -19,13 +22,13 @@ function toggleDarkMode() { translate.whenLoaded(() => { darkModeButton.innerHTML = translate.translateString('mainpage-disabledarkmode'); }); - darkModeButton.dataset.string = '{"translate":"mainpage-disabledarkmode"}'; + translate.setAttribute(darkModeButton, "string", new TranslatableText("mainpage-disabledarkmode")); } else { document.body.classList.remove("dark-mode"); localStorage.darkmode = "false"; translate.whenLoaded(() => { darkModeButton.innerHTML = translate.translateString('mainpage-enabledarkmode'); }); - darkModeButton.dataset.string = '{"translate":"mainpage-enabledarkmode"}'; + translate.setAttribute(darkModeButton, "string", new TranslatableText("mainpage-enabledarkmode")); } } \ No newline at end of file diff --git a/js/senha.js b/js/senha.js index 53522f3..4ad813c 100644 --- a/js/senha.js +++ b/js/senha.js @@ -82,7 +82,7 @@ function startNewGame(pAmountOfCharacters = 5) { translate.whenLoaded(() => { console.log(translate.translateString("senha-gamestarted", randomSequence)); }) - setElementString(document.getElementById("valid-characters"), new TranslatableText("senha-validcharacters", validCharacters)); + translate.setAttribute(document.getElementById("valid-characters"), "string", new TranslatableText("senha-validcharacters", validCharacters)); amountOfCharactersInput.max = validCharacters.length; updateKeyboard(); addNewCharacterSlotArray(); @@ -157,7 +157,7 @@ document.addEventListener("keyup", (event) => { let charactersInSlotArray = getCharacterSlotArrayAsString(); if (!charactersInSlotArray.includes(' ') && !hasDuplicateLetters(charactersInSlotArray)) { numberOfAttempts++; - setElementString(victoryText, new TranslatableText("senha-victory", numberOfAttempts)); + translate.setAttribute(victoryText, "string", new TranslatableText("senha-victory", numberOfAttempts)); if (charactersInSlotArray !== randomSequence) { addNewGuessesArray(getCorrectInWrongPlace(charactersInSlotArray), getCorrectInCorrectPlace(charactersInSlotArray)); addNewCharacterSlotArray(); diff --git a/js/text.js b/js/text.js index 63a8d5f..d6b8553 100644 --- a/js/text.js +++ b/js/text.js @@ -95,28 +95,4 @@ function getTextFromJSON(jsonObject) { console.log('Invalid text type: ' + key); } } -} - -function setElementString(element, text) { - if (text instanceof LiteralText || text instanceof TranslatableText) { - text = JSON.stringify(text); - } - element.dataset.string = text; - element.innerHTML = getTextFromJSON(text).get(); -} - -function setElementPlaceholder(element, text) { - if (text instanceof LiteralText || text instanceof TranslatableText) { - text = JSON.stringify(text); - } - element.dataset.placeholder = text; - element.placeholder = getTextFromJSON(text).get(); -} - -function setElementAriaLabel(element, text) { - if (text instanceof LiteralText || text instanceof TranslatableText) { - text = JSON.stringify(text); - } - element.dataset.ariaLabel = text; - element.ariaLabel = getTextFromJSON(text).get(); } \ No newline at end of file diff --git a/js/translate.js b/js/translate.js index 3bdb970..b56377c 100644 --- a/js/translate.js +++ b/js/translate.js @@ -59,15 +59,16 @@ class Translate { this.file = await fetch('/language/' + (this.language || localStorage.language) + '.json'); this.file = await this.file.clone().json(); } - let allElements = document.getElementsByTagName('*'); - for (let currentElement of allElements) { - for (let attribute of currentElement.attributes) { - if (attribute.name === "data-translate-string") { - currentElement.innerHTML = getTextFromJSON(attribute.value).get(); - } else if (attribute.name.startsWith("data-translate-")) { - currentElement[attribute.name.substring("data-translate-".length)] = getTextFromJSON(attribute.value).get(); - } + let reloadElements = () => { + let allElements = document.getElementsByTagName('*'); + for (let currentElement of allElements) { + this.#updateElement(currentElement); } + }; + if (document.readyState === 'loading') { + document.addEventListener("DOMContentLoaded", reloadElements); + } else { + reloadElements(); } for (let listener of this.changeListeners) { listener(); @@ -78,6 +79,24 @@ class Translate { getKeyWrapped(key, ...args) { return `${(this.translateString(key, ...args))}`; } + + setAttribute(element, attribute, text) { + if (text instanceof LiteralText || text instanceof TranslatableText) { + text = JSON.stringify(text); + } + element.setAttribute("data-translate-" + attribute, text); + this.#updateElement(element); + } + + #updateElement(element) { + for (let attribute of element.attributes) { + if (attribute.name === "data-translate-string") { + element.innerHTML = getTextFromJSON(attribute.value).get(); + } else if (attribute.name.startsWith("data-translate-")) { + element[attribute.name.substring("data-translate-".length)] = getTextFromJSON(attribute.value).get(); + } + } + } } const urlParams = new URLSearchParams(window.location.search); diff --git a/senha.html b/senha.html index 9ae281a..bfb8023 100644 --- a/senha.html +++ b/senha.html @@ -29,9 +29,4 @@

Senha

- - \ No newline at end of file + \ No newline at end of file