New API. Refactor Canvas and RFB objects.

New API:

To use the RFB object, you now must instantiate it (this allows more
than one instance of it on the same page).

    rfb = new RFB(settings);

The 'settings' variable is a namespace that contains initial default
settings. These can also be set and read using 'rfb.set_FOO()' and
'rfb.get_FOO()' where FOO is the setting name. The current settings
are (and defaults) are:
    - target: the DOM Canvas element to use ('VNC_canvas').
    - encrypt: whether to encrypt the connection (false)
    - true_color: true_color or palette (true)
    - b64encode: base64 encode the WebSockets data (true)
    - local_cursor: use local cursor rendering (true if supported)
    - connectTimeout: milliseconds to wait for connect (2000)
    - updateState: callback when RFB state changes (none)
    - clipboardReceive: callback when clipboard data received (none)

The parameters to the updateState callback have also changed. The
function spec is now updateState(rfb, state, oldstate, msg):
    - rfb: the RFB object that this state change is for.
    - state: the new state
    - oldstate: the previous state
    - msg: a message associate with the state (not always set).

The clipboardReceive spec is clipboardReceive(rfb, text):
    - rfb: the RFB object that this text is from.
    - text: the clipboard text received.

Changes:

- The RFB and Canvas namespaces are now more proper objects. Private
  implementation is no longer exposed and the public API has been made
  explicit. Also, instantiation allows more than one VNC connection
  on the same page (to complete this, DefaultControls will also need
  this same refactoring).

- Added 'none' logging level.

- Removed automatic stylesheet selection workaround in util.js and
  move it to defaultcontrols so that it doesn't interfere with
  intergration.

- Also, some major JSLinting.

- Fix input, canvas, and cursor tests to work with new model.

include/default_controls.js

@@ -6,6 +6,7 @@
  * See README.md for usage and integration instructions.
  */
 "use strict";
