Skip to content

Commit

Permalink
Add language change button
Browse files Browse the repository at this point in the history
  • Loading branch information
AnotherPillow committed Nov 24, 2023
1 parent d82e57c commit fe6b249
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 54 deletions.
3 changes: 2 additions & 1 deletion i18n/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"files.h2": "Dateien",
"file.th": "Datei",
"size.th": "Größe",
"path.th": "Weg"
"path.th": "Weg",

"language.h2": "Sprache"
}
5 changes: 3 additions & 2 deletions i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"files.h2": "Files",
"file.th": "File",
"size.th": "Size",
"path.th": "Path"

"path.th": "Path",

"language.h2": "Language"
}
3 changes: 2 additions & 1 deletion i18n/pl.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"files.h2": "Pliki",
"file.th": "Plik",
"size.th": "Rozmiar",
"path.th": "Ścieżka"
"path.th": "Ścieżka",

"language.h2": "Język"
}
5 changes: 3 additions & 2 deletions i18n/ru.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"files.h2": "Файлы",
"file.th": "Файл",
"size.th": "Обьём",
"path.th": "Путь"

"path.th": "Путь",

"language.h2": "язык"
}
17 changes: 14 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,17 @@ <h2 data-translation-key="file-upload-dialog-opened.h2"></h2>
</div>
<div class="blur"></div>
<div class="credits-overlay">
<div class="github-link">
<div class="github-link corner-link">
<a href="https://github.com/anotherpillow/xnb2cp" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</div>

<div class="language-btn corner-link">
<button>
<i class="fa-solid fa-globe"></i>
</button>
</div>

<div class="background-credits">
<p data-translation-key="background-credits.p"></p>
Expand Down Expand Up @@ -131,11 +137,16 @@ <h2 data-translation-key="files.h2"></h2>
</div>
</div>

<div id="language-popup" class="hidden">
<h2 data-translation-key="language.h2"></h2>
<ul id="languages"></ul>
</div>

<!-- import https://unpkg.com/[email protected]/dist/FileSaver.js as FileSaver -->
<script type="module" src="src/translations.js"></script>
<script src="src/translations.js"></script>
<script type="module" src="src/imports.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jszip.js"></script>
<script src="src/script.js"></script>
<script src="https://unpkg.com/[email protected]/dist/FileSaver.js"></script>
<script src="src/script.js"></script>
</body>
</html>
71 changes: 67 additions & 4 deletions src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -293,13 +293,15 @@ $main-color: #524b3f;
}
100% {
margin-right: 1rem;
margin-left: 1rem;
margin-bottom: 1rem;
}
}

@keyframes move-offscreen {
0% {
margin-right: 1rem;
margin-left: 1rem;
margin-bottom: 1rem;
}
100% {
Expand All @@ -310,7 +312,7 @@ $main-color: #524b3f;
.credits-overlay {
z-index: 10;

.github-link {
.corner-link {

a {
text-decoration: none;
Expand All @@ -323,11 +325,9 @@ $main-color: #524b3f;
position: absolute;

bottom: -1.5rem;
right: -1.5rem;

rotate: -45deg;
rotate: var(--rotation);

//run move-screen when hovered, and the reverse when not hovered
&:hover {
animation: move-onscreen 0.5s ease-in-out forwards;
}
Expand All @@ -338,6 +338,29 @@ $main-color: #524b3f;
}
}

.github-link {
i {
--rotation: -45deg;
right: -1.5rem;
}
}

.language-btn {
i {
--rotation: 45deg;
left: -1.0rem;
}

button {
outline: none;
border: none;
color: inherit;
background-color: transparent;

cursor: pointer;
}
}

.text-credits {
position: absolute;
width: $main-width;
Expand Down Expand Up @@ -380,4 +403,44 @@ $main-color: #524b3f;
writing-mode: vertical-rl;
}
}
}

#language-popup {
z-index: 100;

position: absolute;
left: 2em;
bottom: 2em;

width: 10em;
height: 20em;

overflow-y: scroll;
scrollbar-width: none;

@include border_image();
background-color: wheat;
padding: 30px;

text-align: center;

#languages {
list-style-type: none;

padding-left: 0;
font-size: 1.5em;

li:not(:last-child) {
margin-bottom: -1em;
}

li {
cursor: pointer;

&:hover {
filter: brightness(0.8);
}
}
}

}
37 changes: 35 additions & 2 deletions src/script.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/// <reference path="imports.js" />
/// <reference path="translations.js" />

