<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="page-title">Document</title>
</head>
<body>
<select id="lang" onchange="translatePage(value)">
<option value="fr-FR">Français</option>
<option value="en-GB">English (GB)</option>
<option value="en-US">English (US)</option>
<option value="de-DE">Deutsch</option>
</select>
<h1 class="page-title"></h1>
<h2 class="section-title"></h2>
<p class="paragraph"></p>
<p class="paragraph"></p>
<script>
/* Toutes les traductions */
lang = {
"fr-FR": [
{ "i18nID": "page-title", "i18nString": "Titre de la page" },
{ "i18nID": "section-title", "i18nString": "Titre de la section" },
{ "i18nID": "paragraph", "i18nString": "Paragraphe" }
],
"en-GB": [
{ "i18nID": "page-title", "i18nString": "Page title" },
{ "i18nID": "section-title", "i18nString": "Section title" },
{ "i18nID": "paragraph", "i18nString": "Paragraph" }
]
};
/* Utilise la même traduction pour US et GB */
lang["en-US"] = lang["en-GB"];
/* Langue par défaut */
defaultLangLocalisation = "fr-FR";
/* Liste déroulante */
selectLang = document.getElementById("lang");
/* La langue du navigateur */
var userLangLocalisation = navigator.language || navigator.userLanguage;
/* Traduction de la page lors du chargement */
translatePage(userLangLocalisation);
/* Traduit la page */
function translatePage(langLocalisation) {
translations = chooseBestTranslation(langLocalisation);
/* Change le contenu texte pour chaque classe dans le fichier JSON */
translations.forEach(translation => {
document.querySelectorAll("." + translation.i18nID).forEach(element => {
element.textContent = translation.i18nString;
});
});
}
/* Retourne la meilleure traduction selon la localisation linguistique */
function chooseBestTranslation(langLocalisation) {
translations = lang[langLocalisation];
/* Si la langue n'est pas dans le JSON */
if (translations == undefined) {
selectLang.value = defaultLangLocalisation;
/* retourne la langue par défaut */
return lang[defaultLangLocalisation];
}
selectLang.value = langLocalisation;
return translations;
}
</script>
</body>
</html>
Commentaires
Enregistrer un commentaire