Make FullScreen control work in external window

src/ol/control/FullScreen.js

@@ -4,7 +4,7 @@
 import Control from './Control.js';
 import EventType from '../events/EventType.js';
 import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_UNSUPPORTED} from '../css.js';
-import {listen} from '../events.js';
+import {listen, unlistenByKey} from '../events.js';
 import {replaceNode} from '../dom.js';
 
 const events = [
@@ -111,6 +111,12 @@ class FullScreen extends Control {
     this.cssClassName_ =
       options.className !== undefined ? options.className : 'ol-full-screen';
 
+    /**
+     * @private
+     * @type {Array<import("../events.js").EventsKey>}
+     */
+    this.documentListeners_ = [];
+
     /**
      * @private
      * @type {Array<string>}
@@ -157,7 +163,6 @@ class FullScreen extends Control {
     this.button_ = document.createElement('button');
 
     const tipLabel = options.tipLabel ? options.tipLabel : 'Toggle full-screen';
-    this.setClassName_(this.button_, isFullScreen());
     this.button_.setAttribute('type', 'button');
     this.button_.title = tipLabel;
     this.button_.appendChild(this.labelNode_);
@@ -168,17 +173,8 @@ class FullScreen extends Control {
       false
     );
 
-    const cssClasses =
+    this.element.className = `${this.cssClassName_} ${CLASS_UNSELECTABLE} ${CLASS_CONTROL}`;
-      this.cssClassName_ +
+    this.element.appendChild(this.button_);
-      ' ' +
-      CLASS_UNSELECTABLE +
-      ' ' +
-      CLASS_CONTROL +
-      ' ' +
-      (!isFullScreenSupported() ? CLASS_UNSUPPORTED : '');
-    const element = this.element;
-    element.className = cssClasses;
-    element.appendChild(this.button_);
 
     /**
      * @private
@@ -206,15 +202,16 @@ class FullScreen extends Control {
    * @private
    */
   handleFullScreen_() {
-    if (!isFullScreenSupported()) {
-      return;
-    }
     const map = this.getMap();
     if (!map) {
       return;
     }
-    if (isFullScreen()) {
+    const doc = map.getOwnerDocument();
-      exitFullScreen();
+    if (!isFullScreenSupported(doc)) {
+      return;
+    }
+    if (isFullScreen(doc)) {
+      exitFullScreen(doc);
     } else {
       let element;
       if (this.source_) {
@@ -238,7 +235,7 @@ class FullScreen extends Control {
    */
   handleFullScreenChange_() {
     const map = this.getMap();
-    if (isFullScreen()) {
+    if (isFullScreen(map.getOwnerDocument())) {
       this.setClassName_(this.button_, true);
       replaceNode(this.labelActiveNode_, this.labelNode_);
       this.dispatchEvent(FullScreenEventType.ENTERFULLSCREEN);
@@ -275,10 +272,39 @@ class FullScreen extends Control {
    */
   setMap(map) {
     super.setMap(map);
+
+    this.handleMapTargetChange_();
     if (map) {
+      const doc = map.getOwnerDocument();
+      if (isFullScreenSupported(doc)) {
+        this.element.classList.remove(CLASS_UNSUPPORTED);
+      } else {
+        this.element.classList.add(CLASS_UNSUPPORTED);
+      }
+      this.setClassName_(this.button_, isFullScreen(doc));
+
+      this.listenerKeys.push(
+        listen(map, 'change:target', this.handleMapTargetChange_, this)
+      );
+    }
+  }
+
+  /**
+   * @private
+   */
+  handleMapTargetChange_() {
+    const listeners = this.documentListeners_;
+    for (let i = 0, ii = listeners.length; i < ii; ++i) {
+      unlistenByKey(listeners[i]);
+    }
+    listeners.length = 0;
+
+    const map = this.getMap();
+    if (map) {
+      const doc = map.getOwnerDocument();
       for (let i = 0, ii = events.length; i < ii; ++i) {
-        this.listenerKeys.push(
+        listeners.push(
-          listen(document, events[i], this.handleFullScreenChange_, this)
+          listen(doc, events[i], this.handleFullScreenChange_, this)
         );
       }
     }
@@ -286,25 +312,27 @@ class FullScreen extends Control {
 }
 
 /**
+ * @param {Document} doc The root document to check.
  * @return {boolean} Fullscreen is supported by the current platform.
  */
-function isFullScreenSupported() {
+function isFullScreenSupported(doc) {
-  const body = document.body;
+  const body = doc.body;
   return !!(
     body['webkitRequestFullscreen'] ||
-    (body['msRequestFullscreen'] && document['msFullscreenEnabled']) ||
+    (body['msRequestFullscreen'] && doc['msFullscreenEnabled']) ||
-    (body.requestFullscreen && document.fullscreenEnabled)
+    (body.requestFullscreen && doc.fullscreenEnabled)
   );
 }
 
 /**
+ * @param {Document} doc The root document to check.
  * @return {boolean} Element is currently in fullscreen.
  */
-function isFullScreen() {
+function isFullScreen(doc) {
   return !!(
-    document['webkitIsFullScreen'] ||
+    doc['webkitIsFullScreen'] ||
-    document['msFullscreenElement'] ||
+    doc['msFullscreenElement'] ||
-    document.fullscreenElement
+    doc.fullscreenElement
   );
 }
 
@@ -336,14 +364,15 @@ function requestFullScreenWithKeys(element) {
 
 /**
  * Exit fullscreen.
+ * @param {Document} doc The document to exit fullscren from
  */
-function exitFullScreen() {
+function exitFullScreen(doc) {
-  if (document.exitFullscreen) {
+  if (doc.exitFullscreen) {
-    document.exitFullscreen();
+    doc.exitFullscreen();
-  } else if (document['msExitFullscreen']) {
+  } else if (doc['msExitFullscreen']) {
-    document['msExitFullscreen']();
+    doc['msExitFullscreen']();
-  } else if (document['webkitExitFullscreen']) {
+  } else if (doc['webkitExitFullscreen']) {
-    document['webkitExitFullscreen']();
+    doc['webkitExitFullscreen']();
   }
 }