Add fullscreen option

js/controllers/toolbar_controller.js

@@ -9,7 +9,7 @@ const panelHeader = html`
 `;
 
 export default class extends Controller {
-    static targets = ['settings'];
+    static targets = ['settings', 'fullscreen'];
 
     connect() {
         console.log('#toolbar controller connected');
@@ -23,6 +23,24 @@ export default class extends Controller {
         ATON.UI.showSidePanel({header: panelHeader});
         this.#buildSettingsPanel(ATON.UI.elSidePanel);
     }
+    toggleFullscreen() {
+        /**
+         * @type {HTMLAnchorElement}
+         */
+        const target = this.fullscreenTarget;
+        const icon = target.querySelector('i');
+        if (!document.fullscreenElement) {
+            document.body.requestFullscreen();
+            icon.classList.remove('bi-fullscreen');
+            icon.classList.add('bi-fullscreen-exit');
+            target.title = 'Esci da schermo intero';
+        } else {
+            document.exitFullscreen();
+            icon.classList.remove('bi-fullscreen-exit');
+            icon.classList.add('bi-fullscreen');
+            target.title = 'Attiva schermo intero';
+        }
+    }
     /**
      * Clone a <template> by id
      * @param {String} id

scenes/ssgp/index.html

@@ -73,6 +73,10 @@
                 data-clipper-target="trigger" data-action="clipper#toggleClipper">
                 <i class="bi bi-scissors"></i>
             </a>
+            <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva schermo intero" data-toolbar-target="fullscreen"
+                data-action="toolbar#toggleFullscreen">
+                <i class="bi bi-fullscreen"></i>
+            </a>
         </div>
         <div class="d-none w-25
             position-absolute