Basic touch event support in GLUT for mobile browsers.

2 files changed, 35 insertions, 8 deletions

diff --git a/src/library_browser.js b/src/library_browser.js
index 0db2cc44..2b69e5d9 100644
--- a/src/library_browser.js
+++ b/src/library_browser.js
@@ -446,8 +446,21 @@ mergeInto(LibraryManager.library, {
         // Otherwise, calculate the movement based on the changes
         // in the coordinates.
         var rect = Module["canvas"].getBoundingClientRect();
-        var x = event.pageX - (window.scrollX + rect.left);
-        var y = event.pageY - (window.scrollY + rect.top);
+        var x, y;
+        if (event.type == 'touchstart' ||
+            event.type == 'touchend' ||
+            event.type == 'touchmove') {
+          var t = event.touches.item(0);
+          if (t) {
+            x = t.pageX - (window.scrollX + rect.left);
+            y = t.pageY - (window.scrollY + rect.top);
+          } else {
+            return;
+          }
+        } else {
+          x = event.pageX - (window.scrollX + rect.left);
+          y = event.pageY - (window.scrollY + rect.top);
+        }
 
         // the canvas might be CSS-scaled compared to its backbuffer;
         // SDL-using content will want mouse coordinates in terms
diff --git a/src/library_glut.js b/src/library_glut.js
index 36d47787..24474df0 100644
--- a/src/library_glut.js
+++ b/src/library_glut.js
@@ -267,11 +267,19 @@ var LibraryGLUT = {
     // Ignore arguments
     GLUT.initTime = Date.now();
 
+    var isTouchDevice = 'ontouchstart' in document.documentElement;
+
     window.addEventListener("keydown", GLUT.onKeydown, true);
     window.addEventListener("keyup", GLUT.onKeyup, true);
-    window.addEventListener("mousemove", GLUT.onMousemove, true);
-    window.addEventListener("mousedown", GLUT.onMouseButtonDown, true);
-    window.addEventListener("mouseup", GLUT.onMouseButtonUp, true);
+    if (isTouchDevice) {
+      window.addEventListener("touchmove", GLUT.onMousemove, true);
+      window.addEventListener("touchstart", GLUT.onMouseButtonDown, true);
+      window.addEventListener("touchend", GLUT.onMouseButtonUp, true);
+    } else {
+      window.addEventListener("mousemove", GLUT.onMousemove, true);
+      window.addEventListener("mousedown", GLUT.onMouseButtonDown, true);
+      window.addEventListener("mouseup", GLUT.onMouseButtonUp, true);
+    }
     
     Browser.resizeListeners.push(function(width, height) {
       if (GLUT.reshapeFunc) {
@@ -282,9 +290,15 @@ var LibraryGLUT = {
     __ATEXIT__.push({ func: function() {
       window.removeEventListener("keydown", GLUT.onKeydown, true);
       window.removeEventListener("keyup", GLUT.onKeyup, true);
-      window.removeEventListener("mousemove", GLUT.onMousemove, true);
-      window.removeEventListener("mousedown", GLUT.onMouseButtonDown, true);
-      window.removeEventListener("mouseup", GLUT.onMouseButtonUp, true);
+      if (isTouchDevice) {
+        window.removeEventListener("touchmove", GLUT.onMousemove, true);
+        window.removeEventListener("touchstart", GLUT.onMouseButtonDown, true);
+        window.removeEventListener("touchend", GLUT.onMouseButtonUp, true);
+      } else {
+        window.removeEventListener("mousemove", GLUT.onMousemove, true);
+        window.removeEventListener("mousedown", GLUT.onMouseButtonDown, true);
+        window.removeEventListener("mouseup", GLUT.onMouseButtonUp, true);
+      }
       Module["canvas"].width = Module["canvas"].height = 1;
     } });
   },