diff --git a/js/main.js b/js/main.js
index e0e8d90..640b4d4 100644
--- a/js/main.js
+++ b/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.
diff --git a/js/map.js b/js/map.js
index bb5a8c4..f600a05 100644
--- a/js/map.js
+++ b/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;
\ No newline at end of file
diff --git a/js/scene.js b/js/scene.js
index 1ecadf6..aec9eab 100644
--- a/js/scene.js
+++ b/js/scene.js
@@ -104,14 +104,14 @@ Scene.toggleSettingsPanel = function(id) {
ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
ambientOcclSwitch.innerHTML = `
-
+
`;
const shadowsSwitch = document.createElement('div');
shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
shadowsSwitch.innerHTML = `
-
+
`;
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) {
diff --git a/js/state.js b/js/state.js
index a67341f..1d6f1f2 100644
--- a/js/state.js
+++ b/js/state.js
@@ -7,6 +7,7 @@ export const AppState = {
],
ambientOcclusion : true,
shadows : true,
+ map : null,
}
/**