Merge pull request #20 from brunopicinin/fullscreen-mode

Add fullscreen mode

Author: capjamesg

index.html

@@ -106,21 +106,28 @@ <h2>JSON Points</h2>
                                         <span>(Esc)</span>
                                     </span>
                                 </div>
-                                <div class="t-divider"></div>
                                 <div class="t-icon" id="clear">
                                     <i class="fa-solid fa-trash"></i>
                                     <span class="ti-caption">
                                         <span>Clear all polygons</span>
                                         <span>(Ctrl/⌘-E)</span>
                                     </span>
                                 </div>
+                                <div class="t-divider"></div>
                                 <div class="t-icon" id="save-image">
                                     <i class="fa-solid fa-floppy-disk"></i>
                                     <span class="ti-caption">
                                         <span>Save image</span>
                                         <span>(Ctrl/⌘-S)</span>
                                     </span>
                                 </div>
+                                <div class="t-icon" id="fullscreen">
+                                    <i class="fa-solid fa-expand"></i>
+                                    <span class="ti-caption">
+                                        <span>Fullscreen</span>
+                                        <span>(F)</span>
+                                    </span>
+                                </div>
                             </div>
                             <div class="coordinates">
                                 <span class="cc-title">Coordinates</span>

script.js

@@ -42,10 +42,15 @@ var showNormalized = false;
 var modeMessage = document.querySelector('#mode');
 // var coords = document.querySelector('#coords');
 
+
+var isFullscreen = false;
+var taskbarAndCanvas = document.querySelector('.right');
+
 var editMode = false;
 var selectedPointIndex = -1;
 var selectedPolygonIndex = -1;
 
+
 function blitCachedCanvas() {
     mainCtx.clearRect(0, 0, canvas.width, canvas.height);
     mainCtx.drawImage(offScreenCanvas, 0, 0);
@@ -595,6 +600,36 @@ document.querySelector('#save-image').addEventListener('click', function(e) {
     saveImage();
 })
 
+function toggleFullscreen() {
+    highlightButtonInteraction('#fullscreen');
+    
+    if (!isFullscreen) {
+        if (taskbarAndCanvas.requestFullscreen) {
+            taskbarAndCanvas.requestFullscreen();
+        } else if (taskbarAndCanvas.webkitRequestFullscreen) { // Safari
+            taskbarAndCanvas.webkitRequestFullscreen();
+        } else if (taskbarAndCanvas.msRequestFullscreen) { // IE/Edge
+            taskbarAndCanvas.msRequestFullscreen();
+        }
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) { // Safari
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) { // IE/Edge
+            document.msExitFullscreen();
+        }
+    }
+}
+
+document.addEventListener('fullscreenchange', function() {
+    isFullscreen = document.fullscreenElement !== null;
+});
+
+document.querySelector('#fullscreen').addEventListener('click', function(e) {
+    toggleFullscreen();
+});
+
 window.addEventListener('keydown', function(e) {
     if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
@@ -626,4 +661,8 @@ window.addEventListener('keydown', function(e) {
             onPathClose();
         }
     }
+
+    if (e.key === 'f' || e.key === 'F') {
+        toggleFullscreen();
+    }
 })

styles.css

@@ -63,13 +63,13 @@ a {
     display: flex;
 }
 .left {
-    flex: 50%;
+    flex: 40%;
     padding: 0 1em;
     border-right: 1px solid #e5e7eb;
     box-sizing: border-box;
 }
 .right {
-    flex: 50%;
+    flex: 60%;
     padding: 0 2em;
     box-sizing: border-box;
 }