From ecd8e363d922462263aeb83ce905bda6e1ee3a96 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Wed, 3 Feb 2021 08:19:41 +0100
Subject: [PATCH] Allow terse subscription and add more provider documention
---
.../src/dbp-person-select-demo.js | 4 +-
packages/provider/README.md | 74 +++++++++++++++----
packages/provider/src/adapter-lit-element.js | 4 +-
3 files changed, 63 insertions(+), 19 deletions(-)
diff --git a/packages/person-select/src/dbp-person-select-demo.js b/packages/person-select/src/dbp-person-select-demo.js
index 7296ff6f..c4adde1e 100644
--- a/packages/person-select/src/dbp-person-select-demo.js
+++ b/packages/person-select/src/dbp-person-select-demo.js
@@ -75,13 +75,13 @@ export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) {
<div class="field">
<label class="label">Person 1</label>
<div class="control">
- <dbp-person-select subscribe="auth: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>
</div>
</div>
<div class="field">
<label class="label">Person 2</label>
<div class="control">
- <dbp-person-select subscribe="auth:auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" show-reload-button reload-button-title="Click me"></dbp-person-select>
+ <dbp-person-select subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" show-reload-button reload-button-title="Click me"></dbp-person-select>
</div>
</div>
</form>
diff --git a/packages/provider/README.md b/packages/provider/README.md
index 1501ad67..5da70902 100644
--- a/packages/provider/README.md
+++ b/packages/provider/README.md
@@ -1,4 +1,4 @@
-# Provider Web Component
+# Provider Web Components
[GitLab Repository](https://gitlab.tugraz.at/dbp/web-components/toolkit)
@@ -8,20 +8,6 @@ You can install this component via npm:
npm i @dbp-toolkit/provider
```
-## Usage
-
-```html
-<provider></provider>
-<script type="module" src="node_modules/@dbp-toolkit/provider/dist/dbp-provider.js"></script>
-```
-
-## Attributes
-
-- `init` (optional): set your vars to values
- - example `<provider init="foo=bar"></provider>`
-- `id` (optional): set an id, useful for debugging
- - example `<provider id="p-1"></provider>`
-
## Local development
```bash
@@ -40,3 +26,61 @@ yarn test
```
Jump to <http://localhost:8002> and you should get a demo page.
+
+## Provider
+
+### Usage
+
+You can provide attributes (e.g. `global-name`) for components inside the provider:
+
+```html
+<provider global-name="value" global-name2="value2">
+ <dbp-person-select subscribe="local-name:global-name"></dbp-person-select>
+ <dbp-person-profile subscribe="local-name:global-name,local-name2:global-name2"></dbp-person-profile>
+</provider>
+<script type="module" src="node_modules/@dbp-toolkit/provider/dist/dbp-provider.js"></script>
+```
+
+### Attributes
+
+- `init` (optional): set your vars to values
+ - example `<provider init="foo=bar"></provider>`
+- `id` (optional): set an id, useful for debugging
+ - example `<provider id="p-1"></provider>`
+
+## AdapterLitElement
+
+This is a class you can derive your component class from instead of `LitElement`.
+
+You can locally "subscribe" to attributes (e.g. `local-name`) that can be provided by a `dbp-provider` (e.g. `global-name`).
+You need to make this available attributes as LitElement properties.
+
+### Example
+
+Multiple attributes can be subscribed when separated by a comma (`,`).
+
+```html
+<dbp-person-select subscribe="local-name:global-name,local-name2:global-name2"></dbp-person-select>
+```
+
+If `local-name` and `global-name` are the same you could also instead of `local-name:local-name` just write `local-name`:
+
+```html
+<dbp-person-select subscribe="local-name"></dbp-person-select>
+```
+
+### Inherent provider
+
+AdapterLitElement are themselves provider that will provide all their own attributes to all the elements in their shadow dom.
+
+In this example `dbp-auth-keycloak` would use the `set-property` event to propagate an `auth` property.
+`dbp-person-select-demo` would act as provider for `auth`. `dbp-person-select` would subscribe to `auth` to receive
+the bearer token via `this.auth.token`.
+
+```html
+<dbp-person-select-demo auth lang="de" entry-point-url="http://127.0.0.1:8000">
+ <!-- #shadow-root -->
+ <dbp-auth-keycloak></dbp-auth-keycloak>
+ <dbp-person-select subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-person-select>
+</dbp-person-select-demo>
+```
diff --git a/packages/provider/src/adapter-lit-element.js b/packages/provider/src/adapter-lit-element.js
index 78666eb2..9c832aa0 100644
--- a/packages/provider/src/adapter-lit-element.js
+++ b/packages/provider/src/adapter-lit-element.js
@@ -176,7 +176,7 @@ export class AdapterLitElement extends LitElement {
console.log('AdapterLitElement(' + this.tagName + ') subscribeProviderFor( ' + element + ' )');
const pair = element.trim().split(':');
const local = pair[0];
- const global = pair[1];
+ const global = pair[1] || local;
const that = this;
const event = new CustomEvent('subscribe',
{
@@ -216,7 +216,7 @@ export class AdapterLitElement extends LitElement {
unSubscribeProviderFor(element) {
console.log('AdapterLitElement(' + this.tagName + ') unSubscribeProviderFor( ' + element + ' )');
const pair = element.trim().split(':');
- const global = pair[1];
+ const global = pair[1] || pair[0];
const event = new CustomEvent('unsubscribe',
{
bubbles: true,
--
GitLab