From 7d1dc09ad0010924c6940832225e5eb2dc803f4f Mon Sep 17 00:00:00 2001 From: samhed Date: Thu, 18 Jun 2015 10:45:59 +0200 Subject: [PATCH 1/3] Fixes #498 - Add the ability to toggle fullscreen mode --- images/fullscreen.png | Bin 0 -> 851 bytes include/ui.js | 54 ++++++++++++++++++++++++++++++++++++++++++ vnc.html | 3 +++ 3 files changed, 57 insertions(+) create mode 100644 images/fullscreen.png diff --git a/images/fullscreen.png b/images/fullscreen.png new file mode 100644 index 0000000000000000000000000000000000000000..f4fa0ce8321de23929618a8d82ec0e42c094bafc GIT binary patch literal 851 zcmV-Z1FZasP)P000>X1^@s6#OZ}&00006VoOIv0RI60 z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-va^(3nu(M(YOEr0^mtR zK~zY`-Bv+s;y@IRx`*0@QVPXFFCKc8$+u~>Y$TrSyqG#dTNQ4bJ8V_B9{+$SK*ata|d z_Hu^3hQr~oH=E7W&xp)sGj%u|_Et8$s*dA0jYi{w=lQUY?Yo2L`EaArxNscD@p5vM zQfiu}NeChCjb^j?a~-L7yxPBk5JF7TG%2N&!x&>pk`fTY%yc?6m^Vy_=lRVKJlJFc z?A&xZH6Vl;Ns&A=C`x)X8a;YExk{O$k%5NkG@mu~yfX!NKkN}5v2 zI1g81E=f|tEo9ra4Iw=76M+z(*tTuE1tdvIFfV<>GF@`}7|ghHQ56<>}p_Yd&@ zhXp-|WrMKKuzF~*fjfK@hf8Rc)~>HVk7T%W}$3K$hi{VHgu;tEy^C5QJ^7NSNpOD4XPRxs7Z# zd!0-s(`=0p^1N6qUi?04u~@tiLY~vTG|`Fws00I=8X zcJJKPwBPUd%H?u$T`wt@%gKJf-*cbqcDr`~fW3S^zt!nkoc>D>vAZXilU$7{O2ZO;t_j0ZzBO&B@KA%6i*Mb(y`F#H5ehBaWNU(Scg0S-^SuF^{ dj`v;}eggqm-~P^IymkNp002ovPDHLkV1kszf;IpE literal 0 HcmV?d00001 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 @@ + From 6e296bfa8acbc19d8fd0d5ba5836f902e48ce09f Mon Sep 17 00:00:00 2001 From: samhed Date: Thu, 25 Jun 2015 14:58:57 +0200 Subject: [PATCH 2/3] Adapt display to be able to handle a changing clipping-setting while connected --- include/display.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/include/display.js b/include/display.js index 9a8e4559..8994856b 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); From a6357e827611aa5b0f2a6082372ab4e06af8cfe9 Mon Sep 17 00:00:00 2001 From: samhed Date: Thu, 25 Jun 2015 22:28:04 +0200 Subject: [PATCH 3/3] * Hide the fullscreen toggle button on Safari since alphanumerical keyboard input doesn't work in fullscreen. * Force clipping mode in Internet Explorer while in fullscreen since scrollbars doesn't work in fullscreen. --- include/base.css | 3 +++ include/ui.js | 51 +++++++++++++++++++++++++++++++++--------------- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/include/base.css b/include/base.css index f69e64b7..2769357e 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/ui.js b/include/ui.js index 0d9ad82c..2e9d731a 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,13 +132,17 @@ 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 { + 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); @@ -231,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) { @@ -456,7 +458,7 @@ var UI; if (document.fullscreenElement || // alternative standard method document.mozFullScreenElement || // currently working methods document.webkitFullscreenElement || - document.msFullscreenElement ) { + document.msFullscreenElement) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { @@ -477,6 +479,7 @@ var UI; document.body.msRequestFullscreen(); } } + UI.enableDisableViewClip(); UI.updateFullscreenButton(); }, @@ -718,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; @@ -875,6 +878,7 @@ var UI; if (UI.rfb) { display = UI.rfb.get_display(); } else { + UI.forceSetting('clip', clip); return; } @@ -921,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); } } },