From 99d9af6c26f06a90813b8878a15cae2b12904aa1 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 17:27:17 +0200 Subject: [PATCH 01/18] Switch names between the container and the screen The noVNC_container now contains the logo and the screen. While the noVNC_screen in turn contains the canvas. --- include/base.css | 9 +++++---- include/ui.js | 28 +++++++++++++++------------- vnc.html | 4 ++-- 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/include/base.css b/include/base.css index 2769357..af28471 100644 --- a/include/base.css +++ b/include/base.css @@ -113,9 +113,7 @@ html { float:right; } -/* Do not set width/height for VNC_screen or VNC_canvas or incorrect - * scaling will occur. Canvas resizes to remote VNC settings */ -#noVNC_screen { +#noVNC_container { display: table; width:100%; height:100%; @@ -124,7 +122,7 @@ html { /*border-top-left-radius: 800px 600px;*/ } -#noVNC_container { +#noVNC_screen { display: none; position: absolute; margin: 0px; @@ -137,6 +135,9 @@ html { height: auto; } +/* Do not set width/height for VNC_canvas or incorrect + * scaling will occur. Canvas size depends on remote VNC + * settings and noVNC settings. */ #noVNC_canvas { position: absolute; left: 0; diff --git a/include/ui.js b/include/ui.js index cfdedb3..066a35a 100644 --- a/include/ui.js +++ b/include/ui.js @@ -248,7 +248,7 @@ var UI; onresize: function (callback) { if (!UI.rfb) return; - var size = UI.getCanvasLimit(); + var size = UI.screenSize(); if (size && UI.rfb_state === 'normal' && UI.rfb.get_display()) { var display = UI.rfb.get_display(); @@ -278,17 +278,19 @@ var UI; } }, - getCanvasLimit: function () { - var container = $D('noVNC_container'); + // The screen is always the same size as the available + // viewport minus the height of the control bar + screenSize: function () { + var screen = $D('noVNC_screen'); // Hide the scrollbars until the size is calculated - container.style.overflow = "hidden"; + screen.style.overflow = "hidden"; - var pos = Util.getPosition(container); + var pos = Util.getPosition(screen); var w = pos.width; var h = pos.height; - container.style.overflow = "visible"; + screen.style.overflow = "visible"; if (isNaN(w) || isNaN(h)) { return false; @@ -687,7 +689,7 @@ var UI; break; case 'disconnected': $D('noVNC_logo').style.display = "block"; - $D('noVNC_container').style.display = "none"; + $D('noVNC_screen').style.display = "none"; /* falls through */ case 'loaded': klass = "noVNC_status_normal"; @@ -844,7 +846,7 @@ var UI; //Close dialog. setTimeout(UI.setBarPosition, 100); $D('noVNC_logo').style.display = "none"; - $D('noVNC_container').style.display = "inline"; + $D('noVNC_screen').style.display = "inline"; }, disconnect: function() { @@ -855,7 +857,7 @@ var UI; UI.rfb.set_onFBUComplete(UI.FBUComplete); $D('noVNC_logo').style.display = "block"; - $D('noVNC_container').style.display = "none"; + $D('noVNC_screen').style.display = "none"; // Don't display the connection settings until we're actually disconnected }, @@ -919,19 +921,19 @@ var UI; // If clipping, update clipping settings display.set_viewport(true); - var size = UI.getCanvasLimit(); + var size = UI.screenSize(); if (size) { display.set_maxWidth(size.w); display.set_maxHeight(size.h); // Hide potential scrollbars that can skew the position - $D('noVNC_container').style.overflow = "hidden"; + $D('noVNC_screen').style.overflow = "hidden"; // The x position marks the left margin of the canvas, // remove the margin from both sides to keep it centered var new_w = size.w - (2 * Util.getPosition($D('noVNC_canvas')).x); - $D('noVNC_container').style.overflow = "visible"; + $D('noVNC_screen').style.overflow = "visible"; display.viewportChangeSize(new_w, size.h); } @@ -1218,7 +1220,7 @@ var UI; $D('noVNC-control-bar').style.top = (window.pageYOffset) + 'px'; $D('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px'; - var vncwidth = $D('noVNC_screen').style.offsetWidth; + var vncwidth = $D('noVNC_container').style.offsetWidth; $D('noVNC-control-bar').style.width = vncwidth + 'px'; } diff --git a/vnc.html b/vnc.html index f64c750..c0f242c 100644 --- a/vnc.html +++ b/vnc.html @@ -207,11 +207,11 @@ -
+

no
VNC

