Added fullscreen button for terminal

webssh/static/icons/arrows-fullscreen.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/>
+</svg>

webssh/static/icons/fullscreen-exit.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen-exit" viewBox="0 0 16 16">
+  <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z"/>
+</svg>

webssh/static/js/main.js

@@ -799,6 +799,31 @@ jQuery(function($){
     connect();
   });
 
+  $('#btn-fullscreen').click(fullscreen_handler);
+  window.document.addEventListener('fullscreenchange', fullscreen_handler, false);
+  window.document.addEventListener('mozfullscreenchange', fullscreen_handler, false);
+  window.document.addEventListener('webkitfullscreenchange', fullscreen_handler, false);
+  window.document.addEventListener('msfullscreenChange', fullscreen_handler, false);
+  function fullscreen_handler(event) {
+    var doc = window.document;
+    var docEl = doc.documentElement;
+    var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
+    var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
+    if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
+      if (event.currentTarget.id === 'btn-fullscreen') {
+        requestFullScreen.call(docEl);
+      }
+      $('#fullscreen-enter').show();
+      $('#fullscreen-exit').hide();
+    } else {
+      if (event.currentTarget.id === 'btn-fullscreen') {
+        cancelFullScreen.call(doc);
+      }
+      $('#fullscreen-enter').hide();
+      $('#fullscreen-exit').show();
+    }
+    event.preventDefault();
+  }
 
   function cross_origin_connect(event)
   {

webssh/templates/index.html

@@ -24,6 +24,18 @@
       .btn-danger {
         margin-left: 5px;
       }
+
+      #btn-fullscreen {
+        bottom: 32px;
+        font-size: 0;
+        margin: 0;
+        opacity: 0.5;
+        padding: 6px;
+        position: fixed;
+        right: 8px;
+        z-index: 256;
+      }
+
       {% if font.family %}
       @font-face {
         font-family: '{{ font.family }}';
@@ -91,6 +103,11 @@
       <div id="terminal"></div>
     </div>
 
+    <button id="btn-fullscreen" type="button" class="btn btn-light">
+      <img id="fullscreen-enter" src="static/icons/arrows-fullscreen.svg" width="18px" height="18px">
+      <img id="fullscreen-exit" src="static/icons/fullscreen-exit.svg" width="18px" height="18px" style="display: none;">
+    </button>
+
     <script src="static/js/jquery.min.js"></script>
     <script src="static/js/popper.min.js"></script>
     <script src="static/js/bootstrap.min.js"></script>