Skip to content
Snippets Groups Projects
Commit 3fdbad9e authored by Neuber, Eugen Ramon's avatar Neuber, Eugen Ramon :speech_balloon:
Browse files

Update demo to use DBPElement

parent a80a590f
No related branches found
No related tags found
1 merge request!28Observer test
Pipeline #15916 passed with warnings
Stage: test
Hide whitespace changes
Inline Side-by-side
packages/provider/assets/index.html.ejs
+ 5
− 7
View file @ 3fdbad9e
...@@ -10,20 +10,18 @@ ...@@ -10,20 +10,18 @@
- unhandled requests are logged in the console - unhandled requests are logged in the console
--> -->
<script> <script>
window.addEventListener('inherit', e => console.log('window eventListener("inherit",..) name "' + e.detail.name + '" not found.'));
window.addEventListener('subscribe', e => console.log('window eventListener("subscribe",..) name "' + e.detail.name + '" not found.')); window.addEventListener('subscribe', e => console.log('window eventListener("subscribe",..) name "' + e.detail.name + '" not found.'));
window.addEventListener('unsubscribe', e => console.log('window eventListener("unsubscribe",..) name "' + e.detail.name + '" not found.')); window.addEventListener('unsubscribe', e => console.log('window eventListener("unsubscribe",..) name "' + e.detail.name + '" not found.'));
</script> </script>
<style>
body { padding: 50px;}
</style>
</head> </head>
<body> <body>
<dbp-provider id="root" <dbp-provider id="root" root="1" availability="global" lang="de">
root="1"
availability="global"
lang="de"
>
<dbp-provider-demo id="provider-demo" subscribe="lang:lang"></dbp-provider-demo> <dbp-provider-demo id="provider-demo" subscribe="lang:lang"></dbp-provider-demo>
</dbp-provider> </dbp-provider>
<p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p> <p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p>
</body> </body>
</html> </html>
packages/provider/src/dbp-provider-demo.js
+ 57
− 291
View file @ 3fdbad9e
...@@ -6,18 +6,14 @@ import * as commonUtils from '@dbp-toolkit/common/utils'; ...@@ -6,18 +6,14 @@ import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles'; import * as commonStyles from '@dbp-toolkit/common/styles';
import {Provider} from '@dbp-toolkit/provider'; import {Provider} from '@dbp-toolkit/provider';
import {LanguageSelect} from '@dbp-toolkit/language-select'; import {LanguageSelect} from '@dbp-toolkit/language-select';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
class ProviderDemo extends ScopedElementsMixin(DBPLitElement) {
class ProviderDemo extends ScopedElementsMixin(LitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this.lang = 'de';
this.subscribe = '';
this.deferSubscribe = false;
this.deferUnSubscribe = false;
} }
static get scopedElements() { static get scopedElements() {
...@@ -32,8 +28,8 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -32,8 +28,8 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
static get properties() { static get properties() {
return { return {
...super.properties,
lang: { type: String }, lang: { type: String },
subscribe: { type: String }
}; };
} }
...@@ -41,90 +37,21 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -41,90 +37,21 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
super.connectedCallback(); super.connectedCallback();
i18n.changeLanguage(this.lang); i18n.changeLanguage(this.lang);
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;
}
} }
attributeChangedCallback(name, oldValue, newValue) { attributeChangedCallback(name, oldValue, newValue) {
console.log('ProviderDemo (' + this.id() + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')'); console.log('ProviderDemo (' + this.id + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
switch(name) { switch(name) {
case 'lang': case 'lang':
this.lang = newValue; this.lang = newValue;
i18n.changeLanguage(this.lang); i18n.changeLanguage(this.lang);
break; break;
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 (newValue !== null) {
this.subscribe = newValue;
if (this.connected) {
const attrs = newValue.split(',');
attrs.forEach(element => this.subscribeProviderFor(element));
} else {
this.deferSubscribe = newValue && newValue.length > 0;
}
}
break;
default: default:
super.attributeChangedCallback(name, oldValue, newValue); super.attributeChangedCallback(name, oldValue, newValue);
} }
this.render(); this.render();
} }
subscribeProviderFor(element) {
console.log('ProviderDemo (' + this.id() + ') 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,
composed: true,
detail: {
name: global,
callback: (value) => {
console.log('ProviderDemo (' + that.id() + ') sub/Callback ' + global + ' -> ' + local + ' = ' + value);
that.attributeChangedCallback(local, that[local], value);
},
sender: this,
}
});
this.parentElement.dispatchEvent(event);
}
unSubscribeProviderFor(element) {
console.log('ProviderDemo (' + this.id() + ') unSubscribeProviderFor( ' + element + ' )');
const pair = element.trim().split(':');
const global = pair[0];
const event = new CustomEvent('unsubscribe',
{
bubbles: true,
composed: true,
detail: {
name: global,
sender: this,
}
});
this.parentElement.dispatchEvent(event);
}
static get styles() { static get styles() {
// language=css // language=css
return [ return [
...@@ -137,13 +64,15 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -137,13 +64,15 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
]; ];
} }
get id() {
return this.getAttribute('id');
}
render() { render() {
return html` return html`
<section class="section"> <section class="section">
<p>${i18n.t('demo.provider')} <em>"root"</em> is the top most in hierarchy:</p> <p>${i18n.t('demo.provider_description', {id: "root", description: "is the top most in hierarchy"})}</p>
<pre> <pre>&lt;dbp-provider id="root" root="1" availability="global" >&lt;/dbp-provider&gt;</pre>
&lt;dbp-provider id="root" root="1" availability="global" >&lt;/dbp-provider&gt;
</pre>
<div class="container"> <div class="container">
<h1 class="title">${i18n.t('demo.provider')}-Demo</h1> <h1 class="title">${i18n.t('demo.provider')}-Demo</h1>
</div> </div>
...@@ -153,217 +82,44 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) { ...@@ -153,217 +82,44 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
<dbp-language-select></dbp-language-select> <dbp-language-select></dbp-language-select>
</div> </div>
<dbp-provider id="demo" <dbp-provider id="demo"
bc="blue" bc="blue">
>
<dbp-provider id="foo-bar" <dbp-provider id="foo-bar"
foo="9" foo="9"
bar="20" bar="20">
> <div class="container">
<div class="container"> <h2>${i18n.t('demo.provider')}</h2>
<h2>${i18n.t('demo.provider')}</h2> <p>${i18n.t('demo.provider_description', {id: "demo", description: "has only \"border-color\" to offer"})}</p> <pre>&lt;dbp-provider id="demo" bc="blue" &gt;&lt;/dbp-provider&gt;</pre>
<p>${i18n.t('demo.provider')} <em>"demo"</em> has only <em>border-color</em> to offer:</p> <p>${i18n.t('demo.provider_description', {id: "foo-bar", description: "has some values in its store"})}</p>
<pre> <pre>&lt;dbp-provider id="foo-bar" foo="9" bar="20" &gt;&lt;/dbp-provider&gt;</pre>
&lt;dbp-provider id="demo" bc="blue" &gt;&lt;/dbp-provider&gt;
</pre> <h2>${i18n.t('demo.consumer')}</h2>
<p>${i18n.t('demo.provider')} <em>"foo-bar"</em> has some values in its store:</p> <p>${i18n.t('demo.consumer_description', {id: "c1", subscriptions: "border-color"})}</p>
<pre> <pre>&lt;dbp-consumer id="c1" subscribe="border-color:bc" &gt;&lt;/dbp-consumer&gt;</pre>
&lt;dbp-provider id="foo-bar" foo="9" bar="20" &gt;&lt;/dbp-provider&gt; <dbp-consumer id="c1" subscribe="border-color:bc,lang:lang"></dbp-consumer>
</pre> <p>${i18n.t('demo.consumer_description', {id: "c2", subscriptions: "foo"})}</p>
<h2>${i18n.t('demo.consumer')}</h2> <pre>&lt;dbp-consumer id="c2" subscribe="foo:foo" &gt;&lt;/dbp-consumer&gt;</pre>
<p>${i18n.t('demo.consumer')} <em>"c1"</em> will only subscribe to <em>border-color</em></p> <dbp-consumer id="c2" subscribe="foo:foo,lang:lang"></dbp-consumer>
<pre> <p>${i18n.t('demo.consumer_description', {id: "c3", subscriptions: "availability:status"})}</p>
&lt;dbp-consumer id="c1" subscribe="bc:border-color" &gt;&lt;/dbp-consumer&gt; <p>Local <em>status</em> is provided as <em>availability</em></p>
</pre> <pre>&lt;dbp-consumer id="c3" subscribe="status:availability" border-color="orange" &gt;&lt;/dbp-consumer&gt;</pre>
<dbp-consumer id="c1" <dbp-consumer id="c3" subscribe="status:availability,lang:lang" border-color="orange"></dbp-consumer>
subscribe="bc:border-color,lang:lang" <p>${i18n.t('demo.consumer_description', {id: "c4", subscriptions: "unknown-name:status"})}</p>
></dbp-consumer> <p>Remote <em>unknown-name</em> does not exist, the default value is overwritten by <em>undefined</em></i></p>
<p>${i18n.t('demo.consumer')} <em>"c2"</em> subscribes to <em>foo</em></p> <pre>&lt;dbp-consumer id="c4" subscribe="status:unknown-name" border-color="darkgray" &gt;&lt;/dbp-consumer&gt;</pre>
<pre> <dbp-consumer id="c4" subscribe="status:unknown-name" border-color="darkgray"></dbp-consumer>
&lt;dbp-consumer id="c2" subscribe="foo:foo" &gt;&lt;/dbp-consumer&gt; </div>
</pre> </dbp-provider>
<dbp-consumer id="c2"
subscribe="foo:foo,lang:lang"
></dbp-consumer>
<p>${i18n.t('demo.consumer')} <em>"c3"</em> subscribes for <em>status</em> which is provided as <em>availability</em></p>
<pre>
&lt;dbp-consumer id="c3" subscribe="availability:status" border-color="orange" &gt;&lt;/dbp-consumer&gt;
</pre>
<dbp-consumer id="c3"
subscribe="availability:status,lang:lang"
border-color="orange"
></dbp-consumer>
<p>${i18n.t('demo.consumer')} <em>"c4"</em> subscribes for <em>status</em> which is provided as <em>unknown-name</em> which does not exist...</p>
<pre>
&lt;dbp-consumer id="c4" subscribe="unknown-name:status" border-color="darkgray" &gt;&lt;/dbp-consumer&gt;
</pre>
<dbp-consumer id="c4"
subscribe="unknown-name:status"
border-color="darkgray"
></dbp-consumer>
</div>
</dbp-provider>
</dbp-provider> </dbp-provider>
</section> </section>
`; `;
} }
id() {
return this.getAttribute('id');
}
} }
commonUtils.defineCustomElement('dbp-provider-demo', ProviderDemo); commonUtils.defineCustomElement('dbp-provider-demo', ProviderDemo);
// ======================================================= // =======================================================
class Consumer extends HTMLElement { class DemoConsumer extends DBPLitElement {
constructor() {
super();
this.connected = false;
this.deferInherited = false;
this.deferSubscribe = false;
this.deferUnSubscribe = false;
// default values
this.inherit = '';
this.subscribe = '';
this.unsubscribe = '';
this.attachShadow({mode: 'open'});
console.log('Consumer constructor()');
}
connectedCallback() {
console.log('Consumer(' + this.id() + ') connectedCallback()');
if (this.deferInherited) {
const attrs = this.inherit.split(',');
attrs.forEach(element => this.askProviderFor(element));
this.deferInherited = false;
}
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;
}
static get observedAttributes() {
return ['inherit', 'subscribe'];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Consumer(' + this.id() + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
switch(name) {
case 'inherit':
this.inherit = newValue;
if (this.connected && typeof newValue === 'string') {
const attrs = newValue.split(',');
attrs.forEach(element => this.askProviderFor(element));
} else {
this.deferInherited = newValue.length > 0;
}
break;
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 (newValue !== null) {
this.subscribe = newValue;
if (this.connected) {
const attrs = newValue.split(',');
attrs.forEach(element => this.subscribeProviderFor(element));
} else {
this.deferSubscribe = newValue && newValue.length > 0;
}
}
break;
default:
console.log('unknown attribute "' + name + '".');
}
}
id() {
return this.getAttribute('id');
}
render() {}
askProviderFor(element) {
console.log('Consumer(' + this.id() + ') askProviderFor( ' + element + ' )');
const pair = element.trim().split(':');
const global = pair[0];
const local = pair[1];
const that = this;
const event = new CustomEvent('inherit',
{
bubbles: true,
composed: true,
detail: {
name: global,
callback: (value) => {
console.log('Consumer(' + that.id() + ') ask/Callback ' + global + ' -> ' + local + ' = ' + value);
this.attributeChangedCallback(local, that[local], value);
}
}
});
this.parentElement.dispatchEvent(event);
//console.dir(event);
}
subscribeProviderFor(element) {
console.log('Consumer(' + this.id() + ') 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,
composed: true,
detail: {
name: global,
callback: (value) => {
console.log('Consumer(' + that.id() + ') sub/Callback ' + global + ' -> ' + local + ' = ' + value);
this.attributeChangedCallback(local, that[local], value);
},
sender: this,
}
});
this.parentElement.dispatchEvent(event);
}
unSubscribeProviderFor(element) {
console.log('Consumer(' + this.id() + ') unSubscribeProviderFor( ' + element + ' )');
const pair = element.trim().split(':');
const global = pair[0];
const event = new CustomEvent('unsubscribe',
{
bubbles: true,
composed: true,
detail: {
name: global,
sender: this,
}
});
this.parentElement.dispatchEvent(event);
}
}
class DemoConsumer extends Consumer {
constructor() { constructor() {
super(); super();
...@@ -372,7 +128,7 @@ class DemoConsumer extends Consumer { ...@@ -372,7 +128,7 @@ class DemoConsumer extends Consumer {
this.foo = 100; this.foo = 100;
this.bar = 900; this.bar = 900;
this.ping = 0; this.ping = 0;
this['border-color'] = 'green'; this.borderColor = 'green';
this.status = 'local'; this.status = 'local';
...@@ -382,15 +138,21 @@ class DemoConsumer extends Consumer { ...@@ -382,15 +138,21 @@ class DemoConsumer extends Consumer {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
i18n.changeLanguage(this.lang); i18n.changeLanguage(this.lang);
console.log('DemoConsumer(' + this.id() + ') connectedCallback()'); console.log('DemoConsumer(' + this.id + ') connectedCallback()');
this.connected = true;
this.render(); this.render();
} }
static get observedAttributes() { static get properties() {
return [ return {
...Consumer.observedAttributes, ...super.properties,
'lang', 'foo', 'bar', 'gong', 'border-color', 'ping' lang: { type: String },
]; foo: { type: String },
bar: { type: String },
gong: { type: String },
borderColor: { type: String, attribute: 'border-color' },
ping: { type: String }
};
} }
attributeChangedCallback(name, oldValue, newValue) { attributeChangedCallback(name, oldValue, newValue) {
...@@ -398,7 +160,7 @@ class DemoConsumer extends Consumer { ...@@ -398,7 +160,7 @@ class DemoConsumer extends Consumer {
return; return;
} }
console.log('DemoConsumer(' + this.id() + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')'); console.log('DemoConsumer(' + this.id + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
switch(name) { switch(name) {
case 'lang': case 'lang':
this.lang = newValue; this.lang = newValue;
...@@ -422,14 +184,18 @@ class DemoConsumer extends Consumer { ...@@ -422,14 +184,18 @@ class DemoConsumer extends Consumer {
this.render(); this.render();
} }
get id() {
return this.getAttribute('id');
}
render() { render() {
if (! this.connected) { if (! this.connected) {
return; return `not connected!`;
} }
console.log('DemoConsumer(' + this.id() + ') render()'); console.log('DemoConsumer(' + this.id + ') render()');
const sum = this.foo + this.bar; const sum = this.foo + this.bar;
this.shadowRoot.innerHTML = ` return html`
<div style="border: ${this['border-color']} dotted; padding: 10px;"> <div style="border: ${this['border-color']} dotted; padding: 10px;">
<table style="width:200px;"> <table style="width:200px;">
<tr style="background-color: #aaa;"> <tr style="background-color: #aaa;">
......
packages/provider/src/i18n/de/translation.json
+ 3
− 1
View file @ 3fdbad9e
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
"demo": { "demo": {
"provider": "Anbieter", "provider": "Anbieter",
"consumer": "Verbraucher" "consumer": "Verbraucher",
"provider_description": "Anbieter \"{{id}}\" {{description}}",
"consumer_description": "Verbraucher \"{{id}}\" abonniert nur {{subscriptions}}"
}, },
"consumer": { "consumer": {
"item": "Bezeichnung", "item": "Bezeichnung",
......
packages/provider/src/i18n/en/translation.json
+ 3
− 1
View file @ 3fdbad9e
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
"demo": { "demo": {
"provider": "Provider", "provider": "Provider",
"consumer": "Consumer" "consumer": "Consumer",
"provider_description": "Provider \"{{id}}\" {{description}}",
"consumer_description": "Consumer \"{{id}}\" will only subscribe to {{subscriptions}}"
}, },
"consumer": { "consumer": {
"item": "Description", "item": "Description",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment