From a1859b2e3423d5fe2bf4b3faec22ccb12e913521 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Tue, 5 Jan 2021 14:50:40 +0100
Subject: [PATCH] Integrate AdapterLitElement to AppShell
(dbp/apps/authenticdocument#2)
---
packages/app-shell/src/app-shell.js | 7 +-
packages/common/src/adapter-lit-element.js | 106 +++++++++++++++++++++
2 files changed, 110 insertions(+), 3 deletions(-)
create mode 100644 packages/common/src/adapter-lit-element.js
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index dc92fd04..0933d34d 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -16,6 +16,7 @@ import {TUGrazLogo} from './tugraz-logo.js';
import {send as notify} from '@dbp-toolkit/common/notification';
import {appWelcomeMeta} from './dbp-app-shell-welcome.js';
import {MatomoElement} from "@dbp-toolkit/matomo/src/matomo";
+import {AdapterLitElement} from "@dbp-toolkit/common/src/adapter-lit-element";
const i18n = createI18nInstance();
@@ -42,7 +43,7 @@ const importNotify = async (promise) => {
}
};
-export class AppShell extends ScopedElementsMixin(LitElement) {
+export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
constructor() {
super();
this.lang = i18n.language;
@@ -224,7 +225,7 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
}
static get properties() {
- return {
+ return Object.assign({
lang: { type: String, reflect: true },
src: { type: String },
basePath: { type: String, attribute: 'base-path' },
@@ -242,7 +243,7 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
shellName: { type: String, attribute: "shell-name" },
shellSubname: { type: String, attribute: "shell-subname" },
noBrand: { type: Boolean, attribute: "no-brand" }
- };
+ }, super.properties);
}
_updateAuth(login) {
diff --git a/packages/common/src/adapter-lit-element.js b/packages/common/src/adapter-lit-element.js
new file mode 100644
index 00000000..bbc1d2c3
--- /dev/null
+++ b/packages/common/src/adapter-lit-element.js
@@ -0,0 +1,106 @@
+import {LitElement} from "lit-element";
+
+export class AdapterLitElement extends LitElement {
+ constructor() {
+ super();
+ this.connected = false;
+ this.deferSubscribe = false;
+ this.deferUnSubscribe = false;
+
+ // default values
+ this.subscribe = '';
+ this.unsubscribe = '';
+
+ console.log('AdapterLitElement constructor()');
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ if (this.deferUnSubscribe) {
+ const attrs = this.unsubscribe.split(',');
+ attrs.forEach(element => this.subscribeProviderFor(element));
+ this.deferSubscribe = false;
+ this.unsubscribe = '';
+ }
+
+ if (this.deferSubscribe) {
+ const attrs = this.subscribe.split(',');
+ attrs.forEach(element => this.subscribeProviderFor(element));
+ this.deferSubscribe = false;
+ }
+
+ this.connected = true;
+ }
+
+ subscribeProviderFor(element) {
+ console.log('AdapterLitElement subscribeProviderFor( ' + element + ' )');
+ const pair = element.trim().split(':');
+ const global = pair[0];
+ const local = pair[1];
+ const that = this;
+ const event = new CustomEvent('subscribe',
+ {
+ bubbles: true,
+ detail: {
+ name: global,
+ callback: (value) => {
+ console.log('AdapterLitElement(' + that.id() + ') sub/Callback ' + global + ' -> ' + local + ' = ' + value);
+ this.attributeChangedCallback(local, that[local], value);
+ },
+ sender: this,
+ }
+ });
+ this.parentElement.dispatchEvent(event);
+ }
+
+ unSubscribeProviderFor(element) {
+ console.log('AdapterLitElement unSubscribeProviderFor( ' + element + ' )');
+ const pair = element.trim().split(':');
+ const global = pair[0];
+ const event = new CustomEvent('unsubscribe',
+ {
+ bubbles: true,
+ detail: {
+ name: global,
+ sender: this,
+ }
+ });
+ this.parentElement.dispatchEvent(event);
+ }
+
+ static get properties() {
+ return {
+ subscribe: { type: String },
+ unsubscribe: { type: String },
+ };
+ }
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ switch(propName) {
+ case 'subscribe':
+ if (this.subscribe && this.subscribe.length > 0) {
+ if (this.connected) {
+ const attrs = this.subscribe.split(',');
+ attrs.forEach(element => this.unSubscribeProviderFor(element));
+ } else {
+ this.deferUnSubscribe = this.subscribe.length > 0;
+ this.unsubscribe = this.subscribe;
+ }
+ }
+ if (this.subscribe !== null) {
+ if (this.connected) {
+ const attrs = this.subscribe.split(',');
+ attrs.forEach(element => this.subscribeProviderFor(element));
+ } else {
+ this.deferSubscribe = this.subscribe && this.subscribe.length > 0;
+ }
+ }
+ break;
+ }
+ });
+
+ super.update(changedProperties);
+ }
+}
--
GitLab