From f1d848266a85c43a426a17e540323909d175b379 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Tue, 6 Aug 2019 10:50:04 +0200
Subject: [PATCH] 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.
---
packages/language-select/assets/index.html | 10 ++++++---
.../language-select/src/language-select.js | 21 ++++++++++++++++---
2 files changed, 25 insertions(+), 6 deletions(-)
diff --git a/packages/language-select/assets/index.html b/packages/language-select/assets/index.html
index 41d0d5e5..40d6e96c 100644
--- 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>
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index 02087b71..bb365287 100644
--- 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) {
--
GitLab