Fixed dark mode button and added new method to Translate class

Pedro270707 · Jun 14, 2024 · 2f5b5f7 · 2f5b5f7
1 parent d677a4d
commit 2f5b5f7
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 76 deletions.
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -20,8 +20,8 @@
  </head>
  <script src="{{ site.baseurl }}/js/text.js"></script>
  <script src="{{ site.baseurl }}/js/translate.js"></script>
+ <script src="{{ site.baseurl }}/js/dark-mode.js"></script>
  <body>
  {{ content }}
  </body>
- <script src="{{ site.baseurl }}/js/dark-mode.js"></script>
 </html>
diff --git a/index.html b/index.html
@@ -26,9 +26,4 @@ <h1 data-translate-string='{"translate":"mainpage-projects"}'>Projetos divertido
  <a href="{{ site.baseurl }}/cookieclicker"><img src="{{ site.baseurl }}/assets/cookie-clicker-button.png"></a>
  <a href="{{ site.baseurl }}/minecrafttooltips"><img src="{{ site.baseurl }}/assets/minecraft-tooltips-button.png"></a>
  </div>
-</div>
-<script>
- document.addEventListener("DOMContentLoaded", function(e) {
- translate.reloadLoc();
- });
-</script>
+</div>
diff --git 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));
 }
diff --git 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
@@ -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"));
  }
 }
diff --git 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
@@ -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();
 }
diff --git 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 `<span data-translate-string='${JSON.stringify(new TranslatableText(key, ...args))}'>${(this.translateString(key, ...args))}</span>`;
  }
+
+ 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
@@ -29,9 +29,4 @@ <h1 class="center" data-translate-string='{"translate":"senha-title"}'>Senha</h1
 </div>
 
 <script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
-<script src="{{ site.baseurl }}/js/senha.js"></script>
-<script>
-document.addEventListener("DOMContentLoaded", function(e) {
- translate.reloadLoc();
-});
-</script>
+<script src="{{ site.baseurl }}/js/senha.js"></script>