Draft content menu...

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