From 224763bbdf161653205608e284e1225d1bf8897d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P=2E?= Date: Tue, 14 Oct 2025 08:21:52 +0200 Subject: [PATCH] Draft content menu... --- config.js | 9 +++++++++ index.html | 20 ++++++++++++++------ js/scene.js | 29 +++++++++++++++++++++++++---- 3 files changed, 48 insertions(+), 10 deletions(-) diff --git a/config.js b/config.js index 6f57918..42dd961 100644 --- a/config.js +++ b/config.js @@ -5,7 +5,16 @@ const theater1Popup = ` `; +const audioBtn1 = ` + +`; + export const config = { + menu : { + audioBtn1 + }, markers : [ { id : "salvador", diff --git a/index.html b/index.html index 4735d92..6188f06 100644 --- a/index.html +++ b/index.html @@ -68,7 +68,7 @@
-
+
@@ -78,9 +78,9 @@ - + + +
@@ -96,11 +96,19 @@
-

Che fiero costume

+

Che fiero costume

- +

Informazioni

+

+ L'aria "Che fiero costume" bla bla... +

+

+ Un po' di elucubrazioni sull'opera lirica nel barocco ecc... +

+

Ascolta

+
diff --git a/js/scene.js b/js/scene.js index e5a1255..c1b5065 100644 --- a/js/scene.js +++ b/js/scene.js @@ -1,6 +1,7 @@ // Global ATON import { AppState, getSceneStatus, setSceneStatus } from "./state.js"; +import { config } from "../config.js"; const material = { color: "#fff", @@ -12,6 +13,8 @@ const Scene = {}; Scene.UI = {}; +Scene.UI.domParser = new DOMParser; + /** * @todo Experimental... * @param {THREE.Object3D} object - A THREE Object3D instance @@ -96,10 +99,27 @@ Scene.createLightSlider = function(direction, label, range, step) { } /** - * @param {String} id - The settings button id + * Right-side main menu panel + * @param {String} triggerId - The menu button id */ -Scene.toggleSettingsPanel = function(id) { - const btn = document.querySelector(`#${id}`); +Scene.toggleContentMenu = function(triggerId) { + const btn = document.querySelector(`#${triggerId}`); + const audio1 = this.UI.domParser.parseFromString(config.menu.audioBtn1, 'text/html') + .querySelector('button'); + + btn.addEventListener('click', () => { + ATON.UI.setSidePanelRight(); + ATON.UI.showSidePanel({header: ' Contenuti'}); + ATON.UI.elSidePanel.appendChild(audio1); + }); +} + +/** + * A left side settings panel + * @param {String} triggerId - The settings button id + */ +Scene.toggleSettingsPanel = function(triggerId) { + const btn = document.querySelector(`#${triggerId}`); const lightHeading = document.createElement('h2'); lightHeading.className = 'fs-5 ms-2 mb-3 mt-3'; lightHeading.innerHTML = ' Direzione luce'; @@ -108,6 +128,7 @@ Scene.toggleSettingsPanel = function(id) { envHeading.innerHTML = ' Ambiente'; btn.addEventListener('click', () => { + ATON.UI.setSidePanelLeft(); ATON.UI.showSidePanel({header: ' Impostazioni'}); ATON.UI.elSidePanel.appendChild(lightHeading); @@ -177,7 +198,6 @@ Scene.init = function() { ATON.realize(); ATON.UI.addBasicEvents(); ATON.UI.init(); - ATON.UI.setSidePanelLeft(); // All assets for this app are stored here ATON.setPathCollection('./assets/'); // Light direction should be dynamic / user-defined @@ -187,6 +207,7 @@ Scene.init = function() { ATON.setExposure(0.8); // Open settings side panel when clicking on settings btn Scene.toggleSettingsPanel('settings'); + Scene.toggleContentMenu('menu'); } /** * @param {String} id - The back-to-map button id