luci-base: ui.js: dispatch "cbi-tab-active" event when a tab is selected

This is useful to lazy-load tab contents.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit bf774e4c2a6a03aa01d4bcd9f5ce4f960cd91874)

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index dd5d963dd7ed8856ea99560bb3c00edbc41f09e7..2e295077fb18788549ede654c206a0fab352bdf5 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -3293,6 +3293,10 @@ return L.Class.extend(/** @lends LuCI.ui.prototype */ {
                                this.setActiveTabId(panes[selected], selected);
                        }
 
+                       panes[selected].dispatchEvent(new CustomEvent('cbi-tab-active', {
+                               detail: { tab: panes[selected].getAttribute('data-tab') }
+                       }));
+
                        this.updateTabs(group);
                },
 
@@ -3420,6 +3424,7 @@ return L.Class.extend(/** @lends LuCI.ui.prototype */ {
                                if (L.dom.matches(pane, '[data-tab]')) {
                                        if (pane.getAttribute('data-tab') === name) {
                                                pane.setAttribute('data-tab-active', 'true');
+                                               pane.dispatchEvent(new CustomEvent('cbi-tab-active', { detail: { tab: name } }));
                                                L.ui.tabs.setActiveTabId(pane, index);
                                        }
                                        else {