diff --git a/packages/person-select/src/dbp-person-select-demo.js b/packages/person-select/src/dbp-person-select-demo.js index affc7c0a2317a49fda553cf524dca9ec9b500059..9bc90931d9cea7323bc50a5cad05f3c543e2cd1f 100644 --- a/packages/person-select/src/dbp-person-select-demo.js +++ b/packages/person-select/src/dbp-person-select-demo.js @@ -1,4 +1,4 @@ -import {i18n} from './i18n.js'; +import {createInstance} from './i18n.js'; import {css, html} from 'lit-element'; import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {PersonSelect} from './person-select.js'; @@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element"; export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) { constructor() { super(); - this.lang = 'de'; + this._i18n = createInstance(); + this.lang = this._i18n.language; this.entryPointUrl = ''; this.noAuth = false; } @@ -32,14 +33,6 @@ export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) { }; } - connectedCallback() { - super.connectedCallback(); - i18n.changeLanguage(this.lang); - - this.updateComplete.then(()=>{ - }); - } - static get styles() { // language=css return [ @@ -52,6 +45,13 @@ export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) { ]; } + update(changedProperties) { + if (changedProperties.has("lang")) { + this._i18n.changeLanguage(this.lang); + } + super.update(changedProperties); + } + getAuthComponentHtml() { return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>` : html` <div class="container"> diff --git a/packages/person-select/src/i18n.js b/packages/person-select/src/i18n.js index 498d9f037b0a5ca481ec8de5df24640900285808..975c1993e2a567940c74f8d957a6b2a018125548 100644 --- a/packages/person-select/src/i18n.js +++ b/packages/person-select/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-select/src/person-select.js b/packages/person-select/src/person-select.js index 67c7466650d0c0ce0cda1ce440c9454de18d6a52..0db9118fe7ee88931d82682d44890234857918d5 100644 --- a/packages/person-select/src/person-select.js +++ b/packages/person-select/src/person-select.js @@ -6,7 +6,7 @@ import select2LangEn from './i18n/en/select2'; import JSONLD from '@dbp-toolkit/common/jsonld'; import {css, html} from 'lit-element'; import {ScopedElementsMixin} from '@open-wc/scoped-elements'; -import {i18n} from './i18n.js'; +import {createInstance} from './i18n.js'; import {Icon} from '@dbp-toolkit/common'; import * as commonUtils from '@dbp-toolkit/common/utils'; import * as commonStyles from '@dbp-toolkit/common/styles'; @@ -29,7 +29,8 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { super(); Object.assign(PersonSelect.prototype, errorUtils.errorMixin); this.auth = {}; - this.lang = 'de'; + this._i18n = createInstance(); + this.lang = this._i18n.language; this.entryPointUrl = ''; this.jsonld = null; this.$select = null; @@ -129,6 +130,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { * @param ignorePreset */ initSelect2(ignorePreset = false) { + const i18n = this._i18n; const that = this; const $this = $(this); @@ -277,7 +279,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { changedProperties.forEach((oldValue, propName) => { switch (propName) { case "lang": - i18n.changeLanguage(this.lang); + this._i18n.changeLanguage(this.lang); if (this.select2IsInitialized()) { // no other way to set an other language at runtime did work @@ -361,6 +363,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { } render() { + const i18n = this._i18n; const select2CSS = commonUtils.getAssetURL(select2CSSPath); return html` <link rel="stylesheet" href="${select2CSS}">