Updated every page to use new translation system

Pedro270707 · Oct 28, 2023 · 885f234 · 885f234
1 parent 2c50a17
commit 885f234
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 45 deletions.
diff --git a/btapackconverter.html b/btapackconverter.html
@@ -9,8 +9,8 @@
 <!-- Website -->
 <div class="container">
  <div class="left-items">
- <div class="site-name" data-string="btapackconverter-sitename">Conversor de pacotes para BTA</div>
- <div class="site-description minor" data-string="btapackconverter-sitedescription">Converte pacotes de recursos do Minecraft moderno para pacotes de texturas do BTA</div>
+ <div class="site-name" data-string='{"translate":"btapackconverter-sitename"}'>Conversor de pacotes para BTA</div>
+ <div class="site-description minor" data-string='{"translate":"btapackconverter-sitedescription"}'>Converte pacotes de recursos do Minecraft moderno para pacotes de texturas do BTA</div>
 
  <div>
  <!--<input type="file" accept="image/*" id="zip-upload" />-->

diff --git a/index.html b/index.html
@@ -3,21 +3,21 @@
 title: "Início"
 ---
 
-<div class="main-page-header-image"><div class="main-page-header-text"><h1>Pedro270707</h1><p id="dark-mode-toggle" class="dark-mode-toggle minor" onclick="toggleDarkMode();" data-string="mainpage-enabledarkmode">[ativar modo escuro]</p></div></div>
+<div class="main-page-header-image"><div class="main-page-header-text"><h1>Pedro270707</h1><p id="dark-mode-toggle" class="dark-mode-toggle minor" onclick="toggleDarkMode();" data-string='{"translate":"mainpage-enabledarkmode"}'>[ativar modo escuro]</p></div></div>
 <div class="website-divider">
- <h1 data-string="mainpage-professionaltitle">Profissional</h1>
- <p class="minor" data-string="mainpage-professional1">(em fazer websites ruins)</p>
- <p class="minor" data-string="mainpage-professional2">(em fazer tarefa de casa)</p>
- <p class="minor" data-string="mainpage-professional3">(em jogar games irados)</p>
+ <h1 data-string='{"translate":"mainpage-professionaltitle"}'>Profissional</h1>
+ <p class="minor" data-string='{"translate":"mainpage-professional1"}'>(em fazer websites ruins)</p>
+ <p class="minor" data-string='{"translate":"mainpage-professional2"}'>(em fazer tarefa de casa)</p>
+ <p class="minor" data-string='{"translate":"mainpage-professional3"}'>(em jogar games irados)</p>
 </div>
 <div class="website-divider">
- <h1 data-string="mainpage-socials">Redes sociais</h1>
+ <h1 data-string='{"translate":"mainpage-socials"}'>Redes sociais</h1>
  <div class="item-flex">
  <a class="social-link twitch-social-link icon-button" href="https://twitch.tv/ttv_pedro270707"><svg viewBox="0 0 2400 2800" xmlns="http://www.w3.org/2000/svg"><path d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600V1300z"/><rect x="1700" y="550" width="200" height="600"/><rect x="1150" y="550" class="st0" width="200" height="600"/></svg></a> <a class="social-link yt-social-link icon-button" href="https://youtube.com/c/Pedro270707"><svg viewBox="0 0 29 20" xmlns="http://www.w3.org/2000/svg"><path xmlns="http://www.w3.org/2000/svg" d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"/><path xmlns="http://www.w3.org/2000/svg" d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" class="youtube-link-inside"/></svg></a> <a class="social-link instagram-social-link icon-button" href="https://youtube.com/watch?v=dQw4w9WgXcQ"><svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.421.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.671-.163.42-.358.72-.673 1.035-.315.315-.615.51-1.035.673-.317.123-.794.27-1.671.31-.95.043-1.234.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.67-.31a2.788 2.788 0 0 1-1.036-.673 2.788 2.788 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.95-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.421.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052zM9 0C6.556 0 6.25.01 5.29.054 4.33.098 3.676.25 3.104.473A4.412 4.412 0 0 0 1.51 1.51c-.5.5-.809 1.002-1.039 1.594C.25 3.677.098 4.33.054 5.289.01 6.25 0 6.556 0 9s.01 2.75.054 3.71c.044.959.196 1.613.418 2.185.23.592.538 1.094 1.039 1.594.5.5 1.002.809 1.594 1.039.572.222 1.226.374 2.184.418C6.25 17.99 6.556 18 9 18s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.418a4.412 4.412 0 0 0 1.594-1.039c.5-.5.808-1.002 1.038-1.594.223-.572.375-1.226.419-2.184C17.99 11.75 18 11.444 18 9s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.412 4.412 0 0 0 16.49 1.51c-.5-.5-1.002-.808-1.594-1.038C14.323.25 13.67.098 12.711.054 11.75.01 11.444 0 9 0zm0 4.378a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244zM9 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm5.884-7.804a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0z" fill-rule="nonzero"></path></svg></a>
  </div>
 </div>
 <div class="website-divider">
- <h1 data-string="mainpage-projects">Projetos divertidos</h1>
+ <h1 data-string='{"translate":"mainpage-projects"}'>Projetos divertidos</h1>
  <div class="project-flexbox center">
  <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>

diff --git a/js/dark-mode.js b/js/dark-mode.js
@@ -8,7 +8,7 @@ if (localStorage.darkmode == undefined) {
  translate.translateString('mainpage-disabledarkmode').then(str => {
  darkModeButton.innerHTML = str;
  });
- darkModeButton.dataset.string = 'mainpage-disabledarkmode';
+ darkModeButton.dataset.string = '{"translate":"mainpage-disabledarkmode"}';
  }
 }
 
@@ -19,13 +19,13 @@ function toggleDarkMode() {
  translate.translateString('mainpage-disabledarkmode').then(str => {
  darkModeButton.innerHTML = str;
  });
- darkModeButton.dataset.string = 'mainpage-disabledarkmode';
+ darkModeButton.dataset.string = '{"translate":"mainpage-disabledarkmode"}';
  } else {
  document.body.classList.remove("dark-mode");
  localStorage.darkmode = "false";
  translate.translateString('mainpage-enabledarkmode').then(str => {
  darkModeButton.innerHTML = str;
  });
- darkModeButton.dataset.string = 'mainpage-enabledarkmode';
+ darkModeButton.dataset.string = '{"translate":"mainpage-enabledarkmode"}';
  }
 }
diff --git a/js/senha.js b/js/senha.js
@@ -78,7 +78,7 @@ function startNewGame(pAmountOfCharacters = 5) {
  document.getElementById("victory").classList.add("invisible");
  amountOfCharacters = pAmountOfCharacters;
  randomSequence = getRandomCharacterSequence(amountOfCharacters);
- translate.translateString("senha-gamestarted", randomSequence).then(str => {
+ translate.translateString("senha-gamestarted", new LiteralText(randomSequence)).then(str => {
  console.log(str);
  });
  document.getElementById("valid-characters").innerHTML = validCharacters;

diff --git a/js/text.js b/js/text.js
@@ -66,13 +66,18 @@ class TranslatableText {
 
 function getTextFromJSON(jsonObject) {
  if (typeof jsonObject !== 'object') {
- jsonObject = JSON.parse(jsonObject);
+ try {
+ jsonObject = JSON.parse(jsonObject);
+ } catch (error) {
+ console.log("Error when translating JSON to text: " + error.message + "\nPassed parameter: " + jsonObject);
+ return new LiteralText(jsonObject);
+ }
  }
  for (const key in jsonObject) {
  let arr = [];
  if (jsonObject.with) {
  if (!Array.isArray(jsonObject.with)) {
- throw new Error(jsonObject.with + "is not a JSON array");
+ console.log(jsonObject.with + "is not a JSON array");
  }
  for (const jsonObj of jsonObject.with) {
  arr.push(getTextFromJSON(jsonObj));
@@ -83,7 +88,7 @@ function getTextFromJSON(jsonObject) {
  } else if (key === 'translate') {
  return new TranslatableText(jsonObject[key], ...arr);
  } else {
- throw new Error('Invalid text type: ' + key);
+ console.log('Invalid text type: ' + key);
  }
  }
 }
diff --git a/js/translate.js b/js/translate.js
@@ -78,13 +78,13 @@ class Translate {
 
  if (placeholderKeyAttribute !== null) {
  getTextFromJSON(placeholderKeyAttribute).get().then(str => {
- currentElement.innerHTML = str;
+ currentElement.placeholder = str;
  });
  }
 
  if (ariaLabelKeyAttribute !== null) {
  getTextFromJSON(ariaLabelKeyAttribute).get().then(str => {
- currentElement.innerHTML = str;
+ currentElement.ariaLabel = str;
  });
  }
  }

diff --git a/minecrafttooltips.html b/minecrafttooltips.html
@@ -17,23 +17,23 @@
 <link rel="stylesheet" href="{{ site.baseurl }}/css/minecrafttooltips.css">
 <k-manager class="k-manager" id="k-manager"></k-manager>
 <div id="minecraft-tip-container" class="minecraft-tip-container">
- <div id="minecraft-tip" class="minecraft-tip"><div id="tip-text-line" class="text-line"><span data-string="minecrafttooltips-defaulttooltip"></span></div><div id="tip-shadow-line" class="shadow-line"><span data-string="minecrafttooltips-defaulttooltip"></span></div></div>
+ <div id="minecraft-tip" class="minecraft-tip"><div id="tip-text-line" class="text-line"><span data-string='{"translate":"minecrafttooltips-defaulttooltip"}'></span></div><div id="tip-shadow-line" class="shadow-line"><span data-string='{"translate":"minecrafttooltips-defaulttooltip"}'></span></div></div>
  <div class="minecraft-tip-border center" id="minecraft-tip-border"></div>
 </div>
 <div class="minecraft-background">
  <div class="minecraft-landscape"></div>
  <div class="minecraft-background-glow"></div>
  <div class="minecraft-background-text">
- <h1 data-string="minecrafttooltips-title"></h1>
+ <h1 data-string='{"translate":"minecrafttooltips-title"}'></h1>
  </div>
 </div>
 <div class="website-divider">
 <div id="minecraft-text-output-container" class="minecraft-text-output-container center">
- <div id="minecraft-text-output" class="minecraft-text-output center"><div id="output-text-line" class="text-line"><span data-string="minecrafttooltips-defaulttooltip"></span></div><div id="output-shadow-line" class="shadow-line"><span data-string="minecrafttooltips-defaulttooltip"></span></div></div>
+ <div id="minecraft-text-output" class="minecraft-text-output center"><div id="output-text-line" class="text-line"><span data-string='{"translate":"minecrafttooltips-defaulttooltip"}'></span></div><div id="output-shadow-line" class="shadow-line"><span data-string='{"translate":"minecrafttooltips-defaulttooltip"}'></span></div></div>
  <div class="minecraft-output-border center" id="minecraft-output-border"></div>
 </div>
 <br>
-<div class="download-tooltip-wrapper info-bubble" data-aria-label="minecrafttooltips-downloadtooltip">
+<div class="download-tooltip-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip"}'>
  <button class="icon-button" id="download-tooltip"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
  <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
@@ -51,7 +51,7 @@ <h1 data-string="minecrafttooltips-title"></h1>
  </div><br>
 
  <div class="item-flex center">
- <div class="download-item-wrapper info-bubble" data-aria-label="minecrafttooltips-downloaditem">
+ <div class="download-item-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloaditem"}'>
  <button class="icon-button" id="download-item"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
  <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
@@ -61,7 +61,7 @@ <h1 data-string="minecrafttooltips-title"></h1>
  C281.3,96.6,262.3,96.6,250.5,108.3z"/></svg>
  </button>
  </div>
- <div id="item-input" class="item-input info-bubble" data-aria-label="minecrafttooltips-uploaditem">
+ <div id="item-input" class="item-input info-bubble" data-aria-label='{"translate":"minecrafttooltips-uploaditem"}'>
  <label for="item-input-upload"><span id="item-input-text"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 374.116 374.116" style="enable-background:new 0 0 374.116 374.116; fill: currentColor; width: 15px; vertical-align: -2px;" xml:space="preserve">
  <g>
@@ -77,25 +77,25 @@ <h1 data-string="minecrafttooltips-title"></h1>
  </div>
  </div>
  <br>
- <span class="checkbox-container"><input type="checkbox" id="k-limited" name="k-limited" value="k-limited" /></span><label for="k-limited" data-string="minecrafttooltips-samewidthk"></label><br>
+ <span class="checkbox-container"><input type="checkbox" id="k-limited" name="k-limited" value="k-limited" /></span><label for="k-limited" data-string='{"translate":"minecrafttooltips-samewidthk"}'></label><br>
  <!-- <span class="checkbox-container"><input type="checkbox" id="center-text" name="center-text" value="center-text" /></span><label for="center-text" data-string="minecrafttooltips-centertext"></label> -->
 </div>
 <div class="website-divider">
  <div class="text-input-wrapper center">
- <input type="text" data-placeholder="minecrafttooltips-defaulttooltip" id="minecraft-text-input" name="Texto do Minecraft" class="minecraft-text-input">
- <input type="text" data-placeholder="minecrafttooltips-itemquantity" id="item-count-input" name="Número de itens" class="minecraft-text-input">
+ <input type="text" data-placeholder='{"translate":"minecrafttooltips-defaulttooltip"}' id="minecraft-text-input" name="Texto do Minecraft" class="minecraft-text-input">
+ <input type="text" data-placeholder='{"translate":"minecrafttooltips-itemquantity"}' id="item-count-input" name="Número de itens" class="minecraft-text-input">
  </div><br><br>
  <div id="super-secret-settings" class="center" style="display: none;">
- <span class="checkbox-container"><input type="checkbox" id="k-numbers-only" name="k-numbers-only" value="k-numbers-only" /></span><label for="k-numbers-only" data-string="minecrafttooltips-numbersonlyk"> Usar somente números no §k</label>
+ <span class="checkbox-container"><input type="checkbox" id="k-numbers-only" name="k-numbers-only" value="k-numbers-only" /></span><label for="k-numbers-only" data-string='{"translate":"minecrafttooltips-numbersonlyk"}'> Usar somente números no §k</label>
  </div>
 </div>
 
 <div class="download-overlay" id="download-overlay">
  <div class="download-overlay-background" id="download-overlay-background"></div>
  <div class="download-overlay-window">
- <span class="minor"><span data-string="minecrafttooltips-imageresolution">resolução da imagem:</span> <span id="image-resolution">1</span>x</span> <span class="warning info-bubble" id="resolution-warning" data-aria-label="minecrafttooltips-resolutionwarning">!</span><br>
+ <span class="minor"><span data-string='{"translate":"minecrafttooltips-imageresolution"}'>resolução da imagem:</span> <span id="image-resolution">1</span>x</span> <span class="warning info-bubble" id="resolution-warning" data-aria-label='{"translate":"minecrafttooltips-resolutionwarning"}'>!</span><br>
  <input type="range" min="1" max="50" value="1" class="slider" id="resolution-slider"><br>
- <div class="download-overlay-download-button-wrapper info-bubble" data-aria-label="minecrafttooltips-download">
+ <div class="download-overlay-download-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-download"}'>
  <button class="icon-button" id="download-overlay-download-button"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
  <path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
@@ -104,7 +104,7 @@ <h1 data-string="minecrafttooltips-title"></h1>
  s-15.4,2.9-21.2,8.8c-11.7,11.7-11.7,30.7,0,42.4l84.7,84.7c11.7,11.7,30.7,11.7,42.4,0l84.7-84.7c11.7-11.7,11.7-30.7,0-42.4
  C281.3,96.6,262.3,96.6,250.5,108.3z"/></svg></button>
  </div>
- <div class="download-overlay-close-button-wrapper info-bubble" data-aria-label="minecrafttooltips-close">
+ <div class="download-overlay-close-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-close"}'>
  <button class="icon-button" id="close-button"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
  <g>
@@ -121,10 +121,4 @@ <h1 data-string="minecrafttooltips-title"></h1>
 
 <script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
 <script type="module" src="{{ site.baseurl }}/js/minecraft-tip.js"></script>
-<script src="{{ site.baseurl }}/js/translate.js"></script>
-<script>
-$(document).ready(function() {
- translate.reloadLoc();
-});
-</script>
 <script src="/modules/dom-to-image.js"></script>