From d935e5089d9611e6a2ccdcc8de747a45e5241024 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Wed, 22 Apr 2020 15:30:00 +0200
Subject: [PATCH] Port to scoped elements
---
.../package.json | 4 +-
.../rollup.config.js | 12 +-
.../src/demo.js | 1 -
.../src/index.js | 3 +
.../knowledge-base-web-page-element-view.js | 184 ++++++++++++++++++
...owledge-base-web-page-element-view-demo.js | 18 +-
...pu-knowledge-base-web-page-element-view.js | 180 +----------------
.../test/unit.js | 2 +-
.../vendor/auth | 2 +-
.../vendor/common | 2 +-
10 files changed, 216 insertions(+), 192 deletions(-)
delete mode 100644 packages/knowledge-base-web-page-element-view/src/demo.js
create mode 100644 packages/knowledge-base-web-page-element-view/src/index.js
create mode 100644 packages/knowledge-base-web-page-element-view/src/knowledge-base-web-page-element-view.js
diff --git a/packages/knowledge-base-web-page-element-view/package.json b/packages/knowledge-base-web-page-element-view/package.json
index b8823697..b31f40c3 100644
--- a/packages/knowledge-base-web-page-element-view/package.json
+++ b/packages/knowledge-base-web-page-element-view/package.json
@@ -1,7 +1,7 @@
{
"name": "vpu-knowledge-base-web-page-element-view",
"version": "1.0.0",
- "main": "src/vpu-knowledge-base-web-page-element-view.js",
+ "main": "src/index.js",
"devDependencies": {
"chai": "^4.2.0",
"i18next-scanner": "^2.10.2",
@@ -18,7 +18,6 @@
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^1.1.0",
"rollup-plugin-json": "^4.0.0",
- "rollup-plugin-multi-entry": "^2.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-replace": "^2.2.0",
@@ -29,6 +28,7 @@
"vpu-common": "file:./vendor/common"
},
"dependencies": {
+ "@open-wc/scoped-elements": "^1.0.9",
"i18next": "^17.0.3",
"lit-element": "^2.1.0",
"lit-html": "^1.1.1",
diff --git a/packages/knowledge-base-web-page-element-view/rollup.config.js b/packages/knowledge-base-web-page-element-view/rollup.config.js
index 4fb9bf0e..a766344c 100644
--- a/packages/knowledge-base-web-page-element-view/rollup.config.js
+++ b/packages/knowledge-base-web-page-element-view/rollup.config.js
@@ -1,3 +1,4 @@
+import glob from 'glob';
import path from 'path';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
@@ -5,7 +6,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 +14,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : '
console.log("build: " + build);
export default {
- input: (build != 'test') ? ['src/vpu-knowledge-base-web-page-element-view.js', 'src/vpu-knowledge-base-web-page-element-view-demo.js'] : 'test/**/*.js',
+ input: (build != 'test') ? ['src/vpu-knowledge-base-web-page-element-view.js', 'src/vpu-knowledge-base-web-page-element-view-demo.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
@@ -22,11 +22,17 @@ export default {
format: 'esm',
sourcemap: true
},
+ onwarn: function (warning, warn) {
+ // keycloak bundled code uses eval
+ if (warning.code === 'EVAL') {
+ return;
+ }
+ warn(warning);
+ },
plugins: [
del({
targets: 'dist/*'
}),
- (build == 'test') ? multiEntry() : false,
consts({
environment: build,
}),
diff --git a/packages/knowledge-base-web-page-element-view/src/demo.js b/packages/knowledge-base-web-page-element-view/src/demo.js
deleted file mode 100644
index e176fe1e..00000000
--- a/packages/knowledge-base-web-page-element-view/src/demo.js
+++ /dev/null
@@ -1 +0,0 @@
-import './vpu-knowledge-base-web-page-element-view-demo.js';
\ No newline at end of file
diff --git a/packages/knowledge-base-web-page-element-view/src/index.js b/packages/knowledge-base-web-page-element-view/src/index.js
new file mode 100644
index 00000000..2d9635ee
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/src/index.js
@@ -0,0 +1,3 @@
+import {KnowledgeBaseWebPageElementView} from './knowledge-base-web-page-element-view.js';
+
+export {KnowledgeBaseWebPageElementView};
\ No newline at end of file
diff --git a/packages/knowledge-base-web-page-element-view/src/knowledge-base-web-page-element-view.js b/packages/knowledge-base-web-page-element-view/src/knowledge-base-web-page-element-view.js
new file mode 100644
index 00000000..7991c14d
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/src/knowledge-base-web-page-element-view.js
@@ -0,0 +1,184 @@
+import {i18n} from './i18n';
+import {html} from 'lit-element';
+import VPULitElement from 'vpu-common/vpu-lit-element'
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {MiniSpinner} from 'vpu-common';
+import * as commonUtils from "vpu-common/utils";
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+
+/**
+ * KnowledgeBaseWebPageElementView web component
+ */
+export class KnowledgeBaseWebPageElementView extends ScopedElementsMixin(VPULitElement) {
+ constructor() {
+ super();
+ this.lang = 'de';
+ this.value = '';
+ this.html = '';
+ this.entryPointUrl = commonUtils.getAPiUrl();
+ this.error = '';
+ this.eyeClose = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1ElEQVQ4ja3SMU5CURCF4c+ejpiILe5DZAGyASuJS5CKEoMGKhdAwWKgMkriKjQWFkAkBizgmckNPEgeJ7nVuee/M3eGI2mCehFAHZ/Hgtygizd84wsjPOHsEMgUqx1njvtd4R7uAmSIMipo4SeAHtLwdTCbG8gHLsOdVlJN9LwEY4nSFsh5AhhHwGtinoY/ySDlPEAjMbvByyDDvBbgOZi/eNxUkrUTp9NJw3CCNhbJS0vcBshgWzjqAn28W899Zr1U1dBObR8kT9nGXhWFTIoA/vUHQydS/iUcHx4AAAAASUVORK5CYII=';
+ this.eyeOpen = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5UlEQVQ4jc3SvS7EURAF8B+JioSsCokHUFgNiWewQqvzICRew2v4WLFUnoNS/msrazUaFOYm12RlVeIkk9ycM2fmztzLf8U02tiPaAc3EbM4Rh8fKfo4wdxP5nXcV4YhLnGO54p/wEY2b6akHhYqfR7dVHyriMt4qsQRWtiNaw+wFwWHaaQlcc161l4UblIyXKTcM7hL5FUk14tsgsvNumIhb2NG6ISxiXMrtJI3wErZwyHeK/E2DAWLuKn0F2xLOEgdRriOeK34sc9YsIpT37dd4hFHvj7bRMxElw52sIap3xj/Hp9rzGFBhiMSxAAAAABJRU5ErkJggg==';
+ //this.css = 'kb.css';
+ this.text = '';
+ this.class = '';
+ }
+
+ static get scopedElements() {
+ return {
+ 'vpu-mini-spinner': MiniSpinner,
+ };
+ }
+
+ /**
+ * See: https://lit-element.polymer-project.org/guide/properties#initialize
+ */
+ static get properties() {
+ return {
+ lang: { type: String },
+ value: { type: String },
+ html: { type: String, attribute: false },
+ entryPointUrl: { type: String, attribute: 'entry-point-url' },
+ id: { type: String, attribute: false},
+ error: { type: String, attribute: false},
+ //css: { type: String },
+ text: { type: String },
+ };
+ }
+
+ /*
+ connectedCallback() {
+ super.connectedCallback();
+ const that = this;
+
+ // JSONLD.initialize(this.entryPointUrl, function (jsonld) {
+ // const apiUrl = jsonld.getApiUrlForEntityName("KnowledgeBaseWebPageElement") + '/' +
+ // encodeURIComponent(commonUtils.base64EncodeUnicode(encodeURIComponent(that.value)));
+ // });
+
+ // disabled, load first on toggle to visible
+ window.addEventListener("vpu-auth-init", () => that.loadWebPageElement());
+ }
+ */
+
+ /**
+ * Loads the data from the web page element
+ */
+ loadWebPageElement() {
+ if (window.VPUAuthToken === undefined || window.VPUAuthToken === "") {
+ return;
+ }
+
+ // sadly there there is no entity url without "collectionOperations" in entity KnowledgeBaseWebPageElement!
+ const apiUrl = this.entryPointUrl + "/web_page_elements/knowledge_base_web_page_elements/" +
+ encodeURIComponent(commonUtils.base64EncodeUnicode(encodeURIComponent(this.value))) +
+ "?lang=" + encodeURIComponent(this.lang);
+
+ var that = this;
+ fetch(apiUrl, {
+ headers: {
+ 'Content-Type': 'application/ld+json',
+ 'Authorization': 'Bearer ' + window.VPUAuthToken,
+ },
+ })
+ .then(function (res) {
+ if (!res.ok) {
+ let status_msg;
+ switch (res.status) {
+ case 403:
+ status_msg = i18n.t('is-forbidden');
+ break;
+ case 404:
+ status_msg = i18n.t('was-not-found');
+ break;
+ case 500:
+ status_msg = i18n.t('troubled-server');
+ break;
+ default:
+ status_msg = i18n.t('unknown-problems');
+ }
+ const error_head = i18n.t('error-head');
+ that.error = html`<p>${error_head} "<b>${that.value}</b>" ${status_msg} (${res.status}).</p>`;
+ that.html = "";
+ throw new Error('HTTP ' + error_head + ' ' + that.value + ' ' + status_msg + ', status = ' + res.status);
+ }
+ return res.json();
+ })
+ .then(webPageElement => {
+ if (webPageElement !== undefined && webPageElement.text !== undefined) {
+ that.html = webPageElement.text;
+ }
+ })
+ // catch e.g. 404 errors
+ .catch();
+ }
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ if (propName === "lang") {
+ i18n.changeLanguage(this.lang);
+ }
+
+ switch(propName) {
+ case "lang":
+ case "value":
+ case "entry-point-url":
+ this.html = '';
+ const img = this._('#A2');
+ if (img !== null) {
+ img.src = this.eyeOpen;
+ }
+ const div = this._('#A1');
+ if (div !== null) {
+ div.style.display = 'none';
+ }
+ break;
+ case "text":
+ this.class = this.text !== '' ? 'has-text' : '';
+ break;
+ }
+ });
+
+ super.update(changedProperties);
+ }
+
+ toggle(e) {
+ const div = this._('#A1');
+ const img = this._('#A2');
+ const d = div.style.display;
+ if(d === '' || d === 'none') {
+ div.style.display = 'block';
+ img.src = this.eyeClose;
+ } else {
+ div.style.display = 'none';
+ img.src = this.eyeOpen;
+ }
+ if (this.html === '' && div.style.display !== 'none') {
+ this.html = "<vpu-mini-spinner></vpu-mini-spinner>";
+ this.loadWebPageElement();
+ }
+ }
+
+ render() {
+ commonUtils.initAssetBaseURL('vpu-knowledge-base-web-page-element-view-src');
+
+ return html`
+ <style>
+ .kb {
+ display: none;
+ border-radius: var(--KBBorderRadius, 0);
+ border: var(--KBBorder, 0);
+ margin: var(--KBMargin, 0);
+ padding: var(--KBPadding, 0);
+ }
+ span.has-text img {margin-left: 5px}
+ span.with-pointer { cursor: pointer; }
+ </style>
+ <span class="with-pointer ${this.class}" @click="${this.toggle}">${this.text}<img src="${this.eyeOpen}" id="A2" alt="open/close"></span>
+ <div class='kb' id="A1">
+ ${unsafeHTML(this.html)}
+ ${this.error}
+ </div>
+ `;
+ }
+}
\ No newline at end of file
diff --git a/packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view-demo.js b/packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view-demo.js
index f40e936e..636b8901 100644
--- a/packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view-demo.js
+++ b/packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view-demo.js
@@ -1,17 +1,25 @@
import {i18n} from './i18n';
import {css, html, LitElement} from 'lit-element';
-import 'vpu-auth';
-import './vpu-knowledge-base-web-page-element-view.js';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {Auth} from 'vpu-auth';
+import {KnowledgeBaseWebPageElementView} from './knowledge-base-web-page-element-view.js';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
-class KnowledgeBaseWebPageElementViewDemo extends LitElement {
+class KnowledgeBaseWebPageElementViewDemo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = 'de';
this.noAuth = false;
}
+ static get scopedElements() {
+ return {
+ 'vpu-knowledge-base-web-page-element-view' : KnowledgeBaseWebPageElementView,
+ 'vpu-auth': Auth,
+ };
+ }
+
static get properties() {
return {
lang: { type: String },
@@ -38,13 +46,13 @@ class KnowledgeBaseWebPageElementViewDemo extends LitElement {
h1.title {margin-bottom: 1em;}
div.container {margin-bottom: 1.5em;}
- vpu-knowledge-base-web-page-element-view.clean {
+ .clean {
--KBBorder: initial;
--KBBorderRadius: initial;
--KBMargin: initial;
--KBPadding: initial;
}
- vpu-knowledge-base-web-page-element-view.opt {
+ .opt {
--KBBorder: 2px solid blue;
}
`;
diff --git a/packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view.js b/packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view.js
index a4f532c3..f11e7a53 100644
--- a/packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view.js
+++ b/packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view.js
@@ -1,180 +1,4 @@
-import {i18n} from './i18n';
-import {html} from 'lit-element';
-// import JSONLD from 'vpu-common/jsonld';
-import VPULitElement from 'vpu-common/vpu-lit-element'
-import "vpu-common/vpu-mini-spinner.js";
import * as commonUtils from "vpu-common/utils";
-import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import {KnowledgeBaseWebPageElementView} from './knowledge-base-web-page-element-view.js';
-/**
- * KnowledgeBaseWebPageElementView web component
- */
-class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
- constructor() {
- super();
- this.lang = 'de';
- this.value = '';
- this.html = '';
- this.entryPointUrl = commonUtils.getAPiUrl();
- this.error = '';
- this.eyeClose = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1ElEQVQ4ja3SMU5CURCF4c+ejpiILe5DZAGyASuJS5CKEoMGKhdAwWKgMkriKjQWFkAkBizgmckNPEgeJ7nVuee/M3eGI2mCehFAHZ/Hgtygizd84wsjPOHsEMgUqx1njvtd4R7uAmSIMipo4SeAHtLwdTCbG8gHLsOdVlJN9LwEY4nSFsh5AhhHwGtinoY/ySDlPEAjMbvByyDDvBbgOZi/eNxUkrUTp9NJw3CCNhbJS0vcBshgWzjqAn28W899Zr1U1dBObR8kT9nGXhWFTIoA/vUHQydS/iUcHx4AAAAASUVORK5CYII=';
- this.eyeOpen = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5UlEQVQ4jc3SvS7EURAF8B+JioSsCokHUFgNiWewQqvzICRew2v4WLFUnoNS/msrazUaFOYm12RlVeIkk9ycM2fmztzLf8U02tiPaAc3EbM4Rh8fKfo4wdxP5nXcV4YhLnGO54p/wEY2b6akHhYqfR7dVHyriMt4qsQRWtiNaw+wFwWHaaQlcc161l4UblIyXKTcM7hL5FUk14tsgsvNumIhb2NG6ISxiXMrtJI3wErZwyHeK/E2DAWLuKn0F2xLOEgdRriOeK34sc9YsIpT37dd4hFHvj7bRMxElw52sIap3xj/Hp9rzGFBhiMSxAAAAABJRU5ErkJggg==';
- //this.css = 'kb.css';
- this.text = '';
- this.class = '';
- }
-
- /**
- * See: https://lit-element.polymer-project.org/guide/properties#initialize
- */
- static get properties() {
- return {
- lang: { type: String },
- value: { type: String },
- html: { type: String, attribute: false },
- entryPointUrl: { type: String, attribute: 'entry-point-url' },
- id: { type: String, attribute: false},
- error: { type: String, attribute: false},
- //css: { type: String },
- text: { type: String },
- };
- }
-
- /*
- connectedCallback() {
- super.connectedCallback();
- const that = this;
-
- // JSONLD.initialize(this.entryPointUrl, function (jsonld) {
- // const apiUrl = jsonld.getApiUrlForEntityName("KnowledgeBaseWebPageElement") + '/' +
- // encodeURIComponent(commonUtils.base64EncodeUnicode(encodeURIComponent(that.value)));
- // });
-
- // disabled, load first on toggle to visible
- window.addEventListener("vpu-auth-init", () => that.loadWebPageElement());
- }
- */
-
- /**
- * Loads the data from the web page element
- */
- loadWebPageElement() {
- if (window.VPUAuthToken === undefined || window.VPUAuthToken === "") {
- return;
- }
-
- // sadly there there is no entity url without "collectionOperations" in entity KnowledgeBaseWebPageElement!
- const apiUrl = this.entryPointUrl + "/web_page_elements/knowledge_base_web_page_elements/" +
- encodeURIComponent(commonUtils.base64EncodeUnicode(encodeURIComponent(this.value))) +
- "?lang=" + encodeURIComponent(this.lang);
-
- var that = this;
- fetch(apiUrl, {
- headers: {
- 'Content-Type': 'application/ld+json',
- 'Authorization': 'Bearer ' + window.VPUAuthToken,
- },
- })
- .then(function (res) {
- if (!res.ok) {
- let status_msg;
- switch (res.status) {
- case 403:
- status_msg = i18n.t('is-forbidden');
- break;
- case 404:
- status_msg = i18n.t('was-not-found');
- break;
- case 500:
- status_msg = i18n.t('troubled-server');
- break;
- default:
- status_msg = i18n.t('unknown-problems');
- }
- const error_head = i18n.t('error-head');
- that.error = html`<p>${error_head} "<b>${that.value}</b>" ${status_msg} (${res.status}).</p>`;
- that.html = "";
- throw new Error('HTTP ' + error_head + ' ' + that.value + ' ' + status_msg + ', status = ' + res.status);
- }
- return res.json();
- })
- .then(webPageElement => {
- if (webPageElement !== undefined && webPageElement.text !== undefined) {
- that.html = webPageElement.text;
- }
- })
- // catch e.g. 404 errors
- .catch();
- }
-
- update(changedProperties) {
- changedProperties.forEach((oldValue, propName) => {
- if (propName === "lang") {
- i18n.changeLanguage(this.lang);
- }
-
- switch(propName) {
- case "lang":
- case "value":
- case "entry-point-url":
- this.html = '';
- const img = this._('#A2');
- if (img !== null) {
- img.src = this.eyeOpen;
- }
- const div = this._('#A1');
- if (div !== null) {
- div.style.display = 'none';
- }
- break;
- case "text":
- this.class = this.text !== '' ? 'has-text' : '';
- break;
- }
- });
-
- super.update(changedProperties);
- }
-
- toggle(e) {
- const div = this._('#A1');
- const img = this._('#A2');
- const d = div.style.display;
- if(d === '' || d === 'none') {
- div.style.display = 'block';
- img.src = this.eyeClose;
- } else {
- div.style.display = 'none';
- img.src = this.eyeOpen;
- }
- if (this.html === '' && div.style.display !== 'none') {
- this.html = "<vpu-mini-spinner></vpu-mini-spinner>";
- this.loadWebPageElement();
- }
- }
-
- render() {
- commonUtils.initAssetBaseURL('vpu-knowledge-base-web-page-element-view-src');
-
- return html`
- <style>
- .kb {
- display: none;
- border-radius: var(--KBBorderRadius, 0);
- border: var(--KBBorder, 0);
- margin: var(--KBMargin, 0);
- padding: var(--KBPadding, 0);
- }
- span.has-text img {margin-left: 5px}
- span.with-pointer { cursor: pointer; }
- </style>
- <span class="with-pointer ${this.class}" @click="${this.toggle}">${this.text}<img src="${this.eyeOpen}" id="A2" alt="open/close"></span>
- <div class='kb' id="A1">
- ${unsafeHTML(this.html)}
- ${this.error}
- </div>
- `;
- }
-}
-
-commonUtils.defineCustomElement('vpu-knowledge-base-web-page-element-view', VPUKnowledgeBaseWebPageElementView);
+commonUtils.defineCustomElement('vpu-knowledge-base-web-page-element-view', KnowledgeBaseWebPageElementView);
diff --git a/packages/knowledge-base-web-page-element-view/test/unit.js b/packages/knowledge-base-web-page-element-view/test/unit.js
index 1dd031e8..b2682060 100644
--- a/packages/knowledge-base-web-page-element-view/test/unit.js
+++ b/packages/knowledge-base-web-page-element-view/test/unit.js
@@ -1,5 +1,5 @@
import '../src/vpu-knowledge-base-web-page-element-view.js';
-import '../src/demo.js';
+import '../src/vpu-knowledge-base-web-page-element-view-demo.js';
describe('vpu-knowledge-base-web-page-element-view basics', () => {
let node;
diff --git a/packages/knowledge-base-web-page-element-view/vendor/auth b/packages/knowledge-base-web-page-element-view/vendor/auth
index 0d2610ce..b9fbe487 160000
--- a/packages/knowledge-base-web-page-element-view/vendor/auth
+++ b/packages/knowledge-base-web-page-element-view/vendor/auth
@@ -1 +1 @@
-Subproject commit 0d2610cee764128529a71629c2adb1922e2849ed
+Subproject commit b9fbe487a8a6117ae90a423a8ba318a0321bf51b
diff --git a/packages/knowledge-base-web-page-element-view/vendor/common b/packages/knowledge-base-web-page-element-view/vendor/common
index 833dd224..9c6dc1fd 160000
--- a/packages/knowledge-base-web-page-element-view/vendor/common
+++ b/packages/knowledge-base-web-page-element-view/vendor/common
@@ -1 +1 @@
-Subproject commit 833dd224c7ecab1caf509d83f58211c2346e8b19
+Subproject commit 9c6dc1fd5e004eba32e31adf8e4485a26c345fe0
--
GitLab