From 4f64efaabdae18f3ce581408a42800b1a30a075c Mon Sep 17 00:00:00 2001
From: Pawel Raczyk <pawel.raczyk@vectorsynergy.com>
Date: Tue, 14 May 2019 11:00:05 +0200
Subject: [PATCH] enable fullscreen when vnc is in iframe

---
 app/styles/base.css | 10 ++++----
 app/ui.js           | 59 +++++++++++++--------------------------------
 vnc.html            | 22 ++++++++---------
 3 files changed, 32 insertions(+), 59 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 57f1a4d2..232d2242 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -580,7 +580,11 @@ select:active {
 }
 
 /* Extra manual keys */
-:root:not(.noVNC_connected) #noVNC_extra_keys, :root:not(.noVNC_connected) #noVNC_special_keys {
+:root:not(.noVNC_connected) #noVNC_extra_keys,
+:root:not(.noVNC_connected) #noVNC_special_keys,
+:root:not(.noVNC_connected) #noVNC_clipboard_button,
+:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button,
+:root:not(.noVNC_connected) #noVNC_clipboard_button {
   display: none;
 }
 
@@ -604,10 +608,6 @@ select:active {
   width: 100%;
 }
 
-/* Clipboard */
-:root:not(.noVNC_connected) #noVNC_clipboard_button {
-  display: none;
-}
 #noVNC_clipboard {
   /* Full screen, minus padding and left and right margins */
   max-width: calc(100vw - 2*15px - 75px - 25px);
diff --git a/app/ui.js b/app/ui.js
index f6631173..d3426be8 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -385,11 +385,6 @@ const UI = {
     addFullscreenHandlers() {
         document.getElementById("noVNC_fullscreen_button")
             .addEventListener('click', UI.toggleFullscreen);
-
-        window.addEventListener('fullscreenchange', UI.updateFullscreenButton);
-        window.addEventListener('mozfullscreenchange', UI.updateFullscreenButton);
-        window.addEventListener('webkitfullscreenchange', UI.updateFullscreenButton);
-        window.addEventListener('msfullscreenchange', UI.updateFullscreenButton);
     },
 
 /* ------^-------
@@ -1236,46 +1231,27 @@ const UI = {
  * ==============
  *   FULLSCREEN
  * ------v------*/
-
-    toggleFullscreen() {
-        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();
-            }
+    checkFullScreen() {
+        const fullscreenButton = document.getElementById('noVNC_fullscreen_button');
+        if (fullscreenButton.classList.contains('noVNC_selected')) {
+            fullscreenButton
+                .classList.remove("noVNC_selected");
+            UI.rfb.scaleViewport = false;
+            return false;
         } 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();
-            }
+            fullscreenButton
+                .classList.add("noVNC_selected");
+            UI.rfb.scaleViewport = true;
+            return true;
         }
-        UI.updateFullscreenButton();
     },
 
-    updateFullscreenButton() {
-        if (document.fullscreenElement || // alternative standard method
-            document.mozFullScreenElement || // currently working methods
-            document.webkitFullscreenElement ||
-            document.msFullscreenElement ) {
-            document.getElementById('noVNC_fullscreen_button')
-                .classList.add("noVNC_selected");
-        } else {
-            document.getElementById('noVNC_fullscreen_button')
-                .classList.remove("noVNC_selected");
-        }
+    toggleFullscreen() {
+        const sendMessage = (message) => {
+            window.parent.postMessage(message, '*');
+        };
+        const isFullscreen = UI.checkFullScreen();
+        sendMessage(isFullscreen);
     },
 
 /* ------^-------
@@ -1287,7 +1263,6 @@ const UI = {
     // Apply remote resizing or local scaling
     applyResizeMode() {
         if (!UI.rfb) return;
-
         UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
         UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
     },
diff --git a/vnc.html b/vnc.html
index 36c386be..e355c3ac 100644
--- a/vnc.html
+++ b/vnc.html
@@ -46,10 +46,8 @@
     <link rel="apple-touch-icon" sizes="76x76" type="image/png" href="app/images/icons/novnc-76x76.png">
     <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-120x120.png">
     <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="app/images/icons/novnc-152x152.png">
-
     <!-- Stylesheets -->
     <link rel="stylesheet" href="app/styles/base.css">
-
     <!-- this is included as a normal file in order to catch script-loading errors as well -->
     <script src="app/error-handler.js"></script>
 
@@ -138,9 +136,6 @@
                         <input type="image" alt="Esc" src="app/images/esc.svg"
                                id="noVNC_send_esc_button" class="noVNC_button"
                                title="Send Escape">
-                        <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
-                               id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
-                               title="Send Ctrl-Alt-Del">
                     </div>
                 </div>
             </div>
@@ -191,11 +186,14 @@
                     </div>
                 </div>
             </div>
-
+            <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
+                   id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
+                   title="Send Ctrl-Alt-Del">
             <!-- Shutdown/Reboot -->
             <input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
                    id="noVNC_power_button" class="noVNC_button"
                    title="Shutdown/Reboot...">
+
             <div class="noVNC_vcenter">
                 <div id="noVNC_power" class="noVNC_panel">
                     <div class="noVNC_heading">
@@ -228,7 +226,7 @@
             </div>
 
             <!-- Toggle fullscreen -->
-            <input style="display: none"  type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
+            <input type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
                    id="noVNC_fullscreen_button" class="noVNC_button noVNC_hidden"
                    title="Fullscreen">
 
@@ -242,10 +240,10 @@
                         <li class="noVNC_heading">
                             <img alt="" src="app/images/settings.svg"> Settings
                         </li>
-                        <li style="display: none;">
+                        <li>
                             <label><input id="noVNC_setting_shared" type="checkbox"> Shared Mode</label>
                         </li>
-                        <li style="display: none;">
+                        <li>
                             <label><input id="noVNC_setting_view_only" type="checkbox"> View Only</label>
                         </li>
                         <li>
@@ -262,7 +260,7 @@
                         <li>
                             <hr>
                         </li>
-                        <li style="display: none;">
+                        <li>
                             <div class="noVNC_expander">Advanced</div>
                             <div>
                                 <ul>
@@ -307,7 +305,7 @@
                                         <hr>
                                     </li>
                                     <li>
-                                        <label><input id="noVNC_setting_show_dot" type="checkbox"> Show Dot when No
+                                        <label><input id="noVNC_setting_show_dot" type="checkbox" checked> Show Dot when No
                                             Cursor</label>
                                     </li>
                                     <li>
@@ -328,7 +326,7 @@
             </div>
 
             <!-- Connection Controls -->
-            <input type="image" alt="Disconnect" src="app/images/disconnect.svg"
+            <input style="display: none" type="image" alt="Disconnect" src="app/images/disconnect.svg"
                    id="noVNC_disconnect_button" class="noVNC_button"
                    title="Disconnect">