From 553864e85813f886b9c60b4825c8d4b714cae695 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 2769357e..af284717 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 cfdedb3a..066a35a7 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 f64c750c..c0f242c0 100644 --- a/vnc.html +++ b/vnc.html @@ -207,11 +207,11 @@ -
+

no
VNC

-
+
Canvas not supported. From 777cb7a0c573e16656a30b538e8d0e280cc69975 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 48fa5a8c..9e4525b5 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 066a35a7..6a6b6f40 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 29475d772847013b53878fef22103d1538477395 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 6a6b6f40..1c87438e 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 0bd2cbacaae3e6c211d48dc6e6d75268a17acc95 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 1c87438e..f73e6e41 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 45c70c9e23567a5b1d6985668211c227459b2af9 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 f73e6e41..c67077f4 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 4e471b5b55fa2272e3c72b0df8848dabc3196965 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 c67077f4..72878376 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 cd611a5326ed9053b94501c453f99fd24c7dfb11 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 af284717..59e90c5b 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 72878376..843f38f0 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 c0f242c0..cdf45dc9 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 843f38f0..872b9e97 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 ab81ddf5d48e83bde15c272eea9f993300ea7c21 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 872b9e97..60fb49f5 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 9e45354efcc4a7519f213fc9f68165c77d07f431 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 60fb49f5..23157728 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 fdf21468d3a69fd0a2189317a03a11db135b40ed 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 23157728..db0b3c17 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 afcf031a682e32c37a1bad24b1bd61bf02c3525e 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 db0b3c17..0e35f87f 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 95dd60011c4097a0b7408a429fe68518576d24d2 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 0e35f87f..e04c0f50 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 4d26f58e0d711144ec6bcdabf26811db1c457238 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 e04c0f50..7a8600a9 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 a20a8987650a7a3080706fe1c3678cf4f2e855ad 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 7a8600a9..3146ae6c 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 682fd02be65107ed9267969ff21e3661bddda5ba 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 59e90c5b..56e03c3a 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 3146ae6c..53c6e560 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 cdf45dc9..9d583738 100644 --- a/vnc.html +++ b/vnc.html @@ -5,7 +5,7 @@
    • -
    • +
    • @@ -196,10 +196,10 @@
      -
      • -
      • -
      • -
      • +
      • +
      • +
      • +
    From 3f2c25a60fc08514b6f5c9ccdfb5dab14fc59b80 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 56e03c3a..8d88c0f5 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 7d940c5a..5c4558dc 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 b2a0adcc..4ab53bde 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 53c6e560..37de7b6e 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 9d583738..2990aacf 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 a1dbbcc1a71ca88a7e3e2fd0e47362744b69c265 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 2990aacf..0b653065 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 @@
    • -
    • -
    • +
    • +