Skip to content
Snippets Groups Projects
Commit d0c86a05 authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

organization-select: one i18next instance per element

parent 7dffef4c
No related branches found
No related tags found
1 merge request!67Create a new i18next instance for every web component
import {i18n} from './i18n.js'; import {createInstance} from './i18n.js';
import {css, html} from 'lit-element'; import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {OrganizationSelect} from './organization-select.js'; import {OrganizationSelect} from './organization-select.js';
...@@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element"; ...@@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
export class OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) { export class OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this._i18n = createInstance();
this.lang = this._i18n.language;
this.entryPointUrl = ''; this.entryPointUrl = '';
this.noAuth = false; this.noAuth = false;
} }
...@@ -32,12 +33,11 @@ export class OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) { ...@@ -32,12 +33,11 @@ export class OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) {
}; };
} }
connectedCallback() { update(changedProperties) {
super.connectedCallback(); if (changedProperties.has("lang")) {
i18n.changeLanguage(this.lang); this._i18n.changeLanguage(this.lang);
}
this.updateComplete.then(()=>{ super.update(changedProperties);
});
} }
static get styles() { static get styles() {
......
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 de from './i18n/de/translation.json';
import en from './i18n/en/translation.json'; import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en'); export function createInstance() {
\ No newline at end of file return _createInstance({en: en, de: de}, 'de', 'en');
}
\ No newline at end of file
import $ from 'jquery'; import $ from 'jquery';
import select2 from 'select2'; import select2 from 'select2';
import select2CSSPath from 'select2/dist/css/select2.min.css'; 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 {css, html} from 'lit-element';
import * as commonUtils from '@dbp-toolkit/common/utils'; import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles'; import * as commonStyles from '@dbp-toolkit/common/styles';
...@@ -16,7 +16,8 @@ export class OrganizationSelect extends AdapterLitElement { ...@@ -16,7 +16,8 @@ export class OrganizationSelect extends AdapterLitElement {
constructor() { constructor() {
super(); super();
this.auth = {}; this.auth = {};
this.lang = i18n.language; this._i18n = createInstance();
this.lang = this._i18n.language;
this.entryPointUrl = ''; this.entryPointUrl = '';
this.jsonld = null; this.jsonld = null;
this.organizations = []; this.organizations = [];
...@@ -93,6 +94,7 @@ export class OrganizationSelect extends AdapterLitElement { ...@@ -93,6 +94,7 @@ export class OrganizationSelect extends AdapterLitElement {
} }
async updateSelect2() { async updateSelect2() {
const i18n = this._i18n;
await this.updateComplete; await this.updateComplete;
const $select = this.$('#' + this.selectId); const $select = this.$('#' + this.selectId);
...@@ -181,7 +183,7 @@ export class OrganizationSelect extends AdapterLitElement { ...@@ -181,7 +183,7 @@ export class OrganizationSelect extends AdapterLitElement {
changedProperties.forEach((oldValue, propName) => { changedProperties.forEach((oldValue, propName) => {
switch (propName) { switch (propName) {
case "lang": case "lang":
i18n.changeLanguage(this.lang); this._i18n.changeLanguage(this.lang);
this.updateSelect2(); this.updateSelect2();
break; break;
case "value": { case "value": {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment