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 OSM from '../src/ol/source/OSM.js';
import TileLayer from '../src/ol/layer/Tile.js'; import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.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'; 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 localMapTarget = document.getElementById('map');
const map = new Map({ const map = new Map({
target: localMapTarget, target: localMapTarget,
controls: defaultControls().extend([new FullScreen()]), controls: defaultControls().extend([new FullScreen(), new UnusableMask()]),
layers: [ layers: [
new TileLayer({ new TileLayer({
source: new OSM(), source: new OSM(),
@@ -43,20 +58,19 @@ function updateOverlay() {
if (!mapWindow) { if (!mapWindow) {
return; return;
} }
const container = mapWindow.document.querySelector('.container'); const externalMapTarget = mapWindow.document.getElementById('map');
if (!container) { if (!externalMapTarget) {
return; return;
} }
const externalMapTarget = mapWindow.document.getElementById('map');
if (document.visibilityState === 'visible') { if (document.visibilityState === 'visible') {
// Show controls and enable keyboard input // Show controls and enable keyboard input
container.classList.remove('unusable'); externalMapTarget.classList.remove('unusable');
externalMapTarget.setAttribute('tabindex', '0'); externalMapTarget.setAttribute('tabindex', '0');
externalMapTarget.focus(); externalMapTarget.focus();
} else { } else {
// Hide all controls and disable keyboard input // Hide all controls and disable keyboard input
externalMapTarget.removeAttribute('tabindex'); externalMapTarget.removeAttribute('tabindex');
container.classList.add('unusable'); externalMapTarget.classList.add('unusable');
} }
} }
window.addEventListener('visibilitychange', updateOverlay); window.addEventListener('visibilitychange', updateOverlay);

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

@@ -6,39 +6,25 @@
body { body {
margin: 0; margin: 0;
} }
.container {
position: relative;
height: 100%;
width: 100%;
}
#unusable-overlay,
.map { .map {
position: absolute;
top: 0;
left: 0;
height: 100%; height: 100%;
width: 100%;
} }
.unusable #unusable-overlay { .map.unusable .ol-mask {
background-color: rgba(0, 0, 0, .7); height: 100%;
font-size: 3rem;
font-weight: bold;
color: white;
display: flex; display: flex;
align-items: center; align-items: center;
user-select: none;
justify-content: center; 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; display: none;
} }
</style> </style>
</head> </head>
<body class="container"> <body>
<div id="map" class="map"></div> <div id="map" class="map"></div>
<div id="unusable-overlay" hidden>
<span>Map not usable</span>
</div>
</body> </body>
</html> </html>

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

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