Skip to content
Snippets Groups Projects
Commit 2a1d67e7 authored by Kocher, Manuel's avatar Kocher, Manuel
Browse files

Rename lang-files to lang-dir, remove unnecessary attributes

parent bb5ffef3
No related branches found
No related tags found
No related merge requests found
Pipeline #176992 passed
Showing
with 48 additions and 99 deletions
...@@ -74,8 +74,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) { ...@@ -74,8 +74,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
this.initateOpenMenu = false; this.initateOpenMenu = false;
this.auth = {}; this.auth = {};
this.langFiles = ''; this.langDir = '';
this.overrideFiles = '';
} }
static get scopedElements() { static get scopedElements() {
...@@ -273,8 +272,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) { ...@@ -273,8 +272,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
buildTime: {type: String, attribute: 'build-time'}, buildTime: {type: String, attribute: 'build-time'},
env: {type: String}, env: {type: String},
auth: {type: Object}, auth: {type: Object},
langFiles: {type: String, attribute: 'lang-files'}, langDir: {type: String, attribute: 'lang-dir'},
overrideFiles: {type: String, attribute: 'override-files'},
}; };
} }
......
...@@ -302,10 +302,8 @@ html { ...@@ -302,10 +302,8 @@ html {
</dbp-translated> </dbp-translated>
</div> </div>
<div class="control" id="dbp-translation-demo"> <div class="control" id="dbp-translation-demo">
<p><dbp-translation key="toolkit-showcase" subscribe="lang, lang-files"></dbp-translation></p> <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
<p><dbp-translation key="toolkit-showcase" subscribe="lang, lang-files, override-files"></dbp-translation></p> <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
<p><dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-files" unsafe></dbp-translation></p>
<p><dbp-translation key="toolkit-showcase-link" var='{"link1": "https://dbp-demo.tugraz.at/"}' subscribe="lang, lang-files, override-files" unsafe></dbp-translation></p>
</div> </div>
</div> </div>
</section> </section>
......
...@@ -7,30 +7,8 @@ export function createInstance() { ...@@ -7,30 +7,8 @@ export function createInstance() {
return _createInstance({en: en, de: de}, 'de', 'en'); return _createInstance({en: en, de: de}, 'de', 'en');
} }
export async function createInstanceAsync(langFile, namespace) { export function createInstanceGivenResources(en, de) {
if (namespace == undefined) return _createInstance({en: en, de: de}, 'de', 'en');
namespace = 'translation';
// check if a path to language files is given
if(langFile) {
// request german lang file asynchronously
let result = await
fetch(langFile + 'de/' + namespace +'.json', {
headers: {'Content-Type': 'application/json'},
});
const dynDe = await result.json();
// request english lang file asynchronously
result = await
fetch(langFile + 'en/' + namespace + '.json', {
headers: {'Content-Type': 'application/json'},
});
const dynEn = await result.json();
return _createInstance({en: dynEn, de: dynDe}, 'de', 'en', namespace);
}
return _createInstance({en: en, de: de}, 'de', 'en', namespace);
} }
export {setOverridesByFile}; export {setOverridesByFile};
import {css, html} from 'lit'; import {css, html} from 'lit';
import {until} from 'lit/directives/until.js';
import {unsafeHTML} from 'lit/directives/unsafe-html.js'; import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import DBPLitElement from '../dbp-lit-element'; import DBPLitElement from '../dbp-lit-element';
import {createInstanceAsync, setOverridesByFile} from './i18n.js'; import {createInstanceGivenResources, setOverridesByFile} from './i18n.js';
export class Translation extends DBPLitElement { export class Translation extends DBPLitElement {
constructor() { constructor() {
super(); super();
this.key = ''; this.key = '';
this.lang = ''; this.lang = '';
this.langFiles = '';
this.interpolation = ''; this.interpolation = '';
this.namespace = ''; this.langDir = '';
this.overrideFiles = '';
} }
static get properties() { static get properties() {
...@@ -20,11 +17,9 @@ export class Translation extends DBPLitElement { ...@@ -20,11 +17,9 @@ export class Translation extends DBPLitElement {
...super.properties, ...super.properties,
key: {type: String}, key: {type: String},
lang: {type: String}, lang: {type: String},
langFiles: {type: String, attribute: 'lang-files'},
interpolation: {type: Object, attribute: 'var'}, interpolation: {type: Object, attribute: 'var'},
unsafe: {type: Boolean, attribute: 'unsafe'}, unsafe: {type: Boolean, attribute: 'unsafe'},
namespace: {type: String, attribute: 'ns'}, langDir: {type: String, attribute: 'lang-dir'},
overrideFiles: {type: String, attribute: 'override-files'},
}; };
} }
...@@ -39,23 +34,22 @@ export class Translation extends DBPLitElement { ...@@ -39,23 +34,22 @@ export class Translation extends DBPLitElement {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
if (this.namespace == '') {
this._i18n = createInstanceAsync(this.langFiles);
}
else {
this._i18n = createInstanceAsync(this.langFiles, this.namespace);
}
let local = this; // init objects with empty string as value for key
let overrideFiles = this.overrideFiles; const de = {};
const en = {};
de[this.key] = "";
en[this.key] = "";
if (this.overrideFiles) { // create i18n instance with given translations
this._i18n.then(function(response) { this._i18n = createInstanceGivenResources(en, de);
setOverridesByFile(response, local, overrideFiles).then(function(response) {
local._i18n = response; // after init of overrides rerender page
let local = this;
if (this.langDir) {
setOverridesByFile(this._i18n, this, this.langDir).then(function(response) {
local.requestUpdate(); local.requestUpdate();
}); });
});
} }
} }
...@@ -64,9 +58,7 @@ export class Translation extends DBPLitElement { ...@@ -64,9 +58,7 @@ export class Translation extends DBPLitElement {
changedProperties.forEach((oldValue, propName) => { changedProperties.forEach((oldValue, propName) => {
switch (propName) { switch (propName) {
case 'lang': case 'lang':
Promise.resolve(this._i18n).then(function(response) { this._i18n.changeLanguage(lang);
response.changeLanguage(lang);
});
break; break;
} }
}); });
...@@ -75,24 +67,19 @@ export class Translation extends DBPLitElement { ...@@ -75,24 +67,19 @@ export class Translation extends DBPLitElement {
} }
render() { render() {
// save global key in local variable for async use // request to i18n translation
let key = this.key; const translation = (() => {
let interpolation = this.interpolation; if (this.interpolation && this.unsafe)
let unsafe = this.unsafe; return unsafeHTML(this._i18n.t(this.key, this.interpolation));
else if (this.interpolation)
// async request to i18n translation return this._i18n.t(this.key, this.interpolation);
const translation = Promise.resolve(this._i18n).then(function(response){
if (interpolation && unsafe)
return unsafeHTML(response.t(key, interpolation));
else if (interpolation)
return response.t(key, interpolation);
else else
return response.t(key); return this._i18n.t(this.key);
}); })();
// load translation text when available, otherwise display "Loading.." // load translation text
return html` return html`
${until(translation, html`Loading..`)} ${translation}
`; `;
} }
} }
...@@ -14,5 +14,5 @@ ...@@ -14,5 +14,5 @@
"de": "Gemeinsame Web Components", "de": "Gemeinsame Web Components",
"en": "Common web components" "en": "Common web components"
}, },
"subscribe": "lang,entry-point-url,lang-files" "subscribe": "lang,entry-point-url"
} }
...@@ -113,8 +113,7 @@ ...@@ -113,8 +113,7 @@
<<%= name %> <<%= name %>
provider-root provider-root
lang="de" lang="de"
lang-files="<%= getPrivateUrl('i18n/') %>" lang-dir="<%= getPrivateUrl('translation-overrides/') %>"
override-files="<%= getPrivateUrl('i18n/overrides/') %>"
entry-point-url="<%= entryPointURL %>" entry-point-url="<%= entryPointURL %>"
nextcloud-auth-url="<%= nextcloudWebAppPasswordURL %>" nextcloud-auth-url="<%= nextcloudWebAppPasswordURL %>"
nextcloud-web-dav-url="<%= nextcloudWebDavURL %>" nextcloud-web-dav-url="<%= nextcloudWebDavURL %>"
......
{
"toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
"toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\">interpolation</a> und escaping dargestellt werden."
}
{
"toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
"toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\">interpolation</a> and escaping."
}
{
"dbp-translation": {
"toolkit-showcase": "Überschriebener i18n toolkit-showcase Text",
"toolkit-showcase-link": "Überschriebener i18n toolkit-showcase-link Text mit <a href=\"{{- link1}}\">TestLink</a>"
}
}
{
"dbp-translation": {
"toolkit-showcase": "Overriden i18n toolkit-showcase text",
"toolkit-showcase-link": "Overriden i18n toolkit-showcase-link text with a <a href=\"{{- link1}}\">test link</a>"
}
}
{
"dbp-translation": {
"toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
"toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\">interpolation</a> und escaping dargestellt werden."
}
}
{
"dbp-translation": {
"toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
"toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\">interpolation</a> and escaping."
}
}
...@@ -168,7 +168,7 @@ Dependencies: ...@@ -168,7 +168,7 @@ Dependencies:
{src: 'assets/icon-*.png', dest: 'dist/' + (await getDistPath(pkg.name))}, {src: 'assets/icon-*.png', dest: 'dist/' + (await getDistPath(pkg.name))},
{src: 'assets/apple-*.png', dest: 'dist/' + (await getDistPath(pkg.name))}, {src: 'assets/apple-*.png', dest: 'dist/' + (await getDistPath(pkg.name))},
{src: 'assets/safari-*.svg', dest: 'dist/' + (await getDistPath(pkg.name))}, {src: 'assets/safari-*.svg', dest: 'dist/' + (await getDistPath(pkg.name))},
{src: 'assets/i18n', dest: 'dist/' + (await getDistPath(pkg.name))}, {src: 'assets/translation-overrides', dest: 'dist/' + (await getDistPath(pkg.name))},
{ {
src: 'assets/manifest.json', src: 'assets/manifest.json',
dest: 'dist', dest: 'dist',
......
...@@ -13,7 +13,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) { ...@@ -13,7 +13,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
super(); super();
this.lang = 'en'; this.lang = 'en';
this.entryPointUrl = ''; this.entryPointUrl = '';
this.langFiles = '';
} }
static get scopedElements() { static get scopedElements() {
...@@ -26,7 +25,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) { ...@@ -26,7 +25,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
return { return {
...super.properties, ...super.properties,
lang: {type: String}, lang: {type: String},
langFiles: {type: String, attribute: 'lang-files'},
entryPointUrl: {type: String, attribute: 'entry-point-url'}, entryPointUrl: {type: String, attribute: 'entry-point-url'},
}; };
} }
...@@ -65,7 +63,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) { ...@@ -65,7 +63,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
<dbp-common-demo <dbp-common-demo
id="demo" id="demo"
lang="${this.lang}" lang="${this.lang}"
lang-files="${this.langFiles}"
entry-point-url="${this.entryPointUrl}"></dbp-common-demo> entry-point-url="${this.entryPointUrl}"></dbp-common-demo>
`; `;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment