]> git.proxmox.com Git - mirror_novnc.git/blobdiff - app/ui.js
Uncomment ES6 module syntax
[mirror_novnc.git] / app / ui.js
index e2a2b3d13554d4acbb3aef120e835b516e6eccb2..8009c3825fcdea20305597b7bdcb14f1a0097f11 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
 /* jslint white: false, browser: true */
 /* global window, document.getElementById, Util, WebUtil, RFB, Display */
 
-/* [module]
- * import Util from "../core/util";
- * import KeyTable from "../core/input/keysym";
- * import keysyms from "./keysymdef";
- * import RFB from "../core/rfb";
- * import Display from "../core/display";
- * import WebUtil from "./webutil";
- */
+import Util from "../core/util.js";
+import KeyTable from "../core/input/keysym.js";
+import keysyms from "../core/input/keysymdef.js";
+import RFB from "../core/rfb.js";
+import Display from "../core/display.js";
+import WebUtil from "./webutil.js";
 
 var UI;
 
@@ -73,16 +71,6 @@ var UI;
             {'app': ["locale/" + Util.Localisation.language + ".js"]});
     }
 
-    /* [begin skip-as-module] */
-    // Load supporting scripts
-    WebUtil.load_scripts(
-        {'core': ["base64.js", "websock.js", "des.js", "input/keysymdef.js",
-                  "input/xtscancodes.js", "input/util.js", "input/devices.js",
-                  "display.js", "inflator.js", "rfb.js", "input/keysym.js"]});
-
-    window.onscriptsload = function () { UI.load(); };
-    /* [end skip-as-module] */
-
     var _ = Util.Localisation.get;
 
     UI = {
@@ -233,6 +221,29 @@ var UI;
             UI.initSetting('repeaterID', '');
             UI.initSetting('reconnect', false);
             UI.initSetting('reconnect_delay', 5000);
+
+            UI.setupSettingLabels();
+        },
+
+        // Adds a link to the label elements on the corresponding input elements
+        setupSettingLabels: function() {
+            var labels = document.getElementsByTagName('LABEL');
+            for (var i = 0; i < labels.length; i++) {
+                var htmlFor = labels[i].htmlFor;
+                if (htmlFor != '') {
+                    var elem = document.getElementById(htmlFor);
+                    if (elem) elem.label = labels[i];
+                } else {
+                    // If 'for' isn't set, use the first input element child
+                    var children = labels[i].children;
+                    for (var j = 0; j < children.length; j++) {
+                        if (children[j].form !== undefined) {
+                            children[j].label = labels[i];
+                            break;
+                        }
+                    }
+                }
+            }
         },
 
         initRFB: function() {
@@ -417,6 +428,7 @@ var UI;
             UI.addSettingChangeHandler('encrypt');
             UI.addSettingChangeHandler('true_color');
             UI.addSettingChangeHandler('cursor');
+            UI.addSettingChangeHandler('cursor', UI.updateLocalCursor);
             UI.addSettingChangeHandler('resize');
             UI.addSettingChangeHandler('resize', UI.enableDisableViewClip);
             UI.addSettingChangeHandler('resize', UI.applyResizeMode);
@@ -496,31 +508,36 @@ var UI;
         // Disable/enable controls depending on connection state
         updateVisualState: function() {
             //Util.Debug(">> updateVisualState");
-            document.getElementById('noVNC_setting_encrypt').disabled = UI.connected;
-            document.getElementById('noVNC_setting_true_color').disabled = UI.connected;
-            if (Util.browserSupportsCursorURIs()) {
-                document.getElementById('noVNC_setting_cursor').disabled = UI.connected;
-            } else {
-                UI.updateSetting('cursor', !Util.isTouchDevice);
-                document.getElementById('noVNC_setting_cursor').disabled = true;
-            }
 
             UI.enableDisableViewClip();
-            document.getElementById('noVNC_setting_shared').disabled = UI.connected;
-            document.getElementById('noVNC_setting_host').disabled = UI.connected;
-            document.getElementById('noVNC_setting_port').disabled = UI.connected;
-            document.getElementById('noVNC_setting_path').disabled = UI.connected;
-            document.getElementById('noVNC_setting_repeaterID').disabled = UI.connected;
-            document.getElementById('noVNC_setting_reconnect').disabled = UI.connected;
-            document.getElementById('noVNC_setting_reconnect_delay').disabled = UI.connected;
+
+            if (Util.browserSupportsCursorURIs() && !Util.isTouchDevice) {
+                UI.enableSetting('cursor');
+            } else {
+                UI.disableSetting('cursor');
+            }
 
             if (UI.connected) {
+                UI.disableSetting('encrypt');
+                UI.disableSetting('true_color');
+                UI.disableSetting('shared');
+                UI.disableSetting('host');
+                UI.disableSetting('port');
+                UI.disableSetting('path');
+                UI.disableSetting('repeaterID');
                 UI.updateViewClip();
                 UI.setMouseButton(1);
 
                 // Hide the controlbar after 2 seconds
                 UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
             } else {
+                UI.enableSetting('encrypt');
+                UI.enableSetting('true_color');
+                UI.enableSetting('shared');
+                UI.enableSetting('host');
+                UI.enableSetting('port');
+                UI.enableSetting('path');
+                UI.enableSetting('repeaterID');
                 UI.updateXvpButton(0);
                 UI.keepControlbar();
             }
@@ -861,6 +878,21 @@ var UI;
             return val;
         },
 
+        // These helpers compensate for the lack of parent-selectors and
+        // previous-sibling-selectors in CSS which are needed when we want to
+        // disable the labels that belong to disabled input elements.
+        disableSetting: function(name) {
+            var ctrl = document.getElementById('noVNC_setting_' + name);
+            ctrl.disabled = true;
+            ctrl.label.classList.add('noVNC_disabled');
+        },
+
+        enableSetting: function(name) {
+            var ctrl = document.getElementById('noVNC_setting_' + name);
+            ctrl.disabled = false;
+            ctrl.label.classList.remove('noVNC_disabled');
+        },
+
 /* ------^-------
  *   /SETTINGS
  * ==============
@@ -891,7 +923,7 @@ var UI;
                 UI.updateSetting('cursor');
             } else {
                 UI.updateSetting('cursor', !Util.isTouchDevice);
-                document.getElementById('noVNC_setting_cursor').disabled = true;
+                UI.disableSetting('cursor');
             }
             UI.updateSetting('clip');
             UI.updateSetting('resize');
@@ -1063,10 +1095,10 @@ var UI;
 
             UI.rfb.set_encrypt(UI.getSetting('encrypt'));
             UI.rfb.set_true_color(UI.getSetting('true_color'));
-            UI.rfb.set_local_cursor(UI.getSetting('cursor'));
             UI.rfb.set_shared(UI.getSetting('shared'));
             UI.rfb.set_repeaterID(UI.getSetting('repeaterID'));
 
+            UI.updateLocalCursor();
             UI.updateViewOnly();
 
             UI.rfb.connect(host, port, password, path);
@@ -1316,12 +1348,12 @@ var UI;
         // Handle special cases where clipping is forced on/off or locked
         enableDisableViewClip: function() {
             var resizeSetting = UI.getSetting('resize');
-            if (resizeSetting === 'downscale' || resizeSetting === 'scale') {
-                // Disable clipping if we are scaling
-                document.getElementById('noVNC_setting_clip').disabled = true;
+            // Disable clipping if we are scaling, connected or on touch
+            if (resizeSetting === 'downscale' || resizeSetting === 'scale' ||
+                Util.isTouchDevice) {
+                UI.disableSetting('clip');
             } else {
-                document.getElementById('noVNC_setting_clip').disabled =
-                    Util.isTouchDevice;
+                UI.enableSetting('clip');
             }
         },
 
@@ -1656,6 +1688,10 @@ var UI;
             }
         },
 
+        updateLocalCursor: function() {
+            UI.rfb.set_local_cursor(UI.getSetting('cursor'));
+        },
+
         updateViewOnly: function() {
             UI.rfb.set_view_only(UI.getSetting('view_only'));
         },
@@ -1707,7 +1743,7 @@ var UI;
  */
     };
 
-    /* [module] UI.load(); */
+    UI.load();
 })();
 
-/* [module] export default UI; */
+export default UI;