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

Improve window open and close handling

Browse Source 
Use pagehide event instead of beforeunload, seems to be more reliable
Add a timeout and info message when opening the window fails
This commit is contained in:
Maximilian Krög
2021-10-20 01:18:05 +02:00
parent 5149224354
commit 7bed63bf3f
3 changed files with 46 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/external-map.html
View File

@@ -1,11 +1,11 @@
---
layout: example.html
title: External map
shortdesc: Show a map in a separate window.
shortdesc: Move a map to a seperate window.
docs: >
Move a map to a seperate window.
tags: "external, window"
resources:
---
<div id="map" class="map"></div>
<input id="extMap" type="button" value="Open external map"></input>
<input id="external-map-button" type="button" value="Open external map"></input>
<span id="blocker-notice" hidden>Could not open map in external window. If you are using an popup or ad blocker you may need to disable it for this example.</span>

61
examples/external-map.js
View File

@@ -5,8 +5,10 @@ import View from '../src/ol/View.js';
import {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
import {fromLonLat} from '../src/ol/proj.js';
const localMapTarget = document.getElementById('map');
const map = new Map({
target: 'map',
target: localMapTarget,
controls: defaultControls().extend([new FullScreen()]),
layers: [
new TileLayer({
@@ -20,33 +22,54 @@ const map = new Map({
});
let mapWindow;
const button = document.getElementById('extMap');
function closeMapWindow() {
if (mapWindow) {
mapWindow.close();
mapWindow = undefined;
}
}
// Close external window in case the main page is closed or reloaded
window.addEventListener('pagehide', closeMapWindow);
const button = document.getElementById('external-map-button');
function resetMapTarget() {
localMapTarget.style.height = '';
map.setTarget(localMapTarget);
button.disabled = false;
}
button.addEventListener('click', function () {
const localMapTarget = document.getElementById('map');
localMapTarget.style.height = '0px';
const blockerNotice = document.getElementById('blocker-notice');
blockerNotice.setAttribute('hidden', 'hidden');
button.disabled = true;
// Reset button and map target in case window did not load or open
let timeoutKey = setTimeout(function () {
closeMapWindow();
resetMapTarget();
blockerNotice.removeAttribute('hidden');
timeoutKey = undefined;
}, 3000);
mapWindow = window.open(
'resources/external-map-map.html',
'MapWindow',
'toolbar=0,location=0,menubar=0,width=800,height=600'
);
mapWindow.addEventListener('load', function () {
const extMapDiv = mapWindow.document.getElementById('map');
map.setTarget(extMapDiv);
extMapDiv.focus();
mapWindow.addEventListener('DOMContentLoaded', function () {
const externalMapTarget = mapWindow.document.getElementById('map');
localMapTarget.style.height = '0px';
map.setTarget(externalMapTarget);
externalMapTarget.focus();
mapWindow.addEventListener('beforeunload', function () {
localMapTarget.style.height = '';
map.setTarget(localMapTarget);
button.disabled = false;
mapWindow = undefined;
if (timeoutKey) {
timeoutKey = clearTimeout(timeoutKey);
}
mapWindow.addEventListener('pagehide', function () {
resetMapTarget();
// Close window in case user does a page reload
closeMapWindow();
});
});
});
window.addEventListener('beforeunload', function () {
if (mapWindow) {
mapWindow.close();
}
});

4
examples/resources/external-map-map.html
View File

@@ -13,10 +13,6 @@
</style>
</head>
<body>
<script type="text/javascript">
if ((window.performance.navigation && window.performance.navigation.type === 1) || window.performance.getEntriesByType('navigation').map((nav) => nav.type).includes('reload'))
window.close();
</script>
<div id="map" class="map" tabindex="0"></div>
</body>
</html>