Add mouse position routines to util.js.

On path towards removing dependency on mootools in non-UI code.

docs/TODO

 Medium Term:
 
+- Remove mootools dependency from vnc.js and canvas.js.
+    - canvas.js deps:
+        $(), getPosition, getScroll
+
 - Implement Cursor pseudo-encoding (CSS cursor)
     http://en.wikipedia.org/wiki/ICO_(file_format)
     https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property

include/canvas.js

@@ -27,26 +27,14 @@ keyPress    : null,
 mouseButton : null,
 mouseMove   : null,
 
-
-getX: function() {
-    var c = $(Canvas.id);
-    return c.getPosition().x - document.getScroll().x;
-},
-
-getY: function() {
-    var c = $(Canvas.id);
-    return c.getPosition().y - document.getScroll().y;
-},
-
 onMouseButton: function(e, down) {
-    var evt, x, y, bmask;
+    var evt, pos, bmask;
     evt = e.event || window.event;
-    x = (evt.clientX - Canvas.getX());
-    y = (evt.clientY - Canvas.getY());
+    pos = getEventPosition(e, $(Canvas.id));
     bmask = 1 << evt.button;
-    //console.log('mouse ' + evt.which + '/' + evt.button + ' down:' + x + "," + y);
+    //console.log('mouse ' + evt.which + '/' + evt.button + ' down:' + pos.x + "," + pos.y);
     if (Canvas.mouseButton) {
-        Canvas.mouseButton(x, y, down, bmask);
+        Canvas.mouseButton(pos.x, pos.y, down, bmask);
     }
     e.stop();
     return false;
@@ -61,21 +49,19 @@ onMouseUp: function (e) {
 },
 
 onMouseWheel: function (e) {
-    var evt, x, y, bmask;
+    var evt, pos, bmask;
     evt = e.event || window.event;
-    //e = e ? e : window.event;
-    x = (evt.clientX - Canvas.getX());
-    y = (evt.clientY - Canvas.getY());
+    pos = getEventPosition(e, $(Canvas.id));
     var wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
     if (wheelData > 0) {
         bmask = 1 << 3;
     } else {
         bmask = 1 << 4;
     }
-    //console.log('mouse scroll by ' + wheelData + ':' + x + "," + y);
+    //console.log('mouse scroll by ' + wheelData + ':' + pos.x + "," + pos.y);
     if (Canvas.mouseButton) {
-        Canvas.mouseButton(x, y, 1, bmask);
-        Canvas.mouseButton(x, y, 0, bmask);
+        Canvas.mouseButton(pos.x, pos.y, 1, bmask);
+        Canvas.mouseButton(pos.x, pos.y, 0, bmask);
     }
     e.stop();
     return false;
@@ -83,12 +69,12 @@ onMouseWheel: function (e) {
 
 
 onMouseMove: function (e) {
-    var evt = e.event || window.event;
-    x = (evt.clientX - Canvas.getX());
-    y = (evt.clientY - Canvas.getY());
-    //console.log('mouse ' + evt.which + '/' + evt.button + ' up:' + x + "," + y);
-    if (Canvas.keyPress) {
-        Canvas.mouseMove(x, y);
+    var evt, pos;
+    evt = e.event || window.event;
+    pos = getEventPosition(e, $(Canvas.id));
+    //console.log('mouse ' + evt.which + '/' + evt.button + ' up:' + pos.x + "," + pos.y);
+    if (Canvas.mouseMove) {
+        Canvas.mouseMove(pos.x, pos.y);
     }
 },
 
@@ -111,12 +97,14 @@ onKeyUp : function (e) {
 },
 
 onMouseDisable: function (e) {
-    var evt = e.event || window.event;
+    var evt, pos;
+    evt = e.event || window.event;
+    pos = getPosition($(Canvas.id));
     /* Stop propagation if inside canvas area */
-    if ((evt.clientX >= Canvas.getX()) &&
-        (evt.clientY >= Canvas.getY()) &&
-        (evt.clientX < (Canvas.getX() + Canvas.c_wx)) &&
-        (evt.clientY < (Canvas.getY() + Canvas.c_wy))) {
+    if ((evt.clientX >= pos.x) &&
+        (evt.clientY >= pos.y) &&
+        (evt.clientX < (pos.x + Canvas.c_wx)) &&
+        (evt.clientY < (pos.y + Canvas.c_wy))) {
         e.stop();
         return false;
     }

include/util.js

@@ -28,6 +28,40 @@ function dirObj(obj, depth, parent) {
     return msg;
 }
 
+/*
+ * Cross-browser positioning
+ */
+
+// Get DOM element position on page
+function getPosition(obj) {
+    var x = 0, y = 0;
+    if (obj.offsetParent) {
+        do {
+            x += obj.offsetLeft;
+            y += obj.offsetTop;
+        } while (obj = obj.offsetParent);
+    }
+    return {'x': x, 'y': y};
+}
+
+// Get mouse event position in DOM element
+function getEventPosition(e, obj) {
+    var evt, docX, docY, pos;
+    //if (!e) evt = window.event;
+    evt = e.event || window.event;
+    if (evt.pageX || evt.pageY) {
+        docX = evt.pageX;
+        docY = evt.pageY;
+    } else if (evt.clientX || evt.clientY) {
+        docX = evt.clientX + document.body.scrollLeft +
+            document.documentElement.scrollLeft;
+        docY = evt.clientY + document.body.scrollTop +
+            document.documentElement.scrollTop;
+    }
+    pos = getPosition(obj);
+    return {'x': docX - pos.x, 'y': docY - pos.y};
+}
+
 
 /*
  * Make arrays quack

tests/input.html

@@ -25,7 +25,7 @@
 
     <script>
         var msg_cnt = 0;
-        var width = 800, height = 600;
+        var width = 1280, height = 600;
         var iterations;
 
         function message(str) {
@@ -35,60 +35,27 @@
             cell.scrollTop = cell.scrollHeight;
         }
 
-        function mouseDown (e) {
-            var msg, evt = e.event || window.event;
-            e.stop();
-            msg = 'mouse ' + evt.which + '/' + evt.button + ' down:' +
-                    (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y);
+        function mouseButton(x, y, down, bmask) {
+            msg = 'mouse x,y: ' + x + ',' + y + '  down: ' + down;
+            msg += ' bmask: ' + bmask;
             console.log(msg);
             message(msg);
         }
 
-        function mouseUp (e) {
-            var msg, evt = e.event || window.event;
-            e.stop();
-            msg = 'mouse ' + evt.which + '/' + evt.button + ' up:' +
-                    (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y);
-            console.log(msg);
-            message(msg);
-        }
-
-        function mouseMove (e) {
-            var msg, evt = e.event || window.event;
-            console.log('mouse ' + evt.which + '/' + evt.button + ' up:' +
-                    (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
-        }
-
-        function mouseWheel (e) {
-            var evt = e.event || window.event;
-            //e = e ? e : window.event;
-            var wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
-            msg = 'mouse scroll by ' + wheelData + ':' +
-                    (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y);
-            console.log(msg);
-            message(msg);
-        }
-
-
-        function keyDown (e) {
-            var msg;
-            e.stop();
-            msg = "keydown: " + e.key + "(" + e.code + ")";
-            console.log(msg);
-            message(msg);
+        function mouseMove(x, y) {
+            msg = 'mouse x,y: ' + x + ',' + y;
+            //console.log(msg);
         }
 
-        function keyUp (e) {
-            var msg;
-            e.stop();
-            msg = "keyup: " + e.key + "(" + e.code + ")";
+        function keyPress(keysym, down) {
+            msg = "keyPress keysym: " + keysym + " down: " + down;
             console.log(msg);
             message(msg);
         }
 
         window.onload = function() {
-            Canvas.init('canvas', width, height, keyDown, keyUp,
-                        mouseDown, mouseUp, mouseMove, mouseWheel);
+            Canvas.init('canvas', width, height, true, keyPress,
+                        mouseButton, mouseMove);
             message("Canvas initialized");
         }
     </script>