diff --git a/config.js b/config.js
index 3e2a49a..6f439c8 100644
--- a/config.js
+++ b/config.js
@@ -14,19 +14,13 @@ const theater2Popup = `
`;
-const audioBtn1 = `
-
-`;
-
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 = `
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+`;
+
+UI.audioExample = `
+
+`;
+
/**
*
* @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: ' Contenuti'});
- ATON.UI.elSidePanel.appendChild(audio1);
- ATON.UI.elSidePanel.appendChild(this.domParser.parseFromString('Layer
', '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 @@
-
Disabilitare le ombre può migliorare le prestazioni
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'));