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

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();
}
});