Make the select listen to the event itself and change the lang in update()

update() is called before the actual update so we need to change i18next there. We now listen to our own signal so multiple language selects on the same page work and are kept in sync.

Make the select listen to the event itself and change the lang in update()
f1d84826 · Reiter, Christoph · e897cc29 · f1d84826 · f1d84826
Commit f1d84826 authored 5 years ago by Reiter, Christoph
--- a/packages/language-select/assets/index.html
+++ b/packages/language-select/assets/index.html
@@ -11,11 +11,15 @@
 </head>
 <body>
-    <vpu-language-select></vpu-language-select>
+    Select 1: <vpu-language-select></vpu-language-select>
+    <br>
+    <br>
+    Select 2: <vpu-language-select></vpu-language-select>
+    <br>
    <br>
+    Current language 1: <vpu-language-select-demo></vpu-language-select-demo>
    <br>
    <br>
-    Current language: <vpu-language-select-demo></vpu-language-select-demo>
+    Current language 2: <vpu-language-select-demo></vpu-language-select-demo>
 </body>
 </html>
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -13,6 +13,8 @@ class LanguageSelect extends LitElement {
        i18n.t('de');
        i18n.t('en');
+        this.onExternalChange = this.onExternalChange.bind(this);
    }
    static get properties() {
@@ -54,7 +56,21 @@ class LanguageSelect extends LitElement {
        `;
    } 
-    updated(changedProperties) {
+    onExternalChange(e) {
+        this.lang = e.detail.lang
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('vpu-language-changed', this.onExternalChange);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('vpu-language-changed', this.onExternalChange);
+        super.disconnectedCallback();
+    }
+    update(changedProperties) {
        changedProperties.forEach((oldValue, propName) => {
            if (propName === 'lang') {
                const event = new CustomEvent("vpu-language-changed", {
@@ -64,11 +80,10 @@ class LanguageSelect extends LitElement {
                window.dispatchEvent(event);
                i18n.changeLanguage(this.lang);
-                this.requestUpdate();
            }
        });
-        super.updated(changedProperties);
+        super.update(changedProperties);
    }
    onSelectChange(e) {