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

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 2016-09-14 16:10:24 +02:00
parent 8434cc81b3
commit 6244e383e4
3 changed files with 62 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/styles/base.css
View File

@ -222,11 +222,18 @@ input[type=button]:active, select:active {
float: right; float: right;
} }
:root:not(.noVNC_connected) #noVNC_view_drag_button {
display: none;
}
/* noVNC Touch Device only buttons */ /* noVNC Touch Device only buttons */
#noVNC_mobile_buttons { #noVNC_mobile_buttons {
display: inline; 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; display: none;
} }
@ -242,7 +249,7 @@ input[type=button]:active, select:active {
ime-mode: disabled; ime-mode: disabled;
} }
#noVNC_toggle_extra_keys_button { :root:not(.noVNC_connected) #noVNC_extra_keys {
display: none; display: none;
} }
@ -280,7 +287,15 @@ input[type=button]:active, select:active {
padding-left: 10px; padding-left: 10px;
} }
/* Send Ctrl+Alt+Delete */
:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button {
display: none;
}
/* XVP Shutdown/Reboot */ /* XVP Shutdown/Reboot */
:root:not(.noVNC_connected) #noVNC_xvp_button {
display: none;
}
#noVNC_xvp { #noVNC_xvp {
} }
#noVNC_xvp_buttons { #noVNC_xvp_buttons {
@ -288,6 +303,9 @@ input[type=button]:active, select:active {
} }
/* Clipboard */ /* Clipboard */
:root:not(.noVNC_connected) #noVNC_clipboard_button {
display: none;
}
#noVNC_clipboard { #noVNC_clipboard {
} }
#noVNC_clipboard_text { #noVNC_clipboard_text {
@ -307,7 +325,11 @@ input[type=button]:active, select:active {
} }
/* Connection Controls */ /* 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 { #noVNC_connect_controls ul {
list-style: none; list-style: none;
@ -440,7 +462,7 @@ input[type=button]:active, select:active {
width: auto; width: auto;
height: auto; height: auto;
} }
#noVNC_screen.noVNC_hidden { :root:not(.noVNC_connected) #noVNC_screen {
display: none; display: none;
} }
@ -480,7 +502,7 @@ input[type=button]:active, select:active {
-1px 1px 0 #000, -1px 1px 0 #000,
1px 1px 0 #000; 1px 1px 0 #000;
} }
#noVNC_logo.noVNC_hidden { :root.noVNC_connected #noVNC_logo {
display: none; display: none;
} }

60
app/ui.js
View File

@ -66,12 +66,9 @@ var UI;
UI.initSettings(); UI.initSettings();
// Show mouse selector buttons on touch screen devices // Adapt the interface for touch screen devices
if (UI.isTouchDevice) { if (UI.isTouchDevice) {
// Show mobile buttons document.documentElement.classList.add("noVNC_touch");
document.getElementById('noVNC_mobile_buttons')
.classList.remove("noVNC_hidden");
UI.hideMouseButton();
// Remove the address bar // Remove the address bar
setTimeout(function() { window.scrollTo(0, 1); }, 100); setTimeout(function() { window.scrollTo(0, 1); }, 100);
UI.forceSetting('clip', true); UI.forceSetting('clip', true);
@ -368,34 +365,11 @@ var UI;
document.getElementById('noVNC_setting_repeaterID').disabled = connected; document.getElementById('noVNC_setting_repeaterID').disabled = connected;
if (connected) { if (connected) {
document.getElementById('noVNC_logo') document.documentElement.classList.add("noVNC_connected");
.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')
.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 { } else {
document.getElementById('noVNC_logo') document.documentElement.classList.remove("noVNC_connected");
.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");
UI.updateXvpButton(0); UI.updateXvpButton(0);
} }
@ -411,23 +385,11 @@ var UI;
case 'fatal': case 'fatal':
case 'failed': case 'failed':
case 'disconnected': case 'disconnected':
document.getElementById('noVNC_connect_controls_button')
.classList.remove("noVNC_hidden");
document.getElementById('noVNC_disconnect_button')
.classList.add("noVNC_hidden");
UI.openConnectPanel(); UI.openConnectPanel();
break; break;
case 'loaded': case 'loaded':
document.getElementById('noVNC_connect_controls_button')
.classList.remove("noVNC_hidden");
document.getElementById('noVNC_disconnect_button')
.classList.add("noVNC_hidden");
break; break;
default: default:
document.getElementById('noVNC_connect_controls_button')
.classList.add("noVNC_hidden");
document.getElementById('noVNC_disconnect_button')
.classList.remove("noVNC_hidden");
break; break;
} }
@ -1086,20 +1048,17 @@ var UI;
updateViewDrag: function() { updateViewDrag: function() {
var clipping = false; var clipping = false;
if (UI.rfb_state !== 'normal') return;
// Check if viewport drag is possible. It is only possible // Check if viewport drag is possible. It is only possible
// if the remote display is clipping the client display. // if the remote display is clipping the client display.
if (UI.rfb_state === 'normal' && if (UI.rfb.get_display().get_viewport() &&
UI.rfb.get_display().get_viewport() &&
UI.rfb.get_display().clippingDisplay()) { UI.rfb.get_display().clippingDisplay()) {
clipping = true; clipping = true;
} }
var viewDragButton = document.getElementById('noVNC_view_drag_button'); 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 && if (!clipping &&
UI.rfb.get_viewportDrag()) { UI.rfb.get_viewportDrag()) {
// The size of the remote display is the same or smaller // The size of the remote display is the same or smaller
@ -1133,7 +1092,6 @@ var UI;
viewDragButton.classList.add("noVNC_hidden"); viewDragButton.classList.add("noVNC_hidden");
} }
} }
}
}, },
/* ------^------- /* ------^-------
@ -1329,10 +1287,6 @@ var UI;
* MISC * MISC
* ------v------*/ * ------v------*/
hideMouseButton: function() {
UI.setMouseButton(-1);
},
setMouseButton: function(num) { setMouseButton: function(num) {
if (UI.rfb) { if (UI.rfb) {
UI.rfb.get_mouse().set_touchButton(num); UI.rfb.get_mouse().set_touchButton(num);

4
vnc.html
View File

@ -60,7 +60,7 @@
title="Move/Drag Viewport" /> title="Move/Drag Viewport" />
<!--noVNC Touch Device only buttons--> <!--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" <input type="image" alt="No mousebutton" src="app/images/mouse_none.svg"
id="noVNC_mouse_button0" class="noVNC_button" /> id="noVNC_mouse_button0" class="noVNC_button" />
<input type="image" alt="Left mousebutton" src="app/images/mouse_left.svg" <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> <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
<!-- HTML5 Canvas --> <!-- 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, <!-- Note that Google Chrome on Android doesn't respect any of these,
html attributes which attempt to disable text suggestions on the html attributes which attempt to disable text suggestions on the
on-screen keyboard. Let's hope Chrome implements the ime-mode on-screen keyboard. Let's hope Chrome implements the ime-mode