From 4733e894901cd6bff3a83b3a3adba0abdd89bc41 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Tue, 23 Jul 2019 15:19:35 +0200
Subject: [PATCH] Initial commit with basic web component scaffold and readme
---
packages/notification/.gitignore | 4 ++
packages/notification/.gitmodules | 3 +
packages/notification/README.md | 53 +++++++++++++++++
packages/notification/favicon.ico | Bin 0 -> 2550 bytes
packages/notification/i18n.js | 29 ++++++++++
.../notification/i18n/de/translation.json | 2 +
.../notification/i18n/en/translation.json | 2 +
.../notification/i18next-scanner.config.js | 12 ++++
packages/notification/index.html | 14 +++++
packages/notification/index.js | 2 +
packages/notification/package.json | 36 ++++++++++++
packages/notification/rollup.config.js | 43 ++++++++++++++
.../notification/vpu-notification-demo.js | 42 ++++++++++++++
packages/notification/vpu-notification.js | 54 ++++++++++++++++++
14 files changed, 296 insertions(+)
create mode 100644 packages/notification/.gitignore
create mode 100644 packages/notification/.gitmodules
create mode 100644 packages/notification/README.md
create mode 100644 packages/notification/favicon.ico
create mode 100644 packages/notification/i18n.js
create mode 100644 packages/notification/i18n/de/translation.json
create mode 100644 packages/notification/i18n/en/translation.json
create mode 100644 packages/notification/i18next-scanner.config.js
create mode 100644 packages/notification/index.html
create mode 100644 packages/notification/index.js
create mode 100644 packages/notification/package.json
create mode 100644 packages/notification/rollup.config.js
create mode 100644 packages/notification/vpu-notification-demo.js
create mode 100644 packages/notification/vpu-notification.js
diff --git a/packages/notification/.gitignore b/packages/notification/.gitignore
new file mode 100644
index 00000000..f61d5b29
--- /dev/null
+++ b/packages/notification/.gitignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+.idea
+npm-debug.log
\ No newline at end of file
diff --git a/packages/notification/.gitmodules b/packages/notification/.gitmodules
new file mode 100644
index 00000000..d423707d
--- /dev/null
+++ b/packages/notification/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "vendor/common"]
+ path = vendor/common
+ url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
diff --git a/packages/notification/README.md b/packages/notification/README.md
new file mode 100644
index 00000000..2d169fba
--- /dev/null
+++ b/packages/notification/README.md
@@ -0,0 +1,53 @@
+## VPU Notification Web Component
+
+[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/Notification)
+
+## Usage
+
+```html
+<vpu-notification></vpu-notification>
+```
+
+## Attributes
+
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+ - example `<vpu-notification lang="de" client-id="my-client-id"></vpu-notification>`
+
+## Events to dispatch
+
+### Sending notifications
+
+`vpu-notification-send` sends a notification to the web component
+
+```javascript
+event = new CustomEvent("vpu-notification-send", {
+ bubbles: true,
+ cancelable: true,
+ detail: {
+ "summary": "Item deleted",
+ "body": "Item foo was deleted!",
+ "timeout": 5,
+ },
+});
+```
+
+## Local development
+
+```bash
+# get the source
+git clone git@gitlab.tugraz.at:VPU/WebComponents/Notification.git
+cd Notification
+git submodule update --init
+
+# we are creating the symbolic links to our git sub-modules
+# (there was no proper script to do this automatically before a "node install"
+npm run setup
+
+# install dependencies
+npm install
+
+# constantly build dist/bundle.js and run a local web-server on port 8002
+npm run watch-local
+```
+
+Jump to <http://localhost:8002> and you should get a demo page.
diff --git a/packages/notification/favicon.ico b/packages/notification/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f6cf22d1afc22f071d2b64c7779bc5214c3adae5
GIT binary patch
literal 2550
zcmZQzU}Ruo5D);-91Iz(3=C=v3{buTLk0^2Lmw*xg9b>9fq_AR0iuq9fq}t+5kx{U
z68r!E{|pQa{~0DTTx0nE<_yEJYwsDZJ%7$HVdYu|hX2M43=C-u3=A_F7#PklFo3wm
z#taO`X$%a;GZ`3+L1O<QO45uO7}C-h7}91kFr=MfU`YE9(KgeVfnjDE1H;Uj3=A{R
zFfh#g4>pS7j4=blnKTB5Gcy?&&YWRjIP;%@;eQ$f!~dBK4FAtC7=ySB#tg;`X$-~;
zGZ~B-&M+7={0BS9*w~oC*f@>B*mx#`vGExOW8?o2C#4xP7^kH%7^lr-FitzeV4U_J
z;>?-G48}9l7>sAmWH6q2hQWB|e~8o17&923Nn<cRGn2vi%ozsbGyfTk{~I$H|4(Bu
z{y&q!80?P!;1B@0B8>qAXELNQoMA{~_|E|LvavBknsFLKn(<7AG~+W2X~zE{!H{Om
zkd~Ilkd`)+Aua6;Bv@t|Go;N-V@R7hlOb&;NbEl(sLmKOq@9_`kap$_L)w}D;Gj$U
zZ_JSPe<nlP|1%6{K>lVp0|`RonG6tk1{^ChjX|N4#xT<u#QzTo>NI19nZ{`hGt*`=
z%uGAOFw^)y!_1k+3^Qk@G0dDflVRpekXipB(E+wQjbY}QnG7?}oMD)G=07-!X8t#3
zn0Y3RVdnpt3^V_qVVL><KPUx2V*(TcGZ{cG14Zu{V`GLh#%T;^jAt^OF+Rg^#`r%Z
zYC-NuOJg{bHk08D$Q^0_A<;e4nBmOKG=?)XXEL0bd4}Q4%>R%iaK@P7%$YQXGiPQp
zoH=ub;mn!;;AC+I<d*+w3}^n&WH<u~53pN6sR0xVAUi=x)tKSGaT>#a<CzTqjn6Rr
zH~tSvPHDyrXVTIb{-@1k_@8!$;Y`|pND`ZA%<z9^8pHpYGa3HRJj3vR=6_JKWB7l@
znBo7KG=~3YW-|OgbB5vnng0y`{~I%$`Jcw{|Nl&e|NqZ0q@{u4D2*ZQKgbS{*&sD(
z42ld(8RFyP8OqDc8QR*~7^Y2|#&G)dX@*UkHZfekex2d&-Mb8rA3tVz_39PF$B!Qw
ze*E~s@ZtA=h9wIYFf=qYfb$^(I6MA_P@s4R<%9qK8RlI}XAod61>+Q628P?~wlQq0
zO=L(CPiHu~?l8mTy^|Ss)%G&jvhy<B<Xg=UC0oa^rAUM!%<3M)xjF9`YL9+lc&VSx
za9-d%gYn~S45u}ZKnnwkC?+N*CS(Ip`5+z`Gk{12FbQHYfmskfm<bUCGr<Iu4>cLY
zgEGMsIv*@Z1_3JiknzL+3=AOLpvb@g!Yzyp3?TfUpMe34!EwRB0Mmn7&Vou?1_lQf
zG8{6Zw7^0SMw9A!m_8UytbUk!d^E@`ba{{%2&0Q*<6~0?5(8m$_1MJF)qwaQbs!94
zBV%l0$nr2YNF5;zQwyUBsYjQG>4VYe@*|rM3l$g*Dq}zxRK|cXsEh$&a2W$CYtYIW
E03q~Dvj6}9
literal 0
HcmV?d00001
diff --git a/packages/notification/i18n.js b/packages/notification/i18n.js
new file mode 100644
index 00000000..a2380632
--- /dev/null
+++ b/packages/notification/i18n.js
@@ -0,0 +1,29 @@
+import i18next from 'i18next';
+
+import de from './i18n/de/translation.json';
+import en from './i18n/en/translation.json';
+
+const i18n = i18next.createInstance();
+
+i18n.init({
+ lng: 'de',
+ fallbackLng: ['de'],
+ debug: false,
+ initImmediate: false, // Don't init async
+ resources: {
+ en: {translation: en},
+ de: {translation: de}
+ },
+});
+
+console.assert(i18n.isInitialized);
+
+function dateTimeFormat(date, options) {
+ return new Intl.DateTimeFormat(i18n.languages, options).format(date);
+}
+
+function numberFormat(number, options) {
+ return new Intl.NumberFormat(i18n.languages, options).format(number);
+}
+
+export {i18n, dateTimeFormat, numberFormat};
diff --git a/packages/notification/i18n/de/translation.json b/packages/notification/i18n/de/translation.json
new file mode 100644
index 00000000..2c63c085
--- /dev/null
+++ b/packages/notification/i18n/de/translation.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/packages/notification/i18n/en/translation.json b/packages/notification/i18n/en/translation.json
new file mode 100644
index 00000000..2c63c085
--- /dev/null
+++ b/packages/notification/i18n/en/translation.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/packages/notification/i18next-scanner.config.js b/packages/notification/i18next-scanner.config.js
new file mode 100644
index 00000000..6c112e37
--- /dev/null
+++ b/packages/notification/i18next-scanner.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ input: [
+ '*.js',
+ ],
+ output: './',
+ options: {
+ debug: false,
+ removeUnusedKeys: true,
+ sort: true,
+ lngs: ['en','de'],
+ },
+}
diff --git a/packages/notification/index.html b/packages/notification/index.html
new file mode 100644
index 00000000..f49760b2
--- /dev/null
+++ b/packages/notification/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <script src="webcomponents-loader.js"></script>
+ <script type="module" id="vpu-notification-wc-src" src="bundle.js"></script>
+</head>
+
+<body>
+
+<vpu-notification-demo lang="de"></vpu-notification-demo>
+
+</body>
+</html>
diff --git a/packages/notification/index.js b/packages/notification/index.js
new file mode 100644
index 00000000..acd0529d
--- /dev/null
+++ b/packages/notification/index.js
@@ -0,0 +1,2 @@
+import './vpu-notification';
+import './vpu-notification-demo';
diff --git a/packages/notification/package.json b/packages/notification/package.json
new file mode 100644
index 00000000..da74c6d1
--- /dev/null
+++ b/packages/notification/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "vpu-notification",
+ "version": "1.0.0",
+ "devDependencies": {
+ "node-sass": "^4.12.0",
+ "rollup": "^1.11.3",
+ "rollup-plugin-commonjs": "^9.3.4",
+ "rollup-plugin-copy": "^2.0.1",
+ "rollup-plugin-node-resolve": "^4.2.3",
+ "rollup-plugin-postcss": "^2.0.3",
+ "rollup-plugin-serve": "^1.0.1",
+ "rollup-plugin-terser": "^4.0.4",
+ "rollup-plugin-json": "^4.0.0",
+ "rollup-plugin-replace": "^2.2.0",
+ "i18next-scanner": "^2.10.2"
+ },
+ "dependencies": {
+ "@webcomponents/webcomponentsjs": "^2.2.10",
+ "i18next": "^17.0.3",
+ "lit-element": "^2.1.0",
+ "vpu-common": "*"
+ },
+ "scripts": {
+ "setup": "mkdir -p node_modules && cd node_modules && ln -sfn ../vendor/common vpu-common",
+ "clean": "rm dist/*",
+ "build": "npm run build-local",
+ "build-local": "rollup -c",
+ "build-dev": "rollup -c --environment BUILD:development",
+ "build-prod": "rollup -c --environment BUILD:production",
+ "build-demo": "rollup -c --environment BUILD:demo",
+ "i18next": "i18next-scanner",
+ "watch": "npm run watch-local",
+ "watch-local": "rollup -c --watch",
+ "watch-dev": "rollup -c --watch --environment BUILD:development"
+ }
+}
diff --git a/packages/notification/rollup.config.js b/packages/notification/rollup.config.js
new file mode 100644
index 00000000..9db64d44
--- /dev/null
+++ b/packages/notification/rollup.config.js
@@ -0,0 +1,43 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
+import json from 'rollup-plugin-json';
+import replace from "rollup-plugin-replace";
+import serve from 'rollup-plugin-serve';
+
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+
+export default {
+ input: 'index.js',
+ output: {
+ file: 'dist/bundle.js',
+ format: 'esm'
+ },
+ plugins: [
+ resolve(),
+ commonjs(),
+ json(),
+ replace({
+ "process.env.BUILD": '"' + build + '"',
+ }),
+ postcss({
+ inject: false,
+ minimize: false,
+ plugins: []
+ }),
+ (build !== 'local') ? terser() : false,
+ copy({
+ targets: [
+ 'index.html',
+ 'favicon.ico',
+ 'node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js',
+ 'node_modules/@webcomponents/webcomponentsjs/bundles',
+ ],
+ outputFolder: 'dist'
+ }),
+ (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
+ ]
+};
diff --git a/packages/notification/vpu-notification-demo.js b/packages/notification/vpu-notification-demo.js
new file mode 100644
index 00000000..a374beb0
--- /dev/null
+++ b/packages/notification/vpu-notification-demo.js
@@ -0,0 +1,42 @@
+import {i18n} from './i18n.js';
+import {html, LitElement} from 'lit-element';
+
+class NotificationDemo extends LitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ }
+
+ static get properties() {
+ return {
+ lang: { type: String },
+ };
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ i18n.changeLanguage(this.lang);
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ render() {
+ return html`
+ <style>
+ </style>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+
+ <section class="section">
+ <div class="container">
+ <h1 class="title">Notification-Demo</h1>
+ </div>
+ <div class="container">
+ <vpu-notification lang="${this.lang}"></vpu-notification>
+ </div>
+ </section>
+ `;
+ }
+}
+
+customElements.define('vpu-notification-demo', NotificationDemo);
diff --git a/packages/notification/vpu-notification.js b/packages/notification/vpu-notification.js
new file mode 100644
index 00000000..2496c629
--- /dev/null
+++ b/packages/notification/vpu-notification.js
@@ -0,0 +1,54 @@
+import {i18n} from './i18n.js';
+import {html, LitElement} from 'lit-element';
+
+/**
+ * Keycloak auth web component
+ * https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter
+ *
+ * Dispatches an event `vpu-notification-init` and sets some global variables:
+ * window.VPUNotificationSubject: Keycloak username
+ * window.VPUNotificationToken: Keycloak token to send with your requests
+ * window.VPUUserFullName: Full name of the user
+ * window.VPUPersonId: Person identifier of the user
+ * window.VPUPerson: Person json object of the user (optional, enable by setting the `load-person` attribute,
+ * which will dispatch a `vpu-notification-person-init` event when loaded)
+ */
+class VPUNotification extends LitElement {
+ 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);
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ render() {
+ return html`
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+ <style>
+ </style>
+
+ <div class="columns">
+ <div class="column">
+ TODO
+ </div>
+ </div>
+ `;
+ }
+}
+
+customElements.define('vpu-notification', VPUNotification);
--
GitLab