diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js index 661e603126331353474c240fa34846c25b927ba0..bce4a91fadc3cddf4aef2fa526054490a7429467 100644 --- a/packages/language-select/src/language-select.js +++ b/packages/language-select/src/language-select.js @@ -53,13 +53,21 @@ export class LanguageSelect extends LitElement { this.requestUpdate('next', oldNext); if (oldValue !== value) { - const event = new CustomEvent("dbp-language-changed", { + let event = new CustomEvent("dbp-language-changed", { bubbles: true, composed: true, detail: {'lang': value} }); this.dispatchEvent(event); + // tell a dbp-provider to update the "lang" property + event = new CustomEvent("set-property", { + bubbles: true, + composed: true, + detail: {'name': 'lang', 'value': value} + }); + this.dispatchEvent(event); + // Unlike other cases we use the next language for the translations so that // users not knowing the current language can understand it. // In case of more than two this doesn't make that much sense, but for now.. diff --git a/packages/provider/src/provider.js b/packages/provider/src/provider.js index b213edbef389fac1f9e2ef143cacb1722039dddb..52eda0acba6e182345d72e58e04f5e528b16210f 100644 --- a/packages/provider/src/provider.js +++ b/packages/provider/src/provider.js @@ -78,6 +78,25 @@ export class Provider extends HTMLElement { e.stopPropagation(); } }, false); + + // listen to property changes + this.addEventListener('set-property', function (e) { + const name = e.detail.name; + const value = e.detail.value; + + if (that[name]) { + console.log('Provider(' + that.id() + ') eventListener("set-property",..) name "' + name + '" found.'); + that[name] = value; + + that.callbackStore.forEach(item => { + if (item.name === name) { + item.callback(value); + } + }); + + e.stopPropagation(); + } + }, false); } id() {