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 -->
<script type="module" src="js/main.js"></script>
<style>
body {
height: 100vh;
}
.c-hand {
cursor: pointer;
}
input[type="checkbox"] {
cursor: pointer;
}
</style>
</head>
<body style="height: 100vh;">
<body data-bs-theme="light">
<div class="map" id="map" style="height: 100%;"></div>
<div class="d-none" id="scene">
<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
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.

3
js/map.js
View File

@ -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;

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.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) {

1
js/state.js
View File

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