From 8cff6206915a02c52ddc7a3d0e140397165c8673 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 30 Oct 2021 15:39:46 +0200 Subject: [PATCH] Improve unusable map window As long as the original window is visible animation frames will run and the external map will be usable --- examples/external-map.js | 37 +++++++++++++++--------- examples/resources/external-map-map.html | 32 ++++++++++++++++++-- 2 files changed, 52 insertions(+), 17 deletions(-) diff --git a/examples/external-map.js b/examples/external-map.js index 2dc39d52e3..9a42661061 100644 --- a/examples/external-map.js +++ b/examples/external-map.js @@ -39,6 +39,28 @@ function resetMapTarget() { 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 () { const blockerNotice = document.getElementById('blocker-notice'); blockerNotice.setAttribute('hidden', 'hidden'); @@ -61,7 +83,6 @@ button.addEventListener('click', function () { const externalMapTarget = mapWindow.document.getElementById('map'); localMapTarget.style.height = '0px'; map.setTarget(externalMapTarget); - externalMapTarget.focus(); if (timeoutKey) { timeoutKey = clearTimeout(timeoutKey); @@ -72,18 +93,6 @@ button.addEventListener('click', function () { closeMapWindow(); }); - window.addEventListener('blur', function (evt) { - 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; - } - }); + updateOverlay(); }); }); diff --git a/examples/resources/external-map-map.html b/examples/resources/external-map-map.html index 4d3ca1fc5b..8526da9a6d 100644 --- a/examples/resources/external-map-map.html +++ b/examples/resources/external-map-map.html @@ -6,13 +6,39 @@ body { margin: 0; } - .map { + .container { + position: relative; height: 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; + } - -
+ +
+