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

@ -68,7 +68,7 @@
"create": { "create": {
"backlink": "Back", "backlink": "Back",
"title": " Create a circle", "title": " Create a circle",
"labelStatus": "Statut du circle", "labelStatus": "Circle status",
"labelName": "Circle name *", "labelName": "Circle name *",
"labelSubtitle": "Circle headline *", "labelSubtitle": "Circle headline *",
"labelDescription": "Circle description", "labelDescription": "Circle description",
@ -100,7 +100,8 @@
"tableHeader2": "Admins", "tableHeader2": "Admins",
"tableHeader3": "Join", "tableHeader3": "Join",
"buttonQuit": "Leave", "buttonQuit": "Leave",
"buttonJoin": "Join" "buttonJoin": "Join",
"searchBy": "Find a circle by name"
}, },
"left": { "left": {
"paragraphQuit": "You left this circle.", "paragraphQuit": "You left this circle.",
@ -126,7 +127,8 @@
"noPermission": "Member, no permission", "noPermission": "Member, no permission",
"subTitle": "Communities", "subTitle": "Communities",
"tableHeader1": "Name", "tableHeader1": "Name",
"tableHeader2": "Action" "tableHeader2": "Action",
"searchBy": "Find a community by name"
}, },
"project": { "project": {
"menuRight": { "menuRight": {
@ -142,7 +144,6 @@
"labelDescription": "Poject description", "labelDescription": "Poject description",
"descriptionHelp": "You can use markdown", "descriptionHelp": "You can use markdown",
"labelCustomer": "Customer name*", "labelCustomer": "Customer name*",
"labelDescription": "Description",
"labelCaptain": "Project captain*", "labelCaptain": "Project captain*",
"buttonSubmit": "Save" "buttonSubmit": "Save"
}, },
@ -175,7 +176,8 @@
"tableHeader3": "Captains", "tableHeader3": "Captains",
"tableHeader4": "Join", "tableHeader4": "Join",
"buttonQuit": "Leave", "buttonQuit": "Leave",
"buttonJoin":"Join" "buttonJoin":"Join",
"searchBy": "Find a project by name"
}, },
"left": { "left": {
"paragraphQuit": "You left this project.", "paragraphQuit": "You left this project.",

View File

@ -100,7 +100,8 @@
"tableHeader2": "Administradorxs", "tableHeader2": "Administradorxs",
"tableHeader3": "Unirse", "tableHeader3": "Unirse",
"buttonQuit": "Salir", "buttonQuit": "Salir",
"buttonJoin": "Unirse" "buttonJoin": "Unirse",
"searchBy": "Busca un círculo por nombre "
}, },
"left": { "left": {
"paragraphQuit": "Dejaste este círculo.", "paragraphQuit": "Dejaste este círculo.",
@ -126,7 +127,8 @@
"noPermission": "Miembrx sin permiso", "noPermission": "Miembrx sin permiso",
"subTitle": "Comunidades", "subTitle": "Comunidades",
"tableHeader1": "Nombre", "tableHeader1": "Nombre",
"tableHeader2": "Acción" "tableHeader2": "Acción",
"searchBy": "Encuentra una comunidad por nombre "
}, },
"project": { "project": {
"menuRight": { "menuRight": {
@ -142,7 +144,6 @@
"labelDescription": "Descripción del proyecto", "labelDescription": "Descripción del proyecto",
"descriptionHelp": "Puedes usar markdown", "descriptionHelp": "Puedes usar markdown",
"labelCustomer": "Nombre del/la clientx *", "labelCustomer": "Nombre del/la clientx *",
"labelDescription": "Description",
"labelCaptain": "Líder del proyecto *", "labelCaptain": "Líder del proyecto *",
"buttonSubmit": "Guardar" "buttonSubmit": "Guardar"
}, },
@ -175,7 +176,8 @@
"tableHeader3": "Líderes", "tableHeader3": "Líderes",
"tableHeader4": "Unirse", "tableHeader4": "Unirse",
"buttonQuit": "Salir", "buttonQuit": "Salir",
"buttonJoin": "Unirse" "buttonJoin": "Unirse",
"searchBy": "Buscar un proyecto por nombre "
}, },
"left": { "left": {
"paragraphQuit": "Dejaste este proyecto.", "paragraphQuit": "Dejaste este proyecto.",

View File

@ -101,7 +101,8 @@
"tableHeader2": "Administrateurs", "tableHeader2": "Administrateurs",
"tableHeader3": "Rejoindre", "tableHeader3": "Rejoindre",
"buttonQuit": "Quitter", "buttonQuit": "Quitter",
"buttonJoin": "Rejoindre" "buttonJoin": "Rejoindre",
"searchBy": "Rechercher un cercle par nom"
}, },
"left": { "left": {
"paragraphQuit": "Tu as quitté ce cercle.", "paragraphQuit": "Tu as quitté ce cercle.",
@ -127,7 +128,8 @@
"noPermission": "Membre, aucune permission", "noPermission": "Membre, aucune permission",
"subTitle": "Communautés", "subTitle": "Communautés",
"tableHeader1": "Nom", "tableHeader1": "Nom",
"tableHeader2": "Action" "tableHeader2": "Action",
"searchBy": "Rechercher une communauté par nom"
}, },
"project": { "project": {
"menuRight": { "menuRight": {
@ -143,7 +145,6 @@
"labelDescription": "Description du projet", "labelDescription": "Description du projet",
"descriptionHelp": "Vous pouvez utiliser Markdown", "descriptionHelp": "Vous pouvez utiliser Markdown",
"labelCustomer": "Nom du client*", "labelCustomer": "Nom du client*",
"labelDescription": "Description",
"labelCaptain": "Capitaine du projet*", "labelCaptain": "Capitaine du projet*",
"buttonSubmit": "Enregistrer" "buttonSubmit": "Enregistrer"
}, },
@ -176,7 +177,8 @@
"tableHeader3": "Capitaines", "tableHeader3": "Capitaines",
"tableHeader4": "Rejoindre", "tableHeader4": "Rejoindre",
"buttonQuit": "Quitter", "buttonQuit": "Quitter",
"buttonJoin":"Rejoindre" "buttonJoin":"Rejoindre",
"searchBy": "Rechercher un projet par nom"
}, },
"left": { "left": {
"paragraphQuit": "Tu as quitté ce projet.", "paragraphQuit": "Tu as quitté ce projet.",

View File

@ -45,6 +45,12 @@ class JsI18n {
this.translateNodeContent(button, k); 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); this.translateNodeContent(node.attributes[attr], k);
} }
} }
@ -60,11 +66,14 @@ class JsI18n {
if (node != null && translation != undefined) { if (node != null && translation != undefined) {
if (node.nodeType == 1) { //Element if (node.nodeType == 1) { //Element
try { try {
if(node.innerHTML != translation)
node.innerHTML = translation; node.innerHTML = translation;
} catch (e) { } catch (e) {
if(node.text != translation)
node.text = translation; node.text = translation;
} }
} else if (node.nodeType == 2) { //Attribute } else if (node.nodeType == 2) { //Attribute
if(node.value != translation)
node.value = translation; node.value = translation;
} }
} }
@ -178,25 +187,17 @@ document.addEventListener("DOMContentLoaded", () => {
// Detect the lang & initialize, based on the browser or "language" item from localstorage // Detect the lang & initialize, based on the browser or "language" item from localstorage
jsI18n.detectLanguage(); jsI18n.detectLanguage();
(new MutationObserver((mutations) => {
/* mutations.forEach(mutation => {
recursivePopulate(DOMElement) if(mutation.target.attributes["data-trans"] != null) {
Will listen for the populate event of any sib element // Render the target of the mutation instantly
Process the changed node every time it populate jsI18n.processNode(mutation.target);
Recursively add a populate listener for children elements // Then wait one arbitrary second to re-render the whole document in case a widget re-rendered
*/ setTimeout(() => jsI18n.processNode(document.querySelector('body')), 1000);
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);
});
} }
}); });
} }).observe(document.body, {
// Process every children from document subtree: true,
recursivePopulate(document); childList: true
}));
}); });

View File

@ -83,6 +83,15 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespac
widget-name='admin-circle-link' widget-name='admin-circle-link'
) )
solid-form-search.form(
id="admin-circle-filter"
fields='name'
label-name=''
data-trans='label-name=circle.list.searchBy'
widget-name='solid-form-label-text'
class-name="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
)
.segment.table-wrapper .segment.table-wrapper
.table .table
@ -122,9 +131,10 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespac
solid-display( solid-display(
class='table-body' class='table-body'
filtered-by="admin-circle-filter"
bind-user bind-user
nested-field='circles' nested-field='circles'
fields='cell1(circle.name, counter, circle.subtitle), cell2(circle.owner), cell3(leaveButton)' fields='cell1(name(circle.name), counter, circle.subtitle), cell2(circle.owner), cell3(leaveButton)'
loader-id='loader-admin-circles' loader-id='loader-admin-circles'
class-cell1='segment table-cell third whitespace-normal' class-cell1='segment table-cell third whitespace-normal'
@ -154,7 +164,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespac
value-user.username='hubl-workaround-493' value-user.username='hubl-workaround-493'
widget-user.username='solid-form-hidden' widget-user.username='solid-form-hidden'
submit-button='Join' submit-button=''
data-trans='submit-button=circle.list.buttonJoin' data-trans='submit-button=circle.list.buttonJoin'
) )
hubl-reactivity(data-src=`${endpoints.get.circles}` target-src='${value}') hubl-reactivity(data-src=`${endpoints.get.circles}` target-src='${value}')
@ -165,6 +175,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespac
solid-display( solid-display(
class='table-body' class='table-body'
filtered-by="admin-circle-filter"
data-src=`${endpoints.circles || endpoints.get.circles}joinable/` data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
fields='cell1(name, counter, subtitle), cell2(owner), cell3(members)' fields='cell1(name, counter, subtitle), cell2(owner), cell3(members)'

View File

@ -29,6 +29,15 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
) )
span.icon.icon-people.icon-xsmall.margin-right-xxsmall span.icon.icon-people.icon-xsmall.margin-right-xxsmall
solid-form-search.form(
id="admin-community-filter"
fields='cell1'
label-cell1=''
data-trans='label-cell1=communities.searchBy'
widget-cell1='solid-form-label-text'
class-cell1="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
)
.segment.table-wrapper .segment.table-wrapper
.table .table
div.table-header.bg-color-third.text-color-heading div.table-header.bg-color-third.text-color-heading
@ -37,6 +46,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
solid-display( solid-display(
class='table-body' class='table-body'
filtered-by='admin-community-filter'
bind-user bind-user
nested-field='communities' nested-field='communities'
fields='cell1(community.name, counter), cell2(community)' fields='cell1(community.name, counter), cell2(community)'

View File

@ -58,6 +58,15 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
widget-name='admin-project-link' widget-name='admin-project-link'
) )
solid-form-search.form(
id="admin-project-filter"
fields='cell1'
label-cell1=''
data-trans='label-cell1=project.list.searchBy'
widget-cell1='solid-form-label-text'
class-cell1="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
)
.segment.table-wrapper .segment.table-wrapper
.table .table
@ -132,6 +141,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
solid-display( solid-display(
class='table-body' class='table-body'
filtered-by="admin-project-filter"
bind-user bind-user
nested-field="projects" nested-field="projects"
@ -180,6 +190,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
solid-display( solid-display(
class='table-body' class='table-body'
filtered-by="admin-project-filter"
data-src=`${endpoints.projects || endpoints.get.projects}joinable/` data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
fields='cell1(customer.name, counter, name), cell2(members), cell3(captain), cell4(joinButton)' fields='cell1(customer.name, counter, name), cell2(members), cell3(captain), cell4(joinButton)'

View File

@ -20,14 +20,14 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
solid-widget(name='hubl-username-field') solid-widget(name='hubl-username-field')
template template
label(data-trans='user.create.labelUsername') label ${label}
input(type="text" title='' pattern="[a-zA-Z0-9]+" label="" data-trans='title=user.create.labelUsernameTitle;label=user.create.labelUsername' name="username" required value="\${value}" data-holder) input(type="text" title='' pattern="[a-zA-Z0-9]+" label="${label}" data-trans='title=user.create.labelUsernameTitle' name="username" required value="\${value}" data-holder)
solid-widget(name='hubl-email-field') solid-widget(name='hubl-email-field')
template template
div.segment.margin-bottom-medium.half.sm-full.padding-left-small.sm-padding-none.text-small.text-semibold.text-uppercase.text-color-heading div.segment.margin-bottom-medium.half.sm-full.padding-left-small.sm-padding-none.text-small.text-semibold.text-uppercase.text-color-heading
label(data-trans='user.create.labelEmail') label ${label}
input(type="email" label='' data-trans='label=user.create.labelEmail' name="email" required value="\${value}" data-holder) input(type="email" label='${label}' name="email" required value="\${value}" data-holder)
div.segment.margin-bottom-medium div.segment.margin-bottom-medium
div.segment div.segment