Hello everyone, this post is a revision of this post I made earlier on how I added translation to the unsupported_browser.html in the public folder of a react app.
The goal was to render the page and translate it to the user's preferred language for browsers we don't support like IE 10 below. My earlier solution works perfectly fine for newer browsers but didn't for older browsers.
I ran into issues with the forEach and addEventListener method as these are not supported by older browser. I also had problems with auto language detection using this window.navigator.userLanguage || window.navigator.language as the only possible way to access the user language was from the request header which I don't have access to since our app is a client side app. I had to settle for a dropdown select option where the user will have to select what language the page should be displayed in.
Below was my final solution that worked across modern browsers like Firefox, Chrome, Edge and IE 11, 10, 9, 8 and 7.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title eo-translator="title"></title>
</head>
<body>
<div>
<label eo-translator="language" for="language"></label>
<select id="language">
<option value="en">English</option>
<option value="es">Spanish</option>
</select>
</div>
<div class="container">
<h1 eo-translator="greeting"></h1>
<h2 eo-translator="question"></h2>
</div>
<script src="/path/to/translate.min.js"></script>
<script type="text/javascript">
(function () {
// Construct your dictionary
const dictionary = {
en: {
greeting: 'Hello',
question: 'How are you doing?',
title: 'Test title'
},
es: {
greeting: 'Hola',
question: '¿Como estas?',
title: 'Título de la prueba'
}
};
var language = document.getElementById("language");
translateDOM(language.value);
language.onchange = function () {
if (language.value == "es") {
translateDOM("es")
} else {
translateDOM("en")
}
}
// The package I took this from is translator.js https://github.com/EOussama/eo-translatorjs
function translateDOM(language) {
if (document) {
var elements = document.querySelectorAll('[eo-translator]');
for (var i = 0; i < elements.length; i++) {
translateElement(elements[i], language);
}
}
}
function translateElement(DOMElement, language) {
if (DOMElement) {
var input = DOMElement.attributes['eo-translator'].value;
DOMElement.innerHTML = translate(input, language);
}
}
function translate(input, language) {
var languageExist = dictionary.hasOwnProperty(language);
if (languageExist) {
return dictionary[language][input];
}
}
})();
</script>
</body>
</html>
In place of the forEach, I had to use for loop.
for (var i = 0; i < elements.length; i++) {
translateElement(elements[i], language);
}
In place of the addEventListener, I had to use the onchange method
language.onchange = function () {
if (language.value == "es") {
translateDOM("es")
} else {
translateDOM("en")
}
}
Top comments (0)