From 66cf86e779edd4cd9ece24db081c6718c0b18de6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Thu, 9 Oct 2025 18:22:32 +0200 Subject: [PATCH] Some UI changes --- index.html | 14 +++++++++++++- js/main.js | 19 +++++++++++++++++-- js/map.js | 3 +++ js/scene.js | 6 +++--- js/state.js | 1 + 5 files changed, 37 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index c2574bc..efee111 100644 --- a/index.html +++ b/index.html @@ -51,9 +51,21 @@ + + - +
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, } /**