JSFiddle - React, Tailwind, and code Playground
HTML
<div id="divLangue">
</div>
<h1 class="t0">Bonjour</h1>
CSS
#divLangue {
right:8px;
position:fixed;
}
body.ar #divLangue {
left:8px;
right:auto;
}
JavaScript
const langueISO639_1 = [
["ar", "العربية"],
["en", "English"],
["es", "Español"],
["fr", "Français"],
["ru", "Русский"],
["zh", "中文"]
];
const languesML = ["fr", "ar", "en", "es", "zh", "ru"];
const titresML = [
"Bonjour", " مرحباً", "Hello", "Hola",
"你好", "Здравствуйте"
];
const traductionsML = [
[
"Bonjour", " مرحباً", "Hello", "Hola",
"你好", "Здравствуйте"
]
];
/**
* Lit la valeur d'un cookie avec le nom spécifié.
* @param {string} nomCookie - Le nom du cookie à lire.
* @returns {string|null} - La valeur du cookie, ou null si le cookie n'existe pas.
*/
function lireCookie(nomCookie) {
"use strict";
document.cookie.split(";").forEach(function (c) {
const cookie = c.trim();
if (cookie.startsWith(nomCookie + "=")) {
return decodeURIComponent(cookie.substring(nomCookie.length + 1));
}
});
return null;
}
/**
* Écrit un cookie avec le nom, la valeur, une durée de vie en jours et un chemin spécifiés.
* @param {string} nom - Le nom du cookie à écrire.
* @param {string} valeur - La valeur du cookie à écrire.
* @param {number} jours - La durée de vie du cookie en jours.
* @param {string} chemin - Le chemin pour lequel le cookie sera valide.
*/
function écrireCookie(nom, valeur, jours, chemin) {
"use strict";
const expire = new Date();
expire.setTime(expire.getTime() + jours * 24 * 60 * 60 * 1000);
const cookie = `${nom}=${encodeURIComponent(valeur)};expires=${expire.toUTCString()};path=${chemin};SameSite=Lax`;
document.cookie = cookie;
}
/**
* Renvoie un tableau des langues préférées de l’utilisateur.
*/
function languesPréférées() {
"use strict";
return navigator.languages ?? [navigator.language] ?? null;
}
/**
* Cette fonction cherche la langue préférée en utilisant les cookies ou les langues par défaut
* @returns {string|null} La langue préférée ou null si elle n'a pas été trouvée.
*/
function languePréférée() {
"use...