Skip to content
Snippets Groups Projects
Commit d935e508 authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Port to scoped elements

parent 08783bf9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 216 additions and 192 deletions
packages/knowledge-base-web-page-element-view/package.json
+ 2
− 2
View file @ d935e508
{ {
"name": "vpu-knowledge-base-web-page-element-view", "name": "vpu-knowledge-base-web-page-element-view",
"version": "1.0.0", "version": "1.0.0",
"main": "src/vpu-knowledge-base-web-page-element-view.js", "main": "src/index.js",
"devDependencies": { "devDependencies": {
"chai": "^4.2.0", "chai": "^4.2.0",
"i18next-scanner": "^2.10.2", "i18next-scanner": "^2.10.2",
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
"rollup-plugin-copy": "^3.1.0", "rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^1.1.0", "rollup-plugin-delete": "^1.1.0",
"rollup-plugin-json": "^4.0.0", "rollup-plugin-json": "^4.0.0",
"rollup-plugin-multi-entry": "^2.1.0",
"rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^2.0.3", "rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-replace": "^2.2.0", "rollup-plugin-replace": "^2.2.0",
...@@ -29,6 +28,7 @@ ...@@ -29,6 +28,7 @@
"vpu-common": "file:./vendor/common" "vpu-common": "file:./vendor/common"
}, },
"dependencies": { "dependencies": {
"@open-wc/scoped-elements": "^1.0.9",
"i18next": "^17.0.3", "i18next": "^17.0.3",
"lit-element": "^2.1.0", "lit-element": "^2.1.0",
"lit-html": "^1.1.1", "lit-html": "^1.1.1",
......
packages/knowledge-base-web-page-element-view/rollup.config.js
+ 9
− 3
View file @ d935e508
import glob from 'glob';
import path from 'path'; import path from 'path';
import resolve from 'rollup-plugin-node-resolve'; import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs'; import commonjs from 'rollup-plugin-commonjs';
...@@ -5,7 +6,6 @@ import copy from 'rollup-plugin-copy'; ...@@ -5,7 +6,6 @@ import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser"; import {terser} from "rollup-plugin-terser";
import json from 'rollup-plugin-json'; import json from 'rollup-plugin-json';
import serve from 'rollup-plugin-serve'; import serve from 'rollup-plugin-serve';
import multiEntry from 'rollup-plugin-multi-entry';
import url from "rollup-plugin-url"; import url from "rollup-plugin-url";
import consts from 'rollup-plugin-consts'; import consts from 'rollup-plugin-consts';
import del from 'rollup-plugin-delete'; import del from 'rollup-plugin-delete';
...@@ -14,7 +14,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : ' ...@@ -14,7 +14,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : '
console.log("build: " + build); console.log("build: " + build);
export default { 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: { output: {
dir: 'dist', dir: 'dist',
entryFileNames: '[name].js', entryFileNames: '[name].js',
...@@ -22,11 +22,17 @@ export default { ...@@ -22,11 +22,17 @@ export default {
format: 'esm', format: 'esm',
sourcemap: true sourcemap: true
}, },
onwarn: function (warning, warn) {
// keycloak bundled code uses eval
if (warning.code === 'EVAL') {
return;
}
warn(warning);
},
plugins: [ plugins: [
del({ del({
targets: 'dist/*' targets: 'dist/*'
}), }),
(build == 'test') ? multiEntry() : false,
consts({ consts({
environment: build, environment: build,
}), }),
......
packages/knowledge-base-web-page-element-view/src/demo.js deleted 100644 → 0
+ 0
− 1
View file @ 08783bf9
import './vpu-knowledge-base-web-page-element-view-demo.js';
\ No newline at end of file
packages/knowledge-base-web-page-element-view/src/index.js 0 → 100644
+ 3
− 0
View file @ d935e508
import {KnowledgeBaseWebPageElementView} from './knowledge-base-web-page-element-view.js';
export {KnowledgeBaseWebPageElementView};
\ No newline at end of file
packages/knowledge-base-web-page-element-view/src/knowledge-base-web-page-element-view.js 0 → 100644
+ 184
− 0
View file @ d935e508
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
packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view-demo.js
+ 13
− 5
View file @ d935e508
import {i18n} from './i18n'; import {i18n} from './i18n';
import {css, html, LitElement} from 'lit-element'; import {css, html, LitElement} from 'lit-element';
import 'vpu-auth'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import './vpu-knowledge-base-web-page-element-view.js'; import {Auth} from 'vpu-auth';
import {KnowledgeBaseWebPageElementView} from './knowledge-base-web-page-element-view.js';
import * as commonUtils from 'vpu-common/utils'; import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles'; import * as commonStyles from 'vpu-common/styles';
class KnowledgeBaseWebPageElementViewDemo extends LitElement { class KnowledgeBaseWebPageElementViewDemo extends ScopedElementsMixin(LitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this.lang = 'de';
this.noAuth = false; this.noAuth = false;
} }
static get scopedElements() {
return {
'vpu-knowledge-base-web-page-element-view' : KnowledgeBaseWebPageElementView,
'vpu-auth': Auth,
};
}
static get properties() { static get properties() {
return { return {
lang: { type: String }, lang: { type: String },
...@@ -38,13 +46,13 @@ class KnowledgeBaseWebPageElementViewDemo extends LitElement { ...@@ -38,13 +46,13 @@ class KnowledgeBaseWebPageElementViewDemo extends LitElement {
h1.title {margin-bottom: 1em;} h1.title {margin-bottom: 1em;}
div.container {margin-bottom: 1.5em;} div.container {margin-bottom: 1.5em;}
vpu-knowledge-base-web-page-element-view.clean { .clean {
--KBBorder: initial; --KBBorder: initial;
--KBBorderRadius: initial; --KBBorderRadius: initial;
--KBMargin: initial; --KBMargin: initial;
--KBPadding: initial; --KBPadding: initial;
} }
vpu-knowledge-base-web-page-element-view.opt { .opt {
--KBBorder: 2px solid blue; --KBBorder: 2px solid blue;
} }
`; `;
......
packages/knowledge-base-web-page-element-view/src/vpu-knowledge-base-web-page-element-view.js
+ 2
− 178
View file @ d935e508
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 * 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';
/** commonUtils.defineCustomElement('vpu-knowledge-base-web-page-element-view', KnowledgeBaseWebPageElementView);
* 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);
packages/knowledge-base-web-page-element-view/test/unit.js
+ 1
− 1
View file @ d935e508
import '../src/vpu-knowledge-base-web-page-element-view.js'; 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', () => { describe('vpu-knowledge-base-web-page-element-view basics', () => {
let node; let node;
......
auth @ b9fbe487
Subproject commit 0d2610cee764128529a71629c2adb1922e2849ed Subproject commit b9fbe487a8a6117ae90a423a8ba318a0321bf51b
common @ 9c6dc1fd
Subproject commit 833dd224c7ecab1caf509d83f58211c2346e8b19 Subproject commit 9c6dc1fd5e004eba32e31adf8e4485a26c345fe0
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment