From fe84e908f51b88a3d9677d2607684d9078545b3a Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Mon, 20 Apr 2020 16:10:02 +0200
Subject: [PATCH] Port to scoped elements
---
packages/notification/package.json | 2 +-
packages/notification/rollup.config.js | 5 +-
packages/notification/src/index.js | 3 +
packages/notification/src/notification.js | 171 +++++++++++++++++
.../notification/src/vpu-notification-demo.js | 11 +-
packages/notification/src/vpu-notification.js | 176 +-----------------
6 files changed, 188 insertions(+), 180 deletions(-)
create mode 100644 packages/notification/src/index.js
create mode 100644 packages/notification/src/notification.js
diff --git a/packages/notification/package.json b/packages/notification/package.json
index db40e3d3..5de66b00 100644
--- a/packages/notification/package.json
+++ b/packages/notification/package.json
@@ -20,12 +20,12 @@
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.1.1",
"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-common": "file:./vendor/common"
},
"dependencies": {
+ "@open-wc/scoped-elements": "^1.0.8",
"lit-element": "^2.1.0"
},
"scripts": {
diff --git a/packages/notification/rollup.config.js b/packages/notification/rollup.config.js
index 54691b8e..dc74522c 100644
--- a/packages/notification/rollup.config.js
+++ b/packages/notification/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-notification.js', 'src/vpu-notification-demo.js'] : 'test/**/*.js',
+ input: (build != 'test') ? ['src/vpu-notification.js', 'src/vpu-notification-demo.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
@@ -26,7 +26,6 @@ export default {
del({
targets: 'dist/*'
}),
- (build == 'test') ? multiEntry() : false,
consts({
environment: build,
}),
diff --git a/packages/notification/src/index.js b/packages/notification/src/index.js
new file mode 100644
index 00000000..cb7a0c58
--- /dev/null
+++ b/packages/notification/src/index.js
@@ -0,0 +1,3 @@
+import {Notification} from './notification.js';
+
+export {Notification};
\ No newline at end of file
diff --git a/packages/notification/src/notification.js b/packages/notification/src/notification.js
new file mode 100644
index 00000000..91ccb06b
--- /dev/null
+++ b/packages/notification/src/notification.js
@@ -0,0 +1,171 @@
+import {i18n} from './i18n';
+import {createUUID} from './utils'
+import {css, html} from 'lit-element';
+import VPULitElement from 'vpu-common/vpu-lit-element';
+import * as commonUtils from 'vpu-common/utils';
+import * as commonStyles from 'vpu-common/styles';
+
+/**
+ * Notification web component
+ */
+export class Notification extends VPULitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ }
+
+ /**
+ * See: https://lit-element.polymer-project.org/guide/properties#initialize
+ */
+ static get properties() {
+ return {
+ lang: { type: String },
+ };
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ i18n.changeLanguage(this.lang);
+ const that = this;
+
+ const listener = window.addEventListener("vpu-notification-send", (e) => {
+ if (typeof e.detail === 'undefined') {
+ return;
+ }
+
+ that.notificationBlock = that._("#notification");
+ const notificationId = `notification-${createUUID()}`;
+
+ const type = typeof e.detail.type !== 'undefined' ? e.detail.type : "info";
+ const body = typeof e.detail.body !== 'undefined' ? e.detail.body : "";
+ const summary = typeof e.detail.summary !== 'undefined' ? e.detail.summary : "";
+ const timeout = typeof e.detail.timeout !== 'undefined' ? e.detail.timeout : 0;
+ const icon = typeof e.detail.icon !== 'undefined' ? e.detail.icon : '';
+ const iconHTML = icon !== '' ? `<vpu-icon name="${icon}"></vpu-icon>` : "";
+ const summaryHTML = summary !== "" ? `<h3>${summary}</h3>` : "";
+
+ that.notificationBlock.innerHTML = `
+ <div id="${notificationId}" class="notification is-${type}">
+ <button id="${notificationId}-button" onclick="parentNode.parentNode.removeChild(parentNode)" class="delete"></button>
+ ${summaryHTML}
+ ${iconHTML} ${body}
+ </div>
+ ` + that.notificationBlock.innerHTML;
+
+ const messageId = `#${notificationId}`;
+
+ if (timeout > 0) {
+ setTimeout(() => {
+ that.removeMessageId(messageId);
+ }, timeout * 1000);
+ }
+
+ // mark the event as handled
+ e.preventDefault();
+ });
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ removeMessageId(messageElementId) {
+ const element = this._(messageElementId);
+
+ if (element) {
+ this.notificationBlock.removeChild(element);
+ }
+ }
+
+ static get styles() {
+ // language=css
+ return css`
+ ${commonStyles.getThemeCSS()}
+ ${commonStyles.getGeneralCSS()}
+ ${commonStyles.getNotificationCSS()}
+
+ .notification:not(:last-child) {
+ margin-bottom: 1.5rem;
+ }
+
+ .notification h3 {
+ font-weight: bold;
+ margin-bottom: 3px;
+ }
+
+ .delete, .modal-close {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ background-color: rgba(10,10,10,.2);
+ border: none;
+ border-radius: 290486px;
+ cursor: pointer;
+ pointer-events: auto;
+ display: inline-block;
+ flex-grow: 0;
+ flex-shrink: 0;
+ font-size: 0;
+ height: 20px;
+ max-height: 20px;
+ max-width: 20px;
+ min-height: 20px;
+ min-width: 20px;
+ outline: 0;
+ position: relative;
+ vertical-align: top;
+ width: 20px;
+ }
+
+ .delete::before, .modal-close::before, .delete::after, .modal-close::after {
+ background-color: white;
+ content: "";
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ }
+
+ .delete::before, .modal-close::before {
+ height: 2px;
+ width: 50%;
+ }
+
+ .delete::after, .modal-close::after {
+ height: 50%;
+ width: 2px;
+ }
+
+ .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {
+ background-color: rgba(10, 10, 10, 0.3);
+ }
+
+ .delete:active, .modal-close:active {
+ background-color: rgba(10, 10, 10, 0.4);
+ }
+
+ #notification {
+ position: fixed; top: 0; max-width: 500px; margin: 0.75em auto; left: 0; right: 0; z-index: 1000; padding: 0;
+ }
+
+ .notification h3 {
+ margin: 0 0 3px 0;
+ font: inherit;
+ font-weight: bold;
+ }
+ `;
+ }
+
+ render() {
+ commonUtils.initAssetBaseURL('vpu-notification-src');
+
+ return html`
+ <div class="columns">
+ <div class="column" id="notification">
+ </div>
+ </div>
+ `;
+ }
+}
\ No newline at end of file
diff --git a/packages/notification/src/vpu-notification-demo.js b/packages/notification/src/vpu-notification-demo.js
index 915eb465..d3288c35 100644
--- a/packages/notification/src/vpu-notification-demo.js
+++ b/packages/notification/src/vpu-notification-demo.js
@@ -1,16 +1,23 @@
import {i18n} from './i18n';
import {send as notify} from 'vpu-common/notification';
import {css, html, LitElement} from 'lit-element';
-import './vpu-notification';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {Notification} from './notification.js';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from "vpu-common/styles";
-class NotificationDemo extends LitElement {
+class NotificationDemo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = 'de';
}
+ static get scopedElements() {
+ return {
+ 'vpu-notification': Notification,
+ };
+ }
+
static get properties() {
return {
lang: { type: String },
diff --git a/packages/notification/src/vpu-notification.js b/packages/notification/src/vpu-notification.js
index 57e0fd63..abe4e9b8 100644
--- a/packages/notification/src/vpu-notification.js
+++ b/packages/notification/src/vpu-notification.js
@@ -1,176 +1,4 @@
-import {i18n} from './i18n';
-import {createUUID} from './utils'
-import {css, html} from 'lit-element';
-import VPULitElement from 'vpu-common/vpu-lit-element';
import * as commonUtils from 'vpu-common/utils';
-import * as commonStyles from 'vpu-common/styles';
-import { send } from 'vpu-common/notification';
+import {Notification} from './notification.js';
-export { send };
-
-/**
- * Notification web component
- */
-class VPUNotification extends VPULitElement {
- constructor() {
- super();
- this.lang = 'de';
- }
-
- /**
- * See: https://lit-element.polymer-project.org/guide/properties#initialize
- */
- static get properties() {
- return {
- lang: { type: String },
- };
- }
-
- connectedCallback() {
- super.connectedCallback();
- i18n.changeLanguage(this.lang);
- const that = this;
-
- const listener = window.addEventListener("vpu-notification-send", (e) => {
- if (typeof e.detail === 'undefined') {
- return;
- }
-
- that.notificationBlock = that._("#notification");
- const notificationId = `notification-${createUUID()}`;
-
- const type = typeof e.detail.type !== 'undefined' ? e.detail.type : "info";
- const body = typeof e.detail.body !== 'undefined' ? e.detail.body : "";
- const summary = typeof e.detail.summary !== 'undefined' ? e.detail.summary : "";
- const timeout = typeof e.detail.timeout !== 'undefined' ? e.detail.timeout : 0;
- const icon = typeof e.detail.icon !== 'undefined' ? e.detail.icon : '';
- const iconHTML = icon !== '' ? `<vpu-icon name="${icon}"></vpu-icon>` : "";
- const summaryHTML = summary !== "" ? `<h3>${summary}</h3>` : "";
-
- that.notificationBlock.innerHTML = `
- <div id="${notificationId}" class="notification is-${type}">
- <button id="${notificationId}-button" onclick="parentNode.parentNode.removeChild(parentNode)" class="delete"></button>
- ${summaryHTML}
- ${iconHTML} ${body}
- </div>
- ` + that.notificationBlock.innerHTML;
-
- const messageId = `#${notificationId}`;
-
- if (timeout > 0) {
- setTimeout(() => {
- that.removeMessageId(messageId);
- }, timeout * 1000);
- }
-
- // mark the event as handled
- e.preventDefault();
- });
-
- this.updateComplete.then(()=>{
- });
- }
-
- removeMessageId(messageElementId) {
- const element = this._(messageElementId);
-
- if (element) {
- this.notificationBlock.removeChild(element);
- }
- }
-
- static get styles() {
- // language=css
- return css`
- ${commonStyles.getThemeCSS()}
- ${commonStyles.getGeneralCSS()}
- ${commonStyles.getNotificationCSS()}
-
- .notification:not(:last-child) {
- margin-bottom: 1.5rem;
- }
-
- .notification h3 {
- font-weight: bold;
- margin-bottom: 3px;
- }
-
- .delete, .modal-close {
- -moz-appearance: none;
- -webkit-appearance: none;
- background-color: rgba(10,10,10,.2);
- border: none;
- border-radius: 290486px;
- cursor: pointer;
- pointer-events: auto;
- display: inline-block;
- flex-grow: 0;
- flex-shrink: 0;
- font-size: 0;
- height: 20px;
- max-height: 20px;
- max-width: 20px;
- min-height: 20px;
- min-width: 20px;
- outline: 0;
- position: relative;
- vertical-align: top;
- width: 20px;
- }
-
- .delete::before, .modal-close::before, .delete::after, .modal-close::after {
- background-color: white;
- content: "";
- display: block;
- left: 50%;
- position: absolute;
- top: 50%;
- -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- -webkit-transform-origin: center center;
- transform-origin: center center;
- }
-
- .delete::before, .modal-close::before {
- height: 2px;
- width: 50%;
- }
-
- .delete::after, .modal-close::after {
- height: 50%;
- width: 2px;
- }
-
- .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {
- background-color: rgba(10, 10, 10, 0.3);
- }
-
- .delete:active, .modal-close:active {
- background-color: rgba(10, 10, 10, 0.4);
- }
-
- #notification {
- position: fixed; top: 0; max-width: 500px; margin: 0.75em auto; left: 0; right: 0; z-index: 1000; padding: 0;
- }
-
- .notification h3 {
- margin: 0 0 3px 0;
- font: inherit;
- font-weight: bold;
- }
- `;
- }
-
- render() {
- commonUtils.initAssetBaseURL('vpu-notification-src');
-
- return html`
- <div class="columns">
- <div class="column" id="notification">
- </div>
- </div>
- `;
- }
-}
-
-commonUtils.defineCustomElement('vpu-notification', VPUNotification);
+commonUtils.defineCustomElement('vpu-notification', Notification);
--
GitLab