jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Let CSS control what it means to be hidden/closed 

This avoids hard-coding layout information in the JavaScript code.
It also opens up possibilities for more control in the CSS, e.g. for
animation.
This commit is contained in:
Pierre Ossman 2016-08-25 14:22:44 +02:00
parent 6cba147d4e
commit e40978c7fc
3 changed files with 121 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/styles/base.css
View File

@ -79,9 +79,13 @@ html {
.noVNC_status_button:disabled { .noVNC_status_button:disabled {
opacity: 0.4; opacity: 0.4;
} }
.noVNC_status_button.noVNC_hidden {
display: none;
}
/* Panels */ /* Panels */
.noVNC_panel { .noVNC_panel {
display: none;
position: relative; position: relative;
padding: 15px; padding: 15px;
color: #fff; color: #fff;
@ -106,14 +110,15 @@ html {
border-width: 40px 40px 0 0; /* vary these values to change the angle of the vertex */ border-width: 40px 40px 0 0; /* vary these values to change the angle of the vertex */
border-color: transparent #E0E0E0; border-color: transparent #E0E0E0;
} }
.noVNC_panel.noVNC_open {
/* Drag/Pan button */ display: block;
#noVNC_view_drag_button {
display: none;
} }
/* noVNC Touch Device only buttons */ /* noVNC Touch Device only buttons */
#noVNC_mobile_buttons { #noVNC_mobile_buttons {
display: inline;
}
#noVNC_mobile_buttons.noVNC_hidden {
display: none; display: none;
} }
@ -140,6 +145,9 @@ html {
margin: 0px; margin: 0px;
position: relative; position: relative;
} }
#noVNC_extra_keys.noVNC_hidden {
display: none;
}
#noVNC_toggleCtrl_button { #noVNC_toggleCtrl_button {
display: inline; display: inline;
} }
@ -214,14 +222,8 @@ html {
padding-right: 10px; padding-right: 10px;
} }
/* Send Ctrl+Alt+Delete */
#noVNC_sendCtrlAltDel_button {
display: none;
}
/* XVP Shutdown/Reboot */ /* XVP Shutdown/Reboot */
#noVNC_xvp { #noVNC_xvp {
display: none;
top: 73px; top: 73px;
right: 30px; right: 30px;
position: fixed; position: fixed;
@ -235,7 +237,6 @@ html {
/* Clipboard */ /* Clipboard */
#noVNC_clipboard { #noVNC_clipboard {
display: none;
top: 73px; top: 73px;
right: 30px; right: 30px;
position: fixed; position: fixed;
@ -250,14 +251,8 @@ html {
float: right; float: right;
} }
/* Toggle fullscreen */
#noVNC_fullscreen_button {
display: none;
}
/* Settings */ /* Settings */
#noVNC_settings { #noVNC_settings {
display: none;
top: 73px; top: 73px;
right: 20px; right: 20px;
position: fixed; position: fixed;
@ -276,7 +271,6 @@ html {
/* Connection Controls */ /* Connection Controls */
#noVNC_controls { #noVNC_controls {
display: none;
top: 73px; top: 73px;
right: 12px; right: 12px;
position: fixed; position: fixed;
@ -308,7 +302,6 @@ html {
/* Popup Status */ /* Popup Status */
#noVNC_popup_status { #noVNC_popup_status {
display: none;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
@ -327,6 +320,9 @@ html {
-moz-border-radius: 10px; -moz-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
} }
#noVNC_popup_status.noVNC_hidden {
display: none;
}
/* ---------------------------------------- /* ----------------------------------------
* Main Area * Main Area
@ -344,7 +340,6 @@ html {
/* HTML5 Canvas */ /* HTML5 Canvas */
#noVNC_screen { #noVNC_screen {
display: none;
position: absolute; position: absolute;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
@ -355,6 +350,9 @@ html {
width: auto; width: auto;
height: auto; height: auto;
} }
#noVNC_screen.noVNC_hidden {
display: none;
}
/* Do not set width/height for VNC_canvas or incorrect /* Do not set width/height for VNC_canvas or incorrect
* scaling will occur. Canvas size depends on remote VNC * scaling will occur. Canvas size depends on remote VNC
@ -392,7 +390,9 @@ html {
-1px 1px 0 #000, -1px 1px 0 #000,
1px 1px 0 #000; 1px 1px 0 #000;
} }
#noVNC_logo.noVNC_hidden {
display: none;
}
#noVNC_logo span{ #noVNC_logo span{
color:green; color:green;
@ -437,6 +437,9 @@ html {
#noVNC_modifiers { #noVNC_modifiers {
display: none; display: none;
} }
#noVNC_modifiers.noVNC_open {
display: inline;
}
#noVNC_toggleCtrl_button { #noVNC_toggleCtrl_button {
position: absolute; position: absolute;
top: 30px; top: 30px;

142
app/ui.js
View File

@ -76,7 +76,8 @@ var UI;
// Show mouse selector buttons on touch screen devices // Show mouse selector buttons on touch screen devices
if (UI.isTouchDevice) { if (UI.isTouchDevice) {
// Show mobile buttons // Show mobile buttons
document.getElementById('noVNC_mobile_buttons').style.display = "inline"; document.getElementById('noVNC_mobile_buttons')
.classList.remove("noVNC_hidden");
UI.hideMouseButton(); UI.hideMouseButton();
// Remove the address bar // Remove the address bar
setTimeout(function() { window.scrollTo(0, 1); }, 100); setTimeout(function() { window.scrollTo(0, 1); }, 100);
@ -187,7 +188,8 @@ var UI;
document.documentElement.mozRequestFullScreen || document.documentElement.mozRequestFullScreen ||
document.documentElement.webkitRequestFullscreen || document.documentElement.webkitRequestFullscreen ||
document.body.msRequestFullscreen)) { document.body.msRequestFullscreen)) {
document.getElementById('noVNC_fullscreen_button').style.display = "inline"; document.getElementById('noVNC_fullscreen_button')
.classList.remove("noVNC_hidden");
UI.addFullscreenHandlers(); UI.addFullscreenHandlers();
} }
}, },
@ -371,22 +373,34 @@ var UI;
document.getElementById('noVNC_setting_repeaterID').disabled = connected; document.getElementById('noVNC_setting_repeaterID').disabled = connected;
if (connected) { if (connected) {
document.getElementById('noVNC_logo').style.display = "none"; document.getElementById('noVNC_logo')
document.getElementById('noVNC_screen').style.display = "inline"; .classList.add("noVNC_hidden");
document.getElementById('noVNC_screen')
.classList.remove("noVNC_hidden");
UI.updateViewClip(); UI.updateViewClip();
UI.setMouseButton(1); UI.setMouseButton(1);
document.getElementById('noVNC_clipboard_button').style.display = "inline"; document.getElementById('noVNC_clipboard_button')
document.getElementById('noVNC_keyboard_button').style.display = "inline"; .classList.remove("noVNC_hidden");
document.getElementById('noVNC_extra_keys').style.display = ""; document.getElementById('noVNC_keyboard_button')
document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "inline"; .classList.remove("noVNC_hidden");
document.getElementById('noVNC_extra_keys')
.classList.remove("noVNC_hidden");
document.getElementById('noVNC_sendCtrlAltDel_button')
.classList.remove("noVNC_hidden");
} else { } else {
document.getElementById('noVNC_logo').style.display = "block"; document.getElementById('noVNC_logo')
document.getElementById('noVNC_screen').style.display = "none"; .classList.remove("noVNC_hidden");
document.getElementById('noVNC_screen')
.classList.add("noVNC_hidden");
UI.hideMouseButton(); UI.hideMouseButton();
document.getElementById('noVNC_clipboard_button').style.display = "none"; document.getElementById('noVNC_clipboard_button')
document.getElementById('noVNC_keyboard_button').style.display = "none"; .classList.add("noVNC_hidden");
document.getElementById('noVNC_extra_keys').style.display = "none"; document.getElementById('noVNC_keyboard_button')
document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "none"; .classList.add("noVNC_hidden");
document.getElementById('noVNC_extra_keys')
.classList.add("noVNC_hidden");
document.getElementById('noVNC_sendCtrlAltDel_button')
.classList.add("noVNC_hidden");
UI.updateXvpButton(0); UI.updateXvpButton(0);
} }
@ -398,18 +412,24 @@ var UI;
case 'fatal': case 'fatal':
case 'failed': case 'failed':
case 'disconnected': case 'disconnected':
document.getElementById('noVNC_connectPanel_button').style.display = ""; document.getElementById('noVNC_connectPanel_button')
document.getElementById('noVNC_disconnect_button').style.display = "none"; .classList.remove("noVNC_hidden");
document.getElementById('noVNC_disconnect_button')
.classList.add("noVNC_hidden");
UI.connSettingsOpen = false; UI.connSettingsOpen = false;
UI.toggleConnectPanel(); UI.toggleConnectPanel();
break; break;
case 'loaded': case 'loaded':
document.getElementById('noVNC_connectPanel_button').style.display = ""; document.getElementById('noVNC_connectPanel_button')
document.getElementById('noVNC_disconnect_button').style.display = "none"; .classList.remove("noVNC_hidden");
document.getElementById('noVNC_disconnect_button')
.classList.add("noVNC_hidden");
break; break;
default: default:
document.getElementById('noVNC_connectPanel_button').style.display = "none"; document.getElementById('noVNC_connectPanel_button')
document.getElementById('noVNC_disconnect_button').style.display = ""; .classList.add("noVNC_hidden");
document.getElementById('noVNC_disconnect_button')
.classList.remove("noVNC_hidden");
break; break;
} }
@ -426,7 +446,7 @@ var UI;
} else { } else {
psp.innerHTML = document.getElementById('noVNC_status').innerHTML; psp.innerHTML = document.getElementById('noVNC_status').innerHTML;
} }
psp.style.display = "block"; psp.classList.remove("noVNC_hidden");
psp.style.left = window.innerWidth/2 - psp.style.left = window.innerWidth/2 -
parseInt(window.getComputedStyle(psp).width)/2 -30 + "px"; parseInt(window.getComputedStyle(psp).width)/2 -30 + "px";
@ -436,7 +456,7 @@ var UI;
closePopup: function() { closePopup: function() {
clearTimeout(UI.popupStatusTimeout); clearTimeout(UI.popupStatusTimeout);
document.getElementById('noVNC_popup_status').style.display = "none"; document.getElementById('noVNC_popup_status').classList.add("noVNC_hidden");
}, },
/* ------^------- /* ------^-------
@ -569,15 +589,19 @@ var UI;
if (UI.xvpOpen === true) { if (UI.xvpOpen === true) {
UI.toggleXvpPanel(); UI.toggleXvpPanel();
} }
document.getElementById('noVNC_settings').style.display = "block"; document.getElementById('noVNC_settings')
document.getElementById('noVNC_settings_button').className = "noVNC_status_button_selected"; .classList.add("noVNC_open");
document.getElementById('noVNC_settings_button')
.className = "noVNC_status_button_selected";
UI.settingsOpen = true; UI.settingsOpen = true;
}, },
// Close menu (without applying settings) // Close menu (without applying settings)
closeSettingsMenu: function() { closeSettingsMenu: function() {
document.getElementById('noVNC_settings').style.display = "none"; document.getElementById('noVNC_settings')
document.getElementById('noVNC_settings_button').className = "noVNC_status_button"; .classList.remove("noVNC_open");
document.getElementById('noVNC_settings_button')
.className = "noVNC_status_button";
UI.settingsOpen = false; UI.settingsOpen = false;
}, },
@ -633,12 +657,16 @@ var UI;
} }
// Toggle XVP panel // Toggle XVP panel
if (UI.xvpOpen === true) { if (UI.xvpOpen === true) {
document.getElementById('noVNC_xvp').style.display = "none"; document.getElementById('noVNC_xvp')
document.getElementById('noVNC_toggleXvp_button').className = "noVNC_status_button"; .classList.remove("noVNC_open");
document.getElementById('noVNC_toggleXvp_button')
.className = "noVNC_status_button";
UI.xvpOpen = false; UI.xvpOpen = false;
} else { } else {
document.getElementById('noVNC_xvp').style.display = "block"; document.getElementById('noVNC_xvp')
document.getElementById('noVNC_toggleXvp_button').className = "noVNC_status_button_selected"; .classList.add("noVNC_open");
document.getElementById('noVNC_toggleXvp_button')
.className = "noVNC_status_button_selected";
UI.xvpOpen = true; UI.xvpOpen = true;
} }
}, },
@ -646,9 +674,11 @@ var UI;
// Disable/enable XVP button // Disable/enable XVP button
updateXvpButton: function(ver) { updateXvpButton: function(ver) {
if (ver >= 1) { if (ver >= 1) {
document.getElementById('noVNC_toggleXvp_button').style.display = 'inline'; document.getElementById('noVNC_toggleXvp_button')
.classList.remove("noVNC_hidden");
} else { } else {
document.getElementById('noVNC_toggleXvp_button').style.display = 'none'; document.getElementById('noVNC_toggleXvp_button')
.classList.add("noVNC_hidden");
// Close XVP panel if open // Close XVP panel if open
if (UI.xvpOpen === true) { if (UI.xvpOpen === true) {
UI.toggleXvpPanel(); UI.toggleXvpPanel();
@ -679,12 +709,16 @@ var UI;
} }
// Toggle Clipboard Panel // Toggle Clipboard Panel
if (UI.clipboardOpen === true) { if (UI.clipboardOpen === true) {
document.getElementById('noVNC_clipboard').style.display = "none"; document.getElementById('noVNC_clipboard')
document.getElementById('noVNC_clipboard_button').className = "noVNC_status_button"; .classList.remove("noVNC_open");
document.getElementById('noVNC_clipboard_button')
.className = "noVNC_status_button";
UI.clipboardOpen = false; UI.clipboardOpen = false;
} else { } else {
document.getElementById('noVNC_clipboard').style.display = "block"; document.getElementById('noVNC_clipboard')
document.getElementById('noVNC_clipboard_button').className = "noVNC_status_button_selected"; .classList.add("noVNC_open");
document.getElementById('noVNC_clipboard_button')
.className = "noVNC_status_button_selected";
UI.clipboardOpen = true; UI.clipboardOpen = true;
} }
}, },
@ -732,16 +766,20 @@ var UI;
// Toggle Connection Panel // Toggle Connection Panel
if (UI.connSettingsOpen === true) { if (UI.connSettingsOpen === true) {
document.getElementById('noVNC_controls').style.display = "none"; document.getElementById('noVNC_controls')
document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button"; .classList.remove("noVNC_open");
document.getElementById('noVNC_connectPanel_button')
.className = "noVNC_status_button";
UI.connSettingsOpen = false; UI.connSettingsOpen = false;
UI.saveSetting('host'); UI.saveSetting('host');
UI.saveSetting('port'); UI.saveSetting('port');
UI.saveSetting('token'); UI.saveSetting('token');
//UI.saveSetting('password'); //UI.saveSetting('password');
} else { } else {
document.getElementById('noVNC_controls').style.display = "block"; document.getElementById('noVNC_controls')
document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button_selected"; .classList.add("noVNC_open");
document.getElementById('noVNC_connectPanel_button')
.className = "noVNC_status_button_selected";
UI.connSettingsOpen = true; UI.connSettingsOpen = true;
document.getElementById('noVNC_setting_host').focus(); document.getElementById('noVNC_setting_host').focus();
} }
@ -1054,7 +1092,7 @@ var UI;
if (UI.rfb_state !== 'normal') { if (UI.rfb_state !== 'normal') {
// Always hide when not connected // Always hide when not connected
viewDragButton.style.display = "none"; viewDragButton.classList.add("noVNC_hidden");
} else { } else {
if (!clipping && if (!clipping &&
UI.rfb.get_viewportDrag()) { UI.rfb.get_viewportDrag()) {
@ -1073,7 +1111,7 @@ var UI;
// Different behaviour for touch vs non-touch // Different behaviour for touch vs non-touch
// The button is disabled instead of hidden on touch devices // The button is disabled instead of hidden on touch devices
if (UI.isTouchDevice) { if (UI.isTouchDevice) {
viewDragButton.style.display = "inline"; viewDragButton.classList.remove("noVNC_hidden");
if (clipping) { if (clipping) {
viewDragButton.disabled = false; viewDragButton.disabled = false;
@ -1084,9 +1122,9 @@ var UI;
viewDragButton.disabled = false; viewDragButton.disabled = false;
if (clipping) { if (clipping) {
viewDragButton.style.display = "inline"; viewDragButton.classList.remove("noVNC_hidden");
} else { } else {
viewDragButton.style.display = "none"; viewDragButton.classList.add("noVNC_hidden");
} }
} }
} }
@ -1217,12 +1255,16 @@ var UI;
toggleExtraKeys: function() { toggleExtraKeys: function() {
UI.keepKeyboard(); UI.keepKeyboard();
if(UI.extraKeysVisible === false) { if(UI.extraKeysVisible === false) {
document.getElementById('noVNC_modifiers').style.display = "inline"; document.getElementById('noVNC_modifiers')
document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button_selected"; .classList.add("noVNC_open");
document.getElementById('noVNC_toggleExtraKeys_button')
.className = "noVNC_status_button_selected";
UI.extraKeysVisible = true; UI.extraKeysVisible = true;
} else if(UI.extraKeysVisible === true) { } else if(UI.extraKeysVisible === true) {
document.getElementById('noVNC_modifiers').style.display = ""; document.getElementById('noVNC_modifiers')
document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button"; .classList.remove("noVNC_open");
document.getElementById('noVNC_toggleExtraKeys_button')
.className = "noVNC_status_button";
UI.extraKeysVisible = false; UI.extraKeysVisible = false;
} }
}, },
@ -1286,9 +1328,9 @@ var UI;
for (var b = 0; b < blist.length; b++) { for (var b = 0; b < blist.length; b++) {
var button = document.getElementById('noVNC_mouse_button' + blist[b]); var button = document.getElementById('noVNC_mouse_button' + blist[b]);
if (blist[b] === num) { if (blist[b] === num) {
button.style.display = ""; button.classList.remove("noVNC_hidden");
} else { } else {
button.style.display = "none"; button.classList.add("noVNC_hidden");
} }
} }
}, },

10
vnc.html
View File

@ -56,11 +56,11 @@
<!-- Drag/Pan the viewport --> <!-- Drag/Pan the viewport -->
<input type="image" alt="viewport drag" src="app/images/drag.png" <input type="image" alt="viewport drag" src="app/images/drag.png"
id="noVNC_view_drag_button" class="noVNC_status_button" id="noVNC_view_drag_button" class="noVNC_status_button noVNC_hidden"
title="Move/Drag Viewport" /> title="Move/Drag Viewport" />
<!--noVNC Touch Device only buttons--> <!--noVNC Touch Device only buttons-->
<div id="noVNC_mobile_buttons"> <div id="noVNC_mobile_buttons" class="noVNC_hidden">
<input type="image" alt="No mousebutton" src="app/images/mouse_none.png" <input type="image" alt="No mousebutton" src="app/images/mouse_none.png"
id="noVNC_mouse_button0" class="noVNC_status_button" /> id="noVNC_mouse_button0" class="noVNC_status_button" />
<input type="image" alt="Left mousebutton" src="app/images/mouse_left.png" <input type="image" alt="Left mousebutton" src="app/images/mouse_left.png"
@ -128,7 +128,7 @@
<!-- Toggle fullscreen --> <!-- Toggle fullscreen -->
<input type="image" alt="Fullscreen" src="app/images/fullscreen.png" <input type="image" alt="Fullscreen" src="app/images/fullscreen.png"
id="noVNC_fullscreen_button" class="noVNC_status_button" id="noVNC_fullscreen_button" class="noVNC_status_button noVNC_hidden"
title="Fullscreen" /> title="Fullscreen" />
<!-- Settings --> <!-- Settings -->
@ -190,7 +190,7 @@
</div> </div>
<!-- Popup Status --> <!-- Popup Status -->
<div id="noVNC_popup_status" class=""> <div id="noVNC_popup_status" class="noVNC_hidden">
</div> </div>
</div> <!-- End of noVNC_control_bar --> </div> <!-- End of noVNC_control_bar -->
@ -199,7 +199,7 @@
<h1 id="noVNC_logo"><span>no</span><br />VNC</h1> <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
<!-- HTML5 Canvas --> <!-- HTML5 Canvas -->
<div id="noVNC_screen"> <div id="noVNC_screen" class="noVNC_hidden">
<canvas id="noVNC_canvas" width="0" height="0"> <canvas id="noVNC_canvas" width="0" height="0">
Canvas not supported. Canvas not supported.
</canvas> </canvas>