diff --git a/packages/common/i18next.js b/packages/common/i18next.js index 1a3b2417f139940237bc5a67fa4c6ac985e95d52..47205cd7f2eeb2d3eb6799f8f8a91e9800d7cde5 100644 --- a/packages/common/i18next.js +++ b/packages/common/i18next.js @@ -189,6 +189,7 @@ export async function setOverridesByGlobalCache(i18n, element) { } catch(e) { // leave loop and use default translations if error is thrown hasOverrides = false; + console.warn(lng + ' overrides for tag ' + tagName + " could not be loaded!"); break; } } diff --git a/packages/common/src/adapter-lit-element.js b/packages/common/src/adapter-lit-element.js index 5ef33645c24100cf3b0629023520e5d90ff0ce67..5d46a75b7d2fb5c5780f5c3558ae1da04c07aeaa 100644 --- a/packages/common/src/adapter-lit-element.js +++ b/packages/common/src/adapter-lit-element.js @@ -85,7 +85,7 @@ export class AdapterLitElement extends LitElement { this.connected = true; // use translation overrides if path is given - if(this.langDir) { + if(this.langDir != '') { setOverridesByGlobalCache(this._i18n, this); } @@ -276,6 +276,10 @@ export class AdapterLitElement extends LitElement { value ); + if(this.langDir) { + setOverridesByGlobalCache(this._i18n, this); + } + // If value is an object set it directly as property if (typeof value === 'object' && value !== null) { // Logger.debug("value is object", value); diff --git a/packages/common/src/translation.js b/packages/common/src/translation.js index c5c7e6b6b5277cab1a89c4dec77d3a90698e0bc9..bb4ea411c5a04797a7a30f6c3a30f8684c96d99c 100644 --- a/packages/common/src/translation.js +++ b/packages/common/src/translation.js @@ -2,7 +2,7 @@ import {html} from 'lit'; import {unsafeHTML} from 'lit/directives/unsafe-html.js'; import DBPLitElement from '../dbp-lit-element'; import * as commonStyles from '../styles.js'; -import {getOverrideNamespace} from './i18n.js'; +import {getOverrideNamespace, setOverridesByGlobalCache} from './i18n.js'; export class Translation extends DBPLitElement { constructor() { @@ -33,6 +33,10 @@ export class Translation extends DBPLitElement { } connectedCallback() { + + // get overrides everytime + setOverridesByGlobalCache(this._i18n, this); + // supercall after default i18n init to override translations only // if a override with this tagname is given super.connectedCallback(); @@ -64,27 +68,31 @@ export class Translation extends DBPLitElement { return unsafeHTML(this._i18n.t(this.key, this.interpolation)); else if (this.interpolation) return this._i18n.t(this.key, this.interpolation); + else if (this.unsafe) + return unsafeHTML(this._i18n.t(this.key)); else return this._i18n.t(this.key); })(); + + // check if overrides have been loaded with overrideNamespace - // and then check if given key exists - let key = ""; - if (this._i18n.exists(this.key) && this._i18n.hasResourceBundle(this.lang, overrideNamespace)) { - key = unsafeHTML("<!-- key: " + this.key + "-->"); + // and then check if given key exists in overrideNS + let keyComment = ""; + if (this._i18n.exists(overrideNamespace + ":" + this.key) && this._i18n.hasResourceBundle(this.lang, overrideNamespace)) { + keyComment = unsafeHTML("<!-- key: " + this.key + "-->"); } else if (this._i18n.hasResourceBundle(this.lang, overrideNamespace)){ - key = unsafeHTML("<!-- key '" + this.key + "' not found! -->"); + keyComment = unsafeHTML("<!-- key '" + this.key + "' not found! -->"); translation = ""; - console.error("Key '" + this.key + "' not found!"); + console.error("Key '" + this.key + "' not found! " + this._i18n.t(this.key)); } else { - key = unsafeHTML("<!-- key '" + this.key + "' and namespace '" + overrideNamespace + "' not found! -->"); + keyComment = unsafeHTML("<!-- key '" + this.key + "' and namespace '" + overrideNamespace + "' not found! -->"); translation = ""; } // load translation text return html` - ${key} + ${keyComment} ${translation} `; } diff --git a/toolkit-showcase/src/dbp-toolkit-showcase.js b/toolkit-showcase/src/dbp-toolkit-showcase.js index efc88efd252e8d6d769642b6cb7ef379b527ae95..9c4bf9d29eb688b61130ea6420d9d459c9e7ea9e 100644 --- a/toolkit-showcase/src/dbp-toolkit-showcase.js +++ b/toolkit-showcase/src/dbp-toolkit-showcase.js @@ -1,5 +1,7 @@ import '@webcomponents/scoped-custom-element-registry'; import {AppShell} from '@dbp-toolkit/app-shell'; +import {Translation} from '@dbp-toolkit/common/src/translation'; import * as commonUtils from '@dbp-toolkit/common/utils'; commonUtils.defineCustomElement('dbp-toolkit-showcase', AppShell); +commonUtils.defineCustomElement('dbp-translation', Translation);