Let CSS update UI for touch and connected state

Avoid a lot of JavaScript code that can easily be handed using
style sheets instead, specifically items that should only be shown
when on a touch device, or items that depend on the connected state.

diff --git a/app/styles/base.css b/app/styles/base.css
index a462eae6bbf1c5711302ee308a555b6d3c56f305..ed77c6b96b402770b9b0a6247595ffdd0c704252 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -222,11 +222,18 @@ input[type=button]:active, select:active {
   float: right;
 }
 
+:root:not(.noVNC_connected) #noVNC_view_drag_button {
+  display: none;
+}
+
 /* noVNC Touch Device only buttons */
 #noVNC_mobile_buttons {
   display: inline;
 }
-#noVNC_mobile_buttons.noVNC_hidden {
+:root:not(.noVNC_connected) #noVNC_mobile_buttons {
+  display: none;
+}
+:root:not(.noVNC_touch) #noVNC_mobile_buttons {
   display: none;
 }
 
@@ -242,7 +249,7 @@ input[type=button]:active, select:active {
   ime-mode: disabled;
 }
 
-#noVNC_toggle_extra_keys_button {
+:root:not(.noVNC_connected) #noVNC_extra_keys {
   display: none;
 }
 
@@ -280,7 +287,15 @@ input[type=button]:active, select:active {
   padding-left: 10px;
 }
 
+/* Send Ctrl+Alt+Delete */
+:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button {
+  display: none;
+}
+
 /* XVP Shutdown/Reboot */
+:root:not(.noVNC_connected) #noVNC_xvp_button {
+  display: none;
+}
 #noVNC_xvp {
 }
 #noVNC_xvp_buttons {
@@ -288,6 +303,9 @@ input[type=button]:active, select:active {
 }
 
 /* Clipboard */
+:root:not(.noVNC_connected) #noVNC_clipboard_button {
+  display: none;
+}
 #noVNC_clipboard {
 }
 #noVNC_clipboard_text {
@@ -307,7 +325,11 @@ input[type=button]:active, select:active {
 }
 
 /* Connection Controls */
-#noVNC_connect_controls {
+:root.noVNC_connected #noVNC_connect_controls_button {
+  display: none;
+}
+:root:not(.noVNC_connected) #noVNC_disconnect_button {
+  display: none;
 }
 #noVNC_connect_controls ul {
   list-style: none;
@@ -440,7 +462,7 @@ input[type=button]:active, select:active {
   width: auto;
   height: auto;
 }
-#noVNC_screen.noVNC_hidden {
+:root:not(.noVNC_connected) #noVNC_screen {
   display: none;
 }
 
@@ -480,7 +502,7 @@ input[type=button]:active, select:active {
       -1px 1px 0 #000,
        1px 1px 0 #000;
 }
-#noVNC_logo.noVNC_hidden {
+:root.noVNC_connected #noVNC_logo {
   display: none;
 }
 

diff --git a/app/ui.js b/app/ui.js
index 4b34e2436ef176a1465840a65829a1af86d0a3cb..6c09e150c02a29885f13f11fa7a0038878892390 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -66,12 +66,9 @@ var UI;
 
             UI.initSettings();
 
-            // Show mouse selector buttons on touch screen devices
+            // Adapt the interface for touch screen devices
             if (UI.isTouchDevice) {
-                // Show mobile buttons
-                document.getElementById('noVNC_mobile_buttons')
-                    .classList.remove("noVNC_hidden");
-                UI.hideMouseButton();
+                document.documentElement.classList.add("noVNC_touch");
                 // Remove the address bar
                 setTimeout(function() { window.scrollTo(0, 1); }, 100);
                 UI.forceSetting('clip', true);
@@ -368,34 +365,11 @@ var UI;
             document.getElementById('noVNC_setting_repeaterID').disabled = connected;
 
             if (connected) {
-                document.getElementById('noVNC_logo')
-                    .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_screen')
-                    .classList.remove("noVNC_hidden");
+                document.documentElement.classList.add("noVNC_connected");
                 UI.updateViewClip();
                 UI.setMouseButton(1);
-                document.getElementById('noVNC_clipboard_button')
-                    .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_keyboard_button')
-                    .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_extra_keys')
-                    .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_send_ctrl_alt_del_button')
-                    .classList.remove("noVNC_hidden");
             } else {
-                document.getElementById('noVNC_logo')
-                    .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_screen')
-                    .classList.add("noVNC_hidden");
-                UI.hideMouseButton();
-                document.getElementById('noVNC_clipboard_button')
-                    .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_keyboard_button')
-                    .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_extra_keys')
-                    .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_send_ctrl_alt_del_button')
-                    .classList.add("noVNC_hidden");
+                document.documentElement.classList.remove("noVNC_connected");
                 UI.updateXvpButton(0);
             }
 
@@ -411,23 +385,11 @@ var UI;
                 case 'fatal':
                 case 'failed':
                 case 'disconnected':
-                    document.getElementById('noVNC_connect_controls_button')
-                        .classList.remove("noVNC_hidden");
-                    document.getElementById('noVNC_disconnect_button')
-                        .classList.add("noVNC_hidden");
                     UI.openConnectPanel();
                     break;
                 case 'loaded':
-                    document.getElementById('noVNC_connect_controls_button')
-                        .classList.remove("noVNC_hidden");
-                    document.getElementById('noVNC_disconnect_button')
-                        .classList.add("noVNC_hidden");
                     break;
                 default:
-                    document.getElementById('noVNC_connect_controls_button')
-                        .classList.add("noVNC_hidden");
-                    document.getElementById('noVNC_disconnect_button')
-                        .classList.remove("noVNC_hidden");
                     break;
             }
 
