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

enable fullscreen when vnc is in iframe

This commit is contained in:
Pawel Raczyk 2019-05-14 11:00:05 +02:00
parent bc416ecc92
commit 4f64efaabd
3 changed files with 32 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/styles/base.css
View File

@ -580,7 +580,11 @@ select:active {
}
/* Extra manual keys */
:root:not(.noVNC_connected) #noVNC_extra_keys, :root:not(.noVNC_connected) #noVNC_special_keys {
:root:not(.noVNC_connected) #noVNC_extra_keys,
:root:not(.noVNC_connected) #noVNC_special_keys,
:root:not(.noVNC_connected) #noVNC_clipboard_button,
:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button,
:root:not(.noVNC_connected) #noVNC_clipboard_button {
display: none;
}
@ -604,10 +608,6 @@ select:active {
width: 100%;
}
/* Clipboard */
:root:not(.noVNC_connected) #noVNC_clipboard_button {
display: none;
}
#noVNC_clipboard {
/* Full screen, minus padding and left and right margins */
max-width: calc(100vw - 2*15px - 75px - 25px);

59
app/ui.js
View File

@ -385,11 +385,6 @@ const UI = {
addFullscreenHandlers() {
document.getElementById("noVNC_fullscreen_button")
.addEventListener('click', UI.toggleFullscreen);
window.addEventListener('fullscreenchange', UI.updateFullscreenButton);
window.addEventListener('mozfullscreenchange', UI.updateFullscreenButton);
window.addEventListener('webkitfullscreenchange', UI.updateFullscreenButton);
window.addEventListener('msfullscreenchange', UI.updateFullscreenButton);
},
/* ------^-------
@ -1236,46 +1231,27 @@ const UI = {
* ==============
* FULLSCREEN
* ------v------*/
toggleFullscreen() {
if (document.fullscreenElement || // alternative standard method
document.mozFullScreenElement || // currently working methods
document.webkitFullscreenElement ||
document.msFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
checkFullScreen() {
const fullscreenButton = document.getElementById('noVNC_fullscreen_button');
if (fullscreenButton.classList.contains('noVNC_selected')) {
fullscreenButton
.classList.remove("noVNC_selected");
UI.rfb.scaleViewport = false;
return false;
} else {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (document.body.msRequestFullscreen) {
document.body.msRequestFullscreen();
}
fullscreenButton
.classList.add("noVNC_selected");
UI.rfb.scaleViewport = true;
return true;
}
UI.updateFullscreenButton();
},
updateFullscreenButton() {
if (document.fullscreenElement || // alternative standard method
document.mozFullScreenElement || // currently working methods
document.webkitFullscreenElement ||
document.msFullscreenElement ) {
document.getElementById('noVNC_fullscreen_button')
.classList.add("noVNC_selected");
} else {
document.getElementById('noVNC_fullscreen_button')
.classList.remove("noVNC_selected");
}
toggleFullscreen() {
const sendMessage = (message) => {
window.parent.postMessage(message, '*');
};
const isFullscreen = UI.checkFullScreen();
sendMessage(isFullscreen);
},
/* ------^-------
@ -1287,7 +1263,6 @@ const UI = {
// Apply remote resizing or local scaling
applyResizeMode() {
if (!UI.rfb) return;
UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
},

22
vnc.html
View File

@ -46,10 +46,8 @@
<link rel="apple-touch-icon" sizes="76x76" type="image/png" href="app/images/icons/novnc-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" type="image/png" href="app/images/icons/novnc-152x152.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="app/styles/base.css">
<!-- this is included as a normal file in order to catch script-loading errors as well -->
<script src="app/error-handler.js"></script>
@ -138,9 +136,6 @@
<input type="image" alt="Esc" src="app/images/esc.svg"
id="noVNC_send_esc_button" class="noVNC_button"
title="Send Escape">
<input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
title="Send Ctrl-Alt-Del">
</div>
</div>
</div>
@ -191,11 +186,14 @@
</div>
</div>
</div>
<input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
title="Send Ctrl-Alt-Del">
<!-- Shutdown/Reboot -->
<input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
id="noVNC_power_button" class="noVNC_button"
title="Shutdown/Reboot...">
<div class="noVNC_vcenter">
<div id="noVNC_power" class="noVNC_panel">
<div class="noVNC_heading">
@ -228,7 +226,7 @@
</div>
<!-- Toggle fullscreen -->
<input style="display: none" type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
<input type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
id="noVNC_fullscreen_button" class="noVNC_button noVNC_hidden"
title="Fullscreen">
@ -242,10 +240,10 @@
<li class="noVNC_heading">
<img alt="" src="app/images/settings.svg"> Settings
</li>
<li style="display: none;">
<li>
<label><input id="noVNC_setting_shared" type="checkbox"> Shared Mode</label>
</li>
<li style="display: none;">
<li>
<label><input id="noVNC_setting_view_only" type="checkbox"> View Only</label>
</li>
<li>
@ -262,7 +260,7 @@
<li>
<hr>
</li>
<li style="display: none;">
<li>
<div class="noVNC_expander">Advanced</div>
<div>
<ul>
@ -307,7 +305,7 @@
<hr>
</li>
<li>
<label><input id="noVNC_setting_show_dot" type="checkbox"> Show Dot when No
<label><input id="noVNC_setting_show_dot" type="checkbox" checked> Show Dot when No
Cursor</label>
</li>
<li>
@ -328,7 +326,7 @@
</div>
<!-- Connection Controls -->
<input type="image" alt="Disconnect" src="app/images/disconnect.svg"
<input style="display: none" type="image" alt="Disconnect" src="app/images/disconnect.svg"
id="noVNC_disconnect_button" class="noVNC_button"
title="Disconnect">