From ded9dfae10198ea143c6143e063921d166fbebd1 Mon Sep 17 00:00:00 2001 From: Joel Martin Date: Tue, 11 May 2010 16:13:52 -0500 Subject: [PATCH] Styling/integration refactoring. - Instead of onload override, move to RFB.load function that takes a parameter for the target DOM ID. This allows the user to have their own onload function. - Add "VNC_" prefix to all element ID names. Only create DOM elements if they don't already exist on the page, otherwise use the existing elements. - Move all styling to separate stylesheet. - Use list model for control styling. --- README.md | 19 +++++ include/plain.css | 50 +++++++++++++ vnc.html | 7 +- vnc.js | 179 ++++++++++++++++++++++++++-------------------- 4 files changed, 177 insertions(+), 78 deletions(-) create mode 100644 include/plain.css diff --git a/README.md b/README.md index efa4945f..7197c4ac 100644 --- a/README.md +++ b/README.md @@ -78,3 +78,22 @@ Usage password that the vnc server is using (if any). Hit the Connect button and enjoy! + +Integration +----------- + +The client is designed to be easily integrated with existing web +structure and style. + +At a minimum you must include the script and call the RFB.load() +function which takes a parameter that is the ID of the DOM element to +fill. For example: + + +
Loading
+ + + + + +The file include/plain.css has a list of stylable elements. diff --git a/include/plain.css b/include/plain.css new file mode 100644 index 00000000..e4782139 --- /dev/null +++ b/include/plain.css @@ -0,0 +1,50 @@ +#VNC_controls { + overflow: hidden; +} +#VNC_controls ul { + list-style: none; + margin: 0; + padding: 0; +} +#VNC_controls li { + float: left; + margin-right: 15px; +} + +#VNC_host { + width: 100; +} +#VNC_port { + width: 50; +} +#VNC_password { + width: 80; +} +#VNC_encrypt { +} +#VNC_connect_button { + width: 100px; +} + +#VNC_status { + margin-top: 15px; + text-align: center; + background: #eee; +} + +/* Do not set width/height for VNC_screen or VNC_canvas or incorrect + * scaling will occur. Canvas resizes to remote VNC settings */ +#VNC_screen { + text-align: center; + display: table; +} +#VNC_canvas { + background: #eee; +} + +#VNC_clipboard_clear_button { +} +#VNC_clipboard_text { + font-size: 9; +} + diff --git a/vnc.html b/vnc.html index 4c721717..b58b4f69 100644 --- a/vnc.html +++ b/vnc.html @@ -2,11 +2,16 @@ VNC Client - +
Loading
+ + + diff --git a/vnc.js b/vnc.js index 7a816b5a..7d272ef6 100644 --- a/vnc.js +++ b/vnc.js @@ -1,10 +1,9 @@ /* - * HTML5 VNC client. To use, include this script and define a div with - * id of 'vnc'. For example: - * - * - *
Loading
- * + * HTML5 VNC client + * + * Licensed under AGPL-3 (see LICENSE.AGPL-3) + * + * See README.md for usage and integration instructions. * * This script defines the following globals: * VNC_scripts, VNC_native_ws, FBU, RFB, @@ -38,66 +37,6 @@ if (window.WebSocket) { } document.write(VNC_scripts); -/* - * Load the controls - */ -window.onload = function () { - console.log("onload"); - - /* Populate the 'vnc' div */ - var html = ""; - html += '
'; - html += 'Host:  '; - html += 'Port:  '; - html += 'Password:  '; - html += 'Encrypt:  '; - html += '> clipboardCopyTo: " + text.substr(0,40) + "..."); - $('clipboard').value = text; + $('VNC_clipboard_text').value = text; console.log("<< clipboardCopyTo"); }, clipboardPasteFrom: function () { if (RFB.state != "normal") return; - var text = $('clipboard').value; + var text = $('VNC_clipboard_text').value; console.log(">> clipboardPasteFrom: " + text.substr(0,40) + "..."); RFB.send_array(RFB.clientCutText(text)); console.log("<< clipboardPasteFrom"); }, clipboardClear: function () { - $('clipboard').value = ''; + $('VNC_clipboard_text').value = ''; RFB.clipboardPasteFrom(); }, updateState: function(state, statusMsg) { - var s = $('status'); - var c = $('connectButton'); + var s = $('VNC_status'); + var c = $('VNC_connect_button'); var func = function(msg) { console.log(msg) }; switch (state) { case 'failed': @@ -1134,10 +1073,10 @@ init_vars: function () { connect: function () { console.log(">> connect"); - RFB.host = $('host').value; - RFB.port = $('port').value; - RFB.password = $('password').value; - if ($('encrypt').checked) { + RFB.host = $('VNC_host').value; + RFB.port = $('VNC_port').value; + RFB.password = $('VNC_password').value; + if ($('VNC_encrypt').checked) { RFB.scheme = "wss://"; } else { RFB.scheme = "ws://"; @@ -1180,4 +1119,90 @@ disconnect: function () { console.log("<< disconnect"); }, +/* + * Load the controls + */ +load: function (target) { + console.log(">> RFB.load"); + + if (!target) { target = 'vnc' }; + + /* Populate the 'vnc' div */ + var html = ""; + if ($('VNC_controls') === null) { + html += '
'; + html += '
    '; + html += '
  • Host:
    • '; + html += '
  • Port:
    • '; + html += '
  • Password:
    • '; + html += '
  • Encrypt:
    • '; + html += '