Draft content menu...
This commit is contained in:
parent
7b53e09524
commit
224763bbdf
@ -5,7 +5,16 @@ const theater1Popup = `
|
||||
</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 = {
|
||||
menu : {
|
||||
audioBtn1
|
||||
},
|
||||
markers : [
|
||||
{
|
||||
id : "salvador",
|
||||
|
||||
20
index.html
20
index.html
@ -68,7 +68,7 @@
|
||||
<body data-bs-theme="light">
|
||||
<div class="map" id="map" style="height: 100%;"></div>
|
||||
<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">
|
||||
<i class="bi bi-map-fill"></i>
|
||||
</a>
|
||||
@ -78,9 +78,9 @@
|
||||
<a class="btn aton-btn fs-5" id="clipper" title="Clipper">
|
||||
<i class="bi bi-scissors"></i>
|
||||
</a>
|
||||
<button type="button" class="btn aton-btn fs-6 px-2" data-bs-toggle="modal" data-bs-target="#audio1">
|
||||
Esempio modale audio
|
||||
</button>
|
||||
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
|
||||
<i class="bi bi-list"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- TODO CSS-only popover -->
|
||||
@ -96,11 +96,19 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<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>
|
||||
</div>
|
||||
<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 class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>
|
||||
|
||||
29
js/scene.js
29
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: '<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');
|
||||
lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
|
||||
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';
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
ATON.UI.setSidePanelLeft();
|
||||
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> 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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user