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

Fixed unusable overlay in fullscreen mode

Browse Source
This commit is contained in:
Maximilian Krög
2021-11-02 20:06:06 +01:00
parent a10bc713f2
commit 12de93b397
3 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
examples/external-map.js
View File

@@ -2,14 +2,29 @@ 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 {
Control,
FullScreen,
defaults as defaultControls,
} from '../src/ol/control.js';
import {fromLonLat} from '../src/ol/proj.js';
class UnusableMask extends Control {
constructor() {
super({
element: document.createElement('div'),
});
this.element.setAttribute('hidden', 'hidden');
this.element.className = 'ol-mask';
this.element.innerHTML = '<div>Map not usable</div>';
}
}
const localMapTarget = document.getElementById('map');
const map = new Map({
target: localMapTarget,
controls: defaultControls().extend([new FullScreen()]),
controls: defaultControls().extend([new FullScreen(), new UnusableMask()]),
layers: [
new TileLayer({
source: new OSM(),
@@ -43,20 +58,19 @@ function updateOverlay() {
if (!mapWindow) {
return;
}
const container = mapWindow.document.querySelector('.container');
if (!container) {
const externalMapTarget = mapWindow.document.getElementById('map');
if (!externalMapTarget) {
return;
}
const externalMapTarget = mapWindow.document.getElementById('map');
if (document.visibilityState === 'visible') {
// Show controls and enable keyboard input
container.classList.remove('unusable');
externalMapTarget.classList.remove('unusable');
externalMapTarget.setAttribute('tabindex', '0');
externalMapTarget.focus();
} else {
// Hide all controls and disable keyboard input
externalMapTarget.removeAttribute('tabindex');
container.classList.add('unusable');
externalMapTarget.classList.add('unusable');
}
}
window.addEventListener('visibilitychange', updateOverlay);

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

@@ -6,39 +6,25 @@
body {
margin: 0;
}
.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;
.map.unusable .ol-mask {
height: 100%;
display: flex;
align-items: center;
user-select: none;
justify-content: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
user-select: none;
background-color: rgba(0, 0, 0, .7);
color: white;
font: bold 3rem 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.unusable .map .ol-control {
.map.unusable .ol-control {
display: none;
}
</style>
</head>
<body class="container">
<body>
<div id="map" class="map"></div>
<div id="unusable-overlay" hidden>
<span>Map not usable</span>
</div>
</body>
</html>

2
src/ol/control/FullScreen.js
View File

@@ -229,7 +229,7 @@ class FullScreen extends Control {
if (this.source_) {
element =
typeof this.source_ === 'string'
? document.getElementById(this.source_)
? doc.getElementById(this.source_)
: this.source_;
} else {
element = map.getTargetElement();