Rename default_controls.js to ui.js.

And DefaultControls to UI.
This commit is contained in:
Joel Martin 2010-11-10 16:02:19 -06:00
parent e66f3f89f2
commit f7ec5b2cb6
3 changed files with 92 additions and 94 deletions

View File

@ -142,19 +142,19 @@ There a few reasons why a proxy is required:
The client is designed to be easily integrated with existing web The client is designed to be easily integrated with existing web
structure and style. structure and style.
At a minimum you must include the `vnc.js` and `default_controls.js` At a minimum you must include the `vnc.js` and `ui.js` scripts and
scripts and call DefaultControls.load(). For example: call UI.load(). For example:
<head> <head>
<script src='include/vnc.js'></script> <script src='include/vnc.js'></script>
<script src="include/default_controls.js"></script> <script src="include/ui.js"></script>
</head> </head>
<body> <body>
<div id='vnc'>Loading</div> <div id='vnc'>Loading</div>
<script> <script>
window.onload = function () { window.onload = function () {
DefaultControls.load('vnc'); UI.load('vnc');
} }
</script> </script>
</body> </body>

View File

@ -9,15 +9,15 @@
/*jslint white: false */ /*jslint white: false */
/*global $, Util, RFB, Canvas, VNC_uri_prefix, Element, Fx */ /*global $, Util, RFB, Canvas, VNC_uri_prefix, Element, Fx */
var DefaultControls = { var UI = {
settingsOpen : false, settingsOpen : false,
// Render default controls and initialize settings menu // Render default UI and initialize settings menu
load: function(target) { load: function(target) {
var html = '', i, DC = DefaultControls, sheet, sheets, llevels; var html = '', i, sheet, sheets, llevels;
/* Populate the 'target' DOM element with default controls */ /* Populate the 'target' DOM element with default UI */
if (!target) { target = 'vnc'; } if (!target) { target = 'vnc'; }
if ((!document.createElement('canvas').getContext) && if ((!document.createElement('canvas').getContext) &&
@ -52,10 +52,10 @@ load: function(target) {
html += ' <td width=1%><div class="VNC_buttons_right">'; html += ' <td width=1%><div class="VNC_buttons_right">';
html += ' <input type=button class="VNC_status_button" value="Settings"'; html += ' <input type=button class="VNC_status_button" value="Settings"';
html += ' id="menuButton"'; html += ' id="menuButton"';
html += ' onclick="DefaultControls.clickSettingsMenu();">'; html += ' onclick="UI.clickSettingsMenu();">';
html += ' <span id="VNC_settings_menu"'; html += ' <span id="VNC_settings_menu"';
html += ' onmouseover="DefaultControls.canvasBlur();"'; html += ' onmouseover="UI.canvasBlur();"';
html += ' onmouseout="DefaultControls.canvasFocus();">'; html += ' onmouseout="UI.canvasFocus();">';
html += ' <ul>'; html += ' <ul>';
html += ' <li><input id="VNC_encrypt"'; html += ' <li><input id="VNC_encrypt"';
html += ' type="checkbox"> Encrypt</li>'; html += ' type="checkbox"> Encrypt</li>';
@ -89,13 +89,13 @@ load: function(target) {
html += ' <hr>'; html += ' <hr>';
html += ' <li><input type="button" id="VNC_apply" value="Apply"'; html += ' <li><input type="button" id="VNC_apply" value="Apply"';
html += ' onclick="DefaultControls.settingsApply()"></li>'; html += ' onclick="UI.settingsApply()"></li>';
html += ' </ul>'; html += ' </ul>';
html += ' </span></div></td>'; html += ' </span></div></td>';
html += ' <td width=1%><div class="VNC_buttons_right">'; html += ' <td width=1%><div class="VNC_buttons_right">';
html += ' <input type=button class="VNC_status_button" value="Send CtrlAltDel"'; html += ' <input type=button class="VNC_status_button" value="Send CtrlAltDel"';
html += ' id="sendCtrlAltDelButton"'; html += ' id="sendCtrlAltDelButton"';
html += ' onclick="DefaultControls.sendCtrlAltDel();"></div></td>'; html += ' onclick="UI.sendCtrlAltDel();"></div></td>';
html += ' </tr></table>'; html += ' </tr></table>';
html += ' </div>'; html += ' </div>';
html += ' <canvas id="VNC_canvas" width="640px" height="20px">'; html += ' <canvas id="VNC_canvas" width="640px" height="20px">';
@ -107,40 +107,40 @@ load: function(target) {
html += ' VNC Clipboard:'; html += ' VNC Clipboard:';
html += ' <input id="VNC_clipboard_clear_button"'; html += ' <input id="VNC_clipboard_clear_button"';
html += ' type="button" value="Clear"'; html += ' type="button" value="Clear"';
html += ' onclick="DefaultControls.clipClear();">'; html += ' onclick="UI.clipClear();">';
html += ' <br>'; html += ' <br>';
html += ' <textarea id="VNC_clipboard_text" cols=80 rows=5'; html += ' <textarea id="VNC_clipboard_text" cols=80 rows=5';
html += ' onfocus="DefaultControls.canvasBlur();"'; html += ' onfocus="UI.canvasBlur();"';
html += ' onblur="DefaultControls.canvasFocus();"'; html += ' onblur="UI.canvasFocus();"';
html += ' onchange="DefaultControls.clipSend();"></textarea>'; html += ' onchange="UI.clipSend();"></textarea>';
html += '</div>'; html += '</div>';
$(target).innerHTML = html; $(target).innerHTML = html;
// Settings with immediate effects // Settings with immediate effects
DC.initSetting('logging', 'warn'); UI.initSetting('logging', 'warn');
WebUtil.init_logging(DC.getSetting('logging')); WebUtil.init_logging(UI.getSetting('logging'));
DC.initSetting('stylesheet', 'default'); UI.initSetting('stylesheet', 'default');
WebUtil.selectStylesheet(null); // call twice to get around webkit bug WebUtil.selectStylesheet(null); // call twice to get around webkit bug
WebUtil.selectStylesheet(DC.getSetting('stylesheet')); WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
/* Populate the controls if defaults are provided in the URL */ /* Populate the controls if defaults are provided in the URL */
DC.initSetting('host', ''); UI.initSetting('host', '');
DC.initSetting('port', ''); UI.initSetting('port', '');
DC.initSetting('password', ''); UI.initSetting('password', '');
DC.initSetting('encrypt', false); UI.initSetting('encrypt', false);
DC.initSetting('true_color', true); UI.initSetting('true_color', true);
DC.initSetting('cursor', false); UI.initSetting('cursor', false);
DC.initSetting('shared', true); UI.initSetting('shared', true);
DC.initSetting('connectTimeout', 2); UI.initSetting('connectTimeout', 2);
DC.rfb = RFB({'target': 'VNC_canvas', UI.rfb = RFB({'target': 'VNC_canvas',
'updateState': DC.updateState, 'updateState': UI.updateState,
'clipboardReceive': DC.clipReceive}); 'clipboardReceive': UI.clipReceive});
// Unfocus clipboard when over the VNC area // Unfocus clipboard when over the VNC area
$('VNC_screen').onmousemove = function () { $('VNC_screen').onmousemove = function () {
var canvas = DC.rfb.get_canvas(); var canvas = UI.rfb.get_canvas();
if ((! canvas) || (! canvas.get_focused())) { if ((! canvas) || (! canvas.get_focused())) {
$('VNC_clipboard_text').blur(); $('VNC_clipboard_text').blur();
} }
@ -172,7 +172,7 @@ updateSetting: function(name, value) {
} }
// Update the settings control // Update the settings control
value = DefaultControls.getSetting(name); value = UI.getSetting(name);
if (ctrl.type === 'checkbox') { if (ctrl.type === 'checkbox') {
ctrl.checked = value; ctrl.checked = value;
} else if (typeof ctrl.options !== 'undefined') { } else if (typeof ctrl.options !== 'undefined') {
@ -211,7 +211,7 @@ initSetting: function(name, defVal) {
if (val === null) { if (val === null) {
val = WebUtil.readCookie(name, defVal); val = WebUtil.readCookie(name, defVal);
} }
DefaultControls.updateSetting(name, val); UI.updateSetting(name, val);
//Util.Debug("Setting '" + name + "' initialized to '" + val + "'"); //Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
return val; return val;
}, },
@ -221,39 +221,38 @@ initSetting: function(name, defVal) {
// On open, settings are refreshed from saved cookies. // On open, settings are refreshed from saved cookies.
// On close, settings are applied // On close, settings are applied
clickSettingsMenu: function() { clickSettingsMenu: function() {
var DC = DefaultControls; if (UI.settingsOpen) {
if (DC.settingsOpen) { UI.settingsApply();
DC.settingsApply();
DC.closeSettingsMenu(); UI.closeSettingsMenu();
} else { } else {
DC.updateSetting('encrypt'); UI.updateSetting('encrypt');
DC.updateSetting('true_color'); UI.updateSetting('true_color');
if (DC.rfb.get_canvas().get_cursor_uri()) { if (UI.rfb.get_canvas().get_cursor_uri()) {
DC.updateSetting('cursor'); UI.updateSetting('cursor');
} else { } else {
DC.updateSetting('cursor', false); UI.updateSetting('cursor', false);
$('VNC_cursor').disabled = true; $('VNC_cursor').disabled = true;
} }
DC.updateSetting('shared'); UI.updateSetting('shared');
DC.updateSetting('connectTimeout'); UI.updateSetting('connectTimeout');
DC.updateSetting('stylesheet'); UI.updateSetting('stylesheet');
DC.updateSetting('logging'); UI.updateSetting('logging');
DC.openSettingsMenu(); UI.openSettingsMenu();
} }
}, },
// Open menu // Open menu
openSettingsMenu: function() { openSettingsMenu: function() {
$('VNC_settings_menu').style.display = "block"; $('VNC_settings_menu').style.display = "block";
DefaultControls.settingsOpen = true; UI.settingsOpen = true;
}, },
// Close menu (without applying settings) // Close menu (without applying settings)
closeSettingsMenu: function() { closeSettingsMenu: function() {
$('VNC_settings_menu').style.display = "none"; $('VNC_settings_menu').style.display = "none";
DefaultControls.settingsOpen = false; UI.settingsOpen = false;
}, },
// Disable/enable controls depending on connection state // Disable/enable controls depending on connection state
@ -264,7 +263,7 @@ settingsDisabled: function(disabled, rfb) {
if (rfb && rfb.get_canvas() && rfb.get_canvas().get_cursor_uri()) { if (rfb && rfb.get_canvas() && rfb.get_canvas().get_cursor_uri()) {
$('VNC_cursor').disabled = disabled; $('VNC_cursor').disabled = disabled;
} else { } else {
DefaultControls.updateSetting('cursor', false); UI.updateSetting('cursor', false);
$('VNC_cursor').disabled = true; $('VNC_cursor').disabled = true;
} }
$('VNC_shared').disabled = disabled; $('VNC_shared').disabled = disabled;
@ -275,20 +274,19 @@ settingsDisabled: function(disabled, rfb) {
// Save/apply settings when 'Apply' button is pressed // Save/apply settings when 'Apply' button is pressed
settingsApply: function() { settingsApply: function() {
//Util.Debug(">> settingsApply"); //Util.Debug(">> settingsApply");
var DC = DefaultControls; UI.saveSetting('encrypt');
DC.saveSetting('encrypt'); UI.saveSetting('true_color');
DC.saveSetting('true_color'); if (UI.rfb.get_canvas().get_cursor_uri()) {
if (DC.rfb.get_canvas().get_cursor_uri()) { UI.saveSetting('cursor');
DC.saveSetting('cursor');
} }
DC.saveSetting('shared'); UI.saveSetting('shared');
DC.saveSetting('connectTimeout'); UI.saveSetting('connectTimeout');
DC.saveSetting('stylesheet'); UI.saveSetting('stylesheet');
DC.saveSetting('logging'); UI.saveSetting('logging');
// Settings with immediate (non-connected related) effect // Settings with immediate (non-connected related) effect
WebUtil.selectStylesheet(DC.getSetting('stylesheet')); WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
WebUtil.init_logging(DC.getSetting('logging')); WebUtil.init_logging(UI.getSetting('logging'));
//Util.Debug("<< settingsApply"); //Util.Debug("<< settingsApply");
}, },
@ -296,12 +294,12 @@ settingsApply: function() {
setPassword: function() { setPassword: function() {
DefaultControls.rfb.sendPassword($('VNC_password').value); UI.rfb.sendPassword($('VNC_password').value);
return false; return false;
}, },
sendCtrlAltDel: function() { sendCtrlAltDel: function() {
DefaultControls.rfb.sendCtrlAltDel(); UI.rfb.sendCtrlAltDel();
}, },
updateState: function(rfb, state, oldstate, msg) { updateState: function(rfb, state, oldstate, msg) {
@ -315,40 +313,40 @@ updateState: function(rfb, state, oldstate, msg) {
case 'fatal': case 'fatal':
c.disabled = true; c.disabled = true;
cad.disabled = true; cad.disabled = true;
DefaultControls.settingsDisabled(true, rfb); UI.settingsDisabled(true, rfb);
klass = "VNC_status_error"; klass = "VNC_status_error";
break; break;
case 'normal': case 'normal':
c.value = "Disconnect"; c.value = "Disconnect";
c.onclick = DefaultControls.disconnect; c.onclick = UI.disconnect;
c.disabled = false; c.disabled = false;
cad.disabled = false; cad.disabled = false;
DefaultControls.settingsDisabled(true, rfb); UI.settingsDisabled(true, rfb);
klass = "VNC_status_normal"; klass = "VNC_status_normal";
break; break;
case 'disconnected': case 'disconnected':
case 'loaded': case 'loaded':
c.value = "Connect"; c.value = "Connect";
c.onclick = DefaultControls.connect; c.onclick = UI.connect;
c.disabled = false; c.disabled = false;
cad.disabled = true; cad.disabled = true;
DefaultControls.settingsDisabled(false, rfb); UI.settingsDisabled(false, rfb);
klass = "VNC_status_normal"; klass = "VNC_status_normal";
break; break;
case 'password': case 'password':
c.value = "Send Password"; c.value = "Send Password";
c.onclick = DefaultControls.setPassword; c.onclick = UI.setPassword;
c.disabled = false; c.disabled = false;
cad.disabled = true; cad.disabled = true;
DefaultControls.settingsDisabled(true, rfb); UI.settingsDisabled(true, rfb);
klass = "VNC_status_warn"; klass = "VNC_status_warn";
break; break;
default: default:
c.disabled = true; c.disabled = true;
cad.disabled = true; cad.disabled = true;
DefaultControls.settingsDisabled(true, rfb); UI.settingsDisabled(true, rfb);
klass = "VNC_status_warn"; klass = "VNC_status_warn";
break; break;
} }
@ -362,16 +360,16 @@ updateState: function(rfb, state, oldstate, msg) {
}, },
clipReceive: function(rfb, text) { clipReceive: function(rfb, text) {
Util.Debug(">> DefaultControls.clipReceive: " + text.substr(0,40) + "..."); Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "...");
$('VNC_clipboard_text').value = text; $('VNC_clipboard_text').value = text;
Util.Debug("<< DefaultControls.clipReceive"); Util.Debug("<< UI.clipReceive");
}, },
connect: function() { connect: function() {
var host, port, password, DC = DefaultControls; var host, port, password;
DC.closeSettingsMenu(); UI.closeSettingsMenu();
host = $('VNC_host').value; host = $('VNC_host').value;
port = $('VNC_port').value; port = $('VNC_port').value;
@ -380,39 +378,39 @@ connect: function() {
throw("Must set host and port"); throw("Must set host and port");
} }
DC.rfb.set_encrypt(DC.getSetting('encrypt')); UI.rfb.set_encrypt(UI.getSetting('encrypt'));
DC.rfb.set_true_color(DC.getSetting('true_color')); UI.rfb.set_true_color(UI.getSetting('true_color'));
DC.rfb.set_local_cursor(DC.getSetting('cursor')); UI.rfb.set_local_cursor(UI.getSetting('cursor'));
DC.rfb.set_shared(DC.getSetting('shared')); UI.rfb.set_shared(UI.getSetting('shared'));
DC.rfb.set_connectTimeout(DC.getSetting('connectTimeout')); UI.rfb.set_connectTimeout(UI.getSetting('connectTimeout'));
DC.rfb.connect(host, port, password); UI.rfb.connect(host, port, password);
}, },
disconnect: function() { disconnect: function() {
DefaultControls.closeSettingsMenu(); UI.closeSettingsMenu();
DefaultControls.rfb.disconnect(); UI.rfb.disconnect();
}, },
canvasBlur: function() { canvasBlur: function() {
DefaultControls.rfb.get_canvas().set_focused(false); UI.rfb.get_canvas().set_focused(false);
}, },
canvasFocus: function() { canvasFocus: function() {
DefaultControls.rfb.get_canvas().set_focused(true); UI.rfb.get_canvas().set_focused(true);
}, },
clipClear: function() { clipClear: function() {
$('VNC_clipboard_text').value = ""; $('VNC_clipboard_text').value = "";
DefaultControls.rfb.clipboardPasteFrom(""); UI.rfb.clipboardPasteFrom("");
}, },
clipSend: function() { clipSend: function() {
var text = $('VNC_clipboard_text').value; var text = $('VNC_clipboard_text').value;
Util.Debug(">> DefaultControls.clipSend: " + text.substr(0,40) + "..."); Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "...");
DefaultControls.rfb.clipboardPasteFrom(text); UI.rfb.clipboardPasteFrom(text);
Util.Debug("<< DefaultControls.clipSend"); Util.Debug("<< UI.clipSend");
} }
}; };

View File

@ -1,6 +1,6 @@
<html> <html>
<!-- <!--
noVNC example: simple example using default controls noVNC example: simple example using default UI
Copyright (C) 2010 Joel Martin Copyright (C) 2010 Joel Martin
Licensed under LGPL-3 (see LICENSE.txt) Licensed under LGPL-3 (see LICENSE.txt)
--> -->
@ -14,7 +14,7 @@
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
--> -->
<script src="include/vnc.js"></script> <script src="include/vnc.js"></script>
<script src="include/default_controls.js"></script> <script src="include/ui.js"></script>
</head> </head>
<body> <body>
@ -22,7 +22,7 @@
<script> <script>
window.onload = function () { window.onload = function () {
DefaultControls.load('vnc'); UI.load('vnc');
}; };
</script> </script>