Add toggle-fullscreen control with temp icons.

src/fontra/views/editor/editor.css

@@ -408,6 +408,15 @@ body {
   transform: scale(1.1, 1.1);
 }
 
+.tool-icon--hidden {
+  display: none;
+}
+
+.tool-icon--fullscreen-enter .icon,
+.tool-icon--fullscreen-exit .icon {
+  stroke-width: 1.7px;
+}
+
 .tool-button:hover {
   background-color: var(--editor-tool-button-hover-background-color);
 }

src/fontra/views/editor/editor.html

@@ -50,6 +50,16 @@
                 <div class="tool-button" data-tool="zoom-fit-selection">
                   <inline-svg class="tool-icon" src="/images/bullseye.svg"></inline-svg>
                 </div>
+                <div class="tool-button" data-tool="toggle-fullscreen">
+                  <inline-svg
+                    class="tool-icon tool-icon--fullscreen-enter tool-icon--hidden"
+                    src="/tabler-icons/maximize.svg"
+                  ></inline-svg>
+                  <inline-svg
+                    class="tool-icon tool-icon--fullscreen-exit tool-icon--hidden"
+                    src="/tabler-icons/minimize.svg"
+                  ></inline-svg>
+                </div>
               </div>
             </div>
           </div>

src/fontra/views/editor/editor.js

@@ -399,10 +399,19 @@ export class EditorController {
           case "zoom-fit-selection":
             this.zoomFit();
             break;
+          case "toggle-fullscreen":
+            this.toggleFullscreen();
+            break;
         }
         this.canvasController.canvas.focus();
       };
     }
+
+    // init fullscreen button
+    this.updateFullscreenButton();
+    document.addEventListener("fullscreenchange", () => {
+      this.updateFullscreenButton();
+    });
   }
 
   addEditTool(tool) {
@@ -1574,6 +1583,42 @@ export class EditorController {
     this.sceneController.autoViewBox = false;
   }
 
+  toggleFullscreen() {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      const element = document.documentElement;
+      element.requestFullscreen();
+    }
+  }
+
+  updateFullscreenButton() {
+    // hide button in case fullscreen is not enabled on device
+    const fullscreenButtonEl = document.querySelector(
+      ".tool-button[data-tool='toggle-fullscreen']"
+    );
+    if (!document.fullscreenEnabled) {
+      fullscreenButtonEl.style.display = "none";
+      return;
+    }
+    // fullscreen is enabled, show the right icon depending on the fullscreen state
+    const fullscreenEnterIconEl = fullscreenButtonEl.querySelector(
+      ".tool-icon--fullscreen-enter"
+    );
+    const fullscreenExitIconEl = fullscreenButtonEl.querySelector(
+      ".tool-icon--fullscreen-exit"
+    );
+    if (document.fullscreenElement) {
+      // fullscreen state is on, display exit-fullscreen button icon
+      fullscreenEnterIconEl.classList.add("tool-icon--hidden");
+      fullscreenExitIconEl.classList.remove("tool-icon--hidden");
+    } else {
+      // fullscreen state is off, display enter-fullscreen button icon
+      fullscreenEnterIconEl.classList.remove("tool-icon--hidden");
+      fullscreenExitIconEl.classList.add("tool-icon--hidden");
+    }
+  }
+
   animateToViewBox(viewBox) {
     const startViewBox = this.sceneSettings.viewBox;
     const deltaViewBox = subItemwise(viewBox, startViewBox);