luci-base: ui: implement addTimeLimitedNotification

Introduce addTimeLimitedNotification which extends addNotification,
with the addition of the 'timeout' parameter.

timeout: a millisecond value after which the notification will disappear
automatically. If omitted, the notification will remain until it
receives the click event.

Improved implementation of 53e36e3293bee2ea2ce0fbc1250074c44cfe8335

Signed-off-by: Paul Donald <[email protected]>

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 10705c1c2842e0f8b7ef6c86f47a4c6a2076f401..83f28b320f3fd5d2314d0d7d737ebcf5de84d14f 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -3891,6 +3891,64 @@ const UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
                return msg;
        },
 
+       /**
+        * Add a time-limited notification banner at the top of the current view.
+        *
+        * A notification banner is an alert message usually displayed at the
+        * top of the current view, spanning the entire available width.
+        * Notification banners will stay in place until dismissed by the user, or
+        * it has expired.
+        * Multiple banners may be shown at the same time.
+        *
+        * Additional CSS class names may be passed to influence the appearance of
+        * the banner. Valid values for the classes depend on the underlying theme.
+        *
+        * @see LuCI.dom.content
+        *
+        * @param {string} [title]
+        * The title of the notification banner. If `null`, no title element
+        * will be rendered.
+        *
+        * @param {*} children
+        * The contents to add to the notification banner. This should be a DOM
+        * node or a document fragment in most cases. The value is passed as-is
+        * to the `dom.content()` function - refer to its documentation for
+        * applicable values.
+        * 
+        * @param {int} [timeout]
+        * A millisecond value after which the notification will disappear
+        * automatically. If omitted, the notification will remain until it receives
+        * the click event.
+        *
+        * @param {...string} [classes]
+        * A number of extra CSS class names which are set on the notification
+        * banner element.
+        *
+        * @returns {Node}
+        * Returns a DOM Node representing the notification banner element.
+        */
+       addTimeLimitedNotification(title, children, timeout, ...classes) {
+               const msg = this.addNotification(title, children, ...classes);
+
+               function fadeOutNotification(element) {
+                       if (element) {
+                               element.classList.add('fade-out');
+                               element.classList.remove('fade-in');
+                               setTimeout(() => {
+                                       if (element.parentNode) {
+                                               element.parentNode.removeChild(element);
+                                       }
+                               });
+                       }
+               }
+
+               if (typeof timeout === 'number' && timeout > 0) {
+                       setTimeout(() => fadeOutNotification(msg), timeout);
+               }
+
+               return msg;
+       },
+
        /**
         * Display or update a header area indicator.
         *