Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • advertisement
  • automagic
  • dbp-translation-component
  • demo
  • demo-file-handling
  • favorites-and-recent-files
  • icon-set-mapping
  • lit2
  • main
  • person-select-custom
  • port-i18next-parser
  • publish
  • remove-sentry
  • renovate/lock-file-maintenance
  • revert-6c632dc6
  • wc-part
  • wip-cleanup
17 results

Target

Select target project
  • 987FCF504483CBC8/toolkit
1 result
Select Git revision
  • advertisement
  • automagic
  • dbp-translation-component
  • demo
  • demo-file-handling
  • favorites-and-recent-files
  • icon-set-mapping
  • lit2
  • main
  • person-select-custom
  • port-i18next-parser
  • publish
  • remove-sentry
  • renovate/lock-file-maintenance
  • revert-6c632dc6
  • wc-part
  • wip-cleanup
17 results
Show changes
Commits on Source (28)
Hide whitespace changes
Inline Side-by-side
Showing
with 215 additions and 298 deletions
.renovaterc.json
View file @ e012292e
{
"extends": [
"config:base",
"group:allNonMajor"
"group:allNonMajor",
"schedule:weekly"
],
"ignorePresets": [":prHourlyLimit2"],
"rangeStrategy": "update-lockfile",
......
packages/app-shell/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/app-shell"
},
"publishConfig": {
......@@ -22,7 +22,7 @@
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"glob": "^7.1.6",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......
packages/auth/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/auth"
},
"publishConfig": {
......@@ -25,7 +25,7 @@
"eslint-plugin-jsdoc": "^31.0.0",
"glob": "^7.1.6",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......
packages/auth/src/auth-keycloak.js
View file @ e012292e
......@@ -87,6 +87,7 @@ export class AuthKeycloak extends AdapterLitElement {
window.DBPPersonId = this.personId;
window.DBPPerson = this.person;
this.sendSetPropertyEvents();
this._setLoginStatus(LoginStatus.LOGGED_IN, tokenChanged || newPerson);
} else {
if (this._loginStatus === LoginStatus.LOGGED_IN) {
......@@ -106,6 +107,7 @@ export class AuthKeycloak extends AdapterLitElement {
window.DBPPersonId = this.personId;
window.DBPPerson = this.person;
this.sendSetPropertyEvents();
this._setLoginStatus(LoginStatus.LOGGED_OUT);
}
......@@ -141,6 +143,15 @@ export class AuthKeycloak extends AdapterLitElement {
this.dispatchEvent(this.keycloakDataUpdateEvent);
}
sendSetPropertyEvents() {
this.sendSetPropertyEvent('auth-subject', this.subject);
this.sendSetPropertyEvent('auth-token', this.token);
this.sendSetPropertyEvent('auth-token-parsed', this.tokenParsed);
this.sendSetPropertyEvent('user-full-name', this.name);
this.sendSetPropertyEvent('person-id', this.personId);
this.sendSetPropertyEvent('person', this.person);
}
_setLoginStatus(status, force) {
if (this._loginStatus === status && !force)
return;
......
packages/check-in-place-select/package.json
View file @ e012292e
......@@ -20,8 +20,10 @@
"@rollup/plugin-replace": "^2.3.3",
"@rollup/plugin-url": "^6.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......@@ -31,9 +33,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.1.0",
......
packages/common/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"module": "index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/common"
},
"devDependencies": {
......@@ -17,7 +17,7 @@
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......
packages/data-table-view/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/data-table-view"
},
"publishConfig": {
......@@ -19,9 +19,11 @@
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-url": "^6.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"glob": "^7.1.6",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^2.0.1",
"mocha": "^8.0.1",
......@@ -30,9 +32,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.1.0",
......
packages/file-handling/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/file-handling"
},
"publishConfig": {
......@@ -18,8 +18,10 @@
"@rollup/plugin-json": "^4.0.2",
"@rollup/plugin-node-resolve": "^11.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"i18next-scanner": "^3.0.0",
"karma": "^5.0.1",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.0",
......@@ -29,9 +31,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/common": "^0.1.0",
......
packages/knowledge-base-web-page-element-view/package.json
View file @ e012292e
......@@ -21,7 +21,7 @@
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......
packages/language-select/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/language-select"
},
"publishConfig": {
......@@ -18,8 +18,10 @@
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......@@ -29,9 +31,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/common": "^0.1.0",
......
packages/language-select/src/language-select.js
View file @ e012292e
import {html, css, LitElement} from 'lit-element';
import {html, css} from 'lit-element';
import {i18n} from './i18n.js';
import * as commonStyles from '@dbp-toolkit/common/styles';
import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
/**
* Emits a dbp-language-changed event where event.detail.lang is the new selected language
*/
export class LanguageSelect extends LitElement {
export class LanguageSelect extends AdapterLitElement {
constructor() {
super();
......@@ -61,12 +62,7 @@ export class LanguageSelect extends LitElement {
this.dispatchEvent(event);
// tell a dbp-provider to update the "lang" property
event = new CustomEvent("set-property", {
bubbles: true,
composed: true,
detail: {'name': 'lang', 'value': value}
});
this.dispatchEvent(event);
this.sendSetPropertyEvent('lang', value);
// Unlike other cases we use the next language for the translations so that
// users not knowing the current language can understand it.
......
packages/matomo/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/matomo"
},
"publishConfig": {
......@@ -19,8 +19,10 @@
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-url": "^6.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......@@ -30,9 +32,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.1.0",
......
packages/notification/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/notification"
},
"publishConfig": {
......@@ -19,8 +19,10 @@
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-url": "^6.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......@@ -30,9 +32,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/common": "^0.1.0",
......
packages/person-profile/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/person-profile"
},
"publishConfig": {
......@@ -19,8 +19,10 @@
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-url": "^6.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......@@ -30,9 +32,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.1.0",
......
packages/person-select/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/person-select"
},
"publishConfig": {
......@@ -20,8 +20,10 @@
"@rollup/plugin-replace": "^2.3.3",
"@rollup/plugin-url": "^6.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......@@ -31,9 +33,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.1.0",
......
packages/provider/assets/index.html.ejs
View file @ e012292e
......@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="dbp-provider.js"></script>
<script type="module" src="dbp-provider-demo.js"></script>
<!--
This is for debugging only:
......@@ -9,16 +10,18 @@
- unhandled requests are logged in the console
-->
<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('unsubscribe', e => console.log('window eventListener("unsubscribe",..) name "' + e.detail.name + '" not found.'));
</script>
<style>
body { padding: 50px;}
</style>
</head>
<body>
<dbp-provider-demo lang="de"></dbp-provider-demo>
<p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p>
<dbp-provider id="root" root="1" availability="global" lang="de">
<dbp-provider-demo id="provider-demo" subscribe="lang:lang"></dbp-provider-demo>
</dbp-provider>
<p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p>
</body>
</html>
packages/provider/package.json
View file @ e012292e
......@@ -5,8 +5,8 @@
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type" : "git",
"url" : "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/provider"
},
"publishConfig": {
......@@ -19,9 +19,11 @@
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-url": "^6.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0",
"glob": "^7.1.6",
"i18next-scanner": "^3.0.0",
"karma": "^5.1.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
......@@ -31,9 +33,7 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^31.0.0"
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.1.0",
......
packages/provider/src/adapter-lit-element.js
View file @ e012292e
......@@ -6,6 +6,8 @@ export class AdapterLitElement extends LitElement {
this.connected = false;
this.deferSubscribe = false;
this.deferUnSubscribe = false;
// attributes (if they exist) will be updated if a property is changed by "subscribe"
this.reflectAttribute = true;
// default values
this.subscribe = '';
......@@ -49,12 +51,15 @@ export class AdapterLitElement extends LitElement {
console.log('AdapterLitElement(' + that.tagName + ') sub/Callback ' + global + ' -> ' + local + ' = ' + value);
that.attributeChangedCallback(local, that[local], value);
// we don't support attributes and provider values at the same time
// check if an attribute also exists in the tag
if (that.getAttribute(local) !== null) {
// we don't support attributes and provider values at the same time
console.warn('Provider callback: "' + local + '" is also an attribute in tag "' + that.tagName + '", this is not supported!');
} else {
// we don't want to set the attribute
// that.setAttribute(local, value);
// update attribute if reflectAttribute is enabled
if (that.reflectAttribute) {
that.setAttribute(local, value);
}
}
},
sender: this,
......@@ -124,6 +129,23 @@ export class AdapterLitElement extends LitElement {
// console.trace();
}
/**
* Send a set-property event to the provider components
*
* @param name
* @param value
* @returns {boolean}
*/
sendSetPropertyEvent(name, value) {
const event = new CustomEvent("set-property", {
bubbles: true,
composed: true,
detail: {'name': name, 'value': value}
});
return this.dispatchEvent(event);
}
// update(changedProperties) {
// changedProperties.forEach((oldValue, propName) => {
// switch(propName) {
......
packages/provider/src/dbp-provider-demo.js
View file @ e012292e
import {i18n} from './i18n.js';
import {css, html, LitElement} from 'lit-element';
import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles';
import {Provider} from '@dbp-toolkit/provider';
import {LanguageSelect} from '@dbp-toolkit/language-select';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
class ProviderDemo extends ScopedElementsMixin(LitElement) {
class ProviderDemo extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
......@@ -18,6 +20,7 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
return {
'dbp-auth-keycloak': AuthKeycloak,
'dbp-login-button': LoginButton,
'dbp-language-select': LanguageSelect,
'dbp-provider': Provider,
'dbp-consumer': DemoConsumer,
};
......@@ -25,6 +28,7 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
static get properties() {
return {
...super.properties,
lang: { type: String },
};
}
......@@ -32,6 +36,20 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
connectedCallback() {
super.connectedCallback();
i18n.changeLanguage(this.lang);
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('ProviderDemo (' + this.id + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
switch(name) {
case 'lang':
this.lang = newValue;
i18n.changeLanguage(this.lang);
break;
default:
super.attributeChangedCallback(name, oldValue, newValue);
}
this.render();
}
static get styles() {
......@@ -46,71 +64,52 @@ class ProviderDemo extends ScopedElementsMixin(LitElement) {
];
}
get id() {
return this.getAttribute('id');
}
render() {
return html`
<section class="section">
<p>Provider <em>"root"</em> is the top most in hierarchy:</p>
<dbp-provider id="root"
init="availability=global"
></dbp-provider>
<pre>
&lt;dbp-provider id="root" init="availability=global" &gt;&lt;/dbp-provider&gt;
</pre>
<p>${i18n.t('demo.provider_description', {id: "root", description: "is the top most in hierarchy"})}</p>
<pre>&lt;dbp-provider id="root" root="1" availability="global" >&lt;/dbp-provider&gt;</pre>
<div class="container">
<h1 class="title">Provider-Demo</h1>
<h1 class="title">${i18n.t('demo.provider')}-Demo</h1>
</div>
<div class="container">
<dbp-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
<dbp-language-select></dbp-language-select>
</div>
<div class="container">
<h2>Provider</h2>
<p>Provider <em>"demo"</em> has only <em>border-color</em> to offer:</p>
<dbp-provider id="demo"
init="bc=blue"
></dbp-provider>
<pre>
&lt;dbp-provider id="demo" init="bc=blue" &gt;&lt;/dbp-provider&gt;
</pre>
<p>Provider <em>"foo-bar"</em> has some values in its store:</p>
<dbp-provider id="demo"
bc="blue">
<dbp-provider id="foo-bar"
init="foo=9,bar=20"
></dbp-provider>
<pre>
&lt;dbp-provider id="foo-bar" init="foo=9,bar=20" &gt;&lt;/dbp-provider&gt;
</pre>
<h2>Consumer</h2>
<p>Consumer <em>"c1"</em> will only subscribe to <em>border-color</em></p>
<pre>
&lt;dbp-consumer id="c1" subscribe="bc:border-color" &gt;&lt;/dbp-consumer&gt;
</pre>
<dbp-consumer id="c1"
subscribe="bc:border-color"
></dbp-consumer>
<p>Consumer <em>"c2"</em> subscribes to <em>foo</em></p>
<pre>
&lt;dbp-consumer id="c2" subscribe="foo:foo" &gt;&lt;/dbp-consumer&gt;
</pre>
<dbp-consumer id="c2"
subscribe="foo:foo"
></dbp-consumer>
<p>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"
border-color="orange"
></dbp-consumer>
<p>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>
foo="9"
bar="20">
<div class="container">
<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_description', {id: "foo-bar", description: "has some values in its store"})}</p>
<pre>&lt;dbp-provider id="foo-bar" foo="9" bar="20" &gt;&lt;/dbp-provider&gt;</pre>
<h2>${i18n.t('demo.consumer')}</h2>
<p>${i18n.t('demo.consumer_description', {id: "c1", subscriptions: "border-color"})}</p>
<pre>&lt;dbp-consumer id="c1" subscribe="border-color:bc" &gt;&lt;/dbp-consumer&gt;</pre>
<dbp-consumer id="c1" subscribe="border-color:bc,lang:lang"></dbp-consumer>
<p>${i18n.t('demo.consumer_description', {id: "c2", subscriptions: "foo"})}</p>
<pre>&lt;dbp-consumer id="c2" subscribe="foo:foo" &gt;&lt;/dbp-consumer&gt;</pre>
<dbp-consumer id="c2" subscribe="foo:foo,lang:lang"></dbp-consumer>
<p>${i18n.t('demo.consumer_description', {id: "c3", subscriptions: "availability:status"})}</p>
<p>Local <em>status</em> is provided as <em>availability</em></p>
<pre>&lt;dbp-consumer id="c3" subscribe="status:availability" border-color="orange" &gt;&lt;/dbp-consumer&gt;</pre>
<dbp-consumer id="c3" subscribe="status:availability,lang:lang" border-color="orange"></dbp-consumer>
<p>${i18n.t('demo.consumer_description', {id: "c4", subscriptions: "unknown-name:status"})}</p>
<p>Remote <em>unknown-name</em> does not exist, the default value is overwritten by <em>undefined</em></i></p>
<pre>&lt;dbp-consumer id="c4" subscribe="status:unknown-name" border-color="darkgray" &gt;&lt;/dbp-consumer&gt;</pre>
<dbp-consumer id="c4" subscribe="status:unknown-name" border-color="darkgray"></dbp-consumer>
</div>
</dbp-provider>
</dbp-provider>
</section>
`;
}
......@@ -120,163 +119,16 @@ commonUtils.defineCustomElement('dbp-provider-demo', ProviderDemo);
// =======================================================
class Consumer extends HTMLElement {
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
{
class DemoConsumer extends DBPLitElement {
constructor() {
super();
this.lang = 'de';
// default values
this.foo = 100;
this.bar = 900;
this.ping = 0;
this['border-color'] = 'green';
this.borderColor = 'green';
this.status = 'local';
......@@ -285,17 +137,34 @@ class DemoConsumer extends Consumer
connectedCallback() {
super.connectedCallback();
console.log('DemoConsumer(' + this.id() + ') connectedCallback()');
i18n.changeLanguage(this.lang);
console.log('DemoConsumer(' + this.id + ') connectedCallback()');
this.render();
}
static get observedAttributes() {
return [ ...Consumer.observedAttributes, 'foo', 'bar', 'gong', 'border-color', 'ping'];
static get properties() {
return {
...super.properties,
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) {
console.log('DemoConsumer(' + this.id() + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
if (oldValue === newValue) {
return;
}
console.log('DemoConsumer(' + this.id + ') attributeChangesCallback( ' + name + ', ' + oldValue + ', ' + newValue + ')');
switch(name) {
case 'lang':
this.lang = newValue;
i18n.changeLanguage(this.lang);
break;
case 'foo':
this.foo = parseInt(newValue);
break;
......@@ -314,23 +183,27 @@ class DemoConsumer extends Consumer
this.render();
}
get id() {
return this.getAttribute('id');
}
render() {
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;
this.shadowRoot.innerHTML = `
return html`
<div style="border: ${this['border-color']} dotted; padding: 10px;">
<table style="width:200px;">
<tr style="background-color: #aaa;">
<th style="text-align: left;">Item</th>
<th style="text-align: right;">Price</th>
<th style="text-align: left;">${i18n.t('consumer.item')}</th>
<th style="text-align: right;">${i18n.t('consumer.price')}</th>
</tr>
<tr><td>foo</td><td style="text-align: right;">${this.foo}</td></tr>
<tr><td>bar</td><td style="text-align: right;">${this.bar}</td></tr>
<tr><td>sum</td><td style="text-align: right;">${sum}</td></tr>
<tr><td>${i18n.t('consumer.sum')}</td><td style="text-align: right;">${sum}</td></tr>
</table>
<p>Status: <b>${this.status}</b></p>
</div>
......
packages/provider/src/i18n/de/translation.json
View file @ e012292e
{
"provider": {
"de": "Deutsch",
"en": "Englisch",
"demo": {
"provider": "Anbieter",
"consumer": "Verbraucher",
"provider_description": "Anbieter \"{{id}}\" {{description}}",
"consumer_description": "Verbraucher \"{{id}}\" abonniert nur {{subscriptions}}"
},
"consumer": {
"item": "Bezeichnung",
"price": "Preis",
"sum": "Summe"
}
}
\ No newline at end of file