autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

major: i18n concept implementation

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2020-10-20 16:31:30 +02:00 committed by gaelle morin
parent 2ec570f67d
commit 2506b5fad7
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
6 changed files with 1306 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1107
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

23
package.json
View File

@ -12,19 +12,31 @@
"build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js",
"build:jscomponents": "babel \"src/components/*.js\" --out-dir dist/components/",
"build:html": "pug src/index.pug -o dist/ --obj config.json",
"build:i18n": "copyfiles -u 2 src/locales/*.json dist/locales",
"copy:font": "copyfiles -f src/fonts/* dist/fonts",
"copy:image": "copyfiles -f src/images/* dist/images",
"serve": "pushstate-server -d ./dist -p 3000",
"watch": "run-p copy:* watch:* serve",
"watch:css": "npm run build:css && npm run build:css -- -w",
"watch:js": "babel --watch \"src/scripts/*.js\" -o dist/scripts/index.js",
"watch:jscomponents": "babel --watch \"src/components/*.js\" --out-dir dist/components/",
"watch": "run-p build watch:* serve",
"watch:css": "npm-watch build:css",
"watch:js": "npm-watch build:js",
"watch:jscomponents": "npm-watch build:jscomponents",
"watch:pug": "pug --watch src/index.pug -o dist/ --obj config.json",
"watch:i18n": "npm-watch build:i18n",
"watch:font": "npm-watch copy:font",
"watch:image": "npm-watch copy:image",
"cypress:open": "cypress open",
"cypress:verify": "cypress verify",
"cypress:info": "cypress info",
"test": "cypress run"
},
"watch": {
"build:css": "src/styles/*",
"build:i18n": "src/locales/*",
"copy:images": "src/fonts/*.js",
"copy:fonts": "src/images/*.js",
"build:js": "src/scripts/*.js",
"build:jscomponents": "src/components/*.js"
},
"release": {
"branches": [
"master"
@ -69,6 +81,7 @@
"devDependencies": {
"cypress": "^4.5.0",
"cypress-localstorage-commands": "^1.2.1",
"cypress-terminal-report": "^1.2.1"
"cypress-terminal-report": "^1.2.1",
"npm-watch": "^0.7.0"
}
}

4
src/dependencies.pug
View File

@ -25,11 +25,11 @@ if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpo
//- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.9" defer)
script(type="module" src="https://unpkg.com/@startinblox/component-job-board@1.0" defer)
//- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.10" defer)
script(type="module" src="https://unpkg.com/@startinblox/component-directory@1.0" defer)
//- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)

20
src/locales/en.json Normal file
View File

@ -0,0 +1,20 @@
{
"menuLeft": {
"emptyCircleProject": {
"notPartOf": "Tu ne fais partie d'aucun",
"createNew": "Pour en créer un nouveau, tu peux te rendre dans le",
"adminPanel": "panneau d'administration",
"project": "projet",
"circle": "cercle"
},
"dashboard": "Tableau de bord",
"events": "Evènements",
"gov": "Gouvernance",
"resources": "Ressources",
"jobBoard": "Offres de mission",
"profileDirectory": "Annuaire des membres",
"projects": "Projets",
"circles": "Circles",
"messages": "Messages"
}
}

33
src/menu-left.pug
View File

@ -14,10 +14,13 @@ solid-widget(name='hubl-menu-publicprivate')
solid-widget(name='hubl-create')
template
p.create Tu ne fais partie d'aucun ${value}.
p.create
span(data-trans="menuLeft.emptyCircleProject.notPartOf")
span  ${value}.
br
| Pour en créer un nouveau, tu peux te rendre dans le
solid-link(next='admin') panneau d'administration
span(data-trans="menuLeft.emptyCircleProject.createNew")
span  
solid-link(next='admin', data-trans="menuLeft.emptyCircleProject.adminPanel")
solid-widget(name='hubl-menu-fix-url-circle')
template
@ -53,32 +56,32 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-router#navbar-router(default-route='dashboard')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
solid-route.menu(name='dashboard')
div.menu-label Tableau de bord
div.menu-label(data-trans="menuLeft.dashboard")
div.menu-icon.icon-home
div.divider
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route.menu(name='members')
div.menu-label Annuaire des membres
div.menu-label(data-trans="menuLeft.profileDirectory")
div.menu-icon.icon-people
div.divider
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
solid-route.menu(name='job-offers', rdf-type='hd:joboffer')
div.menu-label Offres de mission
div.menu-label(data-trans="menuLeft.jobBoard")
div.menu-icon.icon-briefcase
div.divider
if endpoints.resources || (endpoints.get && endpoints.get.resources)
solid-route.menu(name='resources')
div.menu-label Ressources
div.menu-label(data-trans="menuLeft.resources")
div.menu-icon.icon-docs
div.divider
if endpoints.polls || (endpoints.get && endpoints.get.polls)
solid-route.menu(name='polls')
div.menu-label Gouvernance
div.menu-label(data-trans="menuLeft.gov")
div.menu-icon.icon-bubbles
div.divider
if endpoints.events || (endpoints.get && endpoints.get.events)
solid-route.menu(name='events')
div.menu-label Evènements
div.menu-label(data-trans="menuLeft.events")
div.menu-icon.icon-calendar
div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects)
@ -89,7 +92,7 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-chevron
div.menu-icon.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle
div.menu-label Projets
div.menu-label(data-trans="menuLeft.projects")
div.menu-icon.icon-folder-alt
solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
@ -104,7 +107,8 @@ solid-router#navbar-router(default-route='dashboard')
fields='project'
loader-id='loader-projects'
empty-widget='hubl-create'
empty-value='projet'
empty-value=''
data-trans="empty-value=menuLeft.emptyCircleProject.project"
widget-project='hubl-menu-fix-url-project'
order-by="project.customer.name"
)
@ -117,7 +121,7 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-chevron
div.menu-icon.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle
div.menu-label Cercles
div.menu-label(data-trans="menuLeft.circles")
div.menu-icon.icon-folder-alt
solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification
@ -132,7 +136,8 @@ solid-router#navbar-router(default-route='dashboard')
fields='circle'
loader-id='loader-circles'
empty-widget='hubl-create'
empty-value='cercle'
empty-value=''
data-trans="empty-value=menuLeft.emptyCircleProject.circle"
widget-circle='hubl-menu-fix-url-circle'
order-by="circle.name"
)
@ -142,7 +147,7 @@ solid-router#navbar-router(default-route='dashboard')
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-up
div.menu-label Messages
div.menu-label(data-trans="menuLeft.messages")
div.menu-icon.icon-envelope-letter
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification

178
src/scripts/intl.js Normal file
View File

@ -0,0 +1,178 @@
/*
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');
this.setLocale('en');
}
};
/*
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 {
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();
});
}
});
this.locale = locale;
} catch {
if (locale != "en") {
console.warn(`Locale not found: ${locale}, fallback to english`);
this.setLocale("en");
} 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);
});