From dd098277bc5e6770559f6016d4e79cb48b7d2a8d Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 9 Feb 2021 15:17:52 +0100
Subject: [PATCH] Add Readme description for dbp-adapter
---
packages/provider/README.md | 20 ++++++++++++++++++++
packages/provider/src/adapter.js | 20 +++-----------------
2 files changed, 23 insertions(+), 17 deletions(-)
diff --git a/packages/provider/README.md b/packages/provider/README.md
index bbdce00e..69a64ba0 100644
--- a/packages/provider/README.md
+++ b/packages/provider/README.md
@@ -88,3 +88,23 @@ the bearer token via `this.auth.token`.
<dbp-person-select subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-person-select>
</dbp-person-select-demo>
```
+
+## AdapterElement
+
+This is a wrapper for third party webcomponents. you can wrap this class around to support the provider functionality in third party webcomponents.
+
+You can locally "subscribe" to attributes (e.g. `local-name`) that can be provided by a `dbp-provider` (e.g. `global-name`). The `dbp-adapter` will set the attributes to his childnodes.
+
+### Example
+
+Multiple attributes can be subscribed when separated by a comma (`,`).
+
+```html
+<provider global-name="value" global-name2="value2">
+ <dbp-provider-adapter subscribe="local-name:global-name">
+ <third-party-webcomponent> </third-party-webcomponent>
+ </dbp-provider-adapter>
+</provider>
+<script type="module" src="node_modules/@dbp-toolkit/provider/dist/dbp-provider.js"></script>
+<script type="module" src="node_modules/@dbp-toolkit/provider/dist/dbp-adapter.js"></script>
+```
\ No newline at end of file
diff --git a/packages/provider/src/adapter.js b/packages/provider/src/adapter.js
index 92e97656..6d5dec72 100644
--- a/packages/provider/src/adapter.js
+++ b/packages/provider/src/adapter.js
@@ -22,23 +22,12 @@ export class Adapter extends HTMLElement {
this[this.findPropertyName(name)] = value;
}
- setProperty(name, value) {
- if (typeof value === 'object' && value !== null) {
- // console.log("value is object", value);
- this.setPropertyByAttributeName(name, value);
- } else {
- this.attributeChangedCallback(name, this.getPropertyByAttributeName(name), value);
- }
-
- }
-
connectedCallback() {
this.connected = true;
const that = this;
- that.setPropertiesToChildNodes();
// get all *not observed* attributes
if (this.hasAttributes()) {
@@ -47,8 +36,10 @@ export class Adapter extends HTMLElement {
if (['id', 'class', 'style', 'data-tag-name'].includes(attrs[i].name)) {
continue;
}
+ this.setPropertiesToChildNodes();
+
+ this.attributeChangedCallback(attrs[i].name, this.getPropertyByAttributeName(attrs[i].name), attrs[i].value);
- this.setProperty(attrs[i].name, attrs[i].value);
console.log('AdapterProvider (' + that.tagName + ') found attribute "' + attrs[i].name + '" = "' + attrs[i].value + '"');
}
}
@@ -168,12 +159,8 @@ export class Adapter extends HTMLElement {
break;
default:
break;
- //super.attributeChangedCallback(name, oldValue, newValue);
}
- // console.log("this.lang", this.tagName, name, this.lang);
- // console.log("this.entryPointUrl", this.tagName, name, this.entryPointUrl);
- // console.trace();
}
/**
@@ -196,7 +183,6 @@ export class Adapter extends HTMLElement {
setPropertiesToChildNodes(local, value)
{
let children = this.children;
- console.log("----------", children);
Array.from(children).forEach(child => child.setAttribute(local, value));
}
--
GitLab