From 7b6edcbe721ebe85ec0abb03ff09186cf97be45c Mon Sep 17 00:00:00 2001 From: Joel Martin Date: Fri, 10 Dec 2010 08:25:36 -0600 Subject: [PATCH] Make compatible with jQuery. Slight API change. 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. --- include/canvas.js | 4 +-- include/rfb.js | 12 ++++---- include/ui.js | 62 ++++++++++++++++++++++------------------- include/webutil.js | 4 +-- tests/base64.html | 2 +- tests/canvas.html | 20 ++++++------- tests/cursor.html | 8 +++--- tests/input.html | 4 +-- tests/vnc_perf.html | 20 ++++++------- tests/vnc_playback.html | 28 +++++++++---------- tests/ws.html | 28 +++++++++---------- tests/wsencoding.html | 20 ++++++------- vnc_auto.html | 13 +++++---- 13 files changed, 115 insertions(+), 110 deletions(-) diff --git a/include/canvas.js b/include/canvas.js index e3a2e23..03a1e68 100644 --- a/include/canvas.js +++ b/include/canvas.js @@ -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); diff --git a/include/rfb.js b/include/rfb.js index a460f1c..d69595d 100644 --- a/include/rfb.js +++ b/include/rfb.js @@ -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'); diff --git a/include/ui.js b/include/ui.js index 69ac8c4..217b8b1 100644 --- a/include/ui.js +++ b/include/ui.js @@ -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 += ' '; html += ' Google Chrome Frame.'; html += ''; - $(target).innerHTML = html; + target.innerHTML = html; return; } @@ -114,7 +118,7 @@ load: function(target) { html += ' onblur="UI.canvasFocus();"'; html += ' onchange="UI.clipSend();">'; html += ''; - $(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"); diff --git a/include/webutil.js b/include/webutil.js index 39d6342..67c8667 100644 --- a/include/webutil.js +++ b/include/webutil.js @@ -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) { diff --git a/tests/base64.html b/tests/base64.html index b13253e..24ad80b 100644 --- a/tests/base64.html +++ b/tests/base64.html @@ -19,7 +19,7 @@ diff --git a/tests/vnc_playback.html b/tests/vnc_playback.html index d777a84..3a1f49a 100644 --- a/tests/vnc_playback.html +++ b/tests/vnc_playback.html @@ -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); } } diff --git a/tests/ws.html b/tests/ws.html index e6bf5ac..c56c4c7 100644 --- a/tests/ws.html +++ b/tests/ws.html @@ -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]; } diff --git a/tests/wsencoding.html b/tests/wsencoding.html index 48277c9..846645e 100644 --- a/tests/wsencoding.html +++ b/tests/wsencoding.html @@ -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]; } diff --git a/vnc_auto.html b/vnc_auto.html index d2d16f4..1e9e64a 100644 --- a/vnc_auto.html +++ b/vnc_auto.html @@ -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),