openstack/deb-novnc
Code Issues Proposed changes

Fixes #498 - Add the ability to toggle fullscreen mode

Browse Source
This commit is contained in:
samhed 2015-06-18 10:45:59 +02:00
parent 440e882ac6
commit 5fdefbf3b0
3 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/fullscreen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 B

54
include/ui.js
View File

@ -131,6 +131,19 @@ var UI;
UI.setBarPosition(); UI.setBarPosition();
} ); } );
// Hide the button if fullscreen isn't supported
if (!document.documentElement.requestFullscreen &&
!document.documentElement.mozRequestFullScreen &&
!document.documentElement.webkitRequestFullscreen &&
!document.body.msRequestFullscreen) {
$D('fullscreenButton').style.display = "none";
} else {
Util.addEvent(window, 'fullscreenchange', UI.updateFullscreenButton);
Util.addEvent(window, 'mozfullscreenchange', UI.updateFullscreenButton);
Util.addEvent(window, 'webkitfullscreenchange', UI.updateFullscreenButton);
Util.addEvent(window, 'msfullscreenchange', UI.updateFullscreenButton);
}
Util.addEvent(window, 'load', UI.keyboardinputReset); Util.addEvent(window, 'load', UI.keyboardinputReset);
Util.addEvent(window, 'beforeunload', function () { Util.addEvent(window, 'beforeunload', function () {
@ -201,6 +214,7 @@ var UI;
$D("noVNC_popup_status").onclick = UI.togglePopupStatus; $D("noVNC_popup_status").onclick = UI.togglePopupStatus;
$D("xvpButton").onclick = UI.toggleXvpPanel; $D("xvpButton").onclick = UI.toggleXvpPanel;
$D("clipboardButton").onclick = UI.toggleClipboardPanel; $D("clipboardButton").onclick = UI.toggleClipboardPanel;
$D("fullscreenButton").onclick = UI.toggleFullscreen;
$D("settingsButton").onclick = UI.toggleSettingsPanel; $D("settingsButton").onclick = UI.toggleSettingsPanel;
$D("connectButton").onclick = UI.toggleConnectPanel; $D("connectButton").onclick = UI.toggleConnectPanel;
$D("disconnectButton").onclick = UI.disconnect; $D("disconnectButton").onclick = UI.disconnect;
@ -437,6 +451,46 @@ var UI;
} }
}, },
// Toggle fullscreen mode
toggleFullscreen: function() {
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();
}
} 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();
}
}
UI.updateFullscreenButton();
},
updateFullscreenButton: function() {
if (document.fullscreenElement || // alternative standard method
document.mozFullScreenElement || // currently working methods
document.webkitFullscreenElement ||
document.msFullscreenElement ) {
$D('fullscreenButton').className = "noVNC_status_button_selected";
} else {
$D('fullscreenButton').className = "noVNC_status_button";
}
},
// Show the connection settings panel/menu // Show the connection settings panel/menu
toggleConnectPanel: function() { toggleConnectPanel: function() {
// Close the description panel // Close the description panel

3
vnc.html
View File

@ -99,6 +99,9 @@
<input type="image" alt="Clipboard" src="images/clipboard.png" <input type="image" alt="Clipboard" src="images/clipboard.png"
id="clipboardButton" class="noVNC_status_button" id="clipboardButton" class="noVNC_status_button"
title="Clipboard" /> title="Clipboard" />
<input type="image" alt="Fullscreen" src="images/fullscreen.png"
id="fullscreenButton" class="noVNC_status_button"
title="Fullscreen" />
<input type="image" alt="Settings" src="images/settings.png" <input type="image" alt="Settings" src="images/settings.png"
id="settingsButton" class="noVNC_status_button" id="settingsButton" class="noVNC_status_button"
title="Settings" /> title="Settings" />