From 29f677d3769ad3b17d5ff8cd86869825d1070ee4 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Mon, 20 Apr 2020 15:12:43 +0200
Subject: [PATCH] Port to scoped elements
---
packages/person-profile/package.json | 8 +-
packages/person-profile/rollup.config.js | 6 +-
packages/person-profile/src/index.js | 3 +
packages/person-profile/src/person-profile.js | 120 ++++++++++++++++++
.../src/vpu-person-profile-demo.js | 15 ++-
.../person-profile/src/vpu-person-profile.js | 118 +----------------
packages/person-profile/test/unit.js | 1 -
7 files changed, 143 insertions(+), 128 deletions(-)
create mode 100644 packages/person-profile/src/index.js
create mode 100644 packages/person-profile/src/person-profile.js
diff --git a/packages/person-profile/package.json b/packages/person-profile/package.json
index 8fbb7008..a9444afe 100644
--- a/packages/person-profile/package.json
+++ b/packages/person-profile/package.json
@@ -1,7 +1,7 @@
{
"name": "vpu-person-profile",
"version": "1.0.0",
- "main": "src/vpu-person-profile.js",
+ "main": "src/index.js",
"devDependencies": {
"karma": "^4.2.0",
"karma-chai": "^0.1.0",
@@ -20,7 +20,6 @@
"rollup-plugin-terser": "^5.1.1",
"rollup-plugin-delete": "^1.1.0",
"rollup-plugin-json": "^4.0.0",
- "rollup-plugin-multi-entry": "^2.1.0",
"rollup-plugin-url": "^2.2.2",
"i18next-scanner": "^2.10.2",
"vpu-auth": "file:./vendor/auth",
@@ -28,8 +27,9 @@
"vpu-person-select": "file:./vendor/person-select"
},
"dependencies": {
- "lit-element": "^2.2.1",
- "jquery": "^3.4.1"
+ "@open-wc/scoped-elements": "^1.0.8",
+ "jquery": "^3.4.1",
+ "lit-element": "^2.2.1"
},
"scripts": {
"clean": "rm dist/*",
diff --git a/packages/person-profile/rollup.config.js b/packages/person-profile/rollup.config.js
index 905ee191..e8f2294c 100644
--- a/packages/person-profile/rollup.config.js
+++ b/packages/person-profile/rollup.config.js
@@ -1,3 +1,5 @@
+
+import glob from 'glob';
import path from 'path';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
@@ -5,7 +7,6 @@ import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import json from 'rollup-plugin-json';
import serve from 'rollup-plugin-serve';
-import multiEntry from 'rollup-plugin-multi-entry';
import url from "rollup-plugin-url"
import consts from 'rollup-plugin-consts';
import del from 'rollup-plugin-delete';
@@ -14,7 +15,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : '
console.log("build: " + build);
export default {
- input: (build != 'test') ? ['src/vpu-person-profile.js', 'src/vpu-person-profile-demo.js'] : 'test/**/*.js',
+ input: (build != 'test') ? ['src/vpu-person-profile.js', 'src/vpu-person-profile-demo.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
@@ -26,7 +27,6 @@ export default {
del({
targets: 'dist/*'
}),
- (build == 'test') ? multiEntry() : false,
consts({
environment: build,
}),
diff --git a/packages/person-profile/src/index.js b/packages/person-profile/src/index.js
new file mode 100644
index 00000000..4e1db599
--- /dev/null
+++ b/packages/person-profile/src/index.js
@@ -0,0 +1,3 @@
+import {PersonProfile} from './person-profile.js';
+
+export {PersonProfile};
\ No newline at end of file
diff --git a/packages/person-profile/src/person-profile.js b/packages/person-profile/src/person-profile.js
new file mode 100644
index 00000000..54a94945
--- /dev/null
+++ b/packages/person-profile/src/person-profile.js
@@ -0,0 +1,120 @@
+
+import JSONLD from 'vpu-common/jsonld';
+import {css, html} from 'lit-element';
+import {i18n} from './i18n.js';
+import VPULitElement from 'vpu-common/vpu-lit-element';
+import * as commonUtils from 'vpu-common/utils';
+import * as commonStyles from 'vpu-common/styles';
+
+
+export class PersonProfile extends VPULitElement {
+
+ constructor() {
+ super();
+ this.lang = 'de';
+ this.entryPointUrl = commonUtils.getAPiUrl();
+ this.jsonld = null;
+ this.value = '';
+ this.person = null;
+ }
+
+ static get properties() {
+ return {
+ lang: { type: String },
+ active: { type: Boolean, attribute: false },
+ entryPointUrl: { type: String, attribute: 'entry-point-url' },
+ value: { type: String },
+ person: { type: Object, attribute: false },
+ };
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ switch (propName) {
+ case "lang":
+ i18n.changeLanguage(this.lang);
+ break;
+ case "entryPointUrl":
+ const that = this;
+
+ JSONLD.initialize(this.entryPointUrl, function (jsonld) {
+ that.jsonld = jsonld;
+ }, {}, that.lang);
+ break;
+ case 'value':
+ if (this.value !== '') {
+ const apiUrl = this.entryPointUrl + '/people/' + this.value;
+
+ // load person
+ fetch(apiUrl, {
+ headers: {
+ 'Content-Type': 'application/ld+json',
+ 'Authorization': 'Bearer ' + window.VPUAuthToken,
+ },
+ })
+ .then(response => response.json())
+ .then((person) => {
+ this.person = person;
+ });
+ }
+ break;
+ default:
+ }
+ });
+
+ super.update(changedProperties);
+ }
+
+ static get styles() {
+ // language=css
+ return css`
+ ${commonStyles.getThemeCSS()}
+ ${commonStyles.getGeneralCSS()}
+ `;
+ }
+
+ render() {
+ let role = i18n.t('person-profile.unknown');
+ if (this.person !== null && this.person.roles !== undefined) {
+ // roles are only defined for self-disclosure
+ if (this.person.roles.indexOf('ROLE_STAFF') > -1) {
+ role = i18n.t('person-profile.staff');
+ } else if (this.person.roles.indexOf('ROLE_ALUMNI') > -1) {
+ role = i18n.t('person-profile.alumni');
+ }
+ }
+ commonUtils.initAssetBaseURL('vpu-person-profile-src');
+ return html`
+ <style>
+ .profile {
+ padding: 1rem
+ }
+ .td-profile {
+ padding-right: 2rem
+ }
+ </style>
+
+ ${this.person !== null && this.person.name !== '' ? html`<h3>${i18n.t('person-profile.profile-caption')} ${this.person.name}</h3>
+ <table class="profile">
+ <thead></thead>
+ <tbody>
+ <tr><td class="td-profile">${i18n.t('person-profile.given-name')}</td><td>${this.person.givenName}</td></tr>
+ <tr><td class="td-profile">${i18n.t('person-profile.family-name')}</td><td>${this.person.familyName}</td></tr>
+ <tr><td class="td-profile">${i18n.t('person-profile.email')}</td><td>${this.person.email}</td></tr>
+ <tr><td class="td-profile">${i18n.t('person-profile.telephone')}</td><td>${this.person.telephone}</td></tr>
+ <tr><td class="td-profile">${i18n.t('person-profile.role')}</td><td>${role}</td></tr>
+ </tbody>
+ <tfoot></tfoot>
+ </table>` : i18n.t('person-profile.none-selected') }
+ `;
+ }
+}
+
+commonUtils.defineCustomElement('vpu-person-profile', PersonProfile);
diff --git a/packages/person-profile/src/vpu-person-profile-demo.js b/packages/person-profile/src/vpu-person-profile-demo.js
index 1b63722f..56b28f2e 100644
--- a/packages/person-profile/src/vpu-person-profile-demo.js
+++ b/packages/person-profile/src/vpu-person-profile-demo.js
@@ -1,14 +1,15 @@
import 'vpu-auth';
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 VPULitElement from 'vpu-common/vpu-lit-element';
-import './vpu-person-profile.js';
+import {PersonProfile} from './index.js';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
import $ from 'jquery';
import 'vpu-person-select';
-class PersonProfileDemo extends VPULitElement {
+class PersonProfileDemo extends ScopedElementsMixin(VPULitElement) {
constructor() {
super();
this.lang = 'de';
@@ -17,6 +18,14 @@ class PersonProfileDemo extends VPULitElement {
this.noAuth = false;
}
+ static get scopedElements() {
+ return {
+ 'vpu-person-profile': PersonProfile,
+ 'vpu-auth': customElements.get('vpu-auth'),
+ 'vpu-person-select': customElements.get('vpu-person-select'),
+ };
+ }
+
static get properties() {
return {
lang: { type: String },
diff --git a/packages/person-profile/src/vpu-person-profile.js b/packages/person-profile/src/vpu-person-profile.js
index 74f98159..a74ff7aa 100644
--- a/packages/person-profile/src/vpu-person-profile.js
+++ b/packages/person-profile/src/vpu-person-profile.js
@@ -1,120 +1,4 @@
-
-import JSONLD from 'vpu-common/jsonld';
-import {css, html} from 'lit-element';
-import {i18n} from './i18n.js';
-import VPULitElement from 'vpu-common/vpu-lit-element';
import * as commonUtils from 'vpu-common/utils';
-import * as commonStyles from 'vpu-common/styles';
-
-
-class PersonProfile extends VPULitElement {
-
- constructor() {
- super();
- this.lang = 'de';
- this.entryPointUrl = commonUtils.getAPiUrl();
- this.jsonld = null;
- this.value = '';
- this.person = null;
- }
-
- static get properties() {
- return {
- lang: { type: String },
- active: { type: Boolean, attribute: false },
- entryPointUrl: { type: String, attribute: 'entry-point-url' },
- value: { type: String },
- person: { type: Object, attribute: false },
- };
- }
-
- connectedCallback() {
- super.connectedCallback();
-
- this.updateComplete.then(()=>{
- });
- }
-
- update(changedProperties) {
- changedProperties.forEach((oldValue, propName) => {
- switch (propName) {
- case "lang":
- i18n.changeLanguage(this.lang);
- break;
- case "entryPointUrl":
- const that = this;
-
- JSONLD.initialize(this.entryPointUrl, function (jsonld) {
- that.jsonld = jsonld;
- }, {}, that.lang);
- break;
- case 'value':
- if (this.value !== '') {
- const apiUrl = this.entryPointUrl + '/people/' + this.value;
-
- // load person
- fetch(apiUrl, {
- headers: {
- 'Content-Type': 'application/ld+json',
- 'Authorization': 'Bearer ' + window.VPUAuthToken,
- },
- })
- .then(response => response.json())
- .then((person) => {
- this.person = person;
- });
- }
- break;
- default:
- }
- });
-
- super.update(changedProperties);
- }
-
- static get styles() {
- // language=css
- return css`
- ${commonStyles.getThemeCSS()}
- ${commonStyles.getGeneralCSS()}
- `;
- }
-
- render() {
- let role = i18n.t('person-profile.unknown');
- if (this.person !== null && this.person.roles !== undefined) {
- // roles are only defined for self-disclosure
- if (this.person.roles.indexOf('ROLE_STAFF') > -1) {
- role = i18n.t('person-profile.staff');
- } else if (this.person.roles.indexOf('ROLE_ALUMNI') > -1) {
- role = i18n.t('person-profile.alumni');
- }
- }
- commonUtils.initAssetBaseURL('vpu-person-profile-src');
- return html`
- <style>
- .profile {
- padding: 1rem
- }
- .td-profile {
- padding-right: 2rem
- }
- </style>
-
- ${this.person !== null && this.person.name !== '' ? html`<h3>${i18n.t('person-profile.profile-caption')} ${this.person.name}</h3>
- <table class="profile">
- <thead></thead>
- <tbody>
- <tr><td class="td-profile">${i18n.t('person-profile.given-name')}</td><td>${this.person.givenName}</td></tr>
- <tr><td class="td-profile">${i18n.t('person-profile.family-name')}</td><td>${this.person.familyName}</td></tr>
- <tr><td class="td-profile">${i18n.t('person-profile.email')}</td><td>${this.person.email}</td></tr>
- <tr><td class="td-profile">${i18n.t('person-profile.telephone')}</td><td>${this.person.telephone}</td></tr>
- <tr><td class="td-profile">${i18n.t('person-profile.role')}</td><td>${role}</td></tr>
- </tbody>
- <tfoot></tfoot>
- </table>` : i18n.t('person-profile.none-selected') }
- `;
- }
-}
+import {PersonProfile} from './person-profile.js';
commonUtils.defineCustomElement('vpu-person-profile', PersonProfile);
diff --git a/packages/person-profile/test/unit.js b/packages/person-profile/test/unit.js
index 9c4ca04e..d7877d63 100644
--- a/packages/person-profile/test/unit.js
+++ b/packages/person-profile/test/unit.js
@@ -1,4 +1,3 @@
-import '../src/vpu-person-profile.js';
import '../src/demo.js';
describe('vpu-person-profile demo', () => {
--
GitLab