luci-base: ui.js: implement addNotification() helper

The L.ui.addNotification() function pushes a dismissable banner message to
the top of the view.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index c27dd7ebfc3fd4d58779b41d2a6649f5d17b17fc..fed5dafa337641037c15f52bd17890933122c51d 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -1967,6 +1967,43 @@ return L.Class.extend({
                tooltipDiv.dispatchEvent(new CustomEvent('tooltip-close', { bubbles: true }));
        },
 
+       addNotification: function(title, children /*, ... */) {
+               var mc = document.querySelector('#maincontent') || document.body;
+               var msg = E('div', {
+                       'class': 'alert-message fade-in',
+                       'style': 'display:flex',
+                       'transitionend': function(ev) {
+                               var node = ev.currentTarget;
+                               if (node.parentNode && node.classList.contains('fade-out'))
+                                       node.parentNode.removeChild(node);
+                       }
+               }, [
+                       E('div', { 'style': 'flex:10' }),
+                       E('div', { 'style': 'flex:1; display:flex' }, [
+                               E('button', {
+                                       'class': 'btn',
+                                       'style': 'margin-left:auto; margin-top:auto',
+                                       'click': function(ev) {
+                                               L.dom.parent(ev.target, '.alert-message').classList.add('fade-out');
+                                       },
+
+                               }, _('Dismiss'))
+                       ])
+               ]);
+
+               if (title != null)
+                       L.dom.append(msg.firstElementChild, E('h4', {}, title));
+
+               L.dom.append(msg.firstElementChild, children);
+
+               for (var i = 2; i < arguments.length; i++)
+                       msg.classList.add(arguments[i]);
+
+               mc.insertBefore(msg, mc.firstElementChild);
+
+               return msg;
+       },
+
        /* Widget helper */
        itemlist: function(node, items, separators) {
                var children = [];