diff options
author | Guilhem Moulin <guilhem@fripost.org> | 2024-01-14 04:11:32 +0100 |
---|---|---|
committer | Guilhem Moulin <guilhem@fripost.org> | 2024-01-14 04:20:35 +0100 |
commit | aa2eaa0acae18dfcc9002d37bd31ca1660b83a79 (patch) | |
tree | 3aa512d58d90b843056a7dd2c4d4164495b48284 /main.js | |
parent | 6e272c9dfce96f585a1b91ab8c3caf963429dd19 (diff) |
Fix modal backdrop and pointer events.
Clicks on buttons or modal shouldn't propagate to the map. Also
info-modal did not work in fullscreen mode.
Diffstat (limited to 'main.js')
-rw-r--r-- | main.js | 28 |
1 files changed, 23 insertions, 5 deletions
@@ -132,7 +132,15 @@ const map = new Map({ /* move the control container to the viewport */ const container = document.getElementById('map-control-container'); -map.getViewport().appendChild(container); +(function() { + const container0 = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0]; + container0.appendChild(container); + container0.appendChild(document.getElementById('modal-info')); + + const backdrop = document.createElement('div'); + container0.appendChild(backdrop); + backdrop.id = 'modal-info-backdrop'; +})(); /* zoom in/out */ (function() { @@ -323,20 +331,30 @@ const menu = document.getElementById('map-menu'); i.classList.add('bi', 'bi-info-lg'); const panel = document.getElementById('modal-info'); - const modal = new Modal(panel, {}); + const modal = new Modal(panel, { + backdrop: false, + }); + + const backdrop = document.getElementById('modal-info-backdrop'); + backdrop.onclick = function(event) { + modal.hide(); + }; + panel.addEventListener('show.bs.modal', function() { + backdrop.classList.add('modal-backdrop', 'show'); btn.setAttribute('aria-expanded', 'true'); btn.classList.add('btn-dark'); btn.classList.remove('btn-light'); }); panel.addEventListener('hidden.bs.modal', function() { - btn.setAttribute('aria-expanded', 'false'); btn.classList.add('btn-light'); btn.classList.remove('btn-dark'); + btn.setAttribute('aria-expanded', 'false'); + backdrop.classList.remove('modal-backdrop', 'show'); }); - btn.onclick = function() { - modal.toggle() + btn.onclick = function(event) { + modal.toggle(); }; })(); |