Merge pull request #687 from CendioOssman/info

Improve info and error icons

diff --git a/app/styles/base.css b/app/styles/base.css
index bd1d50510a064f3e516b6d028122061690911be9..cb9109868d1801cd79c3ea6ac7afc33cc5e32858 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -527,6 +527,7 @@ input[type=button]:active, select:active {
  * scaling will occur. Canvas size depends on remote VNC
  * settings and noVNC settings. */
 #noVNC_canvas {
+  touch-action: none;
   position: absolute;
   left: 0;
   right: 0;

diff --git a/app/ui.js b/app/ui.js
index 52078856b128c0ae4144091daa1afa338480e1af..e235c0c1759c16c1bf7a17fa1def5e7bfa239a2e 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -51,7 +51,6 @@ var UI;
         controlbarMouseDownOffsetY: 0,
         keyboardVisible: false,
 
-        isTouchDevice: false,
         isSafari: false,
         rememberedClipSetting: null,
         lastKeyboardinput: null,
@@ -67,14 +66,13 @@ var UI;
         start: function(callback) {
 
             // Setup global variables first
-            UI.isTouchDevice = 'ontouchstart' in document.documentElement;
             UI.isSafari = (navigator.userAgent.indexOf('Safari') !== -1 &&
                            navigator.userAgent.indexOf('Chrome') === -1);
 
             UI.initSettings();
 
             // Adapt the interface for touch screen devices
-            if (UI.isTouchDevice) {
+            if (Util.isTouchDevice) {
                 document.documentElement.classList.add("noVNC_touch");
                 // Remove the address bar
                 setTimeout(function() { window.scrollTo(0, 1); }, 100);
@@ -160,7 +158,7 @@ var UI;
             UI.initSetting('password', '');
             UI.initSetting('encrypt', (window.location.protocol === "https:"));
             UI.initSetting('true_color', true);
-            UI.initSetting('cursor', !UI.isTouchDevice);
+            UI.initSetting('cursor', !Util.isTouchDevice);
             UI.initSetting('resize', 'off');
             UI.initSetting('shared', true);
             UI.initSetting('view_only', false);
@@ -400,7 +398,7 @@ var UI;
             if (Util.browserSupportsCursorURIs()) {
                 document.getElementById('noVNC_setting_cursor').disabled = UI.connected;
             } else {
-                UI.updateSetting('cursor', !UI.isTouchDevice);
+                UI.updateSetting('cursor', !Util.isTouchDevice);
                 document.getElementById('noVNC_setting_cursor').disabled = true;
             }
 
@@ -549,37 +547,49 @@ var UI;
         },
 
         // Move the handle but don't allow any position outside the bounds
-        moveControlbarHandle: function (posY) {
+        moveControlbarHandle: function (viewportRelativeY) {
             var handle = document.getElementById("noVNC_control_bar_handle");
-            var handleHeight = Util.getPosition(handle).height;
-            var controlbar = document.getElementById("noVNC_control_bar");
-            var controlbarBounds = Util.getPosition(controlbar);
-            var controlbarTop = controlbarBounds.y;
-            var controlbarBottom = controlbarBounds.y + controlbarBounds.height;
+            var handleHeight = handle.getBoundingClientRect().height;
+            var controlbarBounds = document.getElementById("noVNC_control_bar")
+                .getBoundingClientRect();
             var margin = 10;
 
-            var viewportY = posY;
+            // These heights need to be non-zero for the below logic to work
+            if (handleHeight === 0 || controlbarBounds.height === 0) {
+                return;
+            }
+
+            var newY = viewportRelativeY;
+
+            // Check if the coordinates are outside the control bar
+            if (newY < controlbarBounds.top + margin) {
+                // Force coordinates to be below the top of the control bar
+                newY = controlbarBounds.top + margin;
 
-            // Refuse coordinates outside the control bar
-            if (viewportY < controlbarTop + margin) {
-                viewportY = controlbarTop + margin;
-            } else if (viewportY > controlbarBottom - handleHeight - margin) {
-                viewportY = controlbarBottom - handleHeight - margin;
+            } else if (newY > controlbarBounds.top +
+                       controlbarBounds.height - handleHeight - margin) {
+                // Force coordinates to be above the bottom of the control bar
+                newY = controlbarBounds.top +
+                    controlbarBounds.height - handleHeight - margin;
             }
 
             // Corner case: control bar too small for stable position
             if (controlbarBounds.height < (handleHeight + margin * 2)) {
-                viewportY = controlbarTop + (controlbarBounds.height - handleHeight) / 2;
+                newY = controlbarBounds.top +
+                    (controlbarBounds.height - handleHeight) / 2;
             }
 
-            var relativeY = viewportY - controlbarTop;
-            handle.style.transform = "translateY(" + relativeY + "px)";
+            // The transform needs coordinates that are relative to the parent
+            var parentRelativeY = newY - controlbarBounds.top;
+            handle.style.transform = "translateY(" + parentRelativeY + "px)";
         },
 
         updateControlbarHandle: function () {
+            // Since the control bar is fixed on the viewport and not the page,
+            // the move function expects coordinates relative the the viewport.
             var handle = document.getElementById("noVNC_control_bar_handle");
-            var pos = Util.getPosition(handle);
-            UI.moveControlbarHandle(pos.y);
+            var handleBounds = handle.getBoundingClientRect();
+            UI.moveControlbarHandle(handleBounds.top);
         },
 
         controlbarHandleMouseUp: function(e) {
@@ -757,7 +767,7 @@ var UI;
             if (Util.browserSupportsCursorURIs()) {
                 UI.updateSetting('cursor');
             } else {
-                UI.updateSetting('cursor', !UI.isTouchDevice);
+                UI.updateSetting('cursor', !Util.isTouchDevice);
                 document.getElementById('noVNC_setting_cursor').disabled = true;
             }
             UI.updateSetting('clip');
@@ -1207,15 +1217,16 @@ var UI;
                 UI.rememberedClipSetting = UI.getSetting('clip');
                 UI.setViewClip(true);
                 document.getElementById('noVNC_setting_clip').disabled = true;
-            } else if (document.body.msRequestFullscreen && UI.rememberedClip !== null) {
+            } else if (document.body.msRequestFullscreen &&
+                       UI.rememberedClipSetting !== null) {
                 // Restore view clip to what it was before fullscreen on IE
                 UI.setViewClip(UI.rememberedClipSetting);
                 document.getElementById('noVNC_setting_clip').disabled =
-                    UI.connected || UI.isTouchDevice;
+                    UI.connected || Util.isTouchDevice;
             } else {
                 document.getElementById('noVNC_setting_clip').disabled =
-                    UI.connected || UI.isTouchDevice;
-                if (UI.isTouchDevice) {
+                    UI.connected || Util.isTouchDevice;
+                if (Util.isTouchDevice) {
                     UI.setViewClip(true);
                 }
             }
@@ -1273,7 +1284,7 @@ var UI;
 
             // Different behaviour for touch vs non-touch
             // The button is disabled instead of hidden on touch devices
-            if (UI.isTouchDevice) {
+            if (Util.isTouchDevice) {
                 viewDragButton.classList.remove("noVNC_hidden");
 
                 if (clipping) {
@@ -1299,7 +1310,7 @@ var UI;
  * ------v------*/
 
         showVirtualKeyboard: function() {
-            if (!UI.isTouchDevice) return;
+            if (!Util.isTouchDevice) return;
 
             var input = document.getElementById('noVNC_keyboardinput');
 
@@ -1318,7 +1329,7 @@ var UI;
         },
 
         hideVirtualKeyboard: function() {
-            if (!UI.isTouchDevice) return;
+            if (!Util.isTouchDevice) return;
 
             var input = document.getElementById('noVNC_keyboardinput');
 

diff --git a/core/input/devices.js b/core/input/devices.js
index d283fc4e77fc25531526554b4bef521ad9a2ad03..c81fddf7acf58c615ea72e80d363bdb65950a628 100644 (file)
--- a/core/input/devices.js
+++ b/core/input/devices.js
@@ -346,19 +346,18 @@
         grab: function () {
             var c = this._target;
 
-            if ('ontouchstart' in document.documentElement) {
+            if (Util.isTouchDevice) {
                 c.addEventListener('touchstart', this._eventHandlers.mousedown);
                 window.addEventListener('touchend', this._eventHandlers.mouseup);
                 c.addEventListener('touchend', this._eventHandlers.mouseup);
                 c.addEventListener('touchmove', this._eventHandlers.mousemove);
-            } else {
-                c.addEventListener('mousedown', this._eventHandlers.mousedown);
-                window.addEventListener('mouseup', this._eventHandlers.mouseup);
-                c.addEventListener('mouseup', this._eventHandlers.mouseup);
-                c.addEventListener('mousemove', this._eventHandlers.mousemove);
-                c.addEventListener((Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
-                              this._eventHandlers.mousewheel);
             }
+            c.addEventListener('mousedown', this._eventHandlers.mousedown);
+            window.addEventListener('mouseup', this._eventHandlers.mouseup);
+            c.addEventListener('mouseup', this._eventHandlers.mouseup);
+            c.addEventListener('mousemove', this._eventHandlers.mousemove);
+            c.addEventListener((Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
+                               this._eventHandlers.mousewheel);
 
             /* Work around right and middle click browser behaviors */
             document.addEventListener('click', this._eventHandlers.mousedisable);
@@ -368,19 +367,18 @@
         ungrab: function () {
             var c = this._target;
 
-            if ('ontouchstart' in document.documentElement) {
+            if (Util.isTouchDevice) {
                 c.removeEventListener('touchstart', this._eventHandlers.mousedown);
                 window.removeEventListener('touchend', this._eventHandlers.mouseup);
                 c.removeEventListener('touchend', this._eventHandlers.mouseup);
                 c.removeEventListener('touchmove', this._eventHandlers.mousemove);
-            } else {
-                c.removeEventListener('mousedown', this._eventHandlers.mousedown);
-                window.removeEventListener('mouseup', this._eventHandlers.mouseup);
-                c.removeEventListener('mouseup', this._eventHandlers.mouseup);
-                c.removeEventListener('mousemove', this._eventHandlers.mousemove);
-                c.removeEventListener((Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
-                                 this._eventHandlers.mousewheel);
             }
+            c.removeEventListener('mousedown', this._eventHandlers.mousedown);
+            window.removeEventListener('mouseup', this._eventHandlers.mouseup);
+            c.removeEventListener('mouseup', this._eventHandlers.mouseup);
+            c.removeEventListener('mousemove', this._eventHandlers.mousemove);
+            c.removeEventListener((Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
+                                  this._eventHandlers.mousewheel);
 
             /* Work around right and middle click browser behaviors */
             document.removeEventListener('click', this._eventHandlers.mousedisable);

diff --git a/core/util.js b/core/util.js
index 058b402394651c3f53122f7e5e8de01bf8bdce7b..e34f5d8812b6825a85408dae6c8ca5dc9eb7454a 100644 (file)
--- a/core/util.js
+++ b/core/util.js
@@ -241,6 +241,18 @@ Util.stopEvent = function (e) {
     e.preventDefault();
 };
 
+// Touch detection
+Util.isTouchDevice = ('ontouchstart' in document.documentElement) ||
+                     // requried for Chrome debugger
+                     (document.ontouchstart !== undefined) ||
+                     // required for MS Surface
+                     (navigator.maxTouchPoints > 0) ||
+                     (navigator.msMaxTouchPoints > 0);
+window.addEventListener('touchstart', function onFirstTouch() {
+    Util.isTouchDevice = true;
+    window.removeEventListener('touchstart', onFirstTouch, false);
+}, false);
+
 Util._cursor_uris_supported = null;
 
 Util.browserSupportsCursorURIs = function () {

diff --git a/tests/input.html b/tests/input.html
index a261924b6370b5db7fb412dc728aa89247b8339b..437d6f33c8244b2b8d0a0b4245d8a1515b4cd0e5 100644 (file)
--- a/tests/input.html
+++ b/tests/input.html
@@ -119,7 +119,7 @@
             mouse.grab();
             message("Display initialized");
 
-            if ('ontouchstart' in document.documentElement) {
+            if (Util.isTouchDevice) {
                 message("Touch device detected");
                 document.getElementById('button-selection').style.display = "inline";
                 document.getElementById('button1').onclick = function(){ selectButton(1) };