Implement auto-delete, manual delete, fixed notifications and better demo messages

packages/notification/utils.js

+
+module.exports = {
+    createUUID: () => {
+        let dt = new Date().getTime();
+        const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (dt + Math.random()*16)%16 | 0;
+            dt = Math.floor(dt/16);
+            return (c==='x' ? r :(r&0x3|0x8)).toString(16);
+        });
+
+        return uuid;
+    }
+};

packages/notification/vpu-notification-demo.js

@@ -47,10 +47,11 @@ class NotificationDemo extends LitElement {
     }
 
     send() {
+        const types = ["primary", "link", "info", "success", "danger", "warning"];
         notification.send({
             "summary": "Item deleted",
-            "body": "Item foo was deleted!",
-            "type": "info",
+            "body": `Item ${Math.random().toString(36).substring(7)} foo was deleted!`,
+            "type": types[Math.floor(Math.random() * types.length)],
             "timeout": 5,
         });
     }

packages/notification/vpu-notification.js

-import {i18n} from './i18n.js';
+import {i18n} from './i18n';
+import utils from './utils'
 import {html} from 'lit-element';
 import VPULitElement from 'vpu-common/vpu-lit-element'
 
@@ -30,28 +31,49 @@ class VPUNotification extends VPULitElement {
                 return;
             }
 
+            that.notificationBlock = that._("#notification");
+            const notificationId = `notification-${utils.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 summaryHTML = summary !== "" ? `<strong>${summary}</strong><br/>` : "";
 
-            // TODO: take care about summary and timeout
-            that._("#notification").innerHTML += `
-                <div id="notification" class="notification is-${type}">
-                    <button class="delete"></button>
+            that.notificationBlock.innerHTML = `
+                <div id="${notificationId}" class="notification is-${type}">
+                    <button id="${notificationId}-button" onclick="parentNode.parentNode.removeChild(parentNode)" class="delete"></button>
+                    ${summaryHTML}
                     ${body}
                 </div>
-            `;
+            ` + that.notificationBlock.innerHTML;
+
+            const messageId = `#${notificationId}`;
+
+            if (timeout > 0) {
+                setTimeout(() => {
+                    that.removeMessageId(messageId);
+                }, timeout * 1000);
+            }
         });
 
         this.updateComplete.then(()=>{
         });
     }
 
+    removeMessageId(messageElementId) {
+        const element = this._(messageElementId);
+
+        if (element) {
+            this.notificationBlock.removeChild(element);
+        }
+    }
+
     render() {
         return html`
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
             <style>
+                #notification {position: fixed; top: 0; max-width: 500px; margin: 1% auto; left: 0; right: 0;}
             </style>
 
             <div class="columns">