diff options
author | Samuel <samuel@cendio.se> | 2015-07-01 13:16:53 +0200 |
---|---|---|
committer | Samuel <samuel@cendio.se> | 2015-07-01 13:16:53 +0200 |
commit | 8f3c0f6b9b5e5c23a7dc7e90bd22901017ab4fc7 (patch) | |
tree | 39d6fc2e3b7a05284235b34cd2d1495d2fe8d6a8 | |
parent | b098afc234528af8d3e6d708226d8839d8132d20 (diff) | |
parent | a6357e827611aa5b0f2a6082372ab4e06af8cfe9 (diff) | |
download | novnc-8f3c0f6b9b5e5c23a7dc7e90bd22901017ab4fc7.tar.gz |
Merge pull request #499 from samhed/fullscreen
Add option to toggle fullscreen mode
-rw-r--r-- | images/fullscreen.png | bin | 0 -> 851 bytes | |||
-rw-r--r-- | include/base.css | 3 | ||||
-rw-r--r-- | include/display.js | 11 | ||||
-rw-r--r-- | include/ui.js | 89 | ||||
-rw-r--r-- | vnc.html | 3 |
5 files changed, 93 insertions, 13 deletions
diff --git a/images/fullscreen.png b/images/fullscreen.png Binary files differnew file mode 100644 index 0000000..f4fa0ce --- /dev/null +++ b/images/fullscreen.png diff --git a/include/base.css b/include/base.css index f69e64b..2769357 100644 --- a/include/base.css +++ b/include/base.css @@ -59,6 +59,9 @@ html { #sendCtrlAltDelButton { display: none; } +#fullscreenButton { + display: none; +} #noVNC_xvp_buttons { display: none; } diff --git a/include/display.js b/include/display.js index 9a8e455..8994856 100644 --- a/include/display.js +++ b/include/display.js @@ -229,13 +229,14 @@ var Display; saveImg = this._drawCtx.getImageData(0, 0, img_width, img_height); } - if (canvas.width !== width) { canvas.width = width; } - if (canvas.height !== height) { canvas.height = height; } - - if (this._viewport) { - canvas.style.height = height + 'px'; + if (canvas.width !== width) { + canvas.width = width; canvas.style.width = width + 'px'; } + if (canvas.height !== height) { + canvas.height = height; + canvas.style.height = height + 'px'; + } if (saveImg) { this._drawCtx.putImageData(saveImg, 0, 0); diff --git a/include/ui.js b/include/ui.js index 3d3c41e..2e9d731 100644 --- a/include/ui.js +++ b/include/ui.js @@ -38,6 +38,7 @@ var UI; ctrlOn: false, altOn: false, isTouchDevice: false, + rememberedClipSetting: null, // Setup rfb object, load settings from browser storage, then call // UI.init to setup the UI/menus @@ -131,6 +132,23 @@ var UI; UI.setBarPosition(); } ); + var isSafari = (navigator.userAgent.indexOf('Safari') != -1 && + navigator.userAgent.indexOf('Chrome') == -1); + + // Only show the button if fullscreen is properly supported + // * Safari doesn't support alphanumerical input while in fullscreen + if (!isSafari && + (document.documentElement.requestFullscreen || + document.documentElement.mozRequestFullScreen || + document.documentElement.webkitRequestFullscreen || + document.body.msRequestFullscreen)) { + $D('fullscreenButton').style.display = "inline"; + 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 +219,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; @@ -217,10 +236,7 @@ var UI; $D("noVNC_connect_button").onclick = UI.connect; - $D("noVNC_resize").onchange = function () { - var connected = UI.rfb && UI.rfb_state === 'normal'; - UI.enableDisableViewClip(connected); - }; + $D("noVNC_resize").onchange = UI.enableDisableViewClip; }, onresize: function (callback) { @@ -437,6 +453,47 @@ 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.enableDisableViewClip(); + 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 @@ -664,7 +721,7 @@ var UI; $D('noVNC_cursor').disabled = true; } - UI.enableDisableViewClip(connected); + UI.enableDisableViewClip(); $D('noVNC_resize').disabled = connected; $D('noVNC_shared').disabled = connected; $D('noVNC_view_only').disabled = connected; @@ -821,6 +878,7 @@ var UI; if (UI.rfb) { display = UI.rfb.get_display(); } else { + UI.forceSetting('clip', clip); return; } @@ -867,15 +925,30 @@ var UI; }, // Handle special cases where clipping is forced on/off or locked - enableDisableViewClip: function (connected) { + enableDisableViewClip: function () { var resizeElem = $D('noVNC_resize'); + var connected = UI.rfb && UI.rfb_state === 'normal'; + if (resizeElem.value === 'downscale' || resizeElem.value === 'scale') { - UI.forceSetting('clip', false); + // Disable clipping if we are scaling + UI.setViewClip(false); $D('noVNC_clip').disabled = true; + } else if (document.msFullscreenElement) { + // The browser is IE and we are in fullscreen mode. + // - We need to force clipping while in fullscreen since + // scrollbars doesn't work. + UI.togglePopupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen"); + UI.rememberedClipSetting = UI.getSetting('clip'); + UI.setViewClip(true); + $D('noVNC_clip').disabled = true; + } else if (document.body.msRequestFullscreen && UI.rememberedClip !== null) { + // Restore view clip to what it was before fullscreen on IE + UI.setViewClip(UI.rememberedClipSetting); + $D('noVNC_clip').disabled = connected || UI.isTouchDevice; } else { $D('noVNC_clip').disabled = connected || UI.isTouchDevice; if (UI.isTouchDevice) { - UI.forceSetting('clip', true); + UI.setViewClip(true); } } }, @@ -99,6 +99,9 @@ <input type="image" alt="Clipboard" src="images/clipboard.png" id="clipboardButton" class="noVNC_status_button" 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" id="settingsButton" class="noVNC_status_button" title="Settings" /> |