nicolo/scaenae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some UI changes

Browse Source
This commit is contained in:
Nicolò P 2025-10-09 18:22:32 +02:00
parent 81e12e4b74
commit 66cf86e779
5 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -51,9 +51,21 @@
<!-- Main js entry --> <!-- Main js entry -->
<script type="module" src="js/main.js"></script> <script type="module" src="js/main.js"></script>
<style>
body {
height: 100vh;
}
.c-hand {
cursor: pointer;
}
input[type="checkbox"] {
cursor: pointer;
}
</style>
</head> </head>
<body style="height: 100vh;"> <body data-bs-theme="light">
<div class="map" id="map" style="height: 100%;"></div> <div class="map" id="map" style="height: 100%;"></div>
<div class="d-none" id="scene"> <div class="d-none" id="scene">
<div id="toolbar" class="aton-toolbar-top"> <div id="toolbar" class="aton-toolbar-top">

19
js/main.js
View File

@ -7,14 +7,29 @@ import Scene from "./scene.js";
// Realize our app // Realize our app
let APP = ATON.App.realize(); let APP = ATON.App.realize();
// You can require here flares (plugins) if needed by the app APP.UI = {};
//APP.requireFlares(["myFlare","anotherFlare"]);
/**
*
* @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 // APP.setup() is required for web-app initialization
// You can place here UI setup (HTML), events handling, etc. // You can place here UI setup (HTML), events handling, etc.
APP.setup = ()=>{ APP.setup = ()=>{
Map.init('map'); Map.init('map');
Scene.toggleScene('back'); 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. /* If you plan to use an update routine (executed continuously), you can place its logic here.

3
js/map.js
View File

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

6
js/scene.js
View File

@ -104,14 +104,14 @@ Scene.toggleSettingsPanel = function(id) {
ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2'; ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
ambientOcclSwitch.innerHTML = ` ambientOcclSwitch.innerHTML = `
<input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" title="Abilita / disabilita ambient occlusion"> <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'); const shadowsSwitch = document.createElement('div');
shadowsSwitch.className = 'form-check form-switch ms-4 mt-2'; shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
shadowsSwitch.innerHTML = ` shadowsSwitch.innerHTML = `
<input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre"> <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; shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
@ -166,10 +166,10 @@ Scene.toggleScene = function(id) {
// when browsing the map // when browsing the map
ATON.renderPause(); ATON.renderPause();
document.querySelector('#map').classList.toggle('d-none'); 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 * @param {Object} marker - The marker object from config
*/ */
Scene.openScene = function(marker) { Scene.openScene = function(marker) {

1
js/state.js
View File

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