const fileinput = document.querySelector('#file-input');
const filedisabler_overlay = document.querySelector('.file-disabler');
Expand All @@ -14,6 +15,10 @@ const file_download_area = document.querySelector('#file-download-area');
const file_area_topbottom_seperator = document.querySelector('#file-area-topbottom-seperator');
const file_area_bottom = document.querySelector('.file-area-bottom');
const github_link = document.querySelector('.github-link i');
const language_btn = document.querySelector('.language-btn i');
const language_button = document.querySelector('.language-btn');
const language_popup = document.querySelector('#language-popup');
const language_list = document.querySelector('#languages');

const valid_content_folders = ['Animals', 'Characters', 'Effects', 'LooseSprites', 'Minigames', 'Strings', 'TileSheets', 'Buildings', 'Data', 'Fonts', 'Maps', 'Portraits', 'TerrainFeatures', 'VolcanoLayouts']
const valid_file_types = [
Expand Down Expand Up @@ -210,12 +215,40 @@ function hideDisablerOverlay() {

fileinput.addEventListener('click', showDisablerOverlay);

github_link.addEventListener('mouseleave', function () {
[ github_link, language_btn ].forEach(e => e.addEventListener('mouseleave', function () {
this.classList.add('leave');
setTimeout(() => {
this.classList.remove('leave');
}, 500);
});
}));

language_button.addEventListener('click', () => {
language_popup.classList.toggle('hidden')
})

document.body.addEventListener('click', e => {
if (e.target.id !== language_popup.id
&& !language_button.contains(e.target)
&& !language_popup.contains(e.target)
&& !language_popup.classList.contains('hidden')
) language_popup.classList.add('hidden')
})

for (const key of Object.keys(supported_languages)) {
const lang = supported_languages[key]
const li = document.createElement('li')

li.id = `language-${key}`
li.classList.add('language-list-element')

li.innerHTML = `<h1>${lang['flag']}</h1>`

li.addEventListener('click', () => {
loadTranslations(key)
})

language_list.appendChild(li)
}

function clean_uid(input) {
//replace spaces with underscores, and anything else that ISNT \w with .
Expand Down
93 changes: 54 additions & 39 deletions src/translations.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,60 @@
const supported_languages = {
'en': {
"flag": "🇬🇧"
},
'de': {
"flag": "🇩🇪"
},
'pl': {
"flag": "🇵🇱"
},
'ru': {
"flag": "🇷🇺"
},
}

const lang = navigator.language.split('-')[0]
const translations = await new Promise(async (resolve, reject) => {
const url1 = `/i18n/${lang}.json`
const url2 = '/i18n/en.json';

try {
const response1 = await fetch(url1);

window.loadTranslations = async (_lang = lang) => {
const translations = await new Promise(async (resolve, reject) => {
const url1 = `/i18n/${_lang}.json`
const url2 = '/i18n/en.json';

if (response1.ok) {
// If the first URL exists, return its JSON content
resolve(await response1.json())
return;
if (lang in supported_languages) {
const response1 = await fetch(url1);

if (response1.ok) {
// If the first URL exists, return its JSON content
resolve(await response1.json())
return;
}
} else {
const response2 = await fetch(url2);

if (response2.ok) {
resolve(await response2.json())
return;
}
}
} catch (error) {
// An error occurred while fetching the first URL
console.error(error);
}

try {
const response2 = await fetch(url2);

reject(null)

})

if (response2.ok) {
resolve(await response2.json())
return;
console.log(translations)
document.querySelectorAll('[data-translation-key]').forEach(el => {
const key = el.getAttribute('data-translation-key')
const translation = translations[key]
if (key.includes('placeholder-value')) {
el.setAttribute('placeholder', translation)
el.value = translation
} else if (key.includes('value')) {
el.value = translation
} else {
el.innerHTML = translation
}
} catch (error) {
alert('Failed to load both local translations and English.')
reject(null)
}
})

})
}

console.log(translations)
document.querySelectorAll('[data-translation-key]').forEach(el => {
const key = el.getAttribute('data-translation-key')
const translation = translations[key]
if (key.includes('placeholder-value')) {
el.setAttribute('placeholder', translation)
el.value = translation
} else if (key.includes('value')) {
el.value = translation
} else {
el.innerHTML = translation
}

})
loadTranslations()

0 comments on commit fe6b249

Please sign in to comment.