Merge branch 'api' of https://github.com/CendioOssman/noVNC

diff --git a/README.md b/README.md
index 93f58973310170ed9ea5af1e26db9ca43fcfd4d4..a90ee8dfb48339deebb6542558acc361f3433c1a 100644 (file)
--- a/README.md
+++ b/README.md
@@ -103,7 +103,7 @@ WebSockets to TCP socket proxy. There is a python proxy included
 
 ### Other Pages
 
-* [Modules/API](https://github.com/novnc/noVNC/wiki/Modules-API) - The library
+* [Modules/API](https://github.com/novnc/noVNC/blob/master/docs/API.md) - The library
   modules and their Javascript API.
 
 * [Integration](https://github.com/novnc/noVNC/wiki/Integration) - Get noVNC

diff --git a/app/styles/lite.css b/app/styles/lite.css
index 50f9a8227a41d737cac8b1c00debb07464182540..b7df1e39b188e864af7954de22417e7f63d16541 100644 (file)
--- a/app/styles/lite.css
+++ b/app/styles/lite.css
@@ -1,89 +1,70 @@
 /*
  * noVNC auto CSS
  * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2017 Samuel Mannehed for Cendio AB
  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
 body {
   margin:0;
-  padding:0;
-  font-family: Helvetica;
-  /*Background image with light grey curve.*/
-  background-color:#494949;
-  background-repeat:no-repeat;
-  background-position:right bottom;
+  background-color:#313131;
+  border-bottom-right-radius: 800px 600px;
   height:100%;
+  display: flex;
+  flex-direction: column;
 }
 
 html {
+  background-color:#494949;
   height:100%;
 }
 
-#noVNC_container {
-  display: table;
-  width:100%;
-  height:100%;
-  background-color:#313131;
-  border-bottom-right-radius: 800px 600px;
-  /*border-top-left-radius: 800px 600px;*/
+#noVNC_status_bar {
+  width: 100%;
+  display:flex;
+  justify-content: space-between;
 }
 
 #noVNC_status {
-  font-size: 12px;
-  padding-top: 4px;
-  height:32px;
-  text-align: center;
-  font-weight: bold;
   color: #fff;
-  z-index: 0;
-  position: absolute;
-  width: 100%;
-  margin-left: 0px;
+  font: bold 12px Helvetica;
+  margin: auto;
 }
 
 .noVNC_status_normal {
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+  background: linear-gradient(#b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
 .noVNC_status_error {
-  background: #f04040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+  background: linear-gradient(#c83737 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
 }
 
 .noVNC_status_warn {
-  background: #f0f040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+  background: linear-gradient(#b4b41e 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%);
+}
+
+.noNVC_shown {
+  display: inline;
+}
+.noVNC_hidden {
+  display: none;
+}
+
+#noVNC_left_dummy_elem {
+  flex: 1;
 }
 
 #noVNC_buttons {
-  white-space: nowrap;
+  padding: 1px;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
 }
 
 /* Do not set width/height for VNC_canvas or incorrect
  * scaling will occur. Canvas size depends on remote VNC
  * settings and noVNC settings. */
 #noVNC_canvas {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
+  margin: auto;
 }

diff --git a/app/ui.js b/app/ui.js
index 74735cce62af897cc90874b85c1c70f8557ce9c9..f661567458e17244acff64a654c8e37ce694ecbe 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -269,8 +269,6 @@ var UI = {
 
         document.documentElement
             .addEventListener('mousedown', UI.keepVirtualKeyboard, true);
-        document.documentElement
-            .addEventListener('touchstart', UI.keepVirtualKeyboard, true);
 
         document.getElementById("noVNC_control_bar")
             .addEventListener('touchstart', UI.activateControlbar);
@@ -1433,11 +1431,17 @@ var UI = {
     onfocusVirtualKeyboard: function(event) {
         document.getElementById('noVNC_keyboard_button')
             .classList.add("noVNC_selected");
+        if (UI.rfb) {
+            UI.rfb.set_focus_on_click(false);
+        }
     },
 
     onblurVirtualKeyboard: function(event) {
         document.getElementById('noVNC_keyboard_button')
             .classList.remove("noVNC_selected");
+        if (UI.rfb) {
+            UI.rfb.set_focus_on_click(true);
+        }
     },
 
     keepVirtualKeyboard: function(event) {
@@ -1465,14 +1469,7 @@ var UI = {
             }
         }
 
-        // The default action of touchstart is to generate other
-        // events, which other elements might depend on. So we can't
-        // blindly prevent that. Instead restore focus right away.
-        if (event.type === "touchstart") {
-            setTimeout(input.focus.bind(input));
-        } else {
-            event.preventDefault();
-        }
+        event.preventDefault();
     },
 
     keyboardinputReset: function() {

diff --git a/core/rfb.js b/core/rfb.js
index a3546b0029c1fd80d656b9451f4d4b5632b158c7..3d12ae4ba94825159a993fb2b18caaa705d7a7d8 100644 (file)
--- a/core/rfb.js
+++ b/core/rfb.js
@@ -138,6 +138,11 @@ export default function RFB(target, url, options) {
     this._viewportDragPos = {};
     this._viewportHasMoved = false;
 
+    // Bound event handlers
+    this._eventHandlers = {
+        focusCanvas: this._focusCanvas.bind(this),
+    };
+
     // main setup
     Log.Debug(">> RFB.constructor");
 
@@ -236,6 +241,7 @@ RFB.prototype = {
     // ===== PROPERTIES =====
 
     dragViewport: false,
+    focusOnClick: true,
 
     _viewOnly: false,
     get viewOnly() { return this._viewOnly; },
@@ -385,16 +391,16 @@ RFB.prototype = {
         }
 
         // Always grab focus on some kind of click event
-        this._target.addEventListener("mousedown", this._focusCanvas);
-        this._target.addEventListener("touchstart", this._focusCanvas);
+        this._target.addEventListener("mousedown", this._eventHandlers.focusCanvas);
+        this._target.addEventListener("touchstart", this._eventHandlers.focusCanvas);
 
         Log.Debug("<< RFB.connect");
     },
 
     _disconnect: function () {
         Log.Debug(">> RFB.disconnect");
-        this._target.removeEventListener("mousedown", this._focusCanvas);
-        this._target.removeEventListener("touchstart", this._focusCanvas);
+        this._target.removeEventListener("mousedown", this._eventHandlers.focusCanvas);
+        this._target.removeEventListener("touchstart", this._eventHandlers.focusCanvas);
         this._cleanup();
         this._sock.close();
         this._print_stats();
@@ -430,11 +436,17 @@ RFB.prototype = {
         }
     },
 
-    // Event handler for canvas so this points to the canvas element
     _focusCanvas: function(event) {
         // Respect earlier handlers' request to not do side-effects
-        if (!event.defaultPrevented)
-            this.focus();
+        if (event.defaultPrevented) {
+            return;
+        }
+
+        if (!this._focus_on_click) {
+            return;
+        }
+
+        this._target.focus();
     },
 
     /*

diff --git a/docs/API.md b/docs/API.md
index 983d73571b0483ac23a844207e3d03a7c83c699e..8f565e93cf4138b6bd285eea764bf66f1dffb6b6 100644 (file)
--- a/docs/API.md
+++ b/docs/API.md
@@ -21,6 +21,11 @@ protocol stream.
     movement) should be prevented from being sent to the server.
     Disabled by default.
 
+`focusOnClick`
+  - Is a `boolean` indicating if keyboard focus should automatically be
+    moved to the canvas when a `mousedown` or `touchstart` event is
+    received.
+
 `touchButton`
   - Is a `long` controlling the button mask that should be simulated
     when a touch event is recieved. Uses the same values as

diff --git a/vnc_lite.html b/vnc_lite.html
index 6575b4631b34d2dfa168d73d7cb4e8bb92c71acb..d817885d30fb6e4383b47b8190d7156995fdc9c6 100644 (file)
--- a/vnc_lite.html
+++ b/vnc_lite.html
@@ -5,7 +5,7 @@
     <!--
     noVNC example: lightweight example using minimal UI and features
     Copyright (C) 2012 Joel Martin
-    Copyright (C) 2013 Samuel Mannehed for Cendio AB
+    Copyright (C) 2017 Samuel Mannehed for Cendio AB
     noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 
@@ -105,9 +105,8 @@
             var html;
 
             var form = document.createElement('form');
-            form.style = 'margin-bottom: 0px';
-            form.innerHTML = '<label></label>'
-            form.innerHTML += '<input type=password size=10 id="password_input" class="noVNC_status">';
+            form.innerHTML = '<label></label>';
+            form.innerHTML += '<input type=password size=10 id="password_input">';
             form.onsubmit = setPassword;
 
             // bypass status() because it sets text content
@@ -145,7 +144,7 @@
                 default:
                     level = "warn";
             }
-            document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_" + level);
+            document.getElementById('noVNC_status_bar').className = "noVNC_status_" + level;
             document.getElementById('noVNC_status').textContent = text;
         }
         function updateState(e) {
@@ -207,13 +206,12 @@
             var powerbuttons;
             powerbuttons = document.getElementById('noVNC_power_buttons');
             if (rfb.capabilities.power) {
-                powerbuttons.style.display = 'inline';
+                xvpbuttons.className= "noVNC_shown";
             } else {
-                powerbuttons.style.display = 'none';
+                xvpbuttons.className = "noVNC_hidden";
             }
         }
 
-        document.getElementById('sendCtrlAltDelButton').style.display = "inline";
         document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
         document.getElementById('machineShutdownButton').onclick = machineShutdown;
         document.getElementById('machineRebootButton').onclick = machineReboot;
@@ -285,31 +283,26 @@
     </script>
 </head>
 
-<body style="margin: 0px;">
-    <div id="noVNC_container">
-            <div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
-                <table border=0 width="100%"><tr>
-                    <td><div id="noVNC_status" style="position: relative; height: auto;">
-                        Loading
-                    </div></td>
-                    <td width="1%"><div id="noVNC_buttons">
-                        <input type=button value="Send CtrlAltDel"
-                            id="sendCtrlAltDelButton">
-                        <span id="noVNC_power_buttons">
-                        <input type=button value="Shutdown"
-                            id="machineShutdownButton">
-                        <input type=button value="Reboot"
-                            id="machineRebootButton">
-                        <input type=button value="Reset"
-                            id="machineResetButton">
-                        </span>
-                            </div></td>
-                </tr></table>
-            </div>
-            <canvas id="noVNC_canvas" width="640px" height="20px">
-                Canvas not supported.
-            </canvas>
-        </div>
-
-    </body>
+<body>
+  <div id="noVNC_status_bar">
+    <div id="noVNC_left_dummy_elem"></div>
+    <div id="noVNC_status">Loading</div>
+    <div id="noVNC_buttons">
+      <input type=button value="Send CtrlAltDel"
+             id="sendCtrlAltDelButton" class="noVNC_shown">
+      <span id="noVNC_power_buttons" class="noVNC_hidden">
+        <input type=button value="Shutdown"
+               id="machineShutdownButton">
+        <input type=button value="Reboot"
+               id="machineRebootButton">
+        <input type=button value="Reset"
+               id="machineResetButton">
+      </span>
+    </div>
+  </div>
+  <canvas id="noVNC_canvas" width="0" height="0">
+    Canvas not supported.
+  </canvas>
+
+</body>
 </html>