ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve unusable map window

Browse Source 
As long as the original window is visible animation frames will run
and the external map will be usable
This commit is contained in:
Maximilian Krög
2021-10-30 15:39:46 +02:00
parent 50dc9f1f88
commit 8cff620691
2 changed files with 52 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/external-map.js
+23 -14
View File
@@ -39,6 +39,28 @@ function resetMapTarget() {
button.disabled = false; button.disabled = false;
} }
function updateOverlay() {
if (!mapWindow) {
return;
}
const container = mapWindow.document.querySelector('.container');
if (!container) {
return;
}
const externalMapTarget = mapWindow.document.getElementById('map');
if (document.visibilityState === 'visible') {
// Show controls and enable keyboard input
container.classList.remove('unusable');
externalMapTarget.setAttribute('tabindex', '0');
externalMapTarget.focus();
} else {
// Hide all controls and disable keyboard input
externalMapTarget.removeAttribute('tabindex');
container.classList.add('unusable');
}
}
window.addEventListener('visibilitychange', updateOverlay);
button.addEventListener('click', function () { button.addEventListener('click', function () {
const blockerNotice = document.getElementById('blocker-notice'); const blockerNotice = document.getElementById('blocker-notice');
blockerNotice.setAttribute('hidden', 'hidden'); blockerNotice.setAttribute('hidden', 'hidden');
@@ -61,7 +83,6 @@ button.addEventListener('click', function () {
const externalMapTarget = mapWindow.document.getElementById('map'); const externalMapTarget = mapWindow.document.getElementById('map');
localMapTarget.style.height = '0px'; localMapTarget.style.height = '0px';
map.setTarget(externalMapTarget); map.setTarget(externalMapTarget);
externalMapTarget.focus();
if (timeoutKey) { if (timeoutKey) {
timeoutKey = clearTimeout(timeoutKey); timeoutKey = clearTimeout(timeoutKey);
@@ -72,18 +93,6 @@ button.addEventListener('click', function () {
closeMapWindow(); closeMapWindow();
}); });
window.addEventListener('blur', function (evt) { updateOverlay();
externalMapTarget.style.opacity=0.3;
});
window.addEventListener('focus', function (evt) {
externalMapTarget.style.opacity=1.0;
});
mapWindow.addEventListener('focus', function (evt) {
if (!window.document.hidden){
externalMapTarget.style.opacity=1.0;
}
});
}); });
}); });
examples/resources/external-map-map.html
+29 -3
View File
@@ -6,13 +6,39 @@
body { body {
margin: 0; margin: 0;
} }
.map { .container {
position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#unusable-overlay,
.map {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.unusable #unusable-overlay {
background-color: rgba(0, 0, 0, .7);
font-size: 3rem;
font-weight: bold;
color: white;
display: flex;
align-items: center;
user-select: none;
justify-content: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.unusable .map .ol-control {
display: none;
}
</style> </style>
</head> </head>
<body> <body class="container">
<div id="map" class="map" tabindex="0"></div> <div id="map" class="map"></div>
<div id="unusable-overlay" hidden>
<span>Map not usable</span>
</div>
</body> </body>
</html> </html>