+/*jslint white: false */
 /*global $, Util, RFB, Canvas, VNC_uri_prefix, Element, Fx */
 
 var DefaultControls = {
@@ -16,10 +17,6 @@ settingsOpen : false,
 load: function(target) {
     var html, i, DC = DefaultControls, sheet, sheets, llevels;
 
-    /* Handle state updates */
-    RFB.setUpdateState(DC.updateState);
-    RFB.setClipboardReceive(DC.clipReceive);
-
     /* Populate the 'target' DOM element with default controls */
     if (!target) { target = 'vnc'; }
 
@@ -61,7 +58,7 @@ load: function(target) {
     html += '              <option value="default">default</option>';
     sheet = Util.selectStylesheet();
     sheets = Util.getStylesheets();
-    for (i = 0; i < sheets.length; i++) {
+    for (i = 0; i < sheets.length; i += 1) {
         html += '<option value="' + sheets[i].title + '">' + sheets[i].title + '</option>';
     }
     html += '              </select> Style</li>';
@@ -69,7 +66,7 @@ load: function(target) {
     // Logging selection dropdown
     html += '            <li><select id="VNC_logging" name="vncLogging">';
     llevels = ['error', 'warn', 'info', 'debug'];
-    for (i = 0; i < llevels.length; i++) {
+    for (i = 0; i < llevels.length; i += 1) {
         html += '<option value="' + llevels[i] + '">' + llevels[i] + '</option>';
     }
     html += '              </select> Logging</li>';
@@ -107,6 +104,8 @@ load: function(target) {
     DC.initSetting('logging', 'warn');
     Util.init_logging(DC.getSetting('logging'));
     DC.initSetting('stylesheet', 'default');
+
+    Util.selectStylesheet(null); // call twice to get around webkit bug
     Util.selectStylesheet(DC.getSetting('stylesheet'));
 
     /* Populate the controls if defaults are provided in the URL */
@@ -118,12 +117,19 @@ load: function(target) {
     DC.initSetting('true_color', true);
     DC.initSetting('cursor', true);
 
+    DC.rfb = RFB({'target': 'VNC_canvas',
+                  'updateState': DC.updateState,
+                  'clipboardReceive': DC.clipReceive});
+    DC.rfb.init();
+
+    // Unfocus clipboard when over the VNC area
     $('VNC_screen').onmousemove = function () {
-            // Unfocus clipboard when over the VNC area
-            if (! Canvas.focused) {
+            var canvas = DC.rfb.get_canvas();
+            if ((! canvas) || (! canvas.get_focused())) {
                 $('VNC_clipboard_text').blur();
             }
         };
+
 },
 
 // Read form control compatible setting from cookie
@@ -154,7 +160,7 @@ updateSetting: function(name, value) {
     if (ctrl.type === 'checkbox') {
         ctrl.checked = value;
     } else if (typeof ctrl.options !== 'undefined') {
-        for (i = 0; i < ctrl.options.length; i++) {
+        for (i = 0; i < ctrl.options.length; i += 1) {
             if (ctrl.options[i].value === value) {
                 ctrl.selectedIndex = i;
                 break;
@@ -176,7 +182,7 @@ saveSetting: function(name) {
         val = ctrl.value;
     }
     Util.createCookie(name, val);
-    Util.Debug("Setting saved '" + name + "=" + val + "'");
+    //Util.Debug("Setting saved '" + name + "=" + val + "'");
     return val;
 },
 
@@ -190,7 +196,7 @@ initSetting: function(name, defVal) {
         val = Util.readCookie(name, defVal);
     }
     DefaultControls.updateSetting(name, val);
-    Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
+    //Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
     return val;
 },
 
@@ -208,7 +214,7 @@ clickSettingsMenu: function() {
         DC.updateSetting('encrypt');
         DC.updateSetting('base64');
         DC.updateSetting('true_color');
-        if (Canvas.isCursor()) {
+        if (DC.rfb.get_canvas().get_cursor_uri()) {
             DC.updateSetting('cursor');
         } else {
             DC.updateSetting('cursor', false);
@@ -235,10 +241,11 @@ closeSettingsMenu: function() {
 
 // Disable/enable controls depending on connection state
 settingsDisabled: function(disabled) {
+    var DC = DefaultControls;
     $('VNC_encrypt').disabled = disabled;
     $('VNC_base64').disabled = disabled;
     $('VNC_true_color').disabled = disabled;
-    if (Canvas.isCursor()) {
+    if (DC.rfb && DC.rfb.get_canvas().get_cursor_uri()) {
         $('VNC_cursor').disabled = disabled;
     } else {
         DefaultControls.updateSetting('cursor', false);
@@ -248,12 +255,12 @@ settingsDisabled: function(disabled) {
 
 // Save/apply settings when 'Apply' button is pressed
 settingsApply: function() {
-    Util.Debug(">> settingsApply");
+    //Util.Debug(">> settingsApply");
     var DC = DefaultControls;
     DC.saveSetting('encrypt');
     DC.saveSetting('base64');
     DC.saveSetting('true_color');
-    if (Canvas.isCursor()) {
+    if (DC.rfb.get_canvas().get_cursor_uri()) {
         DC.saveSetting('cursor');
     }
     DC.saveSetting('stylesheet');
@@ -263,21 +270,21 @@ settingsApply: function() {
     Util.selectStylesheet(DC.getSetting('stylesheet'));
     Util.init_logging(DC.getSetting('logging'));
 
-    Util.Debug("<< settingsApply");
+    //Util.Debug("<< settingsApply");
 },
 
 
 
 setPassword: function() {
-    RFB.sendPassword($('VNC_password').value);
+    DefaultControls.rfb.sendPassword($('VNC_password').value);
     return false;
 },
 
 sendCtrlAltDel: function() {
-    RFB.sendCtrlAltDel();
+    DefaultControls.rfb.sendCtrlAltDel();
 },
 
-updateState: function(state, msg) {
+updateState: function(rfb, state, oldstate, msg) {
     var s, sb, c, cad, klass;
     s = $('VNC_status');
     sb = $('VNC_status_bar');
@@ -334,6 +341,13 @@ updateState: function(state, msg) {
 
 },
 
+clipReceive: function(rfb, text) {
+    Util.Debug(">> DefaultControls.clipReceive: " + text.substr(0,40) + "...");
+    $('VNC_clipboard_text').value = text;
+    Util.Debug("<< DefaultControls.clipReceive");
+},
+
+
 connect: function() {
     var host, port, password, DC = DefaultControls;
 
@@ -346,43 +360,37 @@ connect: function() {
         throw("Must set host and port");
     }
 
-    RFB.setEncrypt(DC.getSetting('encrypt'));
-    RFB.setBase64(DC.getSetting('base64'));
-    RFB.setTrueColor(DC.getSetting('true_color'));
-    RFB.setCursor(DC.getSetting('cursor'));
+    DC.rfb.set_encrypt(DC.getSetting('encrypt'));
+    DC.rfb.set_b64encode(DC.getSetting('base64'));
+    DC.rfb.set_true_color(DC.getSetting('true_color'));
+    DC.rfb.set_local_cursor(DC.getSetting('cursor'));
 
-    RFB.connect(host, port, password);
+    DC.rfb.connect(host, port, password);
 },
 
 disconnect: function() {
     DefaultControls.closeSettingsMenu();
 
-    RFB.disconnect();
+    DefaultControls.rfb.disconnect();
 },
 
 canvasBlur: function() {
-    Canvas.focused = false;
+    DefaultControls.rfb.get_canvas().set_focused(false);
 },
 
 canvasFocus: function() {
-    Canvas.focused = true;
+    DefaultControls.rfb.get_canvas().set_focused(true);
 },
 
 clipClear: function() {
     $('VNC_clipboard_text').value = "";
-    RFB.clipboardPasteFrom("");
-},
-
-clipReceive: function(text) {
-    Util.Debug(">> DefaultControls.clipReceive: " + text.substr(0,40) + "...");
-    $('VNC_clipboard_text').value = text;
-    Util.Debug("<< DefaultControls.clipReceive");
+    DefaultControls.rfb.clipboardPasteFrom("");
 },
 
 clipSend: function() {
     var text = $('VNC_clipboard_text').value;
     Util.Debug(">> DefaultControls.clipSend: " + text.substr(0,40) + "...");
-    RFB.clipboardPasteFrom(text);
+    DefaultControls.rfb.clipboardPasteFrom(text);
     Util.Debug("<< DefaultControls.clipSend");
 }
 

include/util.js

@@ -14,41 +14,6 @@
 var Util = {}, $;
 
 
-/*
- * Logging/debug routines
- */
-
-Util.init_logging = function (level) {
-    if (typeof window.console === "undefined") {
-        if (typeof window.opera !== "undefined") {
-            window.console = {
-                'log'  : window.opera.postError,
-                'warn' : window.opera.postError,
-                'error': window.opera.postError };
-        } else {
-            window.console = {
-                'log'  : function(m) {},
-                'warn' : function(m) {},
-                'error': function(m) {}};
-        }
-    }
-
-    Util.Debug = Util.Info = Util.Warn = Util.Error = function (msg) {};
-    switch (level) {
-        case 'debug': Util.Debug = function (msg) { console.log(msg); };
-        case 'info':  Util.Info  = function (msg) { console.log(msg); };
-        case 'warn':  Util.Warn  = function (msg) { console.warn(msg); };
-        case 'error': Util.Error = function (msg) { console.error(msg); };
-            break;
-        default:
-            throw("invalid logging type '" + level + "'");
-    }
-};
-// Initialize logging level
-Util.init_logging( (document.location.href.match(
-                    /logging=([A-Za-z0-9\._\-]*)/) ||
-                    ['', 'warn'])[1] );
-
 /*
  * Simple DOM selector by ID
  */
@@ -138,6 +103,42 @@ Array.prototype.shiftBytes = function (len) {
  * ------------------------------------------------------
  */
 
+/*
+ * Logging/debug routines
+ */
+
+Util.init_logging = function (level) {
+    if (typeof window.console === "undefined") {
+        if (typeof window.opera !== "undefined") {
+            window.console = {
+                'log'  : window.opera.postError,
+                'warn' : window.opera.postError,
+                'error': window.opera.postError };
+        } else {
+            window.console = {
+                'log'  : function(m) {},
+                'warn' : function(m) {},
+                'error': function(m) {}};
+        }
+    }
+
+    Util.Debug = Util.Info = Util.Warn = Util.Error = function (msg) {};
+    switch (level) {
+        case 'debug': Util.Debug = function (msg) { console.log(msg); };
+        case 'info':  Util.Info  = function (msg) { console.log(msg); };
+        case 'warn':  Util.Warn  = function (msg) { console.warn(msg); };
+        case 'error': Util.Error = function (msg) { console.error(msg); };
+        case 'none':
+            break;
+        default:
+            throw("invalid logging type '" + level + "'");
+    }
+};
+// Initialize logging level
+Util.init_logging( (document.location.href.match(
+                    /logging=([A-Za-z0-9\._\-]*)/) ||
+                    ['', 'warn'])[1] );
+
 Util.dirObj = function (obj, depth, parent) {
     var i, msg = "", val = "";
     if (! depth) { depth=2; }
@@ -168,7 +169,7 @@ Util.getQueryVar = function(name, defVal) {
 };
 
 // Set defaults for Crockford style function namespaces
-Util.conf_default = function(cfg, api, v, val) {
+Util.conf_default = function(cfg, api, v, val, force_bool) {
     if (typeof cfg[v] === 'undefined') {
         cfg[v] = val;
     }
@@ -181,6 +182,13 @@ Util.conf_default = function(cfg, api, v, val) {
     // Default setter
     if (typeof api['set_' + v] === 'undefined') {
         api['set_' + v] = function (val) {
+                if (force_bool) {
+                    if ((!val) || (val in {'0':1, 'no':1, 'false':1})) {
+                        val = false;
+                    } else {
+                        val = true;
+                    }
+                }
                 cfg[v] = val;
             };
     }
@@ -311,10 +319,9 @@ Util.createCookie = function(name,value,days) {
 };
 
 Util.readCookie = function(name, defaultValue) {
-    var nameEQ = name + "=";
-    var ca = document.cookie.split(';');
-    for(var i=0;i < ca.length;i++) {
-        var c = ca[i];
+    var i, c, nameEQ = name + "=", ca = document.cookie.split(';');
+    for(i=0; i < ca.length; i += 1) {
+        c = ca[i];
         while (c.charAt(0) === ' ') { c = c.substring(1,c.length); }
         if (c.indexOf(nameEQ) === 0) { return c.substring(nameEQ.length,c.length); }
     }
@@ -330,7 +337,7 @@ Util.eraseCookie = function(name) {
  */
 Util.getStylesheets = function() { var i, links, sheets = [];
     links = document.getElementsByTagName("link");
-    for (i = 0; i < links.length; i++) {
+    for (i = 0; i < links.length; i += 1) {
         if (links[i].title &&
             links[i].rel.toUpperCase().indexOf("STYLESHEET") > -1) {
             sheets.push(links[i]);
@@ -346,19 +353,15 @@ Util.selectStylesheet = function(sheet) {
     if (typeof sheet === 'undefined') {
         sheet = 'default';
     }
-    for (i=0; i < sheets.length; i++) {
+    for (i=0; i < sheets.length; i += 1) {
         link = sheets[i];
         if (link.title === sheet) {    
             Util.Debug("Using stylesheet " + sheet);
             link.disabled = false;
         } else {
-            Util.Debug("Skipping stylesheet " + link.title);
+            //Util.Debug("Skipping stylesheet " + link.title);
             link.disabled = true;
         }
     }
     return sheet;
 };
-
-// call once to disable alternates and get around webkit bug
-Util.selectStylesheet(null);
-