hubl/src/scripts/intl.js

198 lines
5.0 KiB
JavaScript
Raw Normal View History

2020-10-20 14:31:30 +00:00
/*
js intl, inspired by danabr/jsI18n
*/
class JsI18n {
constructor() {
this.locale = ""; //Current locale
this.locales = new Array(); //Available locales
}
/*
Method for automatically detecting the language, does not work in every browser.
*/
detectLanguage() {
if (localStorage.getItem('language') || (window.navigator.language !== null && window.navigator.language !== undefined)) {
this.setLocale(localStorage.getItem('language') || window.navigator.language.slice(0, 2));
} else {
console.error('Language not found');
2020-10-21 15:19:02 +00:00
this.setLocale('fr');
2020-10-20 14:31:30 +00:00
}
};
/*
Translates tag contents and
attributes depending on the
value of key.
*/
translateTag(node, key) {
if (key.indexOf("=") == -1) { //Simple key
this.translateNodeContent(node, key);
} else { //Attribute/key pairs
var parts = key.split(";");
for (var i = 0; i < parts.length; i++) {
var pair = parts[i].split("=");
var attr = pair[0].toLowerCase().trim();
var k = pair[1].trim();
if (attr == "html") {
this.translateNodeContent(node, k);
} else {
2020-10-22 11:48:49 +00:00
if(node.tagName == "SOLID-DELETE") {
let button = node.querySelector('button');
if(button != null) {
this.translateNodeContent(button, k);
}
}
2020-10-20 14:31:30 +00:00
this.translateNodeContent(node.attributes[attr], k);
}
}
}
}
/**
Replace the content of the given node
if there is a translation for the given key.
**/
translateNodeContent(node, key) {
var translation = this.t(key);
if (node != null && translation != undefined) {
if (node.nodeType == 1) { //Element
try {
node.innerHTML = translation;
} catch (e) {
node.text = translation;
}
} else if (node.nodeType == 2) { //Attribute
node.value = translation;
}
}
}
/*
Helper for translating a node
and all its child nodes.
*/
processNode(node) {
if (node != undefined) {
if (node.nodeType == 1) { //Element node
var key = node.attributes["data-trans"];
if (key != null) {
this.translateTag(node, key.nodeValue);
}
}
//Process child nodes
var children = node.childNodes;
for (var i = 0; i < children.length; i++) {
this.processNode(children[i]);
}
}
}
/*
Adds a locale to the list,
replacing the translations
if the locale is already defined.
*/
addLocale(locale, translations) {
this.locales[locale.toString()] = translations;
}
/*
Sets the locale to use when translating.
*/
setLocale(locale) {
try {
fetch(`/locales/${locale}.json`).then((result) => {
if (result.ok) {
result.json().then(e => {
this.addLocale(locale, e);
this.processPage();
2020-10-21 15:19:02 +00:00
}).catch(() => {
if (locale != "fr") {
console.warn(`Locale not found: ${locale}, fallback to french`);
this.setLocale("fr");
} else {
console.error("Language not found");
}
2020-10-20 14:31:30 +00:00
});
2020-10-22 16:38:16 +00:00
} else {
if (locale != "fr") {
console.warn(`Locale not found: ${locale}, fallback to french`);
this.setLocale("fr");
} else {
console.error("Language not found");
}
2020-10-20 14:31:30 +00:00
}
});
this.locale = locale;
} catch {
2020-10-21 15:19:02 +00:00
if (locale != "fr") {
console.warn(`Locale not found: ${locale}, fallback to french`);
this.setLocale("fr");
2020-10-20 14:31:30 +00:00
} else {
console.error("Language not found");
}
}
}
/*
Fetches the translation associated with the given key.
*/
t(key) {
var translations = this.locales[this.locale];
if (translations != undefined) {
let translation = key.toString().split('.').reduce((o, i) => (o ? o[i] : undefined), translations);
if(typeof translation == "string") {
return translation;
} else {
return translations[key.toString()];
}
}
return undefined;
}
/*
Alias for JsI18n.t
*/
translate(key) {
this.t(key);
}
/**
Replaces the contents of all tags
that have the data-trans attribute set.
**/
processPage() {
this.processNode(document.getElementsByTagName("html")[0]);
}
}
//Global
jsI18n = new JsI18n;
document.addEventListener("DOMContentLoaded", () => {
// Detect the lang & initialize, based on the browser or "language" item from localstorage
jsI18n.detectLanguage();
/*
recursivePopulate(DOMElement)
Will listen for the populate event of any sib element
Process the changed node every time it populate
Recursively add a populate listener for children elements
*/
function recursivePopulate(element) {
Array.from(element.querySelectorAll('*')).forEach((e) => {
e.addEventListener("populate", (e) => {
recursivePopulate(e.target);
jsI18n.processNode(e.target);
});
});
}
// Process every children from document
recursivePopulate(document);
});