From c06f6541c5bfe8fbc1ab52cad4b4821c58625df8 Mon Sep 17 00:00:00 2001 From: Christoph Reiter <reiter.christoph@gmail.com> Date: Thu, 1 Jul 2021 17:17:48 +0200 Subject: [PATCH] person-profile: one i18next instance per element --- .../person-profile/src/dbp-person-profile-demo.js | 10 +++++++--- packages/person-profile/src/i18n.js | 6 ++++-- packages/person-profile/src/person-profile.js | 15 +++++---------- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/person-profile/src/dbp-person-profile-demo.js b/packages/person-profile/src/dbp-person-profile-demo.js index 25269ea1..dbce0a58 100644 --- a/packages/person-profile/src/dbp-person-profile-demo.js +++ b/packages/person-profile/src/dbp-person-profile-demo.js @@ -1,5 +1,5 @@ import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth'; -import {i18n} from './i18n.js'; +import {createInstance} from './i18n.js'; import {css, html} from 'lit-element'; import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element'; @@ -12,7 +12,8 @@ import {PersonSelect} from '@dbp-toolkit/person-select'; export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) { constructor() { super(); - this.lang = 'de'; + this._i18n = createInstance(); + this.lang = this._i18n.language; this.entryPointUrl = ''; this.person = ''; this.selectedPerson = ''; @@ -42,6 +43,10 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) { } update(changedProperties) { + if (changedProperties.has("lang")) { + this._i18n.changeLanguage(this.lang); + } + changedProperties.forEach((oldValue, propName) => { switch (propName) { case 'auth': @@ -61,7 +66,6 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) { connectedCallback() { super.connectedCallback(); - i18n.changeLanguage(this.lang); const that = this; this.updateComplete.then(()=>{ diff --git a/packages/person-profile/src/i18n.js b/packages/person-profile/src/i18n.js index 498d9f03..975c1993 100644 --- a/packages/person-profile/src/i18n.js +++ b/packages/person-profile/src/i18n.js @@ -1,6 +1,8 @@ -import {createInstance} from '@dbp-toolkit/common/i18next.js'; +import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js'; import de from './i18n/de/translation.json'; import en from './i18n/en/translation.json'; -export const i18n = createInstance({en: en, de: de}, 'de', 'en'); \ No newline at end of file +export function createInstance() { + return _createInstance({en: en, de: de}, 'de', 'en'); +} \ No newline at end of file diff --git a/packages/person-profile/src/person-profile.js b/packages/person-profile/src/person-profile.js index c8118ba5..4ac5576b 100644 --- a/packages/person-profile/src/person-profile.js +++ b/packages/person-profile/src/person-profile.js @@ -1,7 +1,7 @@ import JSONLD from '@dbp-toolkit/common/jsonld'; import {css, html} from 'lit-element'; -import {i18n} from './i18n.js'; +import {createInstance} from './i18n.js'; import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element'; import * as commonStyles from '@dbp-toolkit/common/styles'; @@ -10,7 +10,8 @@ export class PersonProfile extends DBPLitElement { constructor() { super(); - this.lang = 'de'; + this._i18n = createInstance(); + this.lang = this._i18n.language; this.entryPointUrl = ''; this.jsonld = null; this.value = ''; @@ -29,18 +30,11 @@ export class PersonProfile extends DBPLitElement { }; } - connectedCallback() { - super.connectedCallback(); - - this.updateComplete.then(()=>{ - }); - } - update(changedProperties) { changedProperties.forEach((oldValue, propName) => { switch (propName) { case "lang": - i18n.changeLanguage(this.lang); + this._i18n.changeLanguage(this.lang); break; case "entryPointUrl": { const that = this; @@ -83,6 +77,7 @@ export class PersonProfile extends DBPLitElement { } render() { + const i18n = this._i18n; let role = i18n.t('person-profile.unknown'); if (this.person !== null && this.person.roles !== undefined) { // roles are only defined for self-disclosure -- GitLab