Fixes #498 - Add the ability to toggle fullscreen mode

novnc · Jun 25, 2015 · 7d1dc09 · 7d1dc09
1 parent b098afc
commit 7d1dc09
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/images/fullscreen.png b/images/fullscreen.png
diff --git 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
@@ -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" />