Integrate AdapterLitElement to AppShell (dbp/apps/authenticdocument#2)

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) {

packages/common/src/adapter-lit-element.js

+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);
+    }
+}