@@ -1086,52 +1048,48 @@ var UI;
         updateViewDrag: function() {
             var clipping = false;
 
+            if (UI.rfb_state !== 'normal') return;
+
             // Check if viewport drag is possible. It is only possible
             // if the remote display is clipping the client display.
-            if (UI.rfb_state === 'normal' &&
-                UI.rfb.get_display().get_viewport() &&
+            if (UI.rfb.get_display().get_viewport() &&
                 UI.rfb.get_display().clippingDisplay()) {
                 clipping = true;
             }
 
             var viewDragButton = document.getElementById('noVNC_view_drag_button');
 
-            if (UI.rfb_state !== 'normal') {
-                // Always hide when not connected
-                viewDragButton.classList.add("noVNC_hidden");
+            if (!clipping &&
+                UI.rfb.get_viewportDrag()) {
+                // The size of the remote display is the same or smaller
+                // than the client display. Make sure viewport drag isn't
+                // active when it can't be used.
+                UI.rfb.set_viewportDrag(false);
+            }
+
+            if (UI.rfb.get_viewportDrag()) {
+                viewDragButton.classList.add("noVNC_selected");
             } else {
-                if (!clipping &&
-                    UI.rfb.get_viewportDrag()) {
-                    // The size of the remote display is the same or smaller
-                    // than the client display. Make sure viewport drag isn't
-                    // active when it can't be used.
-                    UI.rfb.set_viewportDrag(false);
-                }
+                viewDragButton.classList.remove("noVNC_selected");
+            }
 
-                if (UI.rfb.get_viewportDrag()) {
-                    viewDragButton.classList.add("noVNC_selected");
+            // Different behaviour for touch vs non-touch
+            // The button is disabled instead of hidden on touch devices
+            if (UI.isTouchDevice) {
+                viewDragButton.classList.remove("noVNC_hidden");
+
+                if (clipping) {
+                    viewDragButton.disabled = false;
                 } else {
-                    viewDragButton.classList.remove("noVNC_selected");
+                    viewDragButton.disabled = true;
                 }
+            } else {
+                viewDragButton.disabled = false;
 
-                // Different behaviour for touch vs non-touch
-                // The button is disabled instead of hidden on touch devices
-                if (UI.isTouchDevice) {
+                if (clipping) {
                     viewDragButton.classList.remove("noVNC_hidden");
-
-                    if (clipping) {
-                        viewDragButton.disabled = false;
-                    } else {
-                        viewDragButton.disabled = true;
-                    }
                 } else {
-                    viewDragButton.disabled = false;
-
-                    if (clipping) {
-                        viewDragButton.classList.remove("noVNC_hidden");
-                    } else {
-                        viewDragButton.classList.add("noVNC_hidden");
-                    }
+                    viewDragButton.classList.add("noVNC_hidden");
                 }
             }
         },
@@ -1329,10 +1287,6 @@ var UI;
  *     MISC
  * ------v------*/
 
-        hideMouseButton: function() {
-            UI.setMouseButton(-1);
-        },
-
         setMouseButton: function(num) {
             if (UI.rfb) {
                 UI.rfb.get_mouse().set_touchButton(num);

diff --git a/vnc.html b/vnc.html
index 9a6aa29b3dd70ba0e802ba95c68bf506b9ee6224..8b68ff503e52bc1f6e52bc8955ee389cde9dcf7d 100644 (file)
--- a/vnc.html
+++ b/vnc.html
@@ -60,7 +60,7 @@
                 title="Move/Drag Viewport" />
 
             <!--noVNC Touch Device only buttons-->
-            <div id="noVNC_mobile_buttons" class="noVNC_hidden">
+            <div id="noVNC_mobile_buttons">
                 <input type="image" alt="No mousebutton" src="app/images/mouse_none.svg"
                     id="noVNC_mouse_button0" class="noVNC_button" />
                 <input type="image" alt="Left mousebutton" src="app/images/mouse_left.svg"
@@ -199,7 +199,7 @@
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
 
         <!-- HTML5 Canvas -->
-        <div id="noVNC_screen" class="noVNC_hidden">
+        <div id="noVNC_screen">
             <!-- Note that Google Chrome on Android doesn't respect any of these,
                  html attributes which attempt to disable text suggestions on the
                  on-screen keyboard. Let's hope Chrome implements the ime-mode