Skip to content

N
noVNC
Commit 15046f00 authored by Joel Martin's avatar Joel Martin
Browse files
Options

No mootools dep outside of default_controls.js. 

Some basic functions from mootools implemented in util.js.

Also, some more DOM separation. Move clipboard focus logic into
default_controls and canvas and out of vnc.js.

JSLint cleanup.
parent 61dd52c9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 302 additions and 181 deletions
include/canvas.js
View file @ 15046f00
......@@ -5,9 +5,10 @@
*
* See README.md for usage and integration instructions.
*/
"use strict";
/*global window, $, Browser */
"use strict";
/*jslint white: false, bitwise: false */
/*global window, console, $, Util */
// Everything namespaced inside Canvas
var Canvas = {
......@@ -23,20 +24,21 @@ ctx : null,
prevStyle: "",
focused : true,
keyPress : null,
mouseButton : null,
mouseMove : null,
onMouseButton: function(e, down) {
var evt, pos, bmask;
evt = e.event || window.event;
pos = getEventPosition(e, $(Canvas.id));
evt = (e ? e : window.event);
pos = Util.getEventPosition(e, $(Canvas.id));
bmask = 1 << evt.button;
//console.log('mouse ' + evt.which + '/' + evt.button + ' down:' + pos.x + "," + pos.y);
//console.log('mouse ' + pos.x + "," + pos.y + " down: " + down + " bmask: " + bmask);
if (Canvas.mouseButton) {
Canvas.mouseButton(pos.x, pos.y, down, bmask);
}
e.stop();
Util.stopEvent(e);
return false;
},
......@@ -49,10 +51,10 @@ onMouseUp: function (e) {
},
onMouseWheel: function (e) {
var evt, pos, bmask;
evt = e.event || window.event;
pos = getEventPosition(e, $(Canvas.id));
var wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
var evt, pos, bmask, wheelData;
evt = (e ? e : window.event);
pos = Util.getEventPosition(e, $(Canvas.id));
wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
if (wheelData > 0) {
bmask = 1 << 3;
} else {
......@@ -63,15 +65,15 @@ onMouseWheel: function (e) {
Canvas.mouseButton(pos.x, pos.y, 1, bmask);
Canvas.mouseButton(pos.x, pos.y, 0, bmask);
}
e.stop();
Util.stopEvent(e);
return false;
},
onMouseMove: function (e) {
var evt, pos;
evt = e.event || window.event;
pos = getEventPosition(e, $(Canvas.id));
evt = (e ? e : window.event);
pos = Util.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);
......@@ -79,41 +81,50 @@ onMouseMove: function (e) {
},
onKeyDown: function (e) {
//console.log("keydown: " + e.key + "(" + e.code + ")");
//console.log("keydown: " + Canvas.getKeysym(e));
if (! Canvas.focused) {
return true;
}
if (Canvas.keyPress) {
Canvas.keyPress(Canvas.getKeysym(e), 1);
}
e.stop();
Util.stopEvent(e);
return false;
},
onKeyUp : function (e) {
//console.log("keyup: " + e.key + "(" + e.code + ")");
if (! Canvas.focused) {
return true;
}
if (Canvas.keyPress) {
Canvas.keyPress(Canvas.getKeysym(e), 0);
}
e.stop();
Util.stopEvent(e);
return false;
},
onMouseDisable: function (e) {
var evt, pos;
evt = e.event || window.event;
pos = getPosition($(Canvas.id));
evt = (e ? e : window.event);
pos = Util.getPosition($(Canvas.id));
/* Stop propagation if inside canvas area */
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();
//console.log("mouse event disabled");
Util.stopEvent(e);
return false;
}
//console.log("mouse event not disabled");
return true;
},
init: function (id, width, height, true_color, keyPress,
mouseButton, mouseMove) {
//console.log(">> Canvas.init");
console.log(">> Canvas.init");
Canvas.id = id;
......@@ -122,20 +133,21 @@ init: function (id, width, height, true_color, keyPress,
Canvas.mouseMove = mouseMove || null;
var c = $(Canvas.id);
document.addEvent('keydown', Canvas.onKeyDown);
document.addEvent('keyup', Canvas.onKeyUp);
c.addEvent('mousedown', Canvas.onMouseDown);
c.addEvent('mouseup', Canvas.onMouseUp);
c.addEvent('mousewheel', Canvas.onMouseWheel);
c.addEvent('mousemove', Canvas.onMouseMove);
Util.addEvent(document, 'keydown', Canvas.onKeyDown);
Util.addEvent(document, 'keyup', Canvas.onKeyUp);
Util.addEvent(c, 'mousedown', Canvas.onMouseDown);
Util.addEvent(c, 'mouseup', Canvas.onMouseUp);
Util.addEvent(c, 'mousemove', Canvas.onMouseMove);
Util.addEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
Canvas.onMouseWheel);
/* Work around right and middle click browser behaviors */
document.addEvent('click', Canvas.onMouseDisable);
document.body.addEvent('contextmenu', Canvas.onMouseDisable);
Util.addEvent(document, 'click', Canvas.onMouseDisable);
Util.addEvent(document.body, 'contextmenu', Canvas.onMouseDisable);
Canvas.resize(width, height);
Canvas.c_wx = c.getSize().x;
Canvas.c_wy = c.getSize().y;
Canvas.c_wx = c.offsetWidth;
Canvas.c_wy = c.offsetHeight;
Canvas.true_color = true_color;
Canvas.colourMap = [];
......@@ -143,8 +155,9 @@ init: function (id, width, height, true_color, keyPress,
Canvas.ctx = c.getContext('2d');
Canvas.prevStyle = "";
Canvas.focused = true;
if (Browser.Engine.webkit) {
if (Util.Engine.webkit) {
Canvas.prefer_js = true;
}
......@@ -164,16 +177,17 @@ resize: function (width, height) {
stop: function () {
var c = $(Canvas.id);
document.removeEvents('keydown');
document.removeEvents('keyup');
c.removeEvents('mousedown');
c.removeEvents('mouseup');
c.removeEvents('mousemove');
c.removeEvents('DOMMouseScroll');
Util.removeEvent(document, 'keydown', Canvas.onKeyDown);
Util.removeEvent(document, 'keyup', Canvas.onKeyUp);
Util.removeEvent(c, 'mousedown', Canvas.onMouseDown);
Util.removeEvent(c, 'mouseup', Canvas.onMouseUp);
Util.removeEvent(c, 'mousemove', Canvas.onMouseMove);
Util.removeEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
Canvas.onMouseWheel);
/* Work around right and middle click browser behaviors */
document.removeEvents('click');
document.body.removeEvents('contextmenu');
Util.removeEvent(document, 'click', Canvas.onMouseDisable);
Util.removeEvent(document.body, 'contextmenu', Canvas.onMouseDisable);
},
/*
......@@ -197,8 +211,8 @@ getTile: function(x, y, width, height, color) {
red = rgb[0];
green = rgb[1];
blue = rgb[2];
for (j = 0; j < height; j++) {
for (i = 0; i < width; i++) {
for (j = 0; j < height; j += 1) {
for (i = 0; i < width; i += 1) {
p = (i + (j * width) ) * 4;
data[p + 0] = red;
data[p + 1] = green;
......@@ -225,8 +239,8 @@ setTile: function(img, x, y, w, h, color) {
red = rgb[0];
green = rgb[1];
blue = rgb[2];
for (j = 0; j < h; j++) {
for (i = 0; i < w; i++) {
for (j = 0; j < h; j += 1) {
for (i = 0; i < w; i += 1) {
p = (x + i + ((y + j) * width) ) * 4;
data[p + 0] = red;
data[p + 1] = green;
......@@ -265,12 +279,12 @@ rgbxImage: function(x, y, width, height, arr, offset) {
},
cmapImage: function(x, y, width, height, arr, offset) {
var img, i, j, k, data, rgb, cmap;
var img, i, j, data, rgb, cmap;
img = Canvas.ctx.getImageData(0, 0, width, height);
data = img.data;
cmap = Canvas.colourMap;
//console.log("cmapImage x: " + x + ", y: " + y + "arr.slice(0,20): " + arr.slice(0,20));
for (i=0, j=offset; i < (width * height * 4); i=i+4, j++) {
for (i=0, j=offset; i < (width * height * 4); i=i+4, j += 1) {
rgb = cmap[arr[j]];
data[i + 0] = rgb[0];
data[i + 1] = rgb[1];
......@@ -311,7 +325,7 @@ copyImage: function(old_x, old_y, new_x, new_y, width, height) {
/* Translate DOM key event to keysym value */
getKeysym: function(e) {
var evt, keysym;
evt = e.event || window.event;
evt = (e ? e : window.event);
/* Remap modifier and special keys */
switch ( evt.keyCode ) {
......@@ -354,7 +368,7 @@ getKeysym: function(e) {
case 187 : keysym = 61; break; // = (IE)
case 188 : keysym = 44; break; // , (Mozilla, IE)
case 109 : // - (Mozilla)
if (Browser.Engine.gecko) {
if (Util.Engine.gecko) {
keysym = 45; }
break;
case 189 : keysym = 45; break; // - (IE)
......
include/default_controls.js
View file @ 15046f00
/*
* noVNC: HTML5 VNC client
* Copyright (C) 2010 Joel Martin
* Licensed under LGPL-3 (see LICENSE.LGPL-3)
*
* See README.md for usage and integration instructions.
*/
"use strict";
// Load mootools
(function () {
var prefix = (typeof VNC_uri_prefix !== "undefined") ?
VNC_uri_prefix : "include/";
document.write("<script src='" + prefix +
"mootools.js'><\/script>");
}());
DefaultControls = {
load: function(target) {
......@@ -58,7 +76,7 @@ load: function(target) {
$('VNC_screen').onmousemove = function () {
// Unfocus clipboard when over the VNC area
if (RFB.clipboardFocus) {
if (! Canvas.focused) {
$('VNC_clipboard_text').blur();
}
};
......@@ -119,11 +137,11 @@ disconnect: function() {
},
clipFocus: function() {
RFB.clipboardFocus = true;
Canvas.focused = false;
},
clipBlur: function() {
RFB.clipboardFocus = false;
Canvas.focused = true;
},
clipClear: function() {
......
include/util.js
View file @ 15046f00
if ((!window.console) || (! /__debug__$/i.test(document.location.href))) {
// non-debug mode, an empty function
window.console = window.console || {};
window.console.log = function(message) {};
window.console.warn = function(message) {};
window.console.error = function(message) {};
}
function dirObj(obj, depth, parent) {
var msg = "";
var val = "";
if (! depth) { depth=2; }
if (! parent) { parent= ""; }
// Print the properties of the passed-in object
for (var i in obj) {
if ((depth > 1) && (typeof obj[i] == "object")) {
// Recurse attributes that are objects
msg += dirObj(obj[i], depth-1, parent + "." + i);
} else {
val = new String(obj[i]).replace("\n", " ");
if (val.length > 30) {
val = val.substr(0,30) + "...";
}
msg += parent + "." + i + ": " + val + "\n";
}
}
return msg;
}
/*
* Cross-browser positioning
* noVNC: HTML5 VNC client
* Copyright (C) 2010 Joel Martin
* Licensed under LGPL-3 (see LICENSE.LGPL-3)
*
* See README.md for usage and integration instructions.
*/
// 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};
"use strict";
/*jslint bitwise: false, white: false */
/*global window, document, navigator, ActiveXObject*/
// Globals defined here
var Util = {}, $;
if ((!window.console) || (! /__debug__$/i.test(document.location.href))) {
// non-debug mode, an empty function
window.console = window.console || {};
window.console.log = function (message) {};
window.console.warn = function (message) {};
window.console.error = function (message) {};
}
// 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;
// Simple DOM selector by ID
if (!window.$) {
$ = function (id) {
if (document.getElementById) {
return document.getElementById(id);
} else if (document.all) {
return document.all[id];
} else if (document.layers) {
return document.layers[id];
}
pos = getPosition(obj);
return {'x': docX - pos.x, 'y': docY - pos.y};
return undefined;
};
}
/*
* Make arrays quack
*/
......@@ -110,7 +82,7 @@ Array.prototype.shiftStr = function (len) {
};
Array.prototype.pushStr = function (str) {
var i, n = str.length;
for (i=0; i < n; i++) {
for (i=0; i < n; i+=1) {
this.push(str.charCodeAt(i));
}
};
......@@ -119,3 +91,131 @@ Array.prototype.shiftBytes = function (len) {
return this.splice(0, len);
};
/*
* ------------------------------------------------------
* Namespaced in Util
* ------------------------------------------------------
*/
Util.dirObj = function (obj, depth, parent) {
var i, msg = "", val = "";
if (! depth) { depth=2; }
if (! parent) { parent= ""; }
// Print the properties of the passed-in object
for (i in obj) {
if ((depth > 1) && (typeof obj[i] === "object")) {
// Recurse attributes that are objects
msg += Util.dirObj(obj[i], depth-1, parent + "." + i);
} else {
//val = new String(obj[i]).replace("\n", " ");
val = obj[i].toString().replace("\n", " ");
if (val.length > 30) {
val = val.substr(0,30) + "...";
}
msg += parent + "." + i + ": " + val + "\n";
}
}
return msg;
};
/*
* Cross-browser routines
*/
// Get DOM element position on page
Util.getPosition = function (obj) {
var x = 0, y = 0;
if (obj.offsetParent) {
do {
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
} while (obj);
}
return {'x': x, 'y': y};
};
// Get mouse event position in DOM element
Util.getEventPosition = function (e, obj) {
var evt, docX, docY, pos;
//if (!e) evt = window.event;
evt = (e ? e : 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 = Util.getPosition(obj);
return {'x': docX - pos.x, 'y': docY - pos.y};
};
// Event registration. Based on: http://www.scottandrew.com/weblog/articles/cbs-events
Util.addEvent = function (obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
throw("Handler could not be attached");
}
};
Util.removeEvent = function(obj, evType, fn){
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, false);
return true;
} else if (obj.detachEvent){
var r = obj.detachEvent("on"+evType, fn);
return r;
} else {
throw("Handler could not be removed");
}
};
Util.stopEvent = function(e) {
if (e.stopPropagation) { e.stopPropagation(); }
else { e.cancelBubble = true; }
if (e.preventDefault) { e.preventDefault(); }
else { e.returnValue = false; }
};
// Set browser engine versions. Based on mootools.
Util.Features = {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)};
Util.Engine = {
'presto': (function() {
return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925)); }()),
'trident': (function() {
return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4); }()),
'webkit': (function() {
return (navigator.taintEnabled) ? false : ((Util.Features.xpath) ? ((Util.Features.query) ? 525 : 420) : 419); }()),
'gecko': (function() {
return (!document.getBoxObjectFor && !window.mozInnerScreenX) ? false : ((document.getElementsByClassName) ? 19 : 18); }())
};
Util.Flash = (function(){
var v, version;
try {
v = navigator.plugins['Shockwave Flash'].description;
} catch(err1) {
try {
v = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version');
} catch(err2) {
v = '0 r0';
}
}
version = v.match(/\d+/g);
return {version: parseInt(version[0] || 0 + '.' + version[1], 10) || 0, build: parseInt(version[2], 10) || 0};
}());
include/vnc.js
View file @ 15046f00
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment