openstack/deb-novnc
Code Issues Proposed changes

Make compatible with jQuery. Slight API change.

Browse Source 
Rename the $() selector to $D() so that it doesn't collide with
the jQuery name.

The API change is that the 'target' option for Canvas and RFB objects
must now be a DOM Canvas element. A string is no longer accepted
because this requires that a DOM lookup is done and the Canvas and RFB
should have no UI code in them. Modularity.
This commit is contained in:
Joel Martin 2010-12-10 08:25:36 -06:00
parent 7ac02c951d
commit 7b6edcbe72
13 changed files with 115 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
include/canvas.js
View File

@ -99,7 +99,7 @@ function constructor() {
if (! conf.target) { throw("target must be set"); }
if (typeof conf.target === 'string') {
conf.target = window.$(conf.target);
throw("target must be a DOM element");
}
c = conf.target;
@ -215,7 +215,7 @@ function constructor() {
return that ;
}
/* Translate DOM key event to keysym value */
/* Translate DOM key down/up event to keysym value */
function getKeysym(e) {
var evt, keysym;
evt = (e ? e : window.event);

12
include/rfb.js
View File

@ -127,13 +127,13 @@ var that = {}, // Public API interface
function cdef(v, type, defval, desc) {
Util.conf_default(conf, that, v, type, defval, desc); }
cdef('target', 'str', 'VNC_canvas', 'VNC viewport rendering Canvas');
cdef('focusContainer', 'dom', document, 'Area that traps keyboard input');
cdef('target', 'str', null, 'VNC viewport rendering Canvas');
cdef('focusContainer', 'dom', document, 'Area that traps keyboard input');
cdef('encrypt', 'bool', false, 'Use TLS/SSL/wss encryption');
cdef('true_color', 'bool', true, 'Request true color pixel data');
cdef('local_cursor', 'bool', false, 'Request locally rendered cursor');
cdef('shared', 'bool', true, 'Request shared mode');
cdef('encrypt', 'bool', false, 'Use TLS/SSL/wss encryption');
cdef('true_color', 'bool', true, 'Request true color pixel data');
cdef('local_cursor', 'bool', false, 'Request locally rendered cursor');
cdef('shared', 'bool', true, 'Request shared mode');
cdef('connectTimeout', 'int', 2, 'Time (s) to wait for connection');
cdef('disconnectTimeout', 'int', 3, 'Time (s) to wait for disconnection');

62
include/ui.js
View File

@ -18,7 +18,11 @@ load: function(target) {
var html = '', i, sheet, sheets, llevels;
/* Populate the 'target' DOM element with default UI */
if (!target) { target = 'vnc'; }
if (!target) {
target = $D('vnc');
} else if (typeof target === 'string') {
target = $D(target);
}
if ((!document.createElement('canvas').getContext) &&
window.ActiveXObject) {
@ -31,7 +35,7 @@ load: function(target) {
html += ' <a href="http://google.com/chromeframe" target="cframe">';
html += ' Google Chrome Frame.</a>';
html += '</div></center>';
$(target).innerHTML = html;
target.innerHTML = html;
return;
}
@ -114,7 +118,7 @@ load: function(target) {
html += ' onblur="UI.canvasFocus();"';
html += ' onchange="UI.clipSend();"></textarea>';
html += '</div>';
$(target).innerHTML = html;
target.innerHTML = html;
// Settings with immediate effects
UI.initSetting('logging', 'warn');
@ -134,15 +138,15 @@ load: function(target) {
UI.initSetting('shared', true);
UI.initSetting('connectTimeout', 2);
UI.rfb = RFB({'target': 'VNC_canvas',
UI.rfb = RFB({'target': $D('VNC_canvas'),
'updateState': UI.updateState,
'clipboardReceive': UI.clipReceive});
// Unfocus clipboard when over the VNC area
$('VNC_screen').onmousemove = function () {
$D('VNC_screen').onmousemove = function () {
var canvas = UI.rfb.get_canvas();
if ((! canvas) || (! canvas.get_focused())) {
$('VNC_clipboard_text').blur();
$D('VNC_clipboard_text').blur();
}
};
@ -150,7 +154,7 @@ load: function(target) {
// Read form control compatible setting from cookie
getSetting: function(name) {
var val, ctrl = $('VNC_' + name);
var val, ctrl = $D('VNC_' + name);
val = WebUtil.readCookie(name);
if (ctrl.type === 'checkbox') {
if (val.toLowerCase() in {'0':1, 'no':1, 'false':1}) {
@ -165,7 +169,7 @@ getSetting: function(name) {
// Update cookie and form control setting. If value is not set, then
// updates from control to current cookie setting.
updateSetting: function(name, value) {
var i, ctrl = $('VNC_' + name);
var i, ctrl = $D('VNC_' + name);
// Save the cookie for this session
if (typeof value !== 'undefined') {
WebUtil.createCookie(name, value);
@ -189,7 +193,7 @@ updateSetting: function(name, value) {
// Save control setting to cookie
saveSetting: function(name) {
var val, ctrl = $('VNC_' + name);
var val, ctrl = $D('VNC_' + name);
if (ctrl.type === 'checkbox') {
val = ctrl.checked;
} else if (typeof ctrl.options !== 'undefined') {
@ -232,7 +236,7 @@ clickSettingsMenu: function() {
UI.updateSetting('cursor');
} else {
UI.updateSetting('cursor', false);
$('VNC_cursor').disabled = true;
$D('VNC_cursor').disabled = true;
}
UI.updateSetting('shared');
UI.updateSetting('connectTimeout');
@ -245,29 +249,29 @@ clickSettingsMenu: function() {
// Open menu
openSettingsMenu: function() {
$('VNC_settings_menu').style.display = "block";
$D('VNC_settings_menu').style.display = "block";
UI.settingsOpen = true;
},
// Close menu (without applying settings)
closeSettingsMenu: function() {
$('VNC_settings_menu').style.display = "none";
$D('VNC_settings_menu').style.display = "none";
UI.settingsOpen = false;
},
// Disable/enable controls depending on connection state
settingsDisabled: function(disabled, rfb) {
//Util.Debug(">> settingsDisabled");
$('VNC_encrypt').disabled = disabled;
$('VNC_true_color').disabled = disabled;
$D('VNC_encrypt').disabled = disabled;
$D('VNC_true_color').disabled = disabled;
if (rfb && rfb.get_canvas() && rfb.get_canvas().get_cursor_uri()) {
$('VNC_cursor').disabled = disabled;
$D('VNC_cursor').disabled = disabled;
} else {
UI.updateSetting('cursor', false);
$('VNC_cursor').disabled = true;
$D('VNC_cursor').disabled = true;
}
$('VNC_shared').disabled = disabled;
$('VNC_connectTimeout').disabled = disabled;
$D('VNC_shared').disabled = disabled;
$D('VNC_connectTimeout').disabled = disabled;
//Util.Debug("<< settingsDisabled");
},
@ -294,7 +298,7 @@ settingsApply: function() {
setPassword: function() {
UI.rfb.sendPassword($('VNC_password').value);
UI.rfb.sendPassword($D('VNC_password').value);
return false;
},
@ -304,10 +308,10 @@ sendCtrlAltDel: function() {
updateState: function(rfb, state, oldstate, msg) {
var s, sb, c, cad, klass;
s = $('VNC_status');
sb = $('VNC_status_bar');
c = $('VNC_connect_button');
cad = $('sendCtrlAltDelButton');
s = $D('VNC_status');
sb = $D('VNC_status_bar');
c = $D('VNC_connect_button');
cad = $D('sendCtrlAltDelButton');
switch (state) {
case 'failed':
case 'fatal':
@ -361,7 +365,7 @@ updateState: function(rfb, state, oldstate, msg) {
clipReceive: function(rfb, text) {
Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "...");
$('VNC_clipboard_text').value = text;
$D('VNC_clipboard_text').value = text;
Util.Debug("<< UI.clipReceive");
},
@ -371,9 +375,9 @@ connect: function() {
UI.closeSettingsMenu();
host = $('VNC_host').value;
port = $('VNC_port').value;
password = $('VNC_password').value;
host = $D('VNC_host').value;
port = $D('VNC_port').value;
password = $D('VNC_password').value;
if ((!host) || (!port)) {
throw("Must set host and port");
}
@ -402,12 +406,12 @@ canvasFocus: function() {
},
clipClear: function() {
$('VNC_clipboard_text').value = "";
$D('VNC_clipboard_text').value = "";
UI.rfb.clipboardPasteFrom("");
},
clipSend: function() {
var text = $('VNC_clipboard_text').value;
var text = $D('VNC_clipboard_text').value;
Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "...");
UI.rfb.clipboardPasteFrom(text);
Util.Debug("<< UI.clipSend");

4
include/webutil.js
View File

@ -16,8 +16,8 @@ var WebUtil = {}, $;
/*
* Simple DOM selector by ID
*/
if (!window.$) {
$ = function (id) {
if (!window.$D) {
$D = function (id) {
if (document.getElementById) {
return document.getElementById(id);
} else if (document.all) {

2
tests/base64.html
View File

@ -19,7 +19,7 @@
<script>
function debug(str) {
console.log(str);
cell = $('debug');
cell = $D('debug');
cell.innerHTML += str + "\n";
cell.scrollTop = cell.scrollHeight;
}

20
tests/canvas.html
View File

@ -40,7 +40,7 @@
function message(str) {
console.log(str);
cell = $('messages');
cell = $D('messages');
cell.innerHTML += msg_cnt + ": " + str + "\n";
cell.scrollTop = cell.scrollHeight;
msg_cnt += 1;
@ -80,10 +80,10 @@
}
function begin () {
$('startButton').value = "Running";
$('startButton').disabled = true;
$D('startButton').value = "Running";
$D('startButton').disabled = true;
setTimeout(start_delayed, 250);
iterations = $('iterations').value;
iterations = $D('iterations').value;
}
function start_delayed () {
@ -109,14 +109,14 @@
canvas.resize(start_width, start_height, true);
test_functions();
}
$('startButton').disabled = false;
$('startButton').value = "Do Performance Test";
$D('startButton').disabled = false;
$D('startButton').value = "Do Performance Test";
}
function run_test () {
var width, height;
width = $('width').value;
height = $('height').value;
width = $D('width').value;
height = $D('height').value;
canvas.resize(width, height);
var color, start_time = (new Date()).getTime(), w, h;
for (var i=0; i < iterations; i++) {
@ -137,8 +137,8 @@
window.onload = function() {
message("in onload");
$('iterations').value = 10;
canvas = Canvas({'target' : 'canvas'});
$D('iterations').value = 10;
canvas = new Canvas({'target' : $D('canvas')});
canvas.resize(start_width, start_height, true);
message("Canvas initialized");
test_functions();

8
tests/cursor.html
View File

@ -34,7 +34,7 @@
<script>
function debug(str) {
console.log(str);
cell = $('debug');
cell = $D('debug');
cell.innerHTML += str + "\n";
cell.scrollTop = cell.scrollHeight;
}
@ -119,16 +119,16 @@
debug("onload");
var canvas, cross, cursor, cursor64;
canvas = new Canvas({'target' : "testcanvas"});
canvas = new Canvas({'target' : $D("testcanvas")});
debug("canvas indicates Data URI cursor support is: " + canvas.get_cursor_uri());
$('button1').style.cursor="url(face.png), default";
$D('button1').style.cursor="url(face.png), default";
cursor = makeCursor();
cursor64 = Base64.encode(cursor);
//debug("cursor: " + cursor.slice(0,100) + " (" + cursor.length + ")");
//debug("cursor64: " + cursor64.slice(0,100) + " (" + cursor64.length + ")");
$('button2').style.cursor="url(data:image/x-icon;base64," + cursor64 + "), default";
$D('button2').style.cursor="url(data:image/x-icon;base64," + cursor64 + "), default";
debug("onload complete");
}

4
tests/input.html
View File

@ -29,7 +29,7 @@
function message(str) {
console.log(str);
cell = $('messages');
cell = $D('messages');
cell.innerHTML += msg_cnt + ": " + str + "\n";
cell.scrollTop = cell.scrollHeight;
}
@ -53,7 +53,7 @@
}
window.onload = function() {
var canvas = Canvas({'target' : 'canvas'});
var canvas = new Canvas({'target' : $D('canvas')});
canvas.resize(width, height, true);
canvas.start(keyPress, mouseButton, mouseMove);
message("Canvas initialized");

20
tests/vnc_perf.html
View File

@ -47,7 +47,7 @@
function msg(str) {
console.log(str);
var cell = $('messages');
var cell = $D('messages');
cell.innerHTML += str + "\n";
cell.scrollTop = cell.scrollHeight;
}
@ -68,20 +68,20 @@
test_state = 'failed';
break;
case 'loaded':
$('startButton').disabled = false;
$D('startButton').disabled = false;
break;
}
if (typeof mesg !== 'undefined') {
$('VNC_status').innerHTML = mesg;
$D('VNC_status').innerHTML = mesg;
}
}
function start() {
$('startButton').value = "Running";
$('startButton').disabled = true;
$D('startButton').value = "Running";
$D('startButton').disabled = true;
mode = 'perftest'; // full-speed
passes = $('passes').value;
passes = $D('passes').value;
pass = 1;
encIdx = 0;
@ -123,8 +123,8 @@
if (pass > passes) {
// We are finished
rfb.get_canvas().stop(); // Shut-off event interception
$('startButton').disabled = false;
$('startButton').value = "Start";
$D('startButton').disabled = false;
$D('startButton').value = "Start";
finish_passes();
return; // We are finished, terminate
}
@ -189,8 +189,8 @@
enc = encOrder[i];
dbgmsg(" " + enc + ": " + VNC_frame_data_multi[enc].length);
}
rfb = RFB({'target': 'VNC_canvas',
'updateState': updateState});
rfb = new RFB({'target': $D('VNC_canvas'),
'updateState': updateState});
rfb.testMode(send_array);
}
</script>

28
tests/vnc_playback.html
View File

@ -45,7 +45,7 @@
function message(str) {
console.log(str);
var cell = $('messages');
var cell = $D('messages');
cell.innerHTML += str + "\n";
cell.scrollTop = cell.scrollHeight;
}
@ -67,23 +67,23 @@
test_state = 'failed';
break;
case 'loaded':
$('startButton').disabled = false;
$D('startButton').disabled = false;
break;
}
if (typeof msg !== 'undefined') {
$('VNC_status').innerHTML = msg;
$D('VNC_status').innerHTML = msg;
}
}
function start() {
$('startButton').value = "Running";
$('startButton').disabled = true;
$D('startButton').value = "Running";
$D('startButton').disabled = true;
iterations = $('iterations').value;
iterations = $D('iterations').value;
iteration = 0;
start_time = (new Date()).getTime();
if ($('mode1').checked) {
if ($D('mode1').checked) {
message("Starting performance playback (fullspeed) [" + iterations + " iteration(s)]");
mode = 'perftest';
} else {
@ -103,24 +103,24 @@
message(iterations + " iterations took " + total_time + "ms, " +
iter_time + "ms per iteration");
rfb.get_canvas().stop(); // Shut-off event interception
$('startButton').disabled = false;
$('startButton').value = "Start";
$D('startButton').disabled = false;
$D('startButton').value = "Start";
}
window.onload = function() {
iterations = WebUtil.getQueryVar('iterations', 3);
$('iterations').value = iterations;
$D('iterations').value = iterations;
mode = WebUtil.getQueryVar('mode', 3);
if (mode === 'realtime') {
$('mode2').checked = true;
$D('mode2').checked = true;
} else {
$('mode1').checked = true;
$D('mode1').checked = true;
}
if (fname) {
message("VNC_frame_data.length: " + VNC_frame_data.length);
rfb = RFB({'target': 'VNC_canvas',
'updateState': updateState});
rfb = new RFB({'target': $D('VNC_canvas'),
'updateState': updateState});
rfb.testMode(send_array);
}
}

28
tests/ws.html
View File

@ -47,7 +47,7 @@
function error(str) {
console.error(str);
cell = $('error');
cell = $D('error');
cell.innerHTML += errors + ": " + str + "\n";
cell.scrollTop = cell.scrollHeight;
}
@ -147,15 +147,15 @@
}
function update_stats() {
$('sent').innerHTML = sent;
$('received').innerHTML = received;
$('errors').innerHTML = errors;
$D('sent').innerHTML = sent;
$D('received').innerHTML = received;
$D('errors').innerHTML = errors;
}
function init_ws() {
console.log(">> init_ws");
var scheme = "ws://";
if ($('encrypt').checked) {
if ($D('encrypt').checked) {
scheme = "wss://";
}
var uri = scheme + host + ":" + port;
@ -188,9 +188,9 @@
function connect() {
console.log(">> connect");
host = $('host').value;
port = $('port').value;
sendDelay = parseInt($('sendDelay').value, 10);
host = $D('host').value;
port = $D('port').value;
sendDelay = parseInt($D('sendDelay').value, 10);
if ((!host) || (!port)) {
console.log("must set host and port");
return;
@ -202,8 +202,8 @@
init_ws();
update_ref = setInterval(update_stats, 1);
$('connectButton').value = "Stop";
$('connectButton').onclick = disconnect;
$D('connectButton').value = "Stop";
$D('connectButton').onclick = disconnect;
console.log("<< connect");
}
@ -218,8 +218,8 @@
recv_seq = 0;
send_seq = 0;
$('connectButton').value = "Start";
$('connectButton').onclick = connect;
$D('connectButton').value = "Start";
$D('connectButton').onclick = connect;
console.log("<< disconnect");
}
@ -244,8 +244,8 @@
WebSocket.__initialize();
}
var url = document.location.href;
$('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
$('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
$D('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
$D('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
}
</script>

20
tests/wsencoding.html
View File

@ -34,7 +34,7 @@
function message(str) {
console.log(str);
cell = $('messages');
cell = $D('messages');
cell.innerHTML += str + "\n";
cell.scrollTop = cell.scrollHeight;
}
@ -65,7 +65,7 @@
function init_ws() {
console.log(">> init_ws");
var scheme = "ws://";
if ($('encrypt').checked) {
if ($D('encrypt').checked) {
scheme = "wss://";
}
var uri = scheme + host + ":" + port;
@ -97,8 +97,8 @@
function connect() {
console.log(">> connect");
host = $('host').value;
port = $('port').value;
host = $D('host').value;
port = $D('port').value;
if ((!host) || (!port)) {
console.log("must set host and port");
return;
@ -109,8 +109,8 @@
}
init_ws();
$('connectButton').value = "Stop";
$('connectButton').onclick = disconnect;
$D('connectButton').value = "Stop";
$D('connectButton').onclick = disconnect;
console.log("<< connect");
}
@ -120,8 +120,8 @@
ws.close();
}
$('connectButton').value = "Start";
$('connectButton').onclick = connect;
$D('connectButton').value = "Start";
$D('connectButton').onclick = connect;
console.log("<< disconnect");
}
@ -143,8 +143,8 @@
WebSocket.__initialize();
}
var url = document.location.href;
$('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
$('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
$D('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
$D('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
}
</script>

13
vnc_auto.html
View File

@ -42,7 +42,7 @@
var rfb;
function setPassword() {
rfb.sendPassword($('password_input').value);
rfb.sendPassword($D('password_input').value);
return false;
}
function sendCtrlAltDel() {
@ -51,9 +51,9 @@
}
function updateState(rfb, state, oldstate, msg) {
var s, sb, cad, klass;
s = $('VNC_status');
sb = $('VNC_status_bar');
cad = $('sendCtrlAltDelButton');
s = $D('VNC_status');
sb = $D('VNC_status_bar');
cad = $D('sendCtrlAltDelButton');
switch (state) {
case 'failed':
case 'fatal':
@ -90,7 +90,7 @@
window.onload = function () {
var host, port, password;
$('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
$D('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
host = WebUtil.getQueryVar('host', null);
port = WebUtil.getQueryVar('port', null);
@ -101,7 +101,8 @@
return;
}
rfb = new RFB({'encrypt': WebUtil.getQueryVar('encrypt', false),
rfb = new RFB({'target': $D('VNC_canvas'),
'encrypt': WebUtil.getQueryVar('encrypt', false),
'true_color': WebUtil.getQueryVar('true_color', true),
'local_cursor': WebUtil.getQueryVar('cursor', true),
'shared': WebUtil.getQueryVar('shared', true),