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
parent
6cba147d4e
commit
e40978c7fc
|
|
@ -79,9 +79,13 @@ html {
|
|||
.noVNC_status_button:disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.noVNC_status_button.noVNC_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Panels */
|
||||
.noVNC_panel {
|
||||
display: none;
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
color: #fff;
|
||||
|
|
@ -106,14 +110,15 @@ html {
|
|||
border-width: 40px 40px 0 0; /* vary these values to change the angle of the vertex */
|
||||
border-color: transparent #E0E0E0;
|
||||
}
|
||||
|
||||
/* Drag/Pan button */
|
||||
#noVNC_view_drag_button {
|
||||
display: none;
|
||||
.noVNC_panel.noVNC_open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* noVNC Touch Device only buttons */
|
||||
#noVNC_mobile_buttons {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_mobile_buttons.noVNC_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -140,6 +145,9 @@ html {
|
|||
margin: 0px;
|
||||
position: relative;
|
||||
}
|
||||
#noVNC_extra_keys.noVNC_hidden {
|
||||
display: none;
|
||||
}
|
||||
#noVNC_toggleCtrl_button {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -214,14 +222,8 @@ html {
|
|||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Send Ctrl+Alt+Delete */
|
||||
#noVNC_sendCtrlAltDel_button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* XVP Shutdown/Reboot */
|
||||
#noVNC_xvp {
|
||||
display: none;
|
||||
top: 73px;
|
||||
right: 30px;
|
||||
position: fixed;
|
||||
|
|
@ -235,7 +237,6 @@ html {
|
|||
|
||||
/* Clipboard */
|
||||
#noVNC_clipboard {
|
||||
display: none;
|
||||
top: 73px;
|
||||
right: 30px;
|
||||
position: fixed;
|
||||
|
|
@ -250,14 +251,8 @@ html {
|
|||
float: right;
|
||||
}
|
||||
|
||||
/* Toggle fullscreen */
|
||||
#noVNC_fullscreen_button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
#noVNC_settings {
|
||||
display: none;
|
||||
top: 73px;
|
||||
right: 20px;
|
||||
position: fixed;
|
||||
|
|
@ -276,7 +271,6 @@ html {
|
|||
|
||||
/* Connection Controls */
|
||||
#noVNC_controls {
|
||||
display: none;
|
||||
top: 73px;
|
||||
right: 12px;
|
||||
position: fixed;
|
||||
|
|
@ -308,7 +302,6 @@ html {
|
|||
|
||||
/* Popup Status */
|
||||
#noVNC_popup_status {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
|
||||
|
|
@ -327,6 +320,9 @@ html {
|
|||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#noVNC_popup_status.noVNC_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
* Main Area
|
||||
|
|
@ -344,7 +340,6 @@ html {
|
|||
|
||||
/* HTML5 Canvas */
|
||||
#noVNC_screen {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
|
@ -355,6 +350,9 @@ html {
|
|||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
#noVNC_screen.noVNC_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Do not set width/height for VNC_canvas or incorrect
|
||||
* scaling will occur. Canvas size depends on remote VNC
|
||||
|
|
@ -392,7 +390,9 @@ html {
|
|||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
}
|
||||
|
||||
#noVNC_logo.noVNC_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#noVNC_logo span{
|
||||
color:green;
|
||||
|
|
@ -437,6 +437,9 @@ html {
|
|||
#noVNC_modifiers {
|
||||
display: none;
|
||||
}
|
||||
#noVNC_modifiers.noVNC_open {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_toggleCtrl_button {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
|
|
|
|||
142
app/ui.js
142
app/ui.js
|
|
@ -76,7 +76,8 @@ var UI;
|
|||
// Show mouse selector buttons on touch screen devices
|
||||
if (UI.isTouchDevice) {
|
||||
// Show mobile buttons
|
||||
document.getElementById('noVNC_mobile_buttons').style.display = "inline";
|
||||
document.getElementById('noVNC_mobile_buttons')
|
||||
.classList.remove("noVNC_hidden");
|
||||
UI.hideMouseButton();
|
||||
// Remove the address bar
|
||||
setTimeout(function() { window.scrollTo(0, 1); }, 100);
|
||||
|
|
@ -187,7 +188,8 @@ var UI;
|
|||
document.documentElement.mozRequestFullScreen ||
|
||||
document.documentElement.webkitRequestFullscreen ||
|
||||
document.body.msRequestFullscreen)) {
|
||||
document.getElementById('noVNC_fullscreen_button').style.display = "inline";
|
||||
document.getElementById('noVNC_fullscreen_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
UI.addFullscreenHandlers();
|
||||
}
|
||||
},
|
||||
|
|
@ -371,22 +373,34 @@ var UI;
|
|||
document.getElementById('noVNC_setting_repeaterID').disabled = connected;
|
||||
|
||||
if (connected) {
|
||||
document.getElementById('noVNC_logo').style.display = "none";
|
||||
document.getElementById('noVNC_screen').style.display = "inline";
|
||||
document.getElementById('noVNC_logo')
|
||||
.classList.add("noVNC_hidden");
|
||||
document.getElementById('noVNC_screen')
|
||||
.classList.remove("noVNC_hidden");
|
||||
UI.updateViewClip();
|
||||
UI.setMouseButton(1);
|
||||
document.getElementById('noVNC_clipboard_button').style.display = "inline";
|
||||
document.getElementById('noVNC_keyboard_button').style.display = "inline";
|
||||
document.getElementById('noVNC_extra_keys').style.display = "";
|
||||
document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "inline";
|
||||
document.getElementById('noVNC_clipboard_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_keyboard_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_extra_keys')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_sendCtrlAltDel_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
} else {
|
||||
document.getElementById('noVNC_logo').style.display = "block";
|
||||
document.getElementById('noVNC_screen').style.display = "none";
|
||||
document.getElementById('noVNC_logo')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_screen')
|
||||
.classList.add("noVNC_hidden");
|
||||
UI.hideMouseButton();
|
||||
document.getElementById('noVNC_clipboard_button').style.display = "none";
|
||||
document.getElementById('noVNC_keyboard_button').style.display = "none";
|
||||
document.getElementById('noVNC_extra_keys').style.display = "none";
|
||||
document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "none";
|
||||
document.getElementById('noVNC_clipboard_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
document.getElementById('noVNC_keyboard_button')
|
||||
.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);
|
||||
}
|
||||
|
||||
|
|
@ -398,18 +412,24 @@ var UI;
|
|||
case 'fatal':
|
||||
case 'failed':
|
||||
case 'disconnected':
|
||||
document.getElementById('noVNC_connectPanel_button').style.display = "";
|
||||
document.getElementById('noVNC_disconnect_button').style.display = "none";
|
||||
document.getElementById('noVNC_connectPanel_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_disconnect_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
UI.connSettingsOpen = false;
|
||||
UI.toggleConnectPanel();
|
||||
break;
|
||||
case 'loaded':
|
||||
document.getElementById('noVNC_connectPanel_button').style.display = "";
|
||||
document.getElementById('noVNC_disconnect_button').style.display = "none";
|
||||
document.getElementById('noVNC_connectPanel_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_disconnect_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
break;
|
||||
default:
|
||||
document.getElementById('noVNC_connectPanel_button').style.display = "none";
|
||||
document.getElementById('noVNC_disconnect_button').style.display = "";
|
||||
document.getElementById('noVNC_connectPanel_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
document.getElementById('noVNC_disconnect_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -426,7 +446,7 @@ var UI;
|
|||
} else {
|
||||
psp.innerHTML = document.getElementById('noVNC_status').innerHTML;
|
||||
}
|
||||
psp.style.display = "block";
|
||||
psp.classList.remove("noVNC_hidden");
|
||||
psp.style.left = window.innerWidth/2 -
|
||||
parseInt(window.getComputedStyle(psp).width)/2 -30 + "px";
|
||||
|
||||
|
|
@ -436,7 +456,7 @@ var UI;
|
|||
|
||||
closePopup: function() {
|
||||
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) {
|
||||
UI.toggleXvpPanel();
|
||||
}
|
||||
document.getElementById('noVNC_settings').style.display = "block";
|
||||
document.getElementById('noVNC_settings_button').className = "noVNC_status_button_selected";
|
||||
document.getElementById('noVNC_settings')
|
||||
.classList.add("noVNC_open");
|
||||
document.getElementById('noVNC_settings_button')
|
||||
.className = "noVNC_status_button_selected";
|
||||
UI.settingsOpen = true;
|
||||
},
|
||||
|
||||
// Close menu (without applying settings)
|
||||
closeSettingsMenu: function() {
|
||||
document.getElementById('noVNC_settings').style.display = "none";
|
||||
document.getElementById('noVNC_settings_button').className = "noVNC_status_button";
|
||||
document.getElementById('noVNC_settings')
|
||||
.classList.remove("noVNC_open");
|
||||
document.getElementById('noVNC_settings_button')
|
||||
.className = "noVNC_status_button";
|
||||
UI.settingsOpen = false;
|
||||
},
|
||||
|
||||
|
|
@ -633,12 +657,16 @@ var UI;
|
|||
}
|
||||
// Toggle XVP panel
|
||||
if (UI.xvpOpen === true) {
|
||||
document.getElementById('noVNC_xvp').style.display = "none";
|
||||
document.getElementById('noVNC_toggleXvp_button').className = "noVNC_status_button";
|
||||
document.getElementById('noVNC_xvp')
|
||||
.classList.remove("noVNC_open");
|
||||
document.getElementById('noVNC_toggleXvp_button')
|
||||
.className = "noVNC_status_button";
|
||||
UI.xvpOpen = false;
|
||||
} else {
|
||||
document.getElementById('noVNC_xvp').style.display = "block";
|
||||
document.getElementById('noVNC_toggleXvp_button').className = "noVNC_status_button_selected";
|
||||
document.getElementById('noVNC_xvp')
|
||||
.classList.add("noVNC_open");
|
||||
document.getElementById('noVNC_toggleXvp_button')
|
||||
.className = "noVNC_status_button_selected";
|
||||
UI.xvpOpen = true;
|
||||
}
|
||||
},
|
||||
|
|
@ -646,9 +674,11 @@ var UI;
|
|||
// Disable/enable XVP button
|
||||
updateXvpButton: function(ver) {
|
||||
if (ver >= 1) {
|
||||
document.getElementById('noVNC_toggleXvp_button').style.display = 'inline';
|
||||
document.getElementById('noVNC_toggleXvp_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
} else {
|
||||
document.getElementById('noVNC_toggleXvp_button').style.display = 'none';
|
||||
document.getElementById('noVNC_toggleXvp_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
// Close XVP panel if open
|
||||
if (UI.xvpOpen === true) {
|
||||
UI.toggleXvpPanel();
|
||||
|
|
@ -679,12 +709,16 @@ var UI;
|
|||
}
|
||||
// Toggle Clipboard Panel
|
||||
if (UI.clipboardOpen === true) {
|
||||
document.getElementById('noVNC_clipboard').style.display = "none";
|
||||
document.getElementById('noVNC_clipboard_button').className = "noVNC_status_button";
|
||||
document.getElementById('noVNC_clipboard')
|
||||
.classList.remove("noVNC_open");
|
||||
document.getElementById('noVNC_clipboard_button')
|
||||
.className = "noVNC_status_button";
|
||||
UI.clipboardOpen = false;
|
||||
} else {
|
||||
document.getElementById('noVNC_clipboard').style.display = "block";
|
||||
document.getElementById('noVNC_clipboard_button').className = "noVNC_status_button_selected";
|
||||
document.getElementById('noVNC_clipboard')
|
||||
.classList.add("noVNC_open");
|
||||
document.getElementById('noVNC_clipboard_button')
|
||||
.className = "noVNC_status_button_selected";
|
||||
UI.clipboardOpen = true;
|
||||
}
|
||||
},
|
||||
|
|
@ -732,16 +766,20 @@ var UI;
|
|||
|
||||
// Toggle Connection Panel
|
||||
if (UI.connSettingsOpen === true) {
|
||||
document.getElementById('noVNC_controls').style.display = "none";
|
||||
document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button";
|
||||
document.getElementById('noVNC_controls')
|
||||
.classList.remove("noVNC_open");
|
||||
document.getElementById('noVNC_connectPanel_button')
|
||||
.className = "noVNC_status_button";
|
||||
UI.connSettingsOpen = false;
|
||||
UI.saveSetting('host');
|
||||
UI.saveSetting('port');
|
||||
UI.saveSetting('token');
|
||||
//UI.saveSetting('password');
|
||||
} else {
|
||||
document.getElementById('noVNC_controls').style.display = "block";
|
||||
document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button_selected";
|
||||
document.getElementById('noVNC_controls')
|
||||
.classList.add("noVNC_open");
|
||||
document.getElementById('noVNC_connectPanel_button')
|
||||
.className = "noVNC_status_button_selected";
|
||||
UI.connSettingsOpen = true;
|
||||
document.getElementById('noVNC_setting_host').focus();
|
||||
}
|
||||
|
|
@ -1054,7 +1092,7 @@ var UI;
|
|||
|
||||
if (UI.rfb_state !== 'normal') {
|
||||
// Always hide when not connected
|
||||
viewDragButton.style.display = "none";
|
||||
viewDragButton.classList.add("noVNC_hidden");
|
||||
} else {
|
||||
if (!clipping &&
|
||||
UI.rfb.get_viewportDrag()) {
|
||||
|
|
@ -1073,7 +1111,7 @@ var UI;
|
|||
// Different behaviour for touch vs non-touch
|
||||
// The button is disabled instead of hidden on touch devices
|
||||
if (UI.isTouchDevice) {
|
||||
viewDragButton.style.display = "inline";
|
||||
viewDragButton.classList.remove("noVNC_hidden");
|
||||
|
||||
if (clipping) {
|
||||
viewDragButton.disabled = false;
|
||||
|
|
@ -1084,9 +1122,9 @@ var UI;
|
|||
viewDragButton.disabled = false;
|
||||
|
||||
if (clipping) {
|
||||
viewDragButton.style.display = "inline";
|
||||
viewDragButton.classList.remove("noVNC_hidden");
|
||||
} else {
|
||||
viewDragButton.style.display = "none";
|
||||
viewDragButton.classList.add("noVNC_hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1217,12 +1255,16 @@ var UI;
|
|||
toggleExtraKeys: function() {
|
||||
UI.keepKeyboard();
|
||||
if(UI.extraKeysVisible === false) {
|
||||
document.getElementById('noVNC_modifiers').style.display = "inline";
|
||||
document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button_selected";
|
||||
document.getElementById('noVNC_modifiers')
|
||||
.classList.add("noVNC_open");
|
||||
document.getElementById('noVNC_toggleExtraKeys_button')
|
||||
.className = "noVNC_status_button_selected";
|
||||
UI.extraKeysVisible = true;
|
||||
} else if(UI.extraKeysVisible === true) {
|
||||
document.getElementById('noVNC_modifiers').style.display = "";
|
||||
document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button";
|
||||
document.getElementById('noVNC_modifiers')
|
||||
.classList.remove("noVNC_open");
|
||||
document.getElementById('noVNC_toggleExtraKeys_button')
|
||||
.className = "noVNC_status_button";
|
||||
UI.extraKeysVisible = false;
|
||||
}
|
||||
},
|
||||
|
|
@ -1286,9 +1328,9 @@ var UI;
|
|||
for (var b = 0; b < blist.length; b++) {
|
||||
var button = document.getElementById('noVNC_mouse_button' + blist[b]);
|
||||
if (blist[b] === num) {
|
||||
button.style.display = "";
|
||||
button.classList.remove("noVNC_hidden");
|
||||
} else {
|
||||
button.style.display = "none";
|
||||
button.classList.add("noVNC_hidden");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
10
vnc.html
10
vnc.html
|
|
@ -56,11 +56,11 @@
|
|||
|
||||
<!-- Drag/Pan the viewport -->
|
||||
<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" />
|
||||
|
||||
<!--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"
|
||||
id="noVNC_mouse_button0" class="noVNC_status_button" />
|
||||
<input type="image" alt="Left mousebutton" src="app/images/mouse_left.png"
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
|
||||
<!-- Toggle fullscreen -->
|
||||
<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" />
|
||||
|
||||
<!-- Settings -->
|
||||
|
|
@ -190,7 +190,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Popup Status -->
|
||||
<div id="noVNC_popup_status" class="">
|
||||
<div id="noVNC_popup_status" class="noVNC_hidden">
|
||||
</div>
|
||||
|
||||
</div> <!-- End of noVNC_control_bar -->
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
<h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
|
||||
|
||||
<!-- HTML5 Canvas -->
|
||||
<div id="noVNC_screen">
|
||||
<div id="noVNC_screen" class="noVNC_hidden">
|
||||
<canvas id="noVNC_canvas" width="0" height="0">
|
||||
Canvas not supported.
|
||||
</canvas>
|
||||
|
|
|
|||
Loading…
Reference in New Issue