nicolo/scaenae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draft content menu...

Browse Source
This commit is contained in:
Nicolò P. 2025-10-14 08:21:52 +02:00
parent 7b53e09524
commit 224763bbdf
3 changed files with 48 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
config.js
View File

@ -5,7 +5,16 @@ const theater1Popup = `
</div> </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 = { export const config = {
menu : {
audioBtn1
},
markers : [ markers : [
{ {
id : "salvador", id : "salvador",

20
index.html
View File

@ -68,7 +68,7 @@
<body data-bs-theme="light"> <body data-bs-theme="light">
<div class="map" id="map" style="height: 100%;"></div> <div class="map" id="map" style="height: 100%;"></div>
<div class="d-none" id="scene"> <div class="d-none" id="scene">
<div id="toolbar" class="aton-toolbar-top"> <div id="toolbar" class="aton-toolbar-top w-100">
<a class="btn aton-btn fs-5" id="back" title="Torna alla mappa"> <a class="btn aton-btn fs-5" id="back" title="Torna alla mappa">
<i class="bi bi-map-fill"></i> <i class="bi bi-map-fill"></i>
</a> </a>
@ -78,9 +78,9 @@
<a class="btn aton-btn fs-5" id="clipper" title="Clipper"> <a class="btn aton-btn fs-5" id="clipper" title="Clipper">
<i class="bi bi-scissors"></i> <i class="bi bi-scissors"></i>
</a> </a>
<button type="button" class="btn aton-btn fs-6 px-2" data-bs-toggle="modal" data-bs-target="#audio1"> <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
Esempio modale audio <i class="bi bi-list"></i>
</button> </a>
</div> </div>
<!-- TODO CSS-only popover --> <!-- TODO CSS-only popover -->
@ -96,11 +96,19 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Che fiero costume</h1> <h1 class="modal-title fs-4 text-center" id="exampleModalLabel">Che fiero costume</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<audio class="w-100 p-2" src="./assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio> <h2 class="fs-5 font-bold text-center">Informazioni</h2>
<p class="mt-2">
L'aria "Che fiero costume" bla bla...
</p>
<p>
Un po' di elucubrazioni sull'opera lirica nel barocco ecc...
</p>
<h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
<audio class="w-100 p-2 mt-1" src="./assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>

29
js/scene.js
View File

@ -1,6 +1,7 @@
// Global ATON // Global ATON
import { AppState, getSceneStatus, setSceneStatus } from "./state.js"; import { AppState, getSceneStatus, setSceneStatus } from "./state.js";
import { config } from "../config.js";
const material = { const material = {
color: "#fff", color: "#fff",
@ -12,6 +13,8 @@ const Scene = {};
Scene.UI = {}; Scene.UI = {};
Scene.UI.domParser = new DOMParser;
/** /**
* @todo Experimental... * @todo Experimental...
* @param {THREE.Object3D} object - A THREE Object3D instance * @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) { Scene.toggleContentMenu = function(triggerId) {
const btn = document.querySelector(`#${id}`); 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: '<i class="bi bi-music-note-list me-1"></i> 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'); const lightHeading = document.createElement('h2');
lightHeading.className = 'fs-5 ms-2 mb-3 mt-3'; lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce'; lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce';
@ -108,6 +128,7 @@ Scene.toggleSettingsPanel = function(id) {
envHeading.innerHTML = '<i class="bi bi-brightness-high me-1"></i> Ambiente'; envHeading.innerHTML = '<i class="bi bi-brightness-high me-1"></i> Ambiente';
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
ATON.UI.setSidePanelLeft();
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'}); ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
ATON.UI.elSidePanel.appendChild(lightHeading); ATON.UI.elSidePanel.appendChild(lightHeading);
@ -177,7 +198,6 @@ Scene.init = function() {
ATON.realize(); ATON.realize();
ATON.UI.addBasicEvents(); ATON.UI.addBasicEvents();
ATON.UI.init(); ATON.UI.init();
ATON.UI.setSidePanelLeft();
// All assets for this app are stored here // All assets for this app are stored here
ATON.setPathCollection('./assets/'); ATON.setPathCollection('./assets/');
// Light direction should be dynamic / user-defined // Light direction should be dynamic / user-defined
@ -187,6 +207,7 @@ Scene.init = function() {
ATON.setExposure(0.8); ATON.setExposure(0.8);
// Open settings side panel when clicking on settings btn // Open settings side panel when clicking on settings btn
Scene.toggleSettingsPanel('settings'); Scene.toggleSettingsPanel('settings');
Scene.toggleContentMenu('menu');
} }
/** /**
* @param {String} id - The back-to-map button id * @param {String} id - The back-to-map button id