New way of detecting touchtouchdetect

Moves detection to Util and fixes so that touch is properly detected on
MS Surface and touch emulation in Chrome.

4 files changed, 25 insertions, 15 deletions

diff --git a/app/ui.js b/app/ui.js
index 5207885..ade7794 100644
--- 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;
             }
 
@@ -757,7 +755,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');
@@ -1211,11 +1209,11 @@ var UI;
                 // 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 +1271,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 +1297,7 @@ var UI;
  * ------v------*/
 
         showVirtualKeyboard: function() {
-            if (!UI.isTouchDevice) return;
+            if (!Util.isTouchDevice) return;
 
             var input = document.getElementById('noVNC_keyboardinput');
 
@@ -1318,7 +1316,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 d283fc4..e3bc741 100644
--- a/core/input/devices.js
+++ b/core/input/devices.js
@@ -346,7 +346,7 @@
         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);
@@ -368,7 +368,7 @@
         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);
diff --git a/core/util.js b/core/util.js
index 058b402..e34f5d8 100644
--- 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 a261924..437d6f3 100644
--- 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) };