minor: rework intl with mutationobserver + admin search fields

This commit is contained in:
Jean-Baptiste Pasquier
2021-01-26 17:48:05 +01:00
parent eb31b5b9d9
commit 7c0f237bd0
8 changed files with 89 additions and 50 deletions

View File

@ -39,12 +39,18 @@ class JsI18n {
if (attr == "html") {
this.translateNodeContent(node, k);
} else {
if(node.tagName == "SOLID-DELETE") {
if (node.tagName == "SOLID-DELETE") {
let button = node.querySelector('button');
if(button != null) {
if (button != null) {
this.translateNodeContent(button, k);
}
}
if (attr.startsWith('label-')) {
let label = node.querySelector('[name="'+attr.replace("label-", "")+'"] > label');
if(label != null) {
this.translateNodeContent(label, k);
}
}
this.translateNodeContent(node.attributes[attr], k);
}
}
@ -60,12 +66,15 @@ class JsI18n {
if (node != null && translation != undefined) {
if (node.nodeType == 1) { //Element
try {
node.innerHTML = translation;
if(node.innerHTML != translation)
node.innerHTML = translation;
} catch (e) {
node.text = translation;
if(node.text != translation)
node.text = translation;
}
} else if (node.nodeType == 2) { //Attribute
node.value = translation;
if(node.value != translation)
node.value = translation;
}
}
}
@ -120,12 +129,12 @@ class JsI18n {
}
});
} else {
if (locale != "fr") {
console.warn(`Locale not found: ${locale}, fallback to french`);
this.setLocale("fr");
} else {
console.error("Language not found");
}
if (locale != "fr") {
console.warn(`Locale not found: ${locale}, fallback to french`);
this.setLocale("fr");
} else {
console.error("Language not found");
}
}
});
this.locale = locale;
@ -146,7 +155,7 @@ class JsI18n {
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") {
if (typeof translation == "string") {
return translation;
} else {
return translations[key.toString()];
@ -178,25 +187,17 @@ 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) => {
if(e.content && e.content instanceof DocumentFragment) {
recursivePopulate(e.content);
} else if(e instanceof HTMLElement) {
e.addEventListener("populate", (el) => {
recursivePopulate(el.target);
jsI18n.processNode(el.target);
});
(new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if(mutation.target.attributes["data-trans"] != null) {
// Render the target of the mutation instantly
jsI18n.processNode(mutation.target);
// Then wait one arbitrary second to re-render the whole document in case a widget re-rendered
setTimeout(() => jsI18n.processNode(document.querySelector('body')), 1000);
}
});
}
// Process every children from document
recursivePopulate(document);
}).observe(document.body, {
subtree: true,
childList: true
}));
});