diff --git a/packages/notification/utils.js b/packages/notification/utils.js new file mode 100644 index 0000000000000000000000000000000000000000..15874eb635d3e4dec075b6f4a61fd21ea016a789 --- /dev/null +++ b/packages/notification/utils.js @@ -0,0 +1,13 @@ + +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; + } +}; diff --git a/packages/notification/vpu-notification-demo.js b/packages/notification/vpu-notification-demo.js index 80ea7eb2385abf6413c3f34edb1e007ff71540c5..f9536106bc0ebd68d0469708c60305d41e9e0484 100644 --- a/packages/notification/vpu-notification-demo.js +++ b/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, }); } diff --git a/packages/notification/vpu-notification.js b/packages/notification/vpu-notification.js index 4e5d1db556c56ce631817254f337dbc31a806a80..24c8dfd82a178752905e534f3043402e6f18b258 100644 --- a/packages/notification/vpu-notification.js +++ b/packages/notification/vpu-notification.js @@ -1,4 +1,5 @@ -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">