Tabs in content menu

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 : [
         {

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,

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.showSidePanel({header: 'Contenuti'});
-        ATON.UI.elSidePanel.appendChild(audio1);
+        // Append tabs, then tab panes
-        ATON.UI.elSidePanel.appendChild(this.domParser.parseFromString('<h5 class="ms-3">Layer</h5>', 'text/html').querySelector('h5'));
+        const tabs = this.domParser.parseFromString(UI.contentMenuTabs, 'text/html');
-        this.buildLayersMenu(AppState.nodes, ATON.UI.elSidePanel);
+        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);
+        }
     });
 }
 /**

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>
 

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"]');
+Scene.UI.pauseAudio('[data-bs-dismiss="modal"]');

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'));
+AppState.currentScene = 'ssgp';
+Scene.openScene(config.markers.find(m => m.id === 'ssgp'));