-
+
Canvas not supported. From 42043aa322dd9fea972910196c7b5e0e52446709 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 18:01:15 +0200 Subject: [PATCH 02/18] Cleanup for the resize related functions Renamed functions, added clarifying comments and moved the resize related functions closer to the other viewport functions. --- include/rfb.js | 2 + include/ui.js | 147 ++++++++++++++++++++++++++----------------------- 2 files changed, 81 insertions(+), 68 deletions(-) diff --git a/include/rfb.js b/include/rfb.js index 48fa5a8..9e4525b 100644 --- a/include/rfb.js +++ b/include/rfb.js @@ -311,6 +311,8 @@ var RFB; this._sock.flush(); }, + // Requests a change of remote desktop size. This message is an extension + // and may only be sent if we have received an ExtendedDesktopSize message setDesktopSize: function (width, height) { if (this._rfb_state !== "normal") { return; } diff --git a/include/ui.js b/include/ui.js index 066a35a..6a6b6f4 100644 --- a/include/ui.js +++ b/include/ui.js @@ -1,7 +1,7 @@ /* * noVNC: HTML5 VNC client * Copyright (C) 2012 Joel Martin - * Copyright (C) 2015 Samuel Mannehed for Cendio AB + * Copyright (C) 2016 Samuel Mannehed for Cendio AB * Licensed under MPL 2.0 (see LICENSE.txt) * * See README.md for usage and integration instructions. @@ -132,7 +132,7 @@ var UI; UI.setBarPosition(); Util.addEvent(window, 'resize', function () { - UI.onresize(); + UI.applyResizeMode(); UI.setViewClip(); UI.updateViewDrag(); UI.setBarPosition(); @@ -188,7 +188,7 @@ var UI; 'onUpdateState': UI.updateState, 'onXvpInit': UI.updateXvpVisualState, 'onClipboard': UI.clipReceive, - 'onFBUComplete': UI.FBUComplete, + 'onFBUComplete': UI.initialResize, 'onFBResize': UI.updateViewDrag, 'onDesktopName': UI.updateDocumentTitle}); return true; @@ -245,60 +245,6 @@ var UI; $D("noVNC_resize").onchange = UI.enableDisableViewClip; }, - onresize: function (callback) { - if (!UI.rfb) return; - - var size = UI.screenSize(); - - if (size && UI.rfb_state === 'normal' && UI.rfb.get_display()) { - var display = UI.rfb.get_display(); - var scaleType = UI.getSetting('resize'); - if (scaleType === 'remote') { - // use remote resizing - - // When the local window has been resized, wait until the size remains - // the same for 0.5 seconds before sending the request for changing - // the resolution of the session - clearTimeout(UI.resizeTimeout); - UI.resizeTimeout = setTimeout(function(){ - display.set_maxWidth(size.w); - display.set_maxHeight(size.h); - Util.Debug('Attempting setDesktopSize(' + - size.w + ', ' + size.h + ')'); - UI.rfb.setDesktopSize(size.w, size.h); - }, 500); - } else if (scaleType === 'scale' || scaleType === 'downscale') { - // use local scaling - - var downscaleOnly = scaleType === 'downscale'; - var scaleRatio = display.autoscale(size.w, size.h, downscaleOnly); - UI.rfb.get_mouse().set_scale(scaleRatio); - Util.Debug('Scaling by ' + UI.rfb.get_mouse().get_scale()); - } - } - }, - - // The screen is always the same size as the available - // viewport minus the height of the control bar - screenSize: function () { - var screen = $D('noVNC_screen'); - - // Hide the scrollbars until the size is calculated - screen.style.overflow = "hidden"; - - var pos = Util.getPosition(screen); - var w = pos.width; - var h = pos.height; - - screen.style.overflow = "visible"; - - if (isNaN(w) || isNaN(h)) { - return false; - } else { - return {w: w, h: h}; - } - }, - // Read form control compatible setting from cookie getSetting: function(name) { var ctrl = $D('noVNC_' + name); @@ -792,16 +738,6 @@ var UI; } }, - // This resize can not be done until we know from the first Frame Buffer Update - // if it is supported or not. - // The resize is needed to make sure the server desktop size is updated to the - // corresponding size of the current local window when reconnecting to an - // existing session. - FBUComplete: function(rfb, fbu) { - UI.onresize(); - UI.rfb.set_onFBUComplete(function() { }); - }, - // Display the desktop name in the document title updateDocumentTitle: function(rfb, name) { document.title = name + " - noVNC"; @@ -854,7 +790,7 @@ var UI; UI.rfb.disconnect(); // Restore the callback used for initial resize - UI.rfb.set_onFBUComplete(UI.FBUComplete); + UI.rfb.set_onFBUComplete(UI.initialResize); $D('noVNC_logo').style.display = "block"; $D('noVNC_screen').style.display = "none"; @@ -888,6 +824,81 @@ var UI; Util.Debug("<< UI.clipSend"); }, + + // Apply remote resizing or local scaling + applyResizeMode: function () { + if (!UI.rfb) return; + + var screen = UI.screenSize(); + + if (screen && UI.rfb_state === 'normal' && UI.rfb.get_display()) { + + var display = UI.rfb.get_display(); + var resizeMode = UI.getSetting('resize'); + + if (resizeMode === 'remote') { + + // Request changing the resolution of the remote display to + // the size of the local browser viewport. + + // In order to not send multiple requests before the browser-resize + // is finished we wait 0.5 seconds before sending the request. + clearTimeout(UI.resizeTimeout); + UI.resizeTimeout = setTimeout(function(){ + + // Limit the viewport to the size of the browser window + display.set_maxWidth(screen.w); + display.set_maxHeight(screen.h); + + Util.Debug('Attempting setDesktopSize(' + + screen.w + ', ' + screen.h + ')'); + + // Request a remote size covering the viewport + UI.rfb.setDesktopSize(screen.w, screen.h); + }, 500); + + } else if (resizeMode === 'scale' || resizeMode === 'downscale') { + var downscaleOnly = resizeMode === 'downscale'; + var scaleRatio = display.autoscale(screen.w, screen.h, downscaleOnly); + UI.rfb.get_mouse().set_scale(scaleRatio); + Util.Debug('Scaling by ' + UI.rfb.get_mouse().get_scale()); + } + } + }, + + // The screen is always the same size as the available viewport + // in the browser window minus the height of the control bar + screenSize: function () { + var screen = $D('noVNC_screen'); + + // Hide the scrollbars until the size is calculated + screen.style.overflow = "hidden"; + + var pos = Util.getPosition(screen); + var w = pos.width; + var h = pos.height; + + screen.style.overflow = "visible"; + + if (isNaN(w) || isNaN(h)) { + return false; + } else { + return {w: w, h: h}; + } + }, + + // Normally we only apply the current resize mode after a window resize + // event. This means that when a new connection is opened, there is no + // resize mode active. + // We have to wait until the first FBU because this is where the client + // will find the supported encodings of the server. Some calls later in + // the chain is dependant on knowing the server-capabilities. + initialResize: function(rfb, fbu) { + UI.applyResizeMode(); + // After doing this once, we remove the callback. + UI.rfb.set_onFBUComplete(function() { }); + }, + // Set and configure viewport clipping setViewClip: function(clip) { var display; From d2aecf2e44d6d40fcb13eee46a6c69af02efdec5 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 18:40:13 +0200 Subject: [PATCH 03/18] Moved UpdateState and UpdateVisualState --- include/ui.js | 207 +++++++++++++++++++++++++------------------------- 1 file changed, 103 insertions(+), 104 deletions(-) diff --git a/include/ui.js b/include/ui.js index 6a6b6f4..1c87438 100644 --- a/include/ui.js +++ b/include/ui.js @@ -245,6 +245,109 @@ var UI; $D("noVNC_resize").onchange = UI.enableDisableViewClip; }, + updateState: function(rfb, state, oldstate, msg) { + UI.rfb_state = state; + var klass; + switch (state) { + case 'failed': + case 'fatal': + klass = "noVNC_status_error"; + break; + case 'normal': + klass = "noVNC_status_normal"; + break; + case 'disconnected': + $D('noVNC_logo').style.display = "block"; + $D('noVNC_screen').style.display = "none"; + /* falls through */ + case 'loaded': + klass = "noVNC_status_normal"; + break; + case 'password': + UI.toggleConnectPanel(); + + $D('noVNC_connect_button').value = "Send Password"; + $D('noVNC_connect_button').onclick = UI.setPassword; + $D('noVNC_password').focus(); + + klass = "noVNC_status_warn"; + break; + default: + klass = "noVNC_status_warn"; + break; + } + + if (typeof(msg) !== 'undefined') { + $D('noVNC-control-bar').setAttribute("class", klass); + $D('noVNC_status').innerHTML = msg; + } + + UI.updateVisualState(); + }, + + // Disable/enable controls depending on connection state + updateVisualState: function() { + var connected = UI.rfb && UI.rfb_state === 'normal'; + + //Util.Debug(">> updateVisualState"); + $D('noVNC_encrypt').disabled = connected; + $D('noVNC_true_color').disabled = connected; + if (Util.browserSupportsCursorURIs()) { + $D('noVNC_cursor').disabled = connected; + } else { + UI.updateSetting('cursor', !UI.isTouchDevice); + $D('noVNC_cursor').disabled = true; + } + + UI.enableDisableViewClip(); + $D('noVNC_resize').disabled = connected; + $D('noVNC_shared').disabled = connected; + $D('noVNC_view_only').disabled = connected; + $D('noVNC_path').disabled = connected; + $D('noVNC_repeaterID').disabled = connected; + + if (connected) { + UI.setViewClip(); + UI.setMouseButton(1); + $D('clipboardButton').style.display = "inline"; + $D('showKeyboard').style.display = "inline"; + $D('noVNC_extra_keys').style.display = ""; + $D('sendCtrlAltDelButton').style.display = "inline"; + } else { + UI.setMouseButton(); + $D('clipboardButton').style.display = "none"; + $D('showKeyboard').style.display = "none"; + $D('noVNC_extra_keys').style.display = "none"; + $D('sendCtrlAltDelButton').style.display = "none"; + UI.updateXvpVisualState(0); + } + + // State change disables viewport dragging. + // It is enabled (toggled) by direct click on the button + UI.updateViewDrag(false); + + switch (UI.rfb_state) { + case 'fatal': + case 'failed': + case 'disconnected': + $D('connectButton').style.display = ""; + $D('disconnectButton').style.display = "none"; + UI.connSettingsOpen = false; + UI.toggleConnectPanel(); + break; + case 'loaded': + $D('connectButton').style.display = ""; + $D('disconnectButton').style.display = "none"; + break; + default: + $D('connectButton').style.display = "none"; + $D('disconnectButton').style.display = ""; + break; + } + + //Util.Debug("<< updateVisualState"); + }, + // Read form control compatible setting from cookie getSetting: function(name) { var ctrl = $D('noVNC_' + name); @@ -575,7 +678,6 @@ var UI; }, - setPassword: function() { UI.rfb.sendPassword($D('noVNC_password').value); //Reset connect button. @@ -622,109 +724,6 @@ var UI; } }, - updateState: function(rfb, state, oldstate, msg) { - UI.rfb_state = state; - var klass; - switch (state) { - case 'failed': - case 'fatal': - klass = "noVNC_status_error"; - break; - case 'normal': - klass = "noVNC_status_normal"; - break; - case 'disconnected': - $D('noVNC_logo').style.display = "block"; - $D('noVNC_screen').style.display = "none"; - /* falls through */ - case 'loaded': - klass = "noVNC_status_normal"; - break; - case 'password': - UI.toggleConnectPanel(); - - $D('noVNC_connect_button').value = "Send Password"; - $D('noVNC_connect_button').onclick = UI.setPassword; - $D('noVNC_password').focus(); - - klass = "noVNC_status_warn"; - break; - default: - klass = "noVNC_status_warn"; - break; - } - - if (typeof(msg) !== 'undefined') { - $D('noVNC-control-bar').setAttribute("class", klass); - $D('noVNC_status').innerHTML = msg; - } - - UI.updateVisualState(); - }, - - // Disable/enable controls depending on connection state - updateVisualState: function() { - var connected = UI.rfb && UI.rfb_state === 'normal'; - - //Util.Debug(">> updateVisualState"); - $D('noVNC_encrypt').disabled = connected; - $D('noVNC_true_color').disabled = connected; - if (Util.browserSupportsCursorURIs()) { - $D('noVNC_cursor').disabled = connected; - } else { - UI.updateSetting('cursor', !UI.isTouchDevice); - $D('noVNC_cursor').disabled = true; - } - - UI.enableDisableViewClip(); - $D('noVNC_resize').disabled = connected; - $D('noVNC_shared').disabled = connected; - $D('noVNC_view_only').disabled = connected; - $D('noVNC_path').disabled = connected; - $D('noVNC_repeaterID').disabled = connected; - - if (connected) { - UI.setViewClip(); - UI.setMouseButton(1); - $D('clipboardButton').style.display = "inline"; - $D('showKeyboard').style.display = "inline"; - $D('noVNC_extra_keys').style.display = ""; - $D('sendCtrlAltDelButton').style.display = "inline"; - } else { - UI.setMouseButton(); - $D('clipboardButton').style.display = "none"; - $D('showKeyboard').style.display = "none"; - $D('noVNC_extra_keys').style.display = "none"; - $D('sendCtrlAltDelButton').style.display = "none"; - UI.updateXvpVisualState(0); - } - - // State change disables viewport dragging. - // It is enabled (toggled) by direct click on the button - UI.updateViewDrag(false); - - switch (UI.rfb_state) { - case 'fatal': - case 'failed': - case 'disconnected': - $D('connectButton').style.display = ""; - $D('disconnectButton').style.display = "none"; - UI.connSettingsOpen = false; - UI.toggleConnectPanel(); - break; - case 'loaded': - $D('connectButton').style.display = ""; - $D('disconnectButton').style.display = "none"; - break; - default: - $D('connectButton').style.display = "none"; - $D('disconnectButton').style.display = ""; - break; - } - - //Util.Debug("<< updateVisualState"); - }, - // Disable/enable XVP button updateXvpVisualState: function(ver) { if (ver >= 1) { From a6a7260642c716d3147448293230282619625347 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 18:42:10 +0200 Subject: [PATCH 04/18] Remove whitespace from function definitions --- include/ui.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/include/ui.js b/include/ui.js index 1c87438..f73e6e4 100644 --- a/include/ui.js +++ b/include/ui.js @@ -47,7 +47,7 @@ var UI; // Setup rfb object, load settings from browser storage, then call // UI.init to setup the UI/menus - load: function (callback) { + load: function(callback) { WebUtil.initSettings(UI.start, callback); }, @@ -182,7 +182,7 @@ var UI; } }, - initRFB: function () { + initRFB: function() { try { UI.rfb = new RFB({'target': $D('noVNC_canvas'), 'onUpdateState': UI.updateState, @@ -825,7 +825,7 @@ var UI; // Apply remote resizing or local scaling - applyResizeMode: function () { + applyResizeMode: function() { if (!UI.rfb) return; var screen = UI.screenSize(); @@ -867,7 +867,7 @@ var UI; // The screen is always the same size as the available viewport // in the browser window minus the height of the control bar - screenSize: function () { + screenSize: function() { var screen = $D('noVNC_screen'); // Hide the scrollbars until the size is calculated @@ -951,7 +951,7 @@ var UI; }, // Handle special cases where clipping is forced on/off or locked - enableDisableViewClip: function () { + enableDisableViewClip: function() { var resizeElem = $D('noVNC_resize'); var connected = UI.rfb && UI.rfb_state === 'normal'; From 07464805689720653dc72d22b00980f423db943e Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 18:47:55 +0200 Subject: [PATCH 05/18] Moved and changed order of the setting-functions --- include/ui.js | 160 +++++++++++++++++++++++++------------------------- 1 file changed, 80 insertions(+), 80 deletions(-) diff --git a/include/ui.js b/include/ui.js index f73e6e4..c67077f 100644 --- a/include/ui.js +++ b/include/ui.js @@ -348,17 +348,14 @@ var UI; //Util.Debug("<< updateVisualState"); }, - // Read form control compatible setting from cookie - getSetting: function(name) { - var ctrl = $D('noVNC_' + name); - var val = WebUtil.readSetting(name); - if (typeof val !== 'undefined' && val !== null && ctrl.type === 'checkbox') { - if (val.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) { - val = false; - } else { - val = true; - } + // Initial page load read/initialization of settings + initSetting: function(name, defVal) { + // Check Query string followed by cookie + var val = WebUtil.getConfigVar(name); + if (val === null) { + val = WebUtil.readSetting(name, defVal); } + UI.updateSetting(name, val); return val; }, @@ -410,23 +407,85 @@ var UI; return val; }, - // Initial page load read/initialization of settings - initSetting: function(name, defVal) { - // Check Query string followed by cookie - var val = WebUtil.getConfigVar(name); - if (val === null) { - val = WebUtil.readSetting(name, defVal); - } - UI.updateSetting(name, val); - return val; - }, - // Force a setting to be a certain value forceSetting: function(name, val) { UI.updateSetting(name, val); return val; }, + // Read form control compatible setting from cookie + getSetting: function(name) { + var ctrl = $D('noVNC_' + name); + var val = WebUtil.readSetting(name); + if (typeof val !== 'undefined' && val !== null && ctrl.type === 'checkbox') { + if (val.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) { + val = false; + } else { + val = true; + } + } + return val; + }, + + // Open menu + openSettingsMenu: function() { + // Close the description panel + $D('noVNC_description').style.display = "none"; + // Close clipboard panel if open + if (UI.clipboardOpen === true) { + UI.toggleClipboardPanel(); + } + // Close connection settings if open + if (UI.connSettingsOpen === true) { + UI.toggleConnectPanel(); + } + // Close XVP panel if open + if (UI.xvpOpen === true) { + UI.toggleXvpPanel(); + } + $D('noVNC_settings').style.display = "block"; + $D('settingsButton').className = "noVNC_status_button_selected"; + UI.settingsOpen = true; + }, + + // Close menu (without applying settings) + closeSettingsMenu: function() { + $D('noVNC_settings').style.display = "none"; + $D('settingsButton').className = "noVNC_status_button"; + UI.settingsOpen = false; + }, + + // Toggle the settings menu: + // On open, settings are refreshed from saved cookies. + // On close, settings are applied + toggleSettingsPanel: function() { + // Close the description panel + $D('noVNC_description').style.display = "none"; + if (UI.settingsOpen) { + UI.settingsApply(); + UI.closeSettingsMenu(); + } else { + UI.updateSetting('encrypt'); + UI.updateSetting('true_color'); + if (Util.browserSupportsCursorURIs()) { + UI.updateSetting('cursor'); + } else { + UI.updateSetting('cursor', !UI.isTouchDevice); + $D('noVNC_cursor').disabled = true; + } + UI.updateSetting('clip'); + UI.updateSetting('resize'); + UI.updateSetting('shared'); + UI.updateSetting('view_only'); + UI.updateSetting('path'); + UI.updateSetting('repeaterID'); + UI.updateSetting('stylesheet'); + UI.updateSetting('logging'); + + UI.openSettingsMenu(); + } + }, + // Show the popup status togglePopupStatus: function(text) { @@ -587,65 +646,6 @@ var UI; } }, - // Toggle the settings menu: - // On open, settings are refreshed from saved cookies. - // On close, settings are applied - toggleSettingsPanel: function() { - // Close the description panel - $D('noVNC_description').style.display = "none"; - if (UI.settingsOpen) { - UI.settingsApply(); - UI.closeSettingsMenu(); - } else { - UI.updateSetting('encrypt'); - UI.updateSetting('true_color'); - if (Util.browserSupportsCursorURIs()) { - UI.updateSetting('cursor'); - } else { - UI.updateSetting('cursor', !UI.isTouchDevice); - $D('noVNC_cursor').disabled = true; - } - UI.updateSetting('clip'); - UI.updateSetting('resize'); - UI.updateSetting('shared'); - UI.updateSetting('view_only'); - UI.updateSetting('path'); - UI.updateSetting('repeaterID'); - UI.updateSetting('stylesheet'); - UI.updateSetting('logging'); - - UI.openSettingsMenu(); - } - }, - - // Open menu - openSettingsMenu: function() { - // Close the description panel - $D('noVNC_description').style.display = "none"; - // Close clipboard panel if open - if (UI.clipboardOpen === true) { - UI.toggleClipboardPanel(); - } - // Close connection settings if open - if (UI.connSettingsOpen === true) { - UI.toggleConnectPanel(); - } - // Close XVP panel if open - if (UI.xvpOpen === true) { - UI.toggleXvpPanel(); - } - $D('noVNC_settings').style.display = "block"; - $D('settingsButton').className = "noVNC_status_button_selected"; - UI.settingsOpen = true; - }, - - // Close menu (without applying settings) - closeSettingsMenu: function() { - $D('noVNC_settings').style.display = "none"; - $D('settingsButton').className = "noVNC_status_button"; - UI.settingsOpen = false; - }, - // Save/apply settings when 'Apply' button is pressed settingsApply: function() { //Util.Debug(">> settingsApply"); From 363a2bfe921f5c200161638a6c9f30436ebf27d0 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 19:04:32 +0200 Subject: [PATCH 06/18] Moved and split the popupStatus function Now if popupStatus is called twice it will refresh the duration of the popup. If you want to wait 1.5 seconds and close the popup you can click the popup itself. --- include/ui.js | 56 +++++++++++++++++++++++++-------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/include/ui.js b/include/ui.js index c67077f..7287837 100644 --- a/include/ui.js +++ b/include/ui.js @@ -221,8 +221,8 @@ var UI; $D("xvpShutdownButton").onclick = UI.xvpShutdown; $D("xvpRebootButton").onclick = UI.xvpReboot; $D("xvpResetButton").onclick = UI.xvpReset; - $D("noVNC_status").onclick = UI.togglePopupStatus; - $D("noVNC_popup_status").onclick = UI.togglePopupStatus; + $D("noVNC_status").onclick = UI.popupStatus; + $D("noVNC_popup_status").onclick = UI.closePopup; $D("xvpButton").onclick = UI.toggleXvpPanel; $D("clipboardButton").onclick = UI.toggleClipboardPanel; $D("fullscreenButton").onclick = UI.toggleFullscreen; @@ -348,6 +348,31 @@ var UI; //Util.Debug("<< updateVisualState"); }, + popupStatus: function(text) { + var psp = $D('noVNC_popup_status'); + + clearTimeout(UI.popupStatusTimeout); + + if (typeof text === 'string') { + psp.innerHTML = text; + } else { + psp.innerHTML = $D('noVNC_status').innerHTML; + } + psp.style.display = "block"; + psp.style.left = window.innerWidth/2 - + parseInt(window.getComputedStyle(psp).width)/2 -30 + "px"; + + // Show the popup for a maximum of 1.5 seconds + UI.popupStatusTimeout = setTimeout(function() { + UI.closePopup(); + }, 1500); + }, + + closePopup: function() { + clearTimeout(UI.popupStatusTimeout); + $D('noVNC_popup_status').style.display = "none"; + }, + // Initial page load read/initialization of settings initSetting: function(name, defVal) { // Check Query string followed by cookie @@ -486,31 +511,6 @@ var UI; } }, - - // Show the popup status - togglePopupStatus: function(text) { - var psp = $D('noVNC_popup_status'); - - var closePopup = function() { psp.style.display = "none"; }; - - if (window.getComputedStyle(psp).display === 'none') { - if (typeof text === 'string') { - psp.innerHTML = text; - } else { - psp.innerHTML = $D('noVNC_status').innerHTML; - } - psp.style.display = "block"; - psp.style.left = window.innerWidth/2 - - parseInt(window.getComputedStyle(psp).width)/2 -30 + "px"; - - // Show the popup for a maximum of 1.5 seconds - UI.popupStatusTimeout = setTimeout(function() { closePopup(); }, 1500); - } else { - clearTimeout(UI.popupStatusTimeout); - closePopup(); - } - }, - // Show the XVP panel toggleXvpPanel: function() { // Close the description panel @@ -968,7 +968,7 @@ var UI; // The browser is IE and we are in fullscreen mode. // - We need to force clipping while in fullscreen since // scrollbars doesn't work. - UI.togglePopupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen"); + UI.popupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen"); UI.rememberedClipSetting = UI.getSetting('clip'); UI.setViewClip(true); $D('noVNC_clip').disabled = true; From 079afca51938719cfaa5761a5e1a9d1f3881af52 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 19:13:35 +0200 Subject: [PATCH 07/18] Renamed showExtraKeys to toggleExtraKeys --- images/{showextrakeys.png => toggleextrakeys.png} | Bin include/base.css | 4 ++-- include/ui.js | 8 ++++---- vnc.html | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) rename images/{showextrakeys.png => toggleextrakeys.png} (100%) diff --git a/images/showextrakeys.png b/images/toggleextrakeys.png similarity index 100% rename from images/showextrakeys.png rename to images/toggleextrakeys.png diff --git a/include/base.css b/include/base.css index af28471..59e90c5 100644 --- a/include/base.css +++ b/include/base.css @@ -442,7 +442,7 @@ html { margin-left: 0px; } -#showExtraKeysButton { display: none; } +#toggleExtraKeysButton { display: none; } #toggleCtrlButton { display: inline; } #toggleAltButton { display: inline; } #sendTabButton { display: inline; } @@ -476,7 +476,7 @@ html { padding-right: 0px; } /* collapse the extra keys on lower resolutions */ - #showExtraKeysButton { + #toggleExtraKeysButton { display: inline; } #toggleCtrlButton { diff --git a/include/ui.js b/include/ui.js index 7287837..843f38f 100644 --- a/include/ui.js +++ b/include/ui.js @@ -211,7 +211,7 @@ var UI; $D("keyboardinput").onblur = UI.keyInputBlur; $D("keyboardinput").onsubmit = function () { return false; }; - $D("showExtraKeysButton").onclick = UI.showExtraKeys; + $D("toggleExtraKeysButton").onclick = UI.toggleExtraKeys; $D("toggleCtrlButton").onclick = UI.toggleCtrl; $D("toggleAltButton").onclick = UI.toggleAlt; $D("sendTabButton").onclick = UI.sendTab; @@ -1159,21 +1159,21 @@ var UI; UI.hideKeyboardTimeout = setTimeout(function() { UI.setKeyboard(); },100); }, - showExtraKeys: function() { + toggleExtraKeys: function() { UI.keepKeyboard(); if(UI.extraKeysVisible === false) { $D('toggleCtrlButton').style.display = "inline"; $D('toggleAltButton').style.display = "inline"; $D('sendTabButton').style.display = "inline"; $D('sendEscButton').style.display = "inline"; - $D('showExtraKeysButton').className = "noVNC_status_button_selected"; + $D('toggleExtraKeysButton').className = "noVNC_status_button_selected"; UI.extraKeysVisible = true; } else if(UI.extraKeysVisible === true) { $D('toggleCtrlButton').style.display = ""; $D('toggleAltButton').style.display = ""; $D('sendTabButton').style.display = ""; $D('sendEscButton').style.display = ""; - $D('showExtraKeysButton').className = "noVNC_status_button"; + $D('toggleExtraKeysButton').className = "noVNC_status_button"; UI.extraKeysVisible = false; } }, diff --git a/vnc.html b/vnc.html index c0f242c..cdf45dc 100644 --- a/vnc.html +++ b/vnc.html @@ -74,8 +74,8 @@ autocorrect="off" autocomplete="off" spellcheck="false" mozactionhint="Enter">
- + Date: Tue, 26 Apr 2016 23:21:32 +0200 Subject: [PATCH 08/18] Clarify comments and variable names for viewDrag --- include/ui.js | 40 +++++++++++++++++++--------------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/include/ui.js b/include/ui.js index 843f38f..872b9e9 100644 --- a/include/ui.js +++ b/include/ui.js @@ -984,38 +984,36 @@ var UI; } }, - // Update the viewport drag/move button + // Update the viewport drag state updateViewDrag: function(drag) { if (!UI.rfb) return; - var vmb = $D('noVNC_view_drag_button'); + var viewDragButton = $D('noVNC_view_drag_button'); - // Check if viewport drag is possible + // Check if viewport drag is possible. It is only possible + // if the remote display is clipping the client display. if (UI.rfb_state === 'normal' && UI.rfb.get_display().get_viewport() && UI.rfb.get_display().clippingDisplay()) { - // Show and enable the drag button - vmb.style.display = "inline"; - vmb.disabled = false; + viewDragButton.style.display = "inline"; + viewDragButton.disabled = false; } else { - // The VNC content is the same size as - // or smaller than the display - + // The size of the remote display is the same or smaller + // than the client display. Make sure viewport drag isn't + // active when it can't be used. if (UI.rfb.get_viewportDrag) { - // Turn off viewport drag when it's - // active since it can't be used here - vmb.className = "noVNC_status_button"; + viewDragButton.className = "noVNC_status_button"; UI.rfb.set_viewportDrag(false); } - // Disable or hide the drag button + // The button is disabled instead of hidden on touch devices if (UI.rfb_state === 'normal' && UI.isTouchDevice) { - vmb.style.display = "inline"; - vmb.disabled = true; + viewDragButton.style.display = "inline"; + viewDragButton.disabled = true; } else { - vmb.style.display = "none"; + viewDragButton.style.display = "none"; } return; } @@ -1023,10 +1021,10 @@ var UI; if (typeof(drag) !== "undefined" && typeof(drag) !== "object") { if (drag) { - vmb.className = "noVNC_status_button_selected"; + viewDragButton.className = "noVNC_status_button_selected"; UI.rfb.set_viewportDrag(true); } else { - vmb.className = "noVNC_status_button"; + viewDragButton.className = "noVNC_status_button"; UI.rfb.set_viewportDrag(false); } } @@ -1035,12 +1033,12 @@ var UI; toggleViewDrag: function() { if (!UI.rfb) return; - var vmb = $D('noVNC_view_drag_button'); + var viewDragButton = $D('noVNC_view_drag_button'); if (UI.rfb.get_viewportDrag()) { - vmb.className = "noVNC_status_button"; + viewDragButton.className = "noVNC_status_button"; UI.rfb.set_viewportDrag(false); } else { - vmb.className = "noVNC_status_button_selected"; + viewDragButton.className = "noVNC_status_button_selected"; UI.rfb.set_viewportDrag(true); } }, From 4f0ad13a844a906d8fb5db0b02bbfc8aa497ec45 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 23:26:13 +0200 Subject: [PATCH 09/18] Move the connect and disconnect functions --- include/ui.js | 171 +++++++++++++++++++++++++------------------------- 1 file changed, 85 insertions(+), 86 deletions(-) diff --git a/include/ui.js b/include/ui.js index 872b9e9..60fb49f 100644 --- a/include/ui.js +++ b/include/ui.js @@ -569,7 +569,91 @@ var UI; } }, - // Toggle fullscreen mode + // Show the connection settings panel/menu + toggleConnectPanel: function() { + // Close the description panel + $D('noVNC_description').style.display = "none"; + // Close connection settings if open + if (UI.settingsOpen === true) { + UI.settingsApply(); + UI.closeSettingsMenu(); + $D('connectButton').className = "noVNC_status_button"; + } + // Close clipboard panel if open + if (UI.clipboardOpen === true) { + UI.toggleClipboardPanel(); + } + // Close XVP panel if open + if (UI.xvpOpen === true) { + UI.toggleXvpPanel(); + } + + // Toggle Connection Panel + if (UI.connSettingsOpen === true) { + $D('noVNC_controls').style.display = "none"; + $D('connectButton').className = "noVNC_status_button"; + UI.connSettingsOpen = false; + UI.saveSetting('host'); + UI.saveSetting('port'); + UI.saveSetting('token'); + //UI.saveSetting('password'); + } else { + $D('noVNC_controls').style.display = "block"; + $D('connectButton').className = "noVNC_status_button_selected"; + UI.connSettingsOpen = true; + $D('noVNC_host').focus(); + } + }, + + connect: function() { + UI.closeSettingsMenu(); + UI.toggleConnectPanel(); + + var host = $D('noVNC_host').value; + var port = $D('noVNC_port').value; + var password = $D('noVNC_password').value; + var token = $D('noVNC_token').value; + var path = $D('noVNC_path').value; + + //if token is in path then ignore the new token variable + if (token) { + path = WebUtil.injectParamIfMissing(path, "token", token); + } + + if ((!host) || (!port)) { + throw new Error("Must set host and port"); + } + + if (!UI.initRFB()) return; + + UI.rfb.set_encrypt(UI.getSetting('encrypt')); + UI.rfb.set_true_color(UI.getSetting('true_color')); + UI.rfb.set_local_cursor(UI.getSetting('cursor')); + UI.rfb.set_shared(UI.getSetting('shared')); + UI.rfb.set_view_only(UI.getSetting('view_only')); + UI.rfb.set_repeaterID(UI.getSetting('repeaterID')); + + UI.rfb.connect(host, port, password, path); + + //Close dialog. + setTimeout(UI.setBarPosition, 100); + $D('noVNC_logo').style.display = "none"; + $D('noVNC_screen').style.display = "inline"; + }, + + disconnect: function() { + UI.closeSettingsMenu(); + UI.rfb.disconnect(); + + // Restore the callback used for initial resize + UI.rfb.set_onFBUComplete(UI.initialResize); + + $D('noVNC_logo').style.display = "block"; + $D('noVNC_screen').style.display = "none"; + + // Don't display the connection settings until we're actually disconnected + }, + toggleFullscreen: function() { if (document.fullscreenElement || // alternative standard method document.mozFullScreenElement || // currently working methods @@ -610,42 +694,6 @@ var UI; } }, - // Show the connection settings panel/menu - toggleConnectPanel: function() { - // Close the description panel - $D('noVNC_description').style.display = "none"; - // Close connection settings if open - if (UI.settingsOpen === true) { - UI.settingsApply(); - UI.closeSettingsMenu(); - $D('connectButton').className = "noVNC_status_button"; - } - // Close clipboard panel if open - if (UI.clipboardOpen === true) { - UI.toggleClipboardPanel(); - } - // Close XVP panel if open - if (UI.xvpOpen === true) { - UI.toggleXvpPanel(); - } - - // Toggle Connection Panel - if (UI.connSettingsOpen === true) { - $D('noVNC_controls').style.display = "none"; - $D('connectButton').className = "noVNC_status_button"; - UI.connSettingsOpen = false; - UI.saveSetting('host'); - UI.saveSetting('port'); - UI.saveSetting('token'); - //UI.saveSetting('password'); - } else { - $D('noVNC_controls').style.display = "block"; - $D('connectButton').className = "noVNC_status_button_selected"; - UI.connSettingsOpen = true; - $D('noVNC_host').focus(); - } - }, - // Save/apply settings when 'Apply' button is pressed settingsApply: function() { //Util.Debug(">> settingsApply"); @@ -748,55 +796,6 @@ var UI; Util.Debug("<< UI.clipReceive"); }, - connect: function() { - UI.closeSettingsMenu(); - UI.toggleConnectPanel(); - - var host = $D('noVNC_host').value; - var port = $D('noVNC_port').value; - var password = $D('noVNC_password').value; - var token = $D('noVNC_token').value; - var path = $D('noVNC_path').value; - - //if token is in path then ignore the new token variable - if (token) { - path = WebUtil.injectParamIfMissing(path, "token", token); - } - - if ((!host) || (!port)) { - throw new Error("Must set host and port"); - } - - if (!UI.initRFB()) return; - - UI.rfb.set_encrypt(UI.getSetting('encrypt')); - UI.rfb.set_true_color(UI.getSetting('true_color')); - UI.rfb.set_local_cursor(UI.getSetting('cursor')); - UI.rfb.set_shared(UI.getSetting('shared')); - UI.rfb.set_view_only(UI.getSetting('view_only')); - UI.rfb.set_repeaterID(UI.getSetting('repeaterID')); - - UI.rfb.connect(host, port, password, path); - - //Close dialog. - setTimeout(UI.setBarPosition, 100); - $D('noVNC_logo').style.display = "none"; - $D('noVNC_screen').style.display = "inline"; - }, - - disconnect: function() { - UI.closeSettingsMenu(); - UI.rfb.disconnect(); - - // Restore the callback used for initial resize - UI.rfb.set_onFBUComplete(UI.initialResize); - - $D('noVNC_logo').style.display = "block"; - $D('noVNC_screen').style.display = "none"; - - // Don't display the connection settings until we're actually disconnected - }, - displayBlur: function() { if (!UI.rfb) return; From d0ee767a68ca7ffe7889a8897fe92e9f32ec7a27 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 23:29:15 +0200 Subject: [PATCH 10/18] Renamed and moved updateXvpButton --- include/ui.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/include/ui.js b/include/ui.js index 60fb49f..2315772 100644 --- a/include/ui.js +++ b/include/ui.js @@ -186,7 +186,7 @@ var UI; try { UI.rfb = new RFB({'target': $D('noVNC_canvas'), 'onUpdateState': UI.updateState, - 'onXvpInit': UI.updateXvpVisualState, + 'onXvpInit': UI.updateXvpButton, 'onClipboard': UI.clipReceive, 'onFBUComplete': UI.initialResize, 'onFBResize': UI.updateViewDrag, @@ -319,7 +319,7 @@ var UI; $D('showKeyboard').style.display = "none"; $D('noVNC_extra_keys').style.display = "none"; $D('sendCtrlAltDelButton').style.display = "none"; - UI.updateXvpVisualState(0); + UI.updateXvpButton(0); } // State change disables viewport dragging. @@ -540,6 +540,19 @@ var UI; } }, + // Disable/enable XVP button + updateXvpButton: function(ver) { + if (ver >= 1) { + $D('xvpButton').style.display = 'inline'; + } else { + $D('xvpButton').style.display = 'none'; + // Close XVP panel if open + if (UI.xvpOpen === true) { + UI.toggleXvpPanel(); + } + } + }, + // Show the clipboard panel toggleClipboardPanel: function() { // Close the description panel @@ -772,19 +785,6 @@ var UI; } }, - // Disable/enable XVP button - updateXvpVisualState: function(ver) { - if (ver >= 1) { - $D('xvpButton').style.display = 'inline'; - } else { - $D('xvpButton').style.display = 'none'; - // Close XVP panel if open - if (UI.xvpOpen === true) { - UI.toggleXvpPanel(); - } - } - }, - // Display the desktop name in the document title updateDocumentTitle: function(rfb, name) { document.title = name + " - noVNC"; From 575503d0129582560eb4d1c046025dae79fe90d9 Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 23:41:58 +0200 Subject: [PATCH 11/18] Renamed and moved keyboard and mouse functions --- include/ui.js | 88 +++++++++++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 45 deletions(-) diff --git a/include/ui.js b/include/ui.js index 2315772..db0b3c1 100644 --- a/include/ui.js +++ b/include/ui.js @@ -208,7 +208,7 @@ var UI; $D("showKeyboard").onclick = UI.showKeyboard; $D("keyboardinput").oninput = UI.keyInput; - $D("keyboardinput").onblur = UI.keyInputBlur; + $D("keyboardinput").onblur = UI.hideKeyboard; $D("keyboardinput").onsubmit = function () { return false; }; $D("toggleExtraKeysButton").onclick = UI.toggleExtraKeys; @@ -749,10 +749,6 @@ var UI; return false; }, - sendCtrlAltDel: function() { - UI.rfb.sendCtrlAltDel(); - }, - xvpShutdown: function() { UI.rfb.xvpShutdown(); }, @@ -765,26 +761,6 @@ var UI; UI.rfb.xvpReset(); }, - setMouseButton: function(num) { - if (typeof num === 'undefined') { - // Disable mouse buttons - num = -1; - } - if (UI.rfb) { - UI.rfb.get_mouse().set_touchButton(num); - } - - var blist = [0, 1,2,4]; - for (var b = 0; b < blist.length; b++) { - var button = $D('noVNC_mouse_button' + blist[b]); - if (blist[b] === num) { - button.style.display = ""; - } else { - button.style.display = "none"; - } - } - }, - // Display the desktop name in the document title updateDocumentTitle: function(rfb, name) { document.title = name + " - noVNC"; @@ -1042,6 +1018,26 @@ var UI; } }, + setMouseButton: function(num) { + if (typeof num === 'undefined') { + // Disable mouse buttons + num = -1; + } + if (UI.rfb) { + UI.rfb.get_mouse().set_touchButton(num); + } + + var blist = [0, 1,2,4]; + for (var b = 0; b < blist.length; b++) { + var button = $D('noVNC_mouse_button' + blist[b]); + if (blist[b] === num) { + button.style.display = ""; + } else { + button.style.display = "none"; + } + } + }, + // On touch devices, show the OS keyboard showKeyboard: function() { var kbi = $D('keyboardinput'); @@ -1060,6 +1056,16 @@ var UI; } }, + hideKeyboard: function() { + $D('showKeyboard').className = "noVNC_status_button"; + //Weird bug in iOS if you change keyboardVisible + //here it does not actually occur so next time + //you click keyboard icon it doesnt work. + UI.hideKeyboardTimeout = setTimeout(function() { + UI.keyboardVisible = false; + },100); + }, + keepKeyboard: function() { clearTimeout(UI.hideKeyboardTimeout); if(UI.keyboardVisible === true) { @@ -1148,14 +1154,6 @@ var UI; } }, - keyInputBlur: function() { - $D('showKeyboard').className = "noVNC_status_button"; - //Weird bug in iOS if you change keyboardVisible - //here it does not actually occur so next time - //you click keyboard icon it doesnt work. - UI.hideKeyboardTimeout = setTimeout(function() { UI.setKeyboard(); },100); - }, - toggleExtraKeys: function() { UI.keepKeyboard(); if(UI.extraKeysVisible === false) { @@ -1175,6 +1173,16 @@ var UI; } }, + sendEsc: function() { + UI.keepKeyboard(); + UI.rfb.sendKey(XK_Escape); + }, + + sendTab: function() { + UI.keepKeyboard(); + UI.rfb.sendKey(XK_Tab); + }, + toggleCtrl: function() { UI.keepKeyboard(); if(UI.ctrlOn === false) { @@ -1201,18 +1209,8 @@ var UI; } }, - sendTab: function() { - UI.keepKeyboard(); - UI.rfb.sendKey(XK_Tab); - }, - - sendEsc: function() { - UI.keepKeyboard(); - UI.rfb.sendKey(XK_Escape); - }, - - setKeyboard: function() { - UI.keyboardVisible = false; + sendCtrlAltDel: function() { + UI.rfb.sendCtrlAltDel(); }, //Helper to add options to dropdown. From 69e9dc0d55abb8f6833e568f31624a72d6a5c30f Mon Sep 17 00:00:00 2001 From: samhed Date: Tue, 26 Apr 2016 23:59:44 +0200 Subject: [PATCH 12/18] Send the xvp keys from anonymous functions --- include/ui.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/include/ui.js b/include/ui.js index db0b3c1..0e35f87 100644 --- a/include/ui.js +++ b/include/ui.js @@ -218,9 +218,9 @@ var UI; $D("sendEscButton").onclick = UI.sendEsc; $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel; - $D("xvpShutdownButton").onclick = UI.xvpShutdown; - $D("xvpRebootButton").onclick = UI.xvpReboot; - $D("xvpResetButton").onclick = UI.xvpReset; + $D("xvpShutdownButton").onclick = function() { UI.rfb.xvpShutdown(); }, + $D("xvpRebootButton").onclick = function() { UI.rfb.xvpReboot(); }, + $D("xvpResetButton").onclick = function() { UI.rfb.xvpReset(); }, $D("noVNC_status").onclick = UI.popupStatus; $D("noVNC_popup_status").onclick = UI.closePopup; $D("xvpButton").onclick = UI.toggleXvpPanel; @@ -749,18 +749,6 @@ var UI; return false; }, - xvpShutdown: function() { - UI.rfb.xvpShutdown(); - }, - - xvpReboot: function() { - UI.rfb.xvpReboot(); - }, - - xvpReset: function() { - UI.rfb.xvpReset(); - }, - // Display the desktop name in the document title updateDocumentTitle: function(rfb, name) { document.title = name + " - noVNC"; From 6f388df065542e99597f2d9404ec18712189121e Mon Sep 17 00:00:00 2001 From: samhed Date: Wed, 27 Apr 2016 00:29:25 +0200 Subject: [PATCH 13/18] Group together related functions and add dividers Dividers between the different parts of the UI has been added in order to easier get an overview. --- include/ui.js | 264 +++++++++++++++++++++++++++++++------------------- 1 file changed, 166 insertions(+), 98 deletions(-) diff --git a/include/ui.js b/include/ui.js index 0e35f87..e04c0f5 100644 --- a/include/ui.js +++ b/include/ui.js @@ -245,6 +245,12 @@ var UI; $D("noVNC_resize").onchange = UI.enableDisableViewClip; }, +/* ------^------- + * /INIT + * ============== + * VISUAL + * ------v------*/ + updateState: function(rfb, state, oldstate, msg) { UI.rfb_state = state; var klass; @@ -373,6 +379,12 @@ var UI; $D('noVNC_popup_status').style.display = "none"; }, +/* ------^------- + * /VISUAL + * ============== + * SETTINGS + * ------v------*/ + // Initial page load read/initialization of settings initSetting: function(name, defVal) { // Check Query string followed by cookie @@ -452,6 +464,37 @@ var UI; return val; }, + // Save/apply settings when 'Apply' button is pressed + settingsApply: function() { + //Util.Debug(">> settingsApply"); + UI.saveSetting('encrypt'); + UI.saveSetting('true_color'); + if (Util.browserSupportsCursorURIs()) { + UI.saveSetting('cursor'); + } + + UI.saveSetting('resize'); + + if (UI.getSetting('resize') === 'downscale' || UI.getSetting('resize') === 'scale') { + UI.forceSetting('clip', false); + } + + UI.saveSetting('clip'); + UI.saveSetting('shared'); + UI.saveSetting('view_only'); + UI.saveSetting('path'); + UI.saveSetting('repeaterID'); + UI.saveSetting('stylesheet'); + UI.saveSetting('logging'); + + // Settings with immediate (non-connected related) effect + WebUtil.selectStylesheet(UI.getSetting('stylesheet')); + WebUtil.init_logging(UI.getSetting('logging')); + UI.setViewClip(); + UI.updateViewDrag(); + //Util.Debug("<< settingsApply"); + }, + // Open menu openSettingsMenu: function() { // Close the description panel @@ -511,6 +554,12 @@ var UI; } }, +/* ------^------- + * /SETTINGS + * ============== + * XVP + * ------v------*/ + // Show the XVP panel toggleXvpPanel: function() { // Close the description panel @@ -553,6 +602,12 @@ var UI; } }, +/* ------^------- + * /XVP + * ============== + * CLIPBOARD + * ------v------*/ + // Show the clipboard panel toggleClipboardPanel: function() { // Close the description panel @@ -582,6 +637,30 @@ var UI; } }, + clipReceive: function(rfb, text) { + Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "..."); + $D('noVNC_clipboard_text').value = text; + Util.Debug("<< UI.clipReceive"); + }, + + clipClear: function() { + $D('noVNC_clipboard_text').value = ""; + UI.rfb.clipboardPasteFrom(""); + }, + + clipSend: function() { + var text = $D('noVNC_clipboard_text').value; + Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "..."); + UI.rfb.clipboardPasteFrom(text); + Util.Debug("<< UI.clipSend"); + }, + +/* ------^------- + * /CLIPBOARD + * ============== + * CONNECTION + * ------v------*/ + // Show the connection settings panel/menu toggleConnectPanel: function() { // Close the description panel @@ -667,6 +746,22 @@ var UI; // Don't display the connection settings until we're actually disconnected }, + setPassword: function() { + UI.rfb.sendPassword($D('noVNC_password').value); + //Reset connect button. + $D('noVNC_connect_button').value = "Connect"; + $D('noVNC_connect_button').onclick = UI.connect; + //Hide connection panel. + UI.toggleConnectPanel(); + return false; + }, + +/* ------^------- + * /CONNECTION + * ============== + * FULLSCREEN + * ------v------*/ + toggleFullscreen: function() { if (document.fullscreenElement || // alternative standard method document.mozFullScreenElement || // currently working methods @@ -707,85 +802,11 @@ var UI; } }, - // Save/apply settings when 'Apply' button is pressed - settingsApply: function() { - //Util.Debug(">> settingsApply"); - UI.saveSetting('encrypt'); - UI.saveSetting('true_color'); - if (Util.browserSupportsCursorURIs()) { - UI.saveSetting('cursor'); - } - - UI.saveSetting('resize'); - - if (UI.getSetting('resize') === 'downscale' || UI.getSetting('resize') === 'scale') { - UI.forceSetting('clip', false); - } - - UI.saveSetting('clip'); - UI.saveSetting('shared'); - UI.saveSetting('view_only'); - UI.saveSetting('path'); - UI.saveSetting('repeaterID'); - UI.saveSetting('stylesheet'); - UI.saveSetting('logging'); - - // Settings with immediate (non-connected related) effect - WebUtil.selectStylesheet(UI.getSetting('stylesheet')); - WebUtil.init_logging(UI.getSetting('logging')); - UI.setViewClip(); - UI.updateViewDrag(); - //Util.Debug("<< settingsApply"); - }, - - - setPassword: function() { - UI.rfb.sendPassword($D('noVNC_password').value); - //Reset connect button. - $D('noVNC_connect_button').value = "Connect"; - $D('noVNC_connect_button').onclick = UI.connect; - //Hide connection panel. - UI.toggleConnectPanel(); - return false; - }, - - // Display the desktop name in the document title - updateDocumentTitle: function(rfb, name) { - document.title = name + " - noVNC"; - }, - - clipReceive: function(rfb, text) { - Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "..."); - $D('noVNC_clipboard_text').value = text; - Util.Debug("<< UI.clipReceive"); - }, - - displayBlur: function() { - if (!UI.rfb) return; - - UI.rfb.get_keyboard().set_focused(false); - UI.rfb.get_mouse().set_focused(false); - }, - - displayFocus: function() { - if (!UI.rfb) return; - - UI.rfb.get_keyboard().set_focused(true); - UI.rfb.get_mouse().set_focused(true); - }, - - clipClear: function() { - $D('noVNC_clipboard_text').value = ""; - UI.rfb.clipboardPasteFrom(""); - }, - - clipSend: function() { - var text = $D('noVNC_clipboard_text').value; - Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "..."); - UI.rfb.clipboardPasteFrom(text); - Util.Debug("<< UI.clipSend"); - }, - +/* ------^------- + * /FULLSCREEN + * ============== + * RESIZE + * ------v------*/ // Apply remote resizing or local scaling applyResizeMode: function() { @@ -861,6 +882,12 @@ var UI; UI.rfb.set_onFBUComplete(function() { }); }, +/* ------^------- + * /RESIZE + * ============== + * CLIPPING + * ------v------*/ + // Set and configure viewport clipping setViewClip: function(clip) { var display; @@ -947,6 +974,12 @@ var UI; } }, +/* ------^------- + * /CLIPPING + * ============== + * VIEWDRAG + * ------v------*/ + // Update the viewport drag state updateViewDrag: function(drag) { if (!UI.rfb) return; @@ -1006,25 +1039,11 @@ var UI; } }, - setMouseButton: function(num) { - if (typeof num === 'undefined') { - // Disable mouse buttons - num = -1; - } - if (UI.rfb) { - UI.rfb.get_mouse().set_touchButton(num); - } - - var blist = [0, 1,2,4]; - for (var b = 0; b < blist.length; b++) { - var button = $D('noVNC_mouse_button' + blist[b]); - if (blist[b] === num) { - button.style.display = ""; - } else { - button.style.display = "none"; - } - } - }, +/* ------^------- + * /VIEWDRAG + * ============== + * KEYBOARD + * ------v------*/ // On touch devices, show the OS keyboard showKeyboard: function() { @@ -1201,6 +1220,51 @@ var UI; UI.rfb.sendCtrlAltDel(); }, +/* ------^------- + * /KEYBOARD + * ============== + * MISC + * ------v------*/ + + setMouseButton: function(num) { + if (typeof num === 'undefined') { + // Disable mouse buttons + num = -1; + } + if (UI.rfb) { + UI.rfb.get_mouse().set_touchButton(num); + } + + var blist = [0, 1,2,4]; + for (var b = 0; b < blist.length; b++) { + var button = $D('noVNC_mouse_button' + blist[b]); + if (blist[b] === num) { + button.style.display = ""; + } else { + button.style.display = "none"; + } + } + }, + + displayBlur: function() { + if (!UI.rfb) return; + + UI.rfb.get_keyboard().set_focused(false); + UI.rfb.get_mouse().set_focused(false); + }, + + displayFocus: function() { + if (!UI.rfb) return; + + UI.rfb.get_keyboard().set_focused(true); + UI.rfb.get_mouse().set_focused(true); + }, + + // Display the desktop name in the document title + updateDocumentTitle: function(rfb, name) { + document.title = name + " - noVNC"; + }, + //Helper to add options to dropdown. addOption: function(selectbox, text, value) { var optn = document.createElement("OPTION"); @@ -1217,5 +1281,9 @@ var UI; $D('noVNC-control-bar').style.width = vncwidth + 'px'; } +/* ------^------- + * /MISC + * ============== + */ }; })(); From 0f96b33dd11193908adab8a2a3544c17efa0dc40 Mon Sep 17 00:00:00 2001 From: samhed Date: Wed, 27 Apr 2016 00:31:50 +0200 Subject: [PATCH 14/18] Change name of clipboard functions There were a high risk of confusion between clipboard functions and clipping functions. --- include/ui.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/include/ui.js b/include/ui.js index e04c0f5..7a8600a 100644 --- a/include/ui.js +++ b/include/ui.js @@ -187,7 +187,7 @@ var UI; UI.rfb = new RFB({'target': $D('noVNC_canvas'), 'onUpdateState': UI.updateState, 'onXvpInit': UI.updateXvpButton, - 'onClipboard': UI.clipReceive, + 'onClipboard': UI.clipboardReceive, 'onFBUComplete': UI.initialResize, 'onFBResize': UI.updateViewDrag, 'onDesktopName': UI.updateDocumentTitle}); @@ -233,8 +233,8 @@ var UI; $D("noVNC_clipboard_text").onfocus = UI.displayBlur; $D("noVNC_clipboard_text").onblur = UI.displayFocus; - $D("noVNC_clipboard_text").onchange = UI.clipSend; - $D("noVNC_clipboard_clear_button").onclick = UI.clipClear; + $D("noVNC_clipboard_text").onchange = UI.clipboardSend; + $D("noVNC_clipboard_clear_button").onclick = UI.clipboardClear; $D("noVNC_settings_menu").onmouseover = UI.displayBlur; $D("noVNC_settings_menu").onmouseover = UI.displayFocus; @@ -637,22 +637,22 @@ var UI; } }, - clipReceive: function(rfb, text) { - Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "..."); + clipboardReceive: function(rfb, text) { + Util.Debug(">> UI.clipboardReceive: " + text.substr(0,40) + "..."); $D('noVNC_clipboard_text').value = text; - Util.Debug("<< UI.clipReceive"); + Util.Debug("<< UI.clipboardReceive"); }, - clipClear: function() { + clipboardClear: function() { $D('noVNC_clipboard_text').value = ""; UI.rfb.clipboardPasteFrom(""); }, - clipSend: function() { + clipboardSend: function() { var text = $D('noVNC_clipboard_text').value; - Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "..."); + Util.Debug(">> UI.clipboardSend: " + text.substr(0,40) + "..."); UI.rfb.clipboardPasteFrom(text); - Util.Debug("<< UI.clipSend"); + Util.Debug("<< UI.clipboardSend"); }, /* ------^------- From 41ff2571e9144358c22ee1e28dac05f1ba4bd13e Mon Sep 17 00:00:00 2001 From: samhed Date: Wed, 27 Apr 2016 00:41:16 +0200 Subject: [PATCH 15/18] Timeouts should always use anonymous functions While you CAN pass functions in strings, it is not the correct way of doing it. The browsers are just being nice. --- include/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/include/ui.js b/include/ui.js index 7a8600a..3146ae6 100644 --- a/include/ui.js +++ b/include/ui.js @@ -728,7 +728,7 @@ var UI; UI.rfb.connect(host, port, password, path); //Close dialog. - setTimeout(UI.setBarPosition, 100); + setTimeout(function () { UI.setBarPosition; } ); $D('noVNC_logo').style.display = "none"; $D('noVNC_screen').style.display = "inline"; }, From a75fef73b449dcaeea1dc38c05c15f656ca98684 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Sat, 30 Apr 2016 04:35:19 +0200 Subject: [PATCH 16/18] Change the names of settings-elements This change was made in order to make it easier to distinguish settings-elements from other elements. One example of the problem that was solved is the two elements "noVNC_clip" and "noVNC_clipboard" where the first is the setting for clipping mode. That element was now renamed to "noVNC_setting_clip". --- include/base.css | 14 +++++----- include/ui.js | 66 ++++++++++++++++++++++++------------------------ vnc.html | 34 ++++++++++++------------- 3 files changed, 57 insertions(+), 57 deletions(-) diff --git a/include/base.css b/include/base.css index 59e90c5..56e03c3 100644 --- a/include/base.css +++ b/include/base.css @@ -1,7 +1,7 @@ /* * noVNC base CSS * Copyright (C) 2012 Joel Martin - * Copyright (C) 2013 Samuel Mannehed for Cendio AB + * Copyright (C) 2016 Samuel Mannehed for Cendio AB * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). */ @@ -30,18 +30,18 @@ html { padding-bottom:8px; } -#noVNC_host { +#noVNC_setting_host { width:150px; } -#noVNC_port { +#noVNC_setting_port { width: 80px; } -#noVNC_password { +#noVNC_setting_password { width: 150px; } -#noVNC_encrypt { +#noVNC_setting_encrypt { } -#noVNC_path { +#noVNC_setting_path { width: 100px; } #noVNC_connect_button { @@ -109,7 +109,7 @@ html { padding: 0px; } -#noVNC_apply { +#noVNC_settings_apply { float:right; } diff --git a/include/ui.js b/include/ui.js index 3146ae6..53c6e56 100644 --- a/include/ui.js +++ b/include/ui.js @@ -60,13 +60,13 @@ var UI; var sheets = WebUtil.getStylesheets(); var i; for (i = 0; i < sheets.length; i += 1) { - UI.addOption($D('noVNC_stylesheet'),sheets[i].title, sheets[i].title); + UI.addOption($D('noVNC_setting_stylesheet'),sheets[i].title, sheets[i].title); } // Logging selection dropdown var llevels = ['error', 'warn', 'info', 'debug']; for (i = 0; i < llevels.length; i += 1) { - UI.addOption($D('noVNC_logging'),llevels[i], llevels[i]); + UI.addOption($D('noVNC_setting_logging'),llevels[i], llevels[i]); } // Settings with immediate effects @@ -114,7 +114,7 @@ var UI; UI.updateVisualState(); - $D('noVNC_host').focus(); + $D('noVNC_setting_host').focus(); // Show mouse selector buttons on touch screen devices if (UI.isTouchDevice) { @@ -238,11 +238,11 @@ var UI; $D("noVNC_settings_menu").onmouseover = UI.displayBlur; $D("noVNC_settings_menu").onmouseover = UI.displayFocus; - $D("noVNC_apply").onclick = UI.settingsApply; + $D("noVNC_settings_apply").onclick = UI.settingsApply; $D("noVNC_connect_button").onclick = UI.connect; - $D("noVNC_resize").onchange = UI.enableDisableViewClip; + $D("noVNC_setting_resize").onchange = UI.enableDisableViewClip; }, /* ------^------- @@ -274,7 +274,7 @@ var UI; $D('noVNC_connect_button').value = "Send Password"; $D('noVNC_connect_button').onclick = UI.setPassword; - $D('noVNC_password').focus(); + $D('noVNC_setting_password').focus(); klass = "noVNC_status_warn"; break; @@ -296,21 +296,21 @@ var UI; var connected = UI.rfb && UI.rfb_state === 'normal'; //Util.Debug(">> updateVisualState"); - $D('noVNC_encrypt').disabled = connected; - $D('noVNC_true_color').disabled = connected; + $D('noVNC_setting_encrypt').disabled = connected; + $D('noVNC_setting_true_color').disabled = connected; if (Util.browserSupportsCursorURIs()) { - $D('noVNC_cursor').disabled = connected; + $D('noVNC_setting_cursor').disabled = connected; } else { UI.updateSetting('cursor', !UI.isTouchDevice); - $D('noVNC_cursor').disabled = true; + $D('noVNC_setting_cursor').disabled = true; } UI.enableDisableViewClip(); - $D('noVNC_resize').disabled = connected; - $D('noVNC_shared').disabled = connected; - $D('noVNC_view_only').disabled = connected; - $D('noVNC_path').disabled = connected; - $D('noVNC_repeaterID').disabled = connected; + $D('noVNC_setting_resize').disabled = connected; + $D('noVNC_setting_shared').disabled = connected; + $D('noVNC_setting_view_only').disabled = connected; + $D('noVNC_setting_path').disabled = connected; + $D('noVNC_setting_repeaterID').disabled = connected; if (connected) { UI.setViewClip(); @@ -408,7 +408,7 @@ var UI; // Update the settings control value = UI.getSetting(name); - var ctrl = $D('noVNC_' + name); + var ctrl = $D('noVNC_setting_' + name); if (ctrl.type === 'checkbox') { ctrl.checked = value; @@ -431,7 +431,7 @@ var UI; // Save control setting to cookie saveSetting: function(name) { - var val, ctrl = $D('noVNC_' + name); + var val, ctrl = $D('noVNC_setting_' + name); if (ctrl.type === 'checkbox') { val = ctrl.checked; } else if (typeof ctrl.options !== 'undefined') { @@ -452,7 +452,7 @@ var UI; // Read form control compatible setting from cookie getSetting: function(name) { - var ctrl = $D('noVNC_' + name); + var ctrl = $D('noVNC_setting_' + name); var val = WebUtil.readSetting(name); if (typeof val !== 'undefined' && val !== null && ctrl.type === 'checkbox') { if (val.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) { @@ -539,7 +539,7 @@ var UI; UI.updateSetting('cursor'); } else { UI.updateSetting('cursor', !UI.isTouchDevice); - $D('noVNC_cursor').disabled = true; + $D('noVNC_setting_cursor').disabled = true; } UI.updateSetting('clip'); UI.updateSetting('resize'); @@ -693,7 +693,7 @@ var UI; $D('noVNC_controls').style.display = "block"; $D('connectButton').className = "noVNC_status_button_selected"; UI.connSettingsOpen = true; - $D('noVNC_host').focus(); + $D('noVNC_setting_host').focus(); } }, @@ -701,11 +701,11 @@ var UI; UI.closeSettingsMenu(); UI.toggleConnectPanel(); - var host = $D('noVNC_host').value; - var port = $D('noVNC_port').value; - var password = $D('noVNC_password').value; - var token = $D('noVNC_token').value; - var path = $D('noVNC_path').value; + var host = $D('noVNC_setting_host').value; + var port = $D('noVNC_setting_port').value; + var password = $D('noVNC_setting_password').value; + var token = $D('noVNC_setting_token').value; + var path = $D('noVNC_setting_path').value; //if token is in path then ignore the new token variable if (token) { @@ -747,7 +747,7 @@ var UI; }, setPassword: function() { - UI.rfb.sendPassword($D('noVNC_password').value); + UI.rfb.sendPassword($D('noVNC_setting_password').value); //Reset connect button. $D('noVNC_connect_button').value = "Connect"; $D('noVNC_connect_button').onclick = UI.connect; @@ -942,18 +942,18 @@ var UI; // Handle special cases where clipping is forced on/off or locked enableDisableViewClip: function() { - var resizeElem = $D('noVNC_resize'); + var resizeSetting = $D('noVNC_setting_resize'); var connected = UI.rfb && UI.rfb_state === 'normal'; if (UI.isSafari) { // Safari auto-hides the scrollbars which makes them // impossible to use in most cases UI.setViewClip(true); - $D('noVNC_clip').disabled = true; - } else if (resizeElem.value === 'downscale' || resizeElem.value === 'scale') { + $D('noVNC_setting_clip').disabled = true; + } else if (resizeSetting.value === 'downscale' || resizeSetting.value === 'scale') { // Disable clipping if we are scaling UI.setViewClip(false); - $D('noVNC_clip').disabled = true; + $D('noVNC_setting_clip').disabled = true; } else if (document.msFullscreenElement) { // The browser is IE and we are in fullscreen mode. // - We need to force clipping while in fullscreen since @@ -961,13 +961,13 @@ var UI; UI.popupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen"); UI.rememberedClipSetting = UI.getSetting('clip'); UI.setViewClip(true); - $D('noVNC_clip').disabled = true; + $D('noVNC_setting_clip').disabled = true; } else if (document.body.msRequestFullscreen && UI.rememberedClip !== null) { // Restore view clip to what it was before fullscreen on IE UI.setViewClip(UI.rememberedClipSetting); - $D('noVNC_clip').disabled = connected || UI.isTouchDevice; + $D('noVNC_setting_clip').disabled = connected || UI.isTouchDevice; } else { - $D('noVNC_clip').disabled = connected || UI.isTouchDevice; + $D('noVNC_setting_clip').disabled = connected || UI.isTouchDevice; if (UI.isTouchDevice) { UI.setViewClip(true); } diff --git a/vnc.html b/vnc.html index cdf45dc..9d58373 100644 --- a/vnc.html +++ b/vnc.html @@ -5,7 +5,7 @@
    • -
    • +
    • @@ -196,10 +196,10 @@
      -
      • -
      • -
      • -
      • +
      • +
      • +
      • +
    From d130e93ff84c0360afa6fda6c4a83b3caab48e7d Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Thu, 26 May 2016 23:15:39 +0200 Subject: [PATCH 17/18] Use a consistent naming convention for elements * Element names we use "_" as word-delimiter, not "-" * Element names use less camel-case * Element names end with the type * Element names always start with noVNC_ --- include/base.css | 40 ++++++------- include/black.css | 2 +- include/blue.css | 2 +- include/ui.js | 142 +++++++++++++++++++++++----------------------- vnc.html | 44 +++++++------- 5 files changed, 115 insertions(+), 115 deletions(-) diff --git a/include/base.css b/include/base.css index 56e03c3..8d88c0f 100644 --- a/include/base.css +++ b/include/base.css @@ -56,10 +56,10 @@ html { #noVNC_view_drag_button { display: none; } -#sendCtrlAltDelButton { +#noVNC_sendCtrlAltDel_button { display: none; } -#fullscreenButton { +#noVNC_fullscreen_button { display: none; } #noVNC_xvp_buttons { @@ -77,13 +77,13 @@ html { position: relative; } -.noVNC-buttons-left { +.noVNC_buttons_left { float: left; z-index: 1; position: relative; } -.noVNC-buttons-right { +.noVNC_buttons_right { float:right; right: 0px; z-index: 2; @@ -233,7 +233,7 @@ html { right:85px; } -#keyboardinput { +#noVNC_keyboardinput { width:1px; height:1px; background-color:#fff; @@ -278,7 +278,7 @@ html { } /* Control bar */ -#noVNC-control-bar { +#noVNC_control_bar { position:fixed; display:block; @@ -427,11 +427,11 @@ html { font-size: 180px; } -.noVNC-buttons-left { +.noVNC_buttons_left { padding-left: 10px; } -.noVNC-buttons-right { +.noVNC_buttons_right { padding-right: 10px; } @@ -442,11 +442,11 @@ html { margin-left: 0px; } -#toggleExtraKeysButton { display: none; } -#toggleCtrlButton { display: inline; } -#toggleAltButton { display: inline; } -#sendTabButton { display: inline; } -#sendEscButton { display: inline; } +#noVNC_toggleExtraKeys_button { display: none; } +#noVNC_toggleCtrl_button { display: inline; } +#noVNC_toggleAlt_button { display: inline; } +#noVNC_sendTab_button { display: inline; } +#noVNC_sendEsc_button { display: inline; } /* left-align the status text on lower resolutions */ @media screen and (max-width: 800px){ @@ -469,35 +469,35 @@ html { .noVNC_status_button { font-size: 10px; } - .noVNC-buttons-left { + .noVNC_buttons_left { padding-left: 0px; } - .noVNC-buttons-right { + .noVNC_buttons_right { padding-right: 0px; } /* collapse the extra keys on lower resolutions */ - #toggleExtraKeysButton { + #noVNC_toggleExtraKeys_button { display: inline; } - #toggleCtrlButton { + #noVNC_toggleCtrl_button { display: none; position: absolute; top: 30px; left: 0px; } - #toggleAltButton { + #noVNC_toggleAlt_button { display: none; position: absolute; top: 65px; left: 0px; } - #sendTabButton { + #noVNC_sendTab_button { display: none; position: absolute; top: 100px; left: 0px; } - #sendEscButton { + #noVNC_sendEsc_button { display: none; position: absolute; top: 135px; diff --git a/include/black.css b/include/black.css index 7d940c5..5c4558d 100644 --- a/include/black.css +++ b/include/black.css @@ -6,7 +6,7 @@ * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). */ -#keyboardinput { +#noVNC_keyboardinput { background-color:#000; } diff --git a/include/blue.css b/include/blue.css index b2a0adc..4ab53bd 100644 --- a/include/blue.css +++ b/include/blue.css @@ -58,7 +58,7 @@ color:#fff; } -#keyboardinput { +#noVNC_keyboardinput { background-color:#04073d; } diff --git a/include/ui.js b/include/ui.js index 53c6e56..37de7b6 100644 --- a/include/ui.js +++ b/include/ui.js @@ -148,7 +148,7 @@ var UI; document.documentElement.mozRequestFullScreen || document.documentElement.webkitRequestFullscreen || document.body.msRequestFullscreen)) { - $D('fullscreenButton').style.display = "inline"; + $D('noVNC_fullscreen_button').style.display = "inline"; Util.addEvent(window, 'fullscreenchange', UI.updateFullscreenButton); Util.addEvent(window, 'mozfullscreenchange', UI.updateFullscreenButton); Util.addEvent(window, 'webkitfullscreenchange', UI.updateFullscreenButton); @@ -205,31 +205,31 @@ var UI; $D("noVNC_mouse_button1").onclick = function () { UI.setMouseButton(2); }; $D("noVNC_mouse_button2").onclick = function () { UI.setMouseButton(4); }; $D("noVNC_mouse_button4").onclick = function () { UI.setMouseButton(0); }; - $D("showKeyboard").onclick = UI.showKeyboard; + $D("noVNC_keyboard_button").onclick = UI.showKeyboard; - $D("keyboardinput").oninput = UI.keyInput; - $D("keyboardinput").onblur = UI.hideKeyboard; - $D("keyboardinput").onsubmit = function () { return false; }; + $D("noVNC_keyboardinput").oninput = UI.keyInput; + $D("noVNC_keyboardinput").onblur = UI.hideKeyboard; + $D("noVNC_keyboardinput").onsubmit = function () { return false; }; - $D("toggleExtraKeysButton").onclick = UI.toggleExtraKeys; - $D("toggleCtrlButton").onclick = UI.toggleCtrl; - $D("toggleAltButton").onclick = UI.toggleAlt; - $D("sendTabButton").onclick = UI.sendTab; - $D("sendEscButton").onclick = UI.sendEsc; + $D("noVNC_toggleExtraKeys_button").onclick = UI.toggleExtraKeys; + $D("noVNC_toggleCtrl_button").onclick = UI.toggleCtrl; + $D("noVNC_toggleAlt_button").onclick = UI.toggleAlt; + $D("noVNC_sendTab_button").onclick = UI.sendTab; + $D("noVNC_sendEsc_button").onclick = UI.sendEsc; - $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel; - $D("xvpShutdownButton").onclick = function() { UI.rfb.xvpShutdown(); }, - $D("xvpRebootButton").onclick = function() { UI.rfb.xvpReboot(); }, - $D("xvpResetButton").onclick = function() { UI.rfb.xvpReset(); }, + $D("noVNC_sendCtrlAltDel_button").onclick = UI.sendCtrlAltDel; + $D("noVNC_xvpShutdown_button").onclick = function() { UI.rfb.xvpShutdown(); }, + $D("noVNC_xvpReboot_button").onclick = function() { UI.rfb.xvpReboot(); }, + $D("noVNC_xvpReset_button").onclick = function() { UI.rfb.xvpReset(); }, $D("noVNC_status").onclick = UI.popupStatus; $D("noVNC_popup_status").onclick = UI.closePopup; - $D("xvpButton").onclick = UI.toggleXvpPanel; - $D("clipboardButton").onclick = UI.toggleClipboardPanel; - $D("fullscreenButton").onclick = UI.toggleFullscreen; - $D("settingsButton").onclick = UI.toggleSettingsPanel; - $D("connectButton").onclick = UI.toggleConnectPanel; - $D("disconnectButton").onclick = UI.disconnect; - $D("descriptionButton").onclick = UI.toggleConnectPanel; + $D("noVNC_toggleXvp_button").onclick = UI.toggleXvpPanel; + $D("noVNC_clipboard_button").onclick = UI.toggleClipboardPanel; + $D("noVNC_fullscreen_button").onclick = UI.toggleFullscreen; + $D("noVNC_settings_button").onclick = UI.toggleSettingsPanel; + $D("noVNC_connectPanel_button").onclick = UI.toggleConnectPanel; + $D("noVNC_disconnect_button").onclick = UI.disconnect; + $D("noVNC_description_button").onclick = UI.toggleConnectPanel; $D("noVNC_clipboard_text").onfocus = UI.displayBlur; $D("noVNC_clipboard_text").onblur = UI.displayFocus; @@ -284,7 +284,7 @@ var UI; } if (typeof(msg) !== 'undefined') { - $D('noVNC-control-bar').setAttribute("class", klass); + $D('noVNC_control_bar').setAttribute("class", klass); $D('noVNC_status').innerHTML = msg; } @@ -315,16 +315,16 @@ var UI; if (connected) { UI.setViewClip(); UI.setMouseButton(1); - $D('clipboardButton').style.display = "inline"; - $D('showKeyboard').style.display = "inline"; + $D('noVNC_clipboard_button').style.display = "inline"; + $D('noVNC_keyboard_button').style.display = "inline"; $D('noVNC_extra_keys').style.display = ""; - $D('sendCtrlAltDelButton').style.display = "inline"; + $D('noVNC_sendCtrlAltDel_button').style.display = "inline"; } else { UI.setMouseButton(); - $D('clipboardButton').style.display = "none"; - $D('showKeyboard').style.display = "none"; + $D('noVNC_clipboard_button').style.display = "none"; + $D('noVNC_keyboard_button').style.display = "none"; $D('noVNC_extra_keys').style.display = "none"; - $D('sendCtrlAltDelButton').style.display = "none"; + $D('noVNC_sendCtrlAltDel_button').style.display = "none"; UI.updateXvpButton(0); } @@ -336,18 +336,18 @@ var UI; case 'fatal': case 'failed': case 'disconnected': - $D('connectButton').style.display = ""; - $D('disconnectButton').style.display = "none"; + $D('noVNC_connectPanel_button').style.display = ""; + $D('noVNC_disconnect_button').style.display = "none"; UI.connSettingsOpen = false; UI.toggleConnectPanel(); break; case 'loaded': - $D('connectButton').style.display = ""; - $D('disconnectButton').style.display = "none"; + $D('noVNC_connectPanel_button').style.display = ""; + $D('noVNC_disconnect_button').style.display = "none"; break; default: - $D('connectButton').style.display = "none"; - $D('disconnectButton').style.display = ""; + $D('noVNC_connectPanel_button').style.display = "none"; + $D('noVNC_disconnect_button').style.display = ""; break; } @@ -512,14 +512,14 @@ var UI; UI.toggleXvpPanel(); } $D('noVNC_settings').style.display = "block"; - $D('settingsButton').className = "noVNC_status_button_selected"; + $D('noVNC_settings_button').className = "noVNC_status_button_selected"; UI.settingsOpen = true; }, // Close menu (without applying settings) closeSettingsMenu: function() { $D('noVNC_settings').style.display = "none"; - $D('settingsButton').className = "noVNC_status_button"; + $D('noVNC_settings_button').className = "noVNC_status_button"; UI.settingsOpen = false; }, @@ -580,11 +580,11 @@ var UI; // Toggle XVP panel if (UI.xvpOpen === true) { $D('noVNC_xvp').style.display = "none"; - $D('xvpButton').className = "noVNC_status_button"; + $D('noVNC_toggleXvp_button').className = "noVNC_status_button"; UI.xvpOpen = false; } else { $D('noVNC_xvp').style.display = "block"; - $D('xvpButton').className = "noVNC_status_button_selected"; + $D('noVNC_toggleXvp_button').className = "noVNC_status_button_selected"; UI.xvpOpen = true; } }, @@ -592,9 +592,9 @@ var UI; // Disable/enable XVP button updateXvpButton: function(ver) { if (ver >= 1) { - $D('xvpButton').style.display = 'inline'; + $D('noVNC_toggleXvp_button').style.display = 'inline'; } else { - $D('xvpButton').style.display = 'none'; + $D('noVNC_toggleXvp_button').style.display = 'none'; // Close XVP panel if open if (UI.xvpOpen === true) { UI.toggleXvpPanel(); @@ -628,11 +628,11 @@ var UI; // Toggle Clipboard Panel if (UI.clipboardOpen === true) { $D('noVNC_clipboard').style.display = "none"; - $D('clipboardButton').className = "noVNC_status_button"; + $D('noVNC_clipboard_button').className = "noVNC_status_button"; UI.clipboardOpen = false; } else { $D('noVNC_clipboard').style.display = "block"; - $D('clipboardButton').className = "noVNC_status_button_selected"; + $D('noVNC_clipboard_button').className = "noVNC_status_button_selected"; UI.clipboardOpen = true; } }, @@ -669,7 +669,7 @@ var UI; if (UI.settingsOpen === true) { UI.settingsApply(); UI.closeSettingsMenu(); - $D('connectButton').className = "noVNC_status_button"; + $D('noVNC_connectPanel_button').className = "noVNC_status_button"; } // Close clipboard panel if open if (UI.clipboardOpen === true) { @@ -683,7 +683,7 @@ var UI; // Toggle Connection Panel if (UI.connSettingsOpen === true) { $D('noVNC_controls').style.display = "none"; - $D('connectButton').className = "noVNC_status_button"; + $D('noVNC_connectPanel_button').className = "noVNC_status_button"; UI.connSettingsOpen = false; UI.saveSetting('host'); UI.saveSetting('port'); @@ -691,7 +691,7 @@ var UI; //UI.saveSetting('password'); } else { $D('noVNC_controls').style.display = "block"; - $D('connectButton').className = "noVNC_status_button_selected"; + $D('noVNC_connectPanel_button').className = "noVNC_status_button_selected"; UI.connSettingsOpen = true; $D('noVNC_setting_host').focus(); } @@ -796,9 +796,9 @@ var UI; document.mozFullScreenElement || // currently working methods document.webkitFullscreenElement || document.msFullscreenElement ) { - $D('fullscreenButton').className = "noVNC_status_button_selected"; + $D('noVNC_fullscreen_button').className = "noVNC_status_button_selected"; } else { - $D('fullscreenButton').className = "noVNC_status_button"; + $D('noVNC_fullscreen_button').className = "noVNC_status_button"; } }, @@ -1047,8 +1047,8 @@ var UI; // On touch devices, show the OS keyboard showKeyboard: function() { - var kbi = $D('keyboardinput'); - var skb = $D('showKeyboard'); + var kbi = $D('noVNC_keyboardinput'); + var skb = $D('noVNC_keyboard_button'); var l = kbi.value.length; if(UI.keyboardVisible === false) { kbi.focus(); @@ -1064,7 +1064,7 @@ var UI; }, hideKeyboard: function() { - $D('showKeyboard').className = "noVNC_status_button"; + $D('noVNC_keyboard_button').className = "noVNC_status_button"; //Weird bug in iOS if you change keyboardVisible //here it does not actually occur so next time //you click keyboard icon it doesnt work. @@ -1076,16 +1076,16 @@ var UI; keepKeyboard: function() { clearTimeout(UI.hideKeyboardTimeout); if(UI.keyboardVisible === true) { - $D('keyboardinput').focus(); - $D('showKeyboard').className = "noVNC_status_button_selected"; + $D('noVNC_keyboardinput').focus(); + $D('noVNC_keyboard_button').className = "noVNC_status_button_selected"; } else if(UI.keyboardVisible === false) { - $D('keyboardinput').blur(); - $D('showKeyboard').className = "noVNC_status_button"; + $D('noVNC_keyboardinput').blur(); + $D('noVNC_keyboard_button').className = "noVNC_status_button"; } }, keyboardinputReset: function() { - var kbi = $D('keyboardinput'); + var kbi = $D('noVNC_keyboardinput'); kbi.value = new Array(UI.defaultKeyboardinputLen).join("_"); UI.lastKeyboardinput = kbi.value; }, @@ -1164,18 +1164,18 @@ var UI; toggleExtraKeys: function() { UI.keepKeyboard(); if(UI.extraKeysVisible === false) { - $D('toggleCtrlButton').style.display = "inline"; - $D('toggleAltButton').style.display = "inline"; - $D('sendTabButton').style.display = "inline"; - $D('sendEscButton').style.display = "inline"; - $D('toggleExtraKeysButton').className = "noVNC_status_button_selected"; + $D('noVNC_toggleCtrl_button').style.display = "inline"; + $D('noVNC_toggleAlt_button').style.display = "inline"; + $D('noVNC_sendTab_button').style.display = "inline"; + $D('noVNC_sendEsc_button').style.display = "inline"; + $D('noVNC_toggleExtraKeys_button').className = "noVNC_status_button_selected"; UI.extraKeysVisible = true; } else if(UI.extraKeysVisible === true) { - $D('toggleCtrlButton').style.display = ""; - $D('toggleAltButton').style.display = ""; - $D('sendTabButton').style.display = ""; - $D('sendEscButton').style.display = ""; - $D('toggleExtraKeysButton').className = "noVNC_status_button"; + $D('noVNC_toggleCtrl_button').style.display = ""; + $D('noVNC_toggleAlt_button').style.display = ""; + $D('noVNC_sendTab_button').style.display = ""; + $D('noVNC_sendEsc_button').style.display = ""; + $D('noVNC_toggleExtraKeys_button').className = "noVNC_status_button"; UI.extraKeysVisible = false; } }, @@ -1194,11 +1194,11 @@ var UI; UI.keepKeyboard(); if(UI.ctrlOn === false) { UI.rfb.sendKey(XK_Control_L, true); - $D('toggleCtrlButton').className = "noVNC_status_button_selected"; + $D('noVNC_toggleCtrl_button').className = "noVNC_status_button_selected"; UI.ctrlOn = true; } else if(UI.ctrlOn === true) { UI.rfb.sendKey(XK_Control_L, false); - $D('toggleCtrlButton').className = "noVNC_status_button"; + $D('noVNC_toggleCtrl_button').className = "noVNC_status_button"; UI.ctrlOn = false; } }, @@ -1207,11 +1207,11 @@ var UI; UI.keepKeyboard(); if(UI.altOn === false) { UI.rfb.sendKey(XK_Alt_L, true); - $D('toggleAltButton').className = "noVNC_status_button_selected"; + $D('noVNC_toggleAlt_button').className = "noVNC_status_button_selected"; UI.altOn = true; } else if(UI.altOn === true) { UI.rfb.sendKey(XK_Alt_L, false); - $D('toggleAltButton').className = "noVNC_status_button"; + $D('noVNC_toggleAlt_button').className = "noVNC_status_button"; UI.altOn = false; } }, @@ -1274,11 +1274,11 @@ var UI; }, setBarPosition: function() { - $D('noVNC-control-bar').style.top = (window.pageYOffset) + 'px'; + $D('noVNC_control_bar').style.top = (window.pageYOffset) + 'px'; $D('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px'; var vncwidth = $D('noVNC_container').style.offsetWidth; - $D('noVNC-control-bar').style.width = vncwidth + 'px'; + $D('noVNC_control_bar').style.width = vncwidth + 'px'; } /* ------^------- diff --git a/vnc.html b/vnc.html index 9d58373..2990aac 100644 --- a/vnc.html +++ b/vnc.html @@ -48,9 +48,9 @@ -
    +
    -
    +
    @@ -64,26 +64,26 @@ -
    + id="noVNC_toggleExtraKeys_button" class="noVNC_status_button"> + id="noVNC_toggleCtrl_button" class="noVNC_status_button"> + id="noVNC_toggleAlt_button" class="noVNC_status_button"> + id="noVNC_sendTab_button" class="noVNC_status_button"> + id="noVNC_sendEsc_button" class="noVNC_status_button">
    @@ -91,27 +91,27 @@
    -
    +
    @@ -128,7 +128,7 @@ and website for more information.
    - +
    @@ -147,9 +147,9 @@
    - - - + + +
    @@ -204,7 +204,7 @@
    -
    +
    From 4f80e14e64104d4d3d82befeb1513156f6c9cb52 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Fri, 27 May 2016 09:36:00 +0200 Subject: [PATCH 18/18] Consistent closing tags for void elements --- vnc.html | 56 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/vnc.html b/vnc.html index 2990aac..0b65306 100644 --- a/vnc.html +++ b/vnc.html @@ -16,20 +16,20 @@ --> noVNC - + - + - + - + @@ -53,19 +53,19 @@
    + title="Move/Drag Viewport" />
    + id="noVNC_mouse_button0" class="noVNC_status_button" /> + id="noVNC_mouse_button1" class="noVNC_status_button" /> + id="noVNC_mouse_button2" class="noVNC_status_button" /> + id="noVNC_mouse_button4" class="noVNC_status_button" /> + value="Keyboard" title="Show Keyboard" /> @@ -141,7 +141,7 @@
    + value="Clear" />
    @@ -157,14 +157,14 @@
      -
    • Encrypt
      • -
    • True Color
      • -
    • Local Cursor
      • -
    • Clip to Window
      • -
    • Shared Mode
      • -
    • View Only
      • +
    • Encrypt
      • +
    • True Color
      • +
    • Local Cursor
      • +
    • Clip to Window
      • +
    • Shared Mode
      • +
    • View Only
      • -
    • Path
      • +
    • Path
      • -
    • Repeater ID
      • +
    • Repeater ID
      • -
      • +
    @@ -199,8 +199,8 @@
    • -
    • -
    • +
    • +