diff --git a/images/fullscreen.png b/images/fullscreen.png new file mode 100644 index 00000000..f4fa0ce8 Binary files /dev/null and b/images/fullscreen.png differ diff --git a/include/ui.js b/include/ui.js index 3d3c41e3..0d9ad82c 100644 --- a/include/ui.js +++ b/include/ui.js @@ -131,6 +131,19 @@ var UI; 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, 'beforeunload', function () { @@ -201,6 +214,7 @@ var UI; $D("noVNC_popup_status").onclick = UI.togglePopupStatus; $D("xvpButton").onclick = UI.toggleXvpPanel; $D("clipboardButton").onclick = UI.toggleClipboardPanel; + $D("fullscreenButton").onclick = UI.toggleFullscreen; $D("settingsButton").onclick = UI.toggleSettingsPanel; $D("connectButton").onclick = UI.toggleConnectPanel; $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 toggleConnectPanel: function() { // Close the description panel diff --git a/vnc.html b/vnc.html index 6acd7929..1a293d09 100644 --- a/vnc.html +++ b/vnc.html @@ -99,6 +99,9 @@ +