buen día, tengo un problema, estoy usando "JavaScript Localization", para una web, pero tengo un problema, no encuentro como evitar que el DOM deje de priorizar el idioma local del navegador y tome el del switch como referencia al hacer cambio o refresh de view, estoy tratando de no usar NPM ni nada de ello, javascript puro.
Pongamos de ejemplo, mi navegador esta en ES-Español, pero decido cambiar con el switch a EN-Inglés, lo selecciono y se cambia automáticamente, ahí todo bien, pero cambio de view y se reinicia al idioma de mi navegador, que era ES-Español.
Los idiomas los agarra de json's locales.
// The locale our app first shows
const defaultLocale = "en";
const supportedLocales = ["en", "es", "1"];
// The active locale
let locale;
// Gets filled with active locale translations
let translations = {};
// When the page content is ready...
document.addEventListener("DOMContentLoaded", () => {
// Translate the page to the default locale
const initialLocale = supportedOrDefault(browserLocales(true));
setLocale(initialLocale);
bindLocaleSwitcher(initialLocale);
});
function isSupported(locale) {
return supportedLocales.indexOf(locale) > -1;
}
// Retrieve the first locale we support from the given
// array, or return our default locale
function supportedOrDefault(locales) {
return locales.find(isSupported) || defaultLocale;
}
function browserLocales(languageCodeOnly = false) {
return navigator.languages.map((locale) =>
languageCodeOnly ? locale.split("-")[0] : locale,
);
}
// Whenever the user selects a new locale, we
// load the locale's translations and update
// the page
function bindLocaleSwitcher(initialValue) {
const switcher = document.querySelector("[data-i18n-switcher]");
switcher.value = initialValue;
switcher.onchange = (e) => {
// Set the locale to the selected option[value]
setLocale(e.target.value);
};
}
/**
* Retrieve user-preferred locales from the browser
*
* @param {boolean} languageCodeOnly - when true, returns
* ["en", "fr"] instead of ["en-US", "fr-FR"]
* @returns array | undefined
*/
// Load translations for the given locale and translate
// the page to this locale
async function setLocale(newLocale) {
if (newLocale === locale) return;
const newTranslations =
await fetchTranslationsFor(newLocale);
locale = newLocale;
translations = newTranslations;
translatePage();
}
// Retrieve translations JSON object for the given
// locale over the network
async function fetchTranslationsFor(newLocale) {
const response = await fetch(`/lang/${newLocale}.json`);
return await response.json();
}
// Replace the inner text of each element that has a
// data-i18n-key attribute with the translation corresponding
// to its data-i18n-key
function translatePage() {
document
.querySelectorAll("[data-i18n-key]")
.forEach(translateElement);
}
// Replace the inner text of the given HTML element
// with the translation in the active locale,
// corresponding to the element's data-i18n-key
function translateElement(element) {
const key = element.getAttribute("data-i18n-key");
const translation = translations[key];
element.innerText = translation;
}
.locale-switcher {
margin-bottom: 0;
padding-left: 8px;
background-color: rgba(255, 255, 255, 0);
height: 32px;
border-color: rgb(197, 197, 197);
color: rgb(255, 255, 255);
}
.locale-switcher option{
color: rgb(0, 0, 0);
}
.languageNav{
display: flex;
justify-content: center;
align-items: center;
}
/* Style the links inside the sidenav */
#mySidenav a {
position: fixed; /* Position them relative to the browser window */
right: 0px; /* Position them outside of the screen */
transition: 0.4s; /* Add transition on hover */
padding: 15px; /* 15px padding */
width: 240px; /* Set a specific width */
text-decoration: none; /* Remove underline */
font-size: 20px; /* Increase font size */
white-space: nowrap;
z-index: 99999;
}
#mySidenav img {
filter: invert();
transform: scale(1.2);
margin-right: 13px;
}
#mySidenav:focus {
outline: none;
}
/* The about link: 20px from the top with a green background */
#about {
top: 20px;
background-color: rgb(0, 0, 0);
}
<div id="mySidenav" class="sidenav">
<a id="about" >
<select id="switch_i18n" data-i18n-switcher class="locale-switcher" style="width: fit-content;">
<option value="en">English</option>
<option value="es">Español</option>
<option value="1" >Es_Castellano</option>
</select>
</a>
</div>