Skip to content
Snippets Groups Projects
Commit dd098277 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Add Readme description for dbp-adapter

parent d956799c
Branches
No related tags found
No related merge requests found
...@@ -88,3 +88,23 @@ the bearer token via `this.auth.token`. ...@@ -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 subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-person-select>
</dbp-person-select-demo> </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
...@@ -22,23 +22,12 @@ export class Adapter extends HTMLElement { ...@@ -22,23 +22,12 @@ export class Adapter extends HTMLElement {
this[this.findPropertyName(name)] = value; 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() { connectedCallback() {
this.connected = true; this.connected = true;
const that = this; const that = this;
that.setPropertiesToChildNodes();
// get all *not observed* attributes // get all *not observed* attributes
if (this.hasAttributes()) { if (this.hasAttributes()) {
...@@ -47,8 +36,10 @@ export class Adapter extends HTMLElement { ...@@ -47,8 +36,10 @@ export class Adapter extends HTMLElement {
if (['id', 'class', 'style', 'data-tag-name'].includes(attrs[i].name)) { if (['id', 'class', 'style', 'data-tag-name'].includes(attrs[i].name)) {
continue; 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 + '"'); console.log('AdapterProvider (' + that.tagName + ') found attribute "' + attrs[i].name + '" = "' + attrs[i].value + '"');
} }
} }
...@@ -168,12 +159,8 @@ export class Adapter extends HTMLElement { ...@@ -168,12 +159,8 @@ export class Adapter extends HTMLElement {
break; break;
default: default:
break; 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 { ...@@ -196,7 +183,6 @@ export class Adapter extends HTMLElement {
setPropertiesToChildNodes(local, value) setPropertiesToChildNodes(local, value)
{ {
let children = this.children; let children = this.children;
console.log("----------", children);
Array.from(children).forEach(child => child.setAttribute(local, value)); Array.from(children).forEach(child => child.setAttribute(local, value));
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment