minor: rework intl with mutationobserver + admin search fields
This commit is contained in:
@ -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
|
||||
}));
|
||||
});
|
Reference in New Issue
Block a user