Let CSS update UI for touch and connected state
Avoid a lot of JavaScript code that can easily be handed using style sheets instead, specifically items that should only be shown when on a touch device, or items that depend on the connected state.
This commit is contained in:
Pierre Ossman
parent
8434cc81b3
commit
6244e383e4
|
|
@ -222,11 +222,18 @@ input[type=button]:active, select:active {
|
|||
float: right;
|
||||
}
|
||||
|
||||
:root:not(.noVNC_connected) #noVNC_view_drag_button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* noVNC Touch Device only buttons */
|
||||
#noVNC_mobile_buttons {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_mobile_buttons.noVNC_hidden {
|
||||
:root:not(.noVNC_connected) #noVNC_mobile_buttons {
|
||||
display: none;
|
||||
}
|
||||
:root:not(.noVNC_touch) #noVNC_mobile_buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -242,7 +249,7 @@ input[type=button]:active, select:active {
|
|||
ime-mode: disabled;
|
||||
}
|
||||
|
||||
#noVNC_toggle_extra_keys_button {
|
||||
:root:not(.noVNC_connected) #noVNC_extra_keys {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -280,7 +287,15 @@ input[type=button]:active, select:active {
|
|||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Send Ctrl+Alt+Delete */
|
||||
:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* XVP Shutdown/Reboot */
|
||||
:root:not(.noVNC_connected) #noVNC_xvp_button {
|
||||
display: none;
|
||||
}
|
||||
#noVNC_xvp {
|
||||
}
|
||||
#noVNC_xvp_buttons {
|
||||
|
|
@ -288,6 +303,9 @@ input[type=button]:active, select:active {
|
|||
}
|
||||
|
||||
/* Clipboard */
|
||||
:root:not(.noVNC_connected) #noVNC_clipboard_button {
|
||||
display: none;
|
||||
}
|
||||
#noVNC_clipboard {
|
||||
}
|
||||
#noVNC_clipboard_text {
|
||||
|
|
@ -307,7 +325,11 @@ input[type=button]:active, select:active {
|
|||
}
|
||||
|
||||
/* Connection Controls */
|
||||
#noVNC_connect_controls {
|
||||
:root.noVNC_connected #noVNC_connect_controls_button {
|
||||
display: none;
|
||||
}
|
||||
:root:not(.noVNC_connected) #noVNC_disconnect_button {
|
||||
display: none;
|
||||
}
|
||||
#noVNC_connect_controls ul {
|
||||
list-style: none;
|
||||
|
|
@ -440,7 +462,7 @@ input[type=button]:active, select:active {
|
|||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
#noVNC_screen.noVNC_hidden {
|
||||
:root:not(.noVNC_connected) #noVNC_screen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -480,7 +502,7 @@ input[type=button]:active, select:active {
|
|||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
}
|
||||
#noVNC_logo.noVNC_hidden {
|
||||
:root.noVNC_connected #noVNC_logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
60
app/ui.js
60
app/ui.js
|
|
@ -66,12 +66,9 @@ var UI;
|
|||
|
||||
UI.initSettings();
|
||||
|
||||
// Show mouse selector buttons on touch screen devices
|
||||
// Adapt the interface for touch screen devices
|
||||
if (UI.isTouchDevice) {
|
||||
// Show mobile buttons
|
||||
document.getElementById('noVNC_mobile_buttons')
|
||||
.classList.remove("noVNC_hidden");
|
||||
UI.hideMouseButton();
|
||||
document.documentElement.classList.add("noVNC_touch");
|
||||
// Remove the address bar
|
||||
setTimeout(function() { window.scrollTo(0, 1); }, 100);
|
||||
UI.forceSetting('clip', true);
|
||||
|
|
@ -368,34 +365,11 @@ var UI;
|
|||
document.getElementById('noVNC_setting_repeaterID').disabled = connected;
|
||||
|
||||
if (connected) {
|
||||
document.getElementById('noVNC_logo')
|
||||
.classList.add("noVNC_hidden");
|
||||
document.getElementById('noVNC_screen')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.documentElement.classList.add("noVNC_connected");
|
||||
UI.updateViewClip();
|
||||
UI.setMouseButton(1);
|
||||
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_send_ctrl_alt_del_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
} else {
|
||||
document.getElementById('noVNC_logo')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_screen')
|
||||
.classList.add("noVNC_hidden");
|
||||
UI.hideMouseButton();
|
||||
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_send_ctrl_alt_del_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
document.documentElement.classList.remove("noVNC_connected");
|
||||
UI.updateXvpButton(0);
|
||||
}
|
||||
|
||||
|
|
@ -411,23 +385,11 @@ var UI;
|
|||
case 'fatal':
|
||||
case 'failed':
|
||||
case 'disconnected':
|
||||
document.getElementById('noVNC_connect_controls_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_disconnect_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
UI.openConnectPanel();
|
||||
break;
|
||||
case 'loaded':
|
||||
document.getElementById('noVNC_connect_controls_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
document.getElementById('noVNC_disconnect_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
break;
|
||||
default:
|
||||
document.getElementById('noVNC_connect_controls_button')
|
||||
.classList.add("noVNC_hidden");
|
||||
document.getElementById('noVNC_disconnect_button')
|
||||
.classList.remove("noVNC_hidden");
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -1086,20 +1048,17 @@ var UI;
|
|||
updateViewDrag: function() {
|
||||
var clipping = false;
|
||||
|
||||
if (UI.rfb_state !== 'normal') return;
|
||||
|
||||
// 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() &&
|
||||
if (UI.rfb.get_display().get_viewport() &&
|
||||
UI.rfb.get_display().clippingDisplay()) {
|
||||
clipping = true;
|
||||
}
|
||||
|
||||
var viewDragButton = document.getElementById('noVNC_view_drag_button');
|
||||
|
||||
if (UI.rfb_state !== 'normal') {
|
||||
// Always hide when not connected
|
||||
viewDragButton.classList.add("noVNC_hidden");
|
||||
} else {
|
||||
if (!clipping &&
|
||||
UI.rfb.get_viewportDrag()) {
|
||||
// The size of the remote display is the same or smaller
|
||||
|
|
@ -1133,7 +1092,6 @@ var UI;
|
|||
viewDragButton.classList.add("noVNC_hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* ------^-------
|
||||
|
|
@ -1329,10 +1287,6 @@ var UI;
|
|||
* MISC
|
||||
* ------v------*/
|
||||
|
||||
hideMouseButton: function() {
|
||||
UI.setMouseButton(-1);
|
||||
},
|
||||
|
||||
setMouseButton: function(num) {
|
||||
if (UI.rfb) {
|
||||
UI.rfb.get_mouse().set_touchButton(num);
|
||||
|
|
|
|||
4
vnc.html
4
vnc.html
|
|
@ -60,7 +60,7 @@
|
|||
title="Move/Drag Viewport" />
|
||||
|
||||
<!--noVNC Touch Device only buttons-->
|
||||
<div id="noVNC_mobile_buttons" class="noVNC_hidden">
|
||||
<div id="noVNC_mobile_buttons">
|
||||
<input type="image" alt="No mousebutton" src="app/images/mouse_none.svg"
|
||||
id="noVNC_mouse_button0" class="noVNC_button" />
|
||||
<input type="image" alt="Left mousebutton" src="app/images/mouse_left.svg"
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
<h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
|
||||
|
||||
<!-- HTML5 Canvas -->
|
||||
<div id="noVNC_screen" class="noVNC_hidden">
|
||||
<div id="noVNC_screen">
|
||||
<!-- Note that Google Chrome on Android doesn't respect any of these,
|
||||
html attributes which attempt to disable text suggestions on the
|
||||
on-screen keyboard. Let's hope Chrome implements the ime-mode
|
||||
|
|
|
|||
Loading…
Reference in New Issue