diff --git a/frontend/static/js/api/LanguageManager.js b/frontend/static/js/api/LanguageManager.js new file mode 100644 index 0000000..3e1c9b3 --- /dev/null +++ b/frontend/static/js/api/LanguageManager.js @@ -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); + } +} diff --git a/frontend/static/js/api/client.js b/frontend/static/js/api/client.js index 455fc22..2ec1123 100644 --- a/frontend/static/js/api/client.js +++ b/frontend/static/js/api/client.js @@ -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; } /** diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index ba8ef78..2d2af71 100644 --- a/frontend/static/js/index.js +++ b/frontend/static/js/index.js @@ -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'); diff --git a/frontend/static/js/lang/en.json b/frontend/static/js/lang/en.json new file mode 100644 index 0000000..3d9b14e --- /dev/null +++ b/frontend/static/js/lang/en.json @@ -0,0 +1,9 @@ +{ + "navbarSearch": "Search", + "navbarHome": "Home", + "navbarLogin": "Login", + "navbarRegister": "Register", + "navbarProfile": "My Profile", + "navbarSettings": "Settings", + "navbarLogout": "Logout" +} diff --git a/frontend/static/js/lang/fr.json b/frontend/static/js/lang/fr.json new file mode 100644 index 0000000..3307204 --- /dev/null +++ b/frontend/static/js/lang/fr.json @@ -0,0 +1,9 @@ +{ + "navbarSearch": "Recherche", + "navbarHome": "Maison", + "navbarLogin": "Se connecter", + "navbarRegister": "S'inscrire", + "navbarProfile": "Mon Profil", + "navbarSettings": "Paramètres", + "navbarLogout": "Se déconnecter" +} diff --git a/frontend/templates/index.html b/frontend/templates/index.html index 337c0b7..499c006 100644 --- a/frontend/templates/index.html +++ b/frontend/templates/index.html @@ -12,32 +12,32 @@
Dashboard - Search - Home + Search + Home
Lang. -
-