From 5a88af9b38b1d95f5ba675dbc381fbf183434b89 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Thu, 4 Feb 2021 11:39:34 +0100
Subject: [PATCH] Use dbp-set-property event for "lang" in language select demo
and tests
---
.../src/dbp-language-select-demo.js | 30 +++++--------------
packages/language-select/test/unit.js | 4 +--
2 files changed, 10 insertions(+), 24 deletions(-)
diff --git a/packages/language-select/src/dbp-language-select-demo.js b/packages/language-select/src/dbp-language-select-demo.js
index c5f49c20..308eae96 100644
--- a/packages/language-select/src/dbp-language-select-demo.js
+++ b/packages/language-select/src/dbp-language-select-demo.js
@@ -1,15 +1,15 @@
-import {html, LitElement} from 'lit-element';
+import {html} from 'lit-element';
import {LanguageSelect} from './language-select.js';
import * as commonUtils from '@dbp-toolkit/common/utils';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
-class LanguageSelectDisplay extends LitElement {
+class LanguageSelectDisplay extends AdapterLitElement {
constructor() {
super();
this.lang = 'de';
- this.handleChange = this.handleChange.bind(this);
}
static get properties() {
@@ -18,26 +18,12 @@ class LanguageSelectDisplay extends LitElement {
};
}
- handleChange(e) {
- this.lang = e.detail.lang;
- }
-
- connectedCallback() {
- super.connectedCallback();
- window.addEventListener('dbp-language-changed', this.handleChange);
- }
-
- disconnectedCallback() {
- window.removeEventListener('dbp-language-changed', this.handleChange);
- super.disconnectedCallback();
- }
-
render() {
return html`${this.lang}`;
}
}
-export class LanguageSelectDemo extends ScopedElementsMixin(LitElement) {
+export class LanguageSelectDemo extends ScopedElementsMixin(AdapterLitElement) {
constructor() {
super();
@@ -52,16 +38,16 @@ export class LanguageSelectDemo extends ScopedElementsMixin(LitElement) {
render() {
return html`
- Select 1: <dbp-language-select></dbp-language-select>
+ Select 1: <dbp-language-select subscribe="lang"></dbp-language-select>
<br>
<br>
- Select 2: <dbp-language-select></dbp-language-select>
+ Select 2: <dbp-language-select subscribe="lang"></dbp-language-select>
<br>
<br>
- Current language 1: <dbp-language-select-display></dbp-language-select-display>
+ Current language 1: <dbp-language-select-display subscribe="lang"></dbp-language-select-display>
<br>
<br>
- Current language 2: <dbp-language-select-display></dbp-language-select-display>
+ Current language 2: <dbp-language-select-display subscribe="lang"></dbp-language-select-display>
`;
}
}
diff --git a/packages/language-select/test/unit.js b/packages/language-select/test/unit.js
index b76d1f4c..2f060bcb 100644
--- a/packages/language-select/test/unit.js
+++ b/packages/language-select/test/unit.js
@@ -13,7 +13,7 @@ suite('dbp-language-select basics', () => {
setup(async () => {
events.length = 0;
- window.addEventListener('dbp-language-changed', handler);
+ window.addEventListener('dbp-set-property', handler);
node = document.createElement('dbp-language-select');
document.body.appendChild(node);
await node.updateComplete;
@@ -21,7 +21,7 @@ suite('dbp-language-select basics', () => {
teardown(() => {
node.remove();
- window.removeEventListener('dbp-language-changed', handler);
+ window.removeEventListener('dbp-set-property', handler);
});
test('should render', () => {
--
GitLab