7bed63bf3f
Use pagehide event instead of beforeunload, seems to be more reliable Add a timeout and info message when opening the window fails
76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import OSM from '../src/ol/source/OSM.js';
|
|
import TileLayer from '../src/ol/layer/Tile.js';
|
|
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: localMapTarget,
|
|
controls: defaultControls().extend([new FullScreen()]),
|
|
layers: [
|
|
new TileLayer({
|
|
source: new OSM(),
|
|
}),
|
|
],
|
|
view: new View({
|
|
center: fromLonLat([37.41, 8.82]),
|
|
zoom: 4,
|
|
}),
|
|
});
|
|
|
|
let mapWindow;
|
|
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 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('DOMContentLoaded', function () {
|
|
const externalMapTarget = mapWindow.document.getElementById('map');
|
|
localMapTarget.style.height = '0px';
|
|
map.setTarget(externalMapTarget);
|
|
externalMapTarget.focus();
|
|
|
|
if (timeoutKey) {
|
|
timeoutKey = clearTimeout(timeoutKey);
|
|
}
|
|
mapWindow.addEventListener('pagehide', function () {
|
|
resetMapTarget();
|
|
// Close window in case user does a page reload
|
|
closeMapWindow();
|
|
});
|
|
});
|
|
});
|