Merge branch 'disableLabels' of https://github.com/samhed/noVNC

Closes pull request #776

app/styles/base.css

@@ -41,6 +41,10 @@ html {
   display: none;
 }
 
+.noVNC_disabled {
+  color: rgb(128, 128, 128);
+}
+
 /* ----------------------------------------
  * Spinner
  * ----------------------------------------
@@ -80,7 +84,8 @@ html {
  * ----------------------------------------
  */
 
-input[type=input], input[type=password], input:not([type]), textarea {
+input[type=input], input[type=password], input[type=number],
+input:not([type]), textarea {
   /* Disable default rendering */
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -138,7 +143,7 @@ input[type=submit]::-moz-focus-inner {
 
 input[type=input]:disabled, input[type=password]:disabled,
 input:not([type]):disabled, input[type=button]:disabled,
-input[type=submit]:disabled,
+input[type=submit]:disabled, input[type=number]:disabled,
 textarea:disabled, select:disabled {
   color: rgb(128, 128, 128);
   background: rgb(240, 240, 240);

app/ui.js

@@ -233,6 +233,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() {
@@ -494,32 +517,40 @@ 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_view_only').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 (UI.connected) {
+                UI.disableSetting('encrypt');
+                UI.disableSetting('true_color');
+                UI.disableSetting('cursor');
+                UI.disableSetting('shared');
+                UI.disableSetting('view_only');
+                UI.disableSetting('host');
+                UI.disableSetting('port');
+                UI.disableSetting('path');
+                UI.disableSetting('repeaterID');
+                UI.disableSetting('reconnect');
+                UI.disableSetting('reconnect_delay');
                 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');
+                if (Util.browserSupportsCursorURIs() && !Util.isTouchDevice) {
+                    UI.enableSetting('cursor');
+                }
+                UI.enableSetting('shared');
+                UI.enableSetting('view_only');
+                UI.enableSetting('host');
+                UI.enableSetting('port');
+                UI.enableSetting('path');
+                UI.enableSetting('repeaterID');
+                UI.enableSetting('reconnect');
+                UI.enableSetting('reconnect_delay');
                 UI.updateXvpButton(0);
                 UI.keepControlbar();
             }
@@ -860,6 +891,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
  * ==============
@@ -890,7 +936,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');
@@ -1314,12 +1360,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, connected or on touch
-                // Disable clipping if we are scaling
+            if (resizeSetting === 'downscale' || resizeSetting === 'scale' ||
-                document.getElementById('noVNC_setting_clip').disabled = true;
+                UI.connected || Util.isTouchDevice) {
+                UI.disableSetting('clip');
             } else {
-                document.getElementById('noVNC_setting_clip').disabled =
+                UI.enableSetting('clip');
-                    UI.connected || Util.isTouchDevice;
             }
         },
 

core/util.js

@@ -452,7 +452,7 @@ Util.Localisation = {
                 }
                 // FIXME: Should update "lang"
                 if (elem.hasAttribute("placeholder") &&
-                    isAnyOf(elem.tagName in ["INPUT", "TEXTAREA"])) {
+                    isAnyOf(elem.tagName, ["INPUT", "TEXTAREA"])) {
                     translateAttribute(elem, "placeholder");
                 }
                 if (elem.hasAttribute("title")) {

vnc.html

@@ -221,7 +221,7 @@
                                     </li>
                                     <li>
                                         <label for="noVNC_setting_port">Port:</label>
-                                        <input id="noVNC_setting_port" />
+                                        <input id="noVNC_setting_port" type="number" />
                                     </li>
                                     <li>
                                         <label for="noVNC_setting_path">Path:</label>
@@ -235,7 +235,7 @@
                             </li>
                             <li>
                                 <label for="noVNC_setting_reconnect_delay">Reconnect Delay (ms):</label>
-                                <input id="noVNC_setting_reconnect_delay" type="input" value="" />
+                                <input id="noVNC_setting_reconnect_delay" type="number" />
                             </li>
                             <li><hr></li>
                             <!-- Logging selection dropdown -->