diff --git a/examples/external-map.js b/examples/external-map.js index ab5113ef67..453b37faeb 100644 --- a/examples/external-map.js +++ b/examples/external-map.js @@ -2,8 +2,8 @@ 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'; -import {FullScreen, defaults as defaultControls} from 'ol/control'; const map = new Map({ target: 'map', @@ -34,18 +34,16 @@ button.addEventListener('click', function () { mapWindow.addEventListener('load', function () { const extMapDiv = mapWindow.document.getElementById('map'); map.setTarget(extMapDiv); - extMapDiv.focus(); - - mapWindow.addEventListener('beforeunload', function () { + extMapDiv.focus(); + + mapWindow.addEventListener('beforeunload', function () { localMapTarget.style.height = ''; map.setTarget(localMapTarget); button.disabled = false; - + mapWindow = undefined; }); - }); - }); window.addEventListener('beforeunload', function () { if (mapWindow) { diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index 493570d8e2..81c38e070d 100644 --- a/src/ol/PluggableMap.js +++ b/src/ol/PluggableMap.js @@ -323,7 +323,7 @@ class PluggableMap extends BaseObject { * @private * @type {?Array} */ - this.keyHandlerKeys_ = null; + this.targetChangeHandlerKeys_ = null; /** * @type {Collection} @@ -356,12 +356,6 @@ class PluggableMap extends BaseObject { */ this.renderer_ = null; - /** - * @type {undefined|function(Event): void} - * @private - */ - this.handleResize_; - /** * @private * @type {!Array} @@ -1146,21 +1140,11 @@ class PluggableMap extends BaseObject { * @private */ handleTargetChanged_() { - // target may be undefined, null, a string or an Element. - // If it's a string we convert it to an Element before proceeding. - // If it's not now an Element we remove the viewport from the DOM. - // If it's an Element we append the viewport element to it. - - let targetElement; - if (this.getTarget()) { - targetElement = this.getTargetElement(); - } - if (this.mapBrowserEventHandler_) { - for (let i = 0, ii = this.keyHandlerKeys_.length; i < ii; ++i) { - unlistenByKey(this.keyHandlerKeys_[i]); + for (let i = 0, ii = this.targetChangeHandlerKeys_.length; i < ii; ++i) { + unlistenByKey(this.targetChangeHandlerKeys_[i]); } - this.keyHandlerKeys_ = null; + this.targetChangeHandlerKeys_ = null; this.viewport_.removeEventListener( EventType.CONTEXTMENU, this.boundHandleBrowserEvent_ @@ -1169,15 +1153,17 @@ class PluggableMap extends BaseObject { EventType.WHEEL, this.boundHandleBrowserEvent_ ); - if (this.handleResize_ !== undefined) { - removeEventListener(EventType.RESIZE, this.handleResize_, false); - this.handleResize_ = undefined; - } this.mapBrowserEventHandler_.dispose(); this.mapBrowserEventHandler_ = null; removeNode(this.viewport_); } + // target may be undefined, null, a string or an Element. + // If it's a string we convert it to an Element before proceeding. + // If it's not now an Element we remove the viewport from the DOM. + // If it's an Element we append the viewport element to it. + + const targetElement = this.getTargetElement(); if (!targetElement) { if (this.renderer_) { clearTimeout(this.postRenderTimeoutHandle_); @@ -1217,10 +1203,11 @@ class PluggableMap extends BaseObject { PASSIVE_EVENT_LISTENERS ? {passive: false} : false ); + const defaultView = this.getOwnerDocument().defaultView; const keyboardEventTarget = !this.keyboardEventTarget_ ? targetElement : this.keyboardEventTarget_; - this.keyHandlerKeys_ = [ + this.targetChangeHandlerKeys_ = [ listen( keyboardEventTarget, EventType.KEYDOWN, @@ -1233,22 +1220,8 @@ class PluggableMap extends BaseObject { this.handleBrowserEvent, this ), + listen(defaultView, EventType.RESIZE, this.updateSize, this), ]; - - if (!this.handleResize_) { - this.handleResize_ = this.updateSize.bind(this); - window.addEventListener(EventType.RESIZE, this.handleResize_, false); - } - - if (this.externView && this.externView != window){ - this.externView.removeEventListener(EventType.RESIZE, this.handleResize_); - } - - if (this.getOwnerDocument().defaultView != window ){ - this.externView = this.getOwnerDocument().defaultView; - window.removeEventListener(EventType.RESIZE, this.handleResize_); - this.getOwnerDocument().defaultView.addEventListener(EventType.RESIZE,this.handleResize_,false); - } } this.updateSize(); diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js index c3c81f823c..4d2507042d 100644 --- a/src/ol/control/FullScreen.js +++ b/src/ol/control/FullScreen.js @@ -3,6 +3,7 @@ */ import Control from './Control.js'; import EventType from '../events/EventType.js'; +import MapProperty from '../MapProperty.js'; import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_UNSUPPORTED} from '../css.js'; import {listen, unlistenByKey} from '../events.js'; import {replaceNode} from '../dom.js'; @@ -187,6 +188,11 @@ class FullScreen extends Control { * @type {HTMLElement|string|undefined} */ this.source_ = options.source; + + /** + * @private + */ + this.boundHandleMapTargetChange_ = this.handleMapTargetChange_.bind(this); } /** @@ -271,6 +277,14 @@ class FullScreen extends Control { * @api */ setMap(map) { + const oldMap = this.getMap(); + if (oldMap) { + oldMap.removeChangeListener( + MapProperty.TARGET, + this.boundHandleMapTargetChange_ + ); + } + super.setMap(map); this.handleMapTargetChange_(); @@ -283,8 +297,9 @@ class FullScreen extends Control { } this.setClassName_(this.button_, isFullScreen(doc)); - this.listenerKeys.push( - listen(map, 'change:target', this.handleMapTargetChange_, this) + map.addChangeListener( + MapProperty.TARGET, + this.boundHandleMapTargetChange_ ); } } diff --git a/src/ol/events/condition.js b/src/ol/events/condition.js index 02d2d1feb8..2f6fdcd61c 100644 --- a/src/ol/events/condition.js +++ b/src/ol/events/condition.js @@ -84,10 +84,8 @@ export const altShiftKeysOnly = function (mapBrowserEvent) { */ export const focus = function (event) { const targetElement = event.map.getTargetElement(); - return targetElement.contains( - /** @type {Document} */ (event.map.getOwnerDocument()) - .activeElement - ); + const activeElement = event.map.getOwnerDocument().activeElement; + return targetElement.contains(activeElement); }; /**