luci-base: luci.js: convert LuCI to Class instance
authorJo-Philipp Wich <jo@mein.io>
Mon, 7 Jan 2019 13:25:20 +0000 (14:25 +0100)
committerJo-Philipp Wich <jo@mein.io>
Sun, 7 Jul 2019 13:25:49 +0000 (15:25 +0200)
Also hijack cbi_init() and call it after the LuCI DOM setup.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
modules/luci-base/htdocs/luci-static/resources/luci.js

index 5fb0bcfe79106644681c4185442562de9e90c40e..7cddc4e10d06e98f948228c26426add6157ca82a 100644 (file)
            tooltipDiv = null,
            tooltipTimeout = null,
            dummyElem = null,
-           domParser = null;
+           domParser = null,
+           originalCBIInit = null;
+
+       LuCI = Class.extend({
+               __name__: 'LuCI',
+               __init__: function(env) {
+                       Object.assign(this.env, env);
+
+                       modalDiv = document.body.appendChild(
+                               this.dom.create('div', { id: 'modal_overlay' },
+                                       this.dom.create('div', { class: 'modal', role: 'dialog', 'aria-modal': true })));
+
+                       tooltipDiv = document.body.appendChild(this.dom.create('div', { class: 'cbi-tooltip' }));
+
+                       document.addEventListener('mouseover', this.showTooltip.bind(this), true);
+                       document.addEventListener('mouseout', this.hideTooltip.bind(this), true);
+                       document.addEventListener('focus', this.showTooltip.bind(this), true);
+                       document.addEventListener('blur', this.hideTooltip.bind(this), true);
+
+                       document.addEventListener('DOMContentLoaded', this.setupDOM.bind(this));
+
+                       document.addEventListener('poll-start', function(ev) {
+                               document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) {
+                                       e.style.display = (e.id == 'xhr_poll_status_off') ? 'none' : '';
+                               });
+                       });
+
+                       document.addEventListener('poll-stop', function(ev) {
+                               document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) {
+                                       e.style.display = (e.id == 'xhr_poll_status_on') ? 'none' : '';
+                               });
+                       });
+
+                       originalCBIInit = window.cbi_init;
+                       window.cbi_init = function() {};
+               },
+
+               /* DOM setup */
+               setupDOM: function(ev) {
+                       this.tabs.init();
+
+                       Request.addInterceptor(function(res) {
+                               if (res.status != 403 || res.headers.get('X-LuCI-Login-Required') != 'yes')
+                                       return;
+
+                               Request.poll.stop();
+
+                               L.showModal(_('Session expired'), [
+                                       E('div', { class: 'alert-message warning' },
+                                               _('A new login is required since the authentication session expired.')),
+                                       E('div', { class: 'right' },
+                                               E('div', {
+                                                       class: 'btn primary',
+                                                       click: function() {
+                                                               var loc = window.location;
+                                                               window.location = loc.protocol + '//' + loc.host + loc.pathname + loc.search;
+                                                       }
+                                               }, _('To login…')))
+                               ]);
+
+                               return Promise.reject(new Error('Session expired'));
+                       });
+
+                       originalCBIInit();
+                       Request.poll.start();
+               },
+
+               env: {},
 
-       LuCI.prototype = {
                /* URL construction helpers */
                path: function(prefix, parts) {
                        var url = [ prefix || '' ];
 
                Class: Class,
                Request: Request
-       };
+       });
 
        /* Tabs */
        LuCI.prototype.tabs = {
                }
        };
 
-       /* Setup */
-       LuCI.prototype.setupDOM = function(ev) {
-               this.tabs.init();
-
-               Request.addInterceptor(function(res) {
-                       if (res.status != 403 || res.headers.get('X-LuCI-Login-Required') != 'yes')
-                               return;
-
-                       Request.poll.stop();
-
-                       L.showModal(_('Session expired'), [
-                               E('div', { class: 'alert-message warning' },
-                                       _('A new login is required since the authentication session expired.')),
-                               E('div', { class: 'right' },
-                                       E('div', {
-                                               class: 'btn primary',
-                                               click: function() {
-                                                       var loc = window.location;
-                                                       window.location = loc.protocol + '//' + loc.host + loc.pathname + loc.search;
-                                               }
-                                       }, _('To login…')))
-                       ]);
-
-                       return Promise.reject(new Error('Session expired'));
-               });
-
-               Request.poll.start();
-       };
-
-       function LuCI(env) {
-               this.env = env;
-
-               modalDiv = document.body.appendChild(
-                       this.dom.create('div', { id: 'modal_overlay' },
-                               this.dom.create('div', { class: 'modal', role: 'dialog', 'aria-modal': true })));
-
-               tooltipDiv = document.body.appendChild(this.dom.create('div', { class: 'cbi-tooltip' }));
-
-               document.addEventListener('mouseover', this.showTooltip.bind(this), true);
-               document.addEventListener('mouseout', this.hideTooltip.bind(this), true);
-               document.addEventListener('focus', this.showTooltip.bind(this), true);
-               document.addEventListener('blur', this.hideTooltip.bind(this), true);
-
-               document.addEventListener('poll-start', function(ev) {
-                       document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) {
-                               e.style.display = (e.id == 'xhr_poll_status_off') ? 'none' : '';
-                       });
-               });
-
-               document.addEventListener('poll-stop', function(ev) {
-                       document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) {
-                               e.style.display = (e.id == 'xhr_poll_status_on') ? 'none' : '';
-                       });
-               });
-
-               document.addEventListener('DOMContentLoaded', this.setupDOM.bind(this));
-       }
-
        XHR = Class.extend({
                __name__: 'LuCI.XHR',
                __init__: function() {