Skip to content
Snippets Groups Projects
Unverified Commit ecd8e363 authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Allow terse subscription and add more provider documention

parent 82c3c746
No related branches found
No related tags found
No related merge requests found
Pipeline #16473 passed
......@@ -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>
......
# 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>
```
......@@ -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,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment