Skip to content

Commit

Permalink
You can now translate anything
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pedro270707
Pedro270707 committed Jun 13, 2024
1 parent 6802374 commit e88c8b1
Show file tree
Hide file tree
Showing 8 changed files with 46 additions and 54 deletions.
2 changes: 1 addition & 1 deletion _layouts/baselang.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@
<a href="#" onclick="changeLanguage('pt');" class="button">Português</a>
<a href="#" onclick="changeLanguage('sl');" class="button">Slovenščina</a>
</div>
<p class="minor"><span data-string='{"translate":"footer-text"}'>[criado por Pedro270707]</span> (<a class="minor" href="https://github.com/Pedro270707/pedro270707.github.io">GitHub</a>)</p>
<p class="minor"><span data-translate-string='{"translate":"footer-text"}'>[criado por Pedro270707]</span> (<a class="minor" href="https://github.com/Pedro270707/pedro270707.github.io">GitHub</a>)</p>
</div>
4 changes: 2 additions & 2 deletions btapackconverter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<!-- Website -->
<div class="container">
<div class="left-items">
<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 class="site-name" data-translate-string='{"translate":"btapackconverter-sitename"}'>Conversor de pacotes para BTA</div>
<div class="site-description minor" data-translate-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" />-->
Expand Down
12 changes: 6 additions & 6 deletions cookieclicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@
<div class="milk"></div>
<div class="milk-back"></div>
<div class="cookie-background-text">
<h1 data-string='{"translate":"cookieclicker-title"}'></h1>
<h1 data-translate-string='{"translate":"cookieclicker-title"}'></h1>
</div>
</div>
<div class="website-divider">
<div class="cookie-wrapper center"><div class="cookie" onclick="cookieClicked();"><img src="{{ site.baseurl }}/assets/cookieclicker/cookie.png" draggable="false"></div></div>
<div id="cookie-counter" data-string='{"translate":"cookieclicker-zerocookies","with":[{"text":"0"}]}'></div>
<div id="cookie-counter" data-translate-string='{"translate":"cookieclicker-zerocookies","with":[{"text":"0"}]}'></div>
</div>
<div class="website-divider">
<button id="hire-worker" onclick="hireWorker();" class="button"><span id="hire-worker-text"><span data-string='{"translate":"cookieclicker-hireworkerbutton","with":[{"text":"10"}]}'>Contratar funcionário por 10</span></span> <img src="{{ site.baseurl }}/assets/cookieclicker/cookie_icon.png" class="cookie-icon" draggable="false"></button>
<div id="worker-counter" data-string='{"translate":"cookieclicker-zeroworkers","with":[{"text":"0"}]}'></div>
<button id="upgrade-clicker" onclick="upgradeClicker();" class="button"><span id="upgrade-clicker-text" data-string='{"translate":"cookieclicker-clickerlevelbutton","with":[{"text":"10"}]}'>Melhorar cursor por 10</span> <img src="{{ site.baseurl }}/assets/cookieclicker/cookie_icon.png" class="cookie-icon" draggable="false"></button>
<div id="clicker-level-counter" data-string='{"translate":"cookieclicker-clickerlevel","with":[{"text":"1"}]}'></div>
<button id="hire-worker" onclick="hireWorker();" class="button"><span id="hire-worker-text"><span data-translate-string='{"translate":"cookieclicker-hireworkerbutton","with":[{"text":"10"}]}'>Contratar funcionário por 10</span></span> <img src="{{ site.baseurl }}/assets/cookieclicker/cookie_icon.png" class="cookie-icon" draggable="false"></button>
<div id="worker-counter" data-translate-string='{"translate":"cookieclicker-zeroworkers","with":[{"text":"0"}]}'></div>
<button id="upgrade-clicker" onclick="upgradeClicker();" class="button"><span id="upgrade-clicker-text" data-translate-string='{"translate":"cookieclicker-clickerlevelbutton","with":[{"text":"10"}]}'>Melhorar cursor por 10</span> <img src="{{ site.baseurl }}/assets/cookieclicker/cookie_icon.png" class="cookie-icon" draggable="false"></button>
<div id="clicker-level-counter" data-translate-string='{"translate":"cookieclicker-clickerlevel","with":[{"text":"1"}]}'></div>
</div>
<script src="{{ site.baseurl }}/js/cookieclicker.js"></script>
2 changes: 1 addition & 1 deletion csstest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
title: "CSS Test"
---

<button class="button" data-string='{"text":"Test Button %2$s %1$s","with":[{"translate":"minecrafttooltips-download"},{"translate":"minecrafttooltips-close"}]}'>Test Button</button>
<button class="button" data-translate-string='{"text":"Test Button %2$s %1$s","with":[{"translate":"minecrafttooltips-download"},{"translate":"minecrafttooltips-close"}]}'>Test Button</button>
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
<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>
<p id="dark-mode-toggle" class="dark-mode-toggle minor" onclick="toggleDarkMode();" data-translate-string='{"translate":"mainpage-enabledarkmode"}'>[ativar modo escuro]</p>
<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>
<!--
<div class="website-divider">
<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>
<h1 data-translate-string='{"translate":"mainpage-professionaltitle"}'>Profissional</h1>
<p class="minor" data-translate-string='{"translate":"mainpage-professional1"}'>(em fazer websites ruins)</p>
<p class="minor" data-translate-string='{"translate":"mainpage-professional2"}'>(em fazer tarefa de casa)</p>
<p class="minor" data-translate-string='{"translate":"mainpage-professional3"}'>(em jogar games irados)</p>
</div>
-->
<div class="website-divider">
<h1 data-string='{"translate":"mainpage-projects"}'>Projetos divertidos</h1>
<h1 data-translate-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>
Expand Down
22 changes: 7 additions & 15 deletions js/translate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,20 +84,12 @@ class Translate {
}
let allElements = document.getElementsByTagName('*');
for (let currentElement of allElements) {
const keyAttribute = currentElement.getAttribute('data-string');
const placeholderKeyAttribute = currentElement.getAttribute('data-placeholder');
const ariaLabelKeyAttribute = currentElement.getAttribute('data-aria-label');

if (keyAttribute !== null) {
currentElement.innerHTML = getTextFromJSON(keyAttribute).get();
}

if (placeholderKeyAttribute !== null) {
currentElement.placeholder = getTextFromJSON(placeholderKeyAttribute).get();
}

if (ariaLabelKeyAttribute !== null) {
currentElement.ariaLabel = getTextFromJSON(ariaLabelKeyAttribute).get();
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();
}
}
}
for (let listener of this.changeListeners) {
Expand All @@ -107,7 +99,7 @@ class Translate {
}

getKeyWrapped(key, ...args) {
return `<span data-string='${JSON.stringify(new TranslatableText(key, ...args))}'>${(this.translateString(key, ...args))}</span>`;
return `<span data-translate-string='${JSON.stringify(new TranslatableText(key, ...args))}'>${(this.translateString(key, ...args))}</span>`;
}
}

Expand Down
30 changes: 15 additions & 15 deletions minecrafttooltips.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@
<div id="tooltip-output" class="center"></div>

<div id="recording-text" class="center hidden" style="margin-top: 1rem; margin-bottom: 1rem;">
<span data-string='{"translate":"minecrafttooltips-recording"}'></span> <span id="recording-percentage">0</span>%
<span data-translate-string='{"translate":"minecrafttooltips-recording"}'></span> <span id="recording-percentage">0</span>%
</div>

<div class="download-tooltip-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip"}'>
<div class="download-tooltip-wrapper info-bubble" data-translate-aria-label='{"translate":"minecrafttooltips-downloadtooltip"}'>
<button class="icon-button" id="download-tooltip" onclick="downloadOverlay.classList.toggle('hidden')">
<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">
Expand All @@ -42,47 +42,47 @@
</div>

<div class="minecraft-side">
<span data-string='{"translate":"minecrafttooltips-title"}'>Gerador de nomes do Minecraft</span>
<span data-translate-string='{"translate":"minecrafttooltips-title"}'>Gerador de nomes do Minecraft</span>

