starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lang: navbar translation

Browse Source
This commit is contained in:
AdrienLSH 2024-01-24 14:13:11 +01:00
parent 40d61233e5
commit 8eeb9ed4ab
6 changed files with 82 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/static/js/api/LanguageManager.js Normal file
View File

@ -0,0 +1,45 @@
export default class LanguageManager {
constructor() {
this.availableLanguages = ['en', 'fr'];
this.currentLang = 'en'
this.chosenLang = localStorage.getItem('preferedLanguage') || this.currentLang;
if (this.chosenLang !== this.currentLang && this.availableLanguages.includes(this.chosenLang)) {
this.translatePage();
}
}
async translatePage() {
if (this.currentLang === this.chosenLang)
return;
let dictUrl = `${location.origin}/static/js/lang/${this.chosenLang}.json`;
let translation = await fetch(dictUrl).then(response => {
if (response.status !== 200)
return null;
return response.json();
});
if (!translation) {
console.log(`No translation found for language ${this.chosenLang}`);
return 1;
}
document.querySelectorAll('[data-i18n]').forEach(el => {
let key = el.getAttribute('data-i18n');
el.innerHTML = translation[key];
})
this.currentLang = this.chosenLang;
return 0;
}
async changeLanguage(lang) {
if (lang === this.currentLang || !this.availableLanguages.includes(lang))
return;
this.chosenLang = lang;
if (await this.translatePage() !== 0)
return;
localStorage.setItem('preferedLanguage', lang);
}
}

3
frontend/static/js/api/client.js
View File

@ -7,6 +7,7 @@ import { navigateTo } from "../index.js"
import { Tourmanents } from "./tournament/tournaments.js";
import {Notice} from "./chat/notice.js"
import { Channel } from "./chat/channel.js";
import LanguageManager from './LanguageManager.js'
function getCookie(name)
{
@ -70,6 +71,8 @@ class Client
* @type {Notice}
*/
this.notice = new Notice(this);
this.lang = new LanguageManager;
}
/**

6
frontend/static/js/index.js
View File

@ -135,6 +135,12 @@ document.addEventListener("DOMContentLoaded", async () => {
navigateTo(e.target.href.slice(location.origin.length));
}
});
//Languages
Array.from(document.getElementById('languageSelector').children).forEach(el => {
el.onclick = _ => client.lang.changeLanguage(el.value);
});
await client.isAuthentificate();
router(location.pathname);
document.querySelector('a[href=\'' + location.pathname + '\']')?.classList.add('active');

9
frontend/static/js/lang/en.json Normal file
View File

@ -0,0 +1,9 @@
{
"navbarSearch": "Search",
"navbarHome": "Home",
"navbarLogin": "Login",
"navbarRegister": "Register",
"navbarProfile": "My Profile",
"navbarSettings": "Settings",
"navbarLogout": "Logout"
}

9
frontend/static/js/lang/fr.json Normal file
View File

@ -0,0 +1,9 @@
{
"navbarSearch": "Recherche",
"navbarHome": "Maison",
"navbarLogin": "Se connecter",
"navbarRegister": "S'inscrire",
"navbarProfile": "Mon Profil",
"navbarSettings": "Paramètres",
"navbarLogout": "Se déconnecter"
}

20
frontend/templates/index.html
View File

@ -12,32 +12,32 @@
<div class="container-fluid">
<div class="navbar-nav d-flex flex-row gap-2">
<a href="/" class="nav-link" data-link>Dashboard</a>
<a href="/search" class="nav-link" data-link>Search</a>
<a href="/home" class="nav-link" data-link>Home</a>
<a data-i18n='navbarSearch' href="/search" class="nav-link" data-link>Search</a>
<a data-i18n='navbarHome' href="/home" class="nav-link" data-link>Home</a>
</div>
<div class="navbar-nav justify-content-end d-flex flex-row gap-2">
<div class='nav-item dropdown-center me-2'>
<a class='nav-link dropdown-toggle' role='button' data-bs-toggle='dropdown'>
Lang.
</a>
<div class='dropdown-menu dropdown-menu-end position-absolute text-center px-2' style='min-width: 65px'>
<button id='languageSelectorEN' type='button' class="dropdow-item nav-link text-center py-1">&#127468;&#127463; EN</a>
<button id='languageSelectorFR' type='button' class="dropdow-item nav-link text-center py-1">&#127467;&#127479; FR</a>
<div id='languageSelector' class='dropdown-menu dropdown-menu-end position-absolute text-center px-2' style='min-width: 65px'>
<button value='en' type='button' class="dropdow-item nav-link text-center py-1">&#127468;&#127463; EN</a>
<button value='fr' type='button' class="dropdow-item nav-link text-center py-1">&#127467;&#127479; FR</a>
</div>
</div>
<div id='navbarLoggedOut' class='d-flex flex-row gap-2'>
<a href="/login" class="nav-link" data-link>Login</a>
<a href="/register" class="nav-link" data-link>Register</a>
<a data-i18n='navbarLogin' href="/login" class="nav-link" data-link>Login</a>
<a data-i18n='navbarRegister' href="/register" class="nav-link" data-link>Register</a>
</div>
<div id='navbarLoggedIn' class='d-none nav-item dropdown'>
<a id='navbarDropdownButton' class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
Me
</a>
<div class='dropdown-menu dropdown-menu-end position-absolute text-end px-2' style='min-width: 100px'>
<a id='myProfileLink' href='' class="dropdow-item nav-link pt-1" data-link>My Profile</a>
<a href="/me" class="dropdow-item nav-link pt-0" data-link>Settings</a>
<a data-i18n='navbarProfile' id='myProfileLink' href='' class="dropdow-item nav-link pt-1" data-link>My Profile</a>
<a data-i18n='navbarSettings' href="/me" class="dropdow-item nav-link pt-0" data-link>Settings</a>
<hr class='dropdown-separator my-auto mx-1'></hr>
<a href="/logout" class="dropdow-item nav-link pb-1" data-link>Logout</a>
<a data-i18n='navbarLogout' href="/logout" class="dropdow-item nav-link pb-1" data-link>Logout</a>
</div>
</div>
</div>