Some UI changes

js/main.js

@@ -7,14 +7,29 @@ import Scene from "./scene.js";
 // Realize our app
 let APP = ATON.App.realize();
 
-// You can require here flares (plugins) if needed by the app
-//APP.requireFlares(["myFlare","anotherFlare"]);
+APP.UI = {};
+
+/**
+ * 
+ * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
+ */
+APP.UI.pauseAudio = function(triggerSelector) {
+    // What if more than one audio element is playing?
+    const audio = document.querySelector('audio');
+    document.querySelectorAll(triggerSelector).forEach(el => {
+        el.addEventListener('click', () => audio.pause());
+    });
+    document.querySelector('.modal').addEventListener('blur', () => {
+        audio.pause();
+    });
+}
 
 // APP.setup() is required for web-app initialization
 // You can place here UI setup (HTML), events handling, etc.
 APP.setup = ()=>{
     Map.init('map');
     Scene.toggleScene('back');
+    APP.UI.pauseAudio('[data-bs-dismiss="modal"');
 };
 
 /* If you plan to use an update routine (executed continuously), you can place its logic here.

js/map.js

@@ -2,6 +2,7 @@
 
 import {config} from '../config.js';
 import Scene from './scene.js';
+import { AppState } from './state.js';
 
 const Map = {};
 
@@ -31,6 +32,8 @@ Map.init = function(mapContainerId) {
             map.getContainer().classList.toggle('d-none');
         });
     });
+
+    AppState.map = map;
 }
 
 export default Map;

js/scene.js

@@ -104,14 +104,14 @@ Scene.toggleSettingsPanel = function(id) {
         ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
         ambientOcclSwitch.innerHTML = `
             <input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" title="Abilita / disabilita ambient occlusion">
-            <label class="form-check-label fst-italic" for="aoSwitch">Ambient occlusion</label>
+            <label class="form-check-label" for="aoSwitch"><em>Ambient occlusion</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
         `;
 
         const shadowsSwitch = document.createElement('div');
         shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
         shadowsSwitch.innerHTML = `
             <input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre">
-            <label class="form-check-label" for="shadowsSwitch">Ombre</label>
+            <label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title="Disabilitare le ombre può migliorare le prestazioni"></i></label>
         `;
 
         shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
@@ -166,10 +166,10 @@ Scene.toggleScene = function(id) {
         // when browsing the map
         ATON.renderPause();
         document.querySelector('#map').classList.toggle('d-none');
+        AppState.map.invalidateSize();
     });
 }
 /**
- * @todo Load model, pano etc. only if scene hasn't been opened yet
  * @param {Object} marker - The marker object from config
  */
 Scene.openScene = function(marker) {

js/state.js

@@ -7,6 +7,7 @@ export const AppState = {
     ],
     ambientOcclusion : true,
     shadows : true,
+    map : null,
 }
 
 /**