From fce581551e59c12198854bc9f78759abdc6a2b4a Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 1 Jul 2021 17:20:01 +0200
Subject: [PATCH] person-select: one i18next instance per element
---
.../src/dbp-person-select-demo.js | 20 +++++++++----------
packages/person-select/src/i18n.js | 6 ++++--
packages/person-select/src/person-select.js | 9 ++++++---
3 files changed, 20 insertions(+), 15 deletions(-)
diff --git a/packages/person-select/src/dbp-person-select-demo.js b/packages/person-select/src/dbp-person-select-demo.js
index affc7c0a..9bc90931 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 498d9f03..975c1993 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 67c74666..0db9118f 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}">
--
GitLab