Improve code and its formatting

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) {

src/ol/PluggableMap.js

@@ -323,7 +323,7 @@ class PluggableMap extends BaseObject {
      * @private
      * @type {?Array<import("./events.js").EventsKey>}
      */
-    this.keyHandlerKeys_ = null;
+    this.targetChangeHandlerKeys_ = null;
 
     /**
      * @type {Collection<import("./control/Control.js").default>}
@@ -356,12 +356,6 @@ class PluggableMap extends BaseObject {
      */
     this.renderer_ = null;
 
-    /**
-     * @type {undefined|function(Event): void}
-     * @private
-     */
-    this.handleResize_;
-
     /**
      * @private
      * @type {!Array<PostRenderFunction>}
@@ -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();

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

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);
 };
 
 /**