<div class="text-input-wrapper center">
<input type="text" data-placeholder='{"translate":"minecrafttooltips-defaulttooltip"}' id="minecraft-text-input" name="Texto do Minecraft" class="text-input minecraft-text-input">
<!--<input type="text" data-placeholder='{"translate":"minecrafttooltips-itemquantity"}' id="item-count-input" name="Número de itens" class="minecraft-text-input">-->
<button class="button" id="save-tooltip" data-string='{"translate":"minecrafttooltips-save"}'>Salvar</button>
<input type="text" data-translate-placeholder='{"translate":"minecrafttooltips-defaulttooltip"}' id="minecraft-text-input" name="Texto do Minecraft" class="text-input minecraft-text-input">
<!--<input type="text" data-translate-placeholder='{"translate":"minecrafttooltips-itemquantity"}' id="item-count-input" name="Número de itens" class="minecraft-text-input">-->
<button class="button" id="save-tooltip" data-translate-string='{"translate":"minecrafttooltips-save"}'>Salvar</button>
</div>

<span class="minor" data-string='{"translate":"minecrafttooltips-savedtooltips"}'>Nomes salvos</span>
<span class="minor" data-translate-string='{"translate":"minecrafttooltips-savedtooltips"}'>Nomes salvos</span>
<div id="saved-tooltips" class="saved-tooltips center-notext"></div>

<div class="download-overlay hidden" id="download-overlay">
<div class="download-overlay-background" id="download-overlay-background"></div>
<div class="download-overlay-window">
<!--
<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>
<span class="minor"><span data-translate-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-translate-aria-label='{"translate":"minecrafttooltips-resolutionwarning"}'>!</span><br>
<input type="range" min="1" max="50" value="1" class="slider" id="resolution-slider">
-->

<span class="minor" data-string='{"translate":"minecrafttooltips-duration"}'></span>
<span class="minor" data-translate-string='{"translate":"minecrafttooltips-duration"}'></span>
<form id="tooltip-duration" action="">
<label class="radio-input">
<input type="radio" name="tooltip-duration" id="download-tooltip-static" value="0" checked>
<span data-string='{"translate":"minecrafttooltips-downloadtooltipstatic"}'></label>
<span data-translate-string='{"translate":"minecrafttooltips-downloadtooltipstatic"}'></label>
</label>
<br>
<label class="radio-input">
<input type="radio" name="tooltip-duration" id="download-tooltip-full-loop" value="6283.185307179586">
<span data-string='{"translate":"minecrafttooltips-downloadtooltipfullloop"}'></label>
<span data-translate-string='{"translate":"minecrafttooltips-downloadtooltipfullloop"}'></label>
</label>
<br>
<label class="radio-input">
<input type="radio" name="tooltip-duration" id="download-tooltip-custom" value="0">
<span data-string='{"translate":"minecrafttooltips-downloadtooltipcustom"}'></label>
<span data-translate-string='{"translate":"minecrafttooltips-downloadtooltipcustom"}'></label>
<input class="text-input" type="number" id="download-tooltip-custom-input" name="download-tooltip-custom-input" step="0.1" min="0">
</label>
</form>

<br>

<div class="download-overlay-download-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip-png"}'>
<div class="download-overlay-download-button-wrapper info-bubble" data-translate-aria-label='{"translate":"minecrafttooltips-downloadtooltip-png"}'>
<button class="icon-button" id="download-overlay-download-button" onclick="recordPNG(exportFile); downloadOverlay.classList.add('hidden')">
<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
Expand All @@ -94,7 +94,7 @@
</button>
</div>

<div class="download-overlay-download-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip-webp"}'>
<div class="download-overlay-download-button-wrapper info-bubble" data-translate-aria-label='{"translate":"minecrafttooltips-downloadtooltip-webp"}'>
<button class="icon-button" id="download-overlay-download-button" onclick="recordPNG(exportWebP); downloadOverlay.classList.add('hidden')">
<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
Expand All @@ -106,7 +106,7 @@
</button>
</div>

<div class="download-overlay-close-button-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-close"}'>
<div class="download-overlay-close-button-wrapper info-bubble" data-translate-aria-label='{"translate":"minecrafttooltips-close"}'>
<button class="icon-button" id="close-button" onclick="downloadOverlay.classList.add('hidden')">
<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>
Expand Down
Loading

0 comments on commit e88c8b1

Please sign in to comment.