diff --git a/docs/TODO b/docs/TODO index 92e49f26..0f523a2c 100644 --- a/docs/TODO +++ b/docs/TODO @@ -1,5 +1,9 @@ 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 diff --git a/include/canvas.js b/include/canvas.js index cfb59663..f4fcad89 100644 --- a/include/canvas.js +++ b/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; } diff --git a/include/util.js b/include/util.js index 9e76d249..a4630b9b 100644 --- a/include/util.js +++ b/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 diff --git a/tests/input.html b/tests/input.html index e4f5611e..d426a12e 100644 --- a/tests/input.html +++ b/tests/input.html @@ -25,7 +25,7 @@