diff --git a/packages/organization-select/src/dbp-organization-select-demo.js b/packages/organization-select/src/dbp-organization-select-demo.js index 1ece3ccbca35f1592f7ddcf21b7b928a7623b483..6d4898bc53fe8eca0390f39f08a5b65a24fb727c 100644 --- a/packages/organization-select/src/dbp-organization-select-demo.js +++ b/packages/organization-select/src/dbp-organization-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 {OrganizationSelect} from './organization-select.js'; @@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element"; export class OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) { constructor() { super(); - this.lang = 'de'; + this._i18n = createInstance(); + this.lang = this._i18n.language; this.entryPointUrl = ''; this.noAuth = false; } @@ -32,12 +33,11 @@ export class OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) { }; } - connectedCallback() { - super.connectedCallback(); - i18n.changeLanguage(this.lang); - - this.updateComplete.then(()=>{ - }); + update(changedProperties) { + if (changedProperties.has("lang")) { + this._i18n.changeLanguage(this.lang); + } + super.update(changedProperties); } static get styles() { diff --git a/packages/organization-select/src/i18n.js b/packages/organization-select/src/i18n.js index 498d9f037b0a5ca481ec8de5df24640900285808..975c1993e2a567940c74f8d957a6b2a018125548 100644 --- a/packages/organization-select/src/i18n.js +++ b/packages/organization-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/organization-select/src/organization-select.js b/packages/organization-select/src/organization-select.js index 578fb010fe32216d2bb8d3da1d99a034bbe52c63..d96c793701f8dad95ce2f355485c9d20c341ce32 100644 --- a/packages/organization-select/src/organization-select.js +++ b/packages/organization-select/src/organization-select.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import select2 from 'select2'; import select2CSSPath from 'select2/dist/css/select2.min.css'; -import {i18n} from './i18n.js'; +import {createInstance} from './i18n.js'; import {css, html} from 'lit-element'; import * as commonUtils from '@dbp-toolkit/common/utils'; import * as commonStyles from '@dbp-toolkit/common/styles'; @@ -16,7 +16,8 @@ export class OrganizationSelect extends AdapterLitElement { constructor() { super(); this.auth = {}; - this.lang = i18n.language; + this._i18n = createInstance(); + this.lang = this._i18n.language; this.entryPointUrl = ''; this.jsonld = null; this.organizations = []; @@ -93,6 +94,7 @@ export class OrganizationSelect extends AdapterLitElement { } async updateSelect2() { + const i18n = this._i18n; await this.updateComplete; const $select = this.$('#' + this.selectId); @@ -181,7 +183,7 @@ export class OrganizationSelect extends AdapterLitElement { changedProperties.forEach((oldValue, propName) => { switch (propName) { case "lang": - i18n.changeLanguage(this.lang); + this._i18n.changeLanguage(this.lang); this.updateSelect2(); break; case "value": {