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>

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 7cf4f4102ffeda89d2145929bbee1007e5ccd055..44585736013caf167dcc8bcbbdaf45b33aac42bf 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -2244,6 +2244,10 @@ return L.Class.extend({
                                this.setActiveTabId(panes[selected], selected);
                        }
 
+                       panes[selected].dispatchEvent(new CustomEvent('cbi-tab-active', {
+                               detail: { tab: panes[selected].getAttribute('data-tab') }
+                       }));
+
                        this.updateTabs(group);
                },
 
@@ -2354,6 +2358,7 @@ return L.Class.extend({
                                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 {