From f2268d0a3c257ab22599757bfab8dc66a8166e24 Mon Sep 17 00:00:00 2001 From: Paul Donald Date: Thu, 13 Mar 2025 22:50:11 +0100 Subject: [PATCH] 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 (cherry picked from commit 0329854049facca13736e193b9e5fd4909d8e90e) --- .../htdocs/luci-static/resources/ui.js | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js index fe46265449..a7a35bc62e 100644 --- a/modules/luci-base/htdocs/luci-static/resources/ui.js +++ b/modules/luci-base/htdocs/luci-static/resources/ui.js @@ -3890,6 +3890,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. * -- 2.30.2