Merge pull request #499 from samhed/fullscreen

Add option to toggle fullscreen mode

include/base.css

@@ -59,6 +59,9 @@ html {
 #sendCtrlAltDelButton {
   display: none;
 }
+#fullscreenButton {
+  display: none;
+}
 #noVNC_xvp_buttons {
   display: none;
 }

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);

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);
                 }
             }
         },

vnc.html

@@ -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" />