From 32424e7b0bfd61097861a56a9ffa50ce393913d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P=2E?= <nicolo.paraciani@cnr.it>
Date: Sun, 18 Jan 2026 15:58:47 +0100
Subject: [PATCH] Tabs in content menu

---
 config.js                  |  8 +------
 js/state.js                |  6 +++--
 js/ui.js                   | 48 +++++++++++++++++++++++++++++++++-----
 scenes/salvador/index.html |  1 -
 scenes/salvador/index.js   |  6 ++++-
 scenes/ssgp/index.js       |  4 +++-
 6 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/config.js b/config.js
index 3e2a49a..6f439c8 100644
--- a/config.js
+++ b/config.js
@@ -14,19 +14,13 @@ const theater2Popup = `
     </div>
 `;
 
-const audioBtn1 = `
-    <button type="button" class="text-left btn aton-btn fs-6 mx-2" data-bs-toggle="modal" data-bs-target="#audio1">
-        <i class="bi bi-play-btn me-2"></i> Esempio audio (<em>Che fiero costume</em>)
-    </button>
-`;
-
 export const config = {
     scene : {
         initialExposure: 0.7,
         autoLP: true,
     },
     menu : {
-        audioBtn1
+        //audioBtn1
     },
     markers : [
         {
diff --git a/js/state.js b/js/state.js
index 00f7877..5e95990 100644
--- a/js/state.js
+++ b/js/state.js
@@ -2,12 +2,15 @@
  * @namespace AppState
  */
 let AppState = {
+    // The Leaflet map object
+    map : null,
     // The root scene object
     root: null,
-    nodeIds: [],
     // {id: String, active: Boolean}
     nodes: [],
     mainNodeId: null,
+    currentScene: null,
+    sceneHasAudio: false,
     layersMenuBuilt: false,
     initialRotation: null,
     camera: null,
@@ -15,7 +18,6 @@ let AppState = {
     ambientOcclusion : true,
     shadows : true,
     lightProbe : false,
-    map : null,
     clipping : {
         enabled: false,
         plane : null,
diff --git a/js/ui.js b/js/ui.js
index 39c6f0e..0d88fba 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -7,6 +7,35 @@ import AppState from "./state.js";
 const UI = {};
 
 UI.domParser = new DOMParser;
+
+UI.contentMenuTabs = `
+<!-- Nav tabs -->
+    <ul class="nav nav-pills" id="content-tabs" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
+                <i class="bi bi-music-note-list me-1"></i> Media
+            </button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
+                <i class="bi bi-stack me-1"></i> Layer
+            </button>
+        </li>
+    </ul>
+
+    <!-- Tab panes -->
+    <div class="tab-content">
+        <div class="tab-pane active p-3" id="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
+        <div class="tab-pane p-3" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
+    </div>
+`;
+
+UI.audioExample = `
+    <button type="button" id="audio-example" class="text-left btn aton-btn fs-6 mx-2" data-bs-toggle="modal" data-bs-target="#audio1">
+        <i class="bi bi-play-btn me-2"></i> Esempio audio (<em>Che fiero costume</em>)
+    </button>
+`;
+
 /**
  * 
  * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
@@ -214,15 +243,22 @@ UI.createLightSlider = function(direction, label, range, step) {
  */
 UI.toggleContentMenu = function(triggerId) {
     const btn = document.querySelector(`#${triggerId}`);
-    let audio1 = this.domParser.parseFromString(config.menu.audioBtn1, 'text/html');
-    audio1 = audio1.querySelector('button');
 
     btn.addEventListener('click', () => {
         ATON.UI.setSidePanelRight();
-        ATON.UI.showSidePanel({header: '<i class="bi bi-music-note-list me-1"></i> Contenuti'});
-        ATON.UI.elSidePanel.appendChild(audio1);
-        ATON.UI.elSidePanel.appendChild(this.domParser.parseFromString('<h5 class="ms-3">Layer</h5>', 'text/html').querySelector('h5'));
-        this.buildLayersMenu(AppState.nodes, ATON.UI.elSidePanel);
+        ATON.UI.showSidePanel({header: 'Contenuti'});
+        // Append tabs, then tab panes
+        const tabs = this.domParser.parseFromString(UI.contentMenuTabs, 'text/html');
+        ATON.UI.elSidePanel.appendChild(tabs.querySelector('#content-tabs'));
+        ATON.UI.elSidePanel.appendChild(tabs.querySelector('.tab-content'));
+        this.buildLayersMenu(AppState.nodes, ATON.UI.elSidePanel.querySelector('#layer'));
+
+        // This is just an example, at the moment... to be revised with config -> markers (scenes) -> menu
+        if (AppState.sceneHasAudio) {
+            let btn = this.domParser.parseFromString(UI.audioExample, 'text/html');
+            const audio = btn.querySelector('#audio-example');
+            ATON.UI.elSidePanel.querySelector('#media').appendChild(audio);
+        }
     });
 }
 /**
diff --git a/scenes/salvador/index.html b/scenes/salvador/index.html
index a279887..47611c8 100644
--- a/scenes/salvador/index.html
+++ b/scenes/salvador/index.html
@@ -79,7 +79,6 @@
         </a>
     </div>
 
-
     <!-- TODO CSS-only popover -->
     <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
 
diff --git a/scenes/salvador/index.js b/scenes/salvador/index.js
index 5bb579b..1d1095f 100644
--- a/scenes/salvador/index.js
+++ b/scenes/salvador/index.js
@@ -1,5 +1,9 @@
 import Scene from "../../js/scene.js";
 import { config } from "../../config.js";
+import AppState from "../../js/state.js";
+
+AppState.currentScene = 'salvador';
+AppState.sceneHasAudio = true;
 
 Scene.openScene(config.markers.find(m => m.id === 'salvador'));
-Scene.UI.pauseAudio('[data-bs-dismiss="modal"]');
\ No newline at end of file
+Scene.UI.pauseAudio('[data-bs-dismiss="modal"]');
diff --git a/scenes/ssgp/index.js b/scenes/ssgp/index.js
index 01809df..e270aba 100644
--- a/scenes/ssgp/index.js
+++ b/scenes/ssgp/index.js
@@ -1,4 +1,6 @@
 import Scene from "../../js/scene.js";
 import { config } from "../../config.js";
+import AppState from "../../js/state.js";
 
-Scene.openScene(config.markers.find(m => m.id === 'ssgp'));
\ No newline at end of file
+AppState.currentScene = 'ssgp';
+Scene.openScene(config.markers.find(m => m.id === 'ssgp'));