do not display fullscreen control on unsupported devices #4786

src/ui/control/fullscreen_control.js

@@ -4,6 +4,8 @@ const DOM = require('../../util/dom');
 const util = require('../../util/util');
 const window = require('../../util/window');
 
+const className = 'mapboxgl-ctrl';
+
 /**
  * A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode.
  *
@@ -33,15 +35,15 @@ class FullscreenControl {
     }
 
     onAdd(map) {
-        const className = 'mapboxgl-ctrl';
-        const container = this._container = DOM.create('div', `${className} mapboxgl-ctrl-group`);
-        const button = this._fullscreenButton = DOM.create('button', (`${className}-icon ${className}-fullscreen`), this._container);
-        button.setAttribute("aria-label", "Toggle fullscreen");
-        button.type = 'button';
-        this._fullscreenButton.addEventListener('click', this._onClickFullscreen);
-        this._mapContainer = map.getContainer();
-        window.document.addEventListener(this._fullscreenchange, this._changeIcon);
-        return container;
+        this._map = map;
+        this._mapContainer = this._map.getContainer();
+        this._container = DOM.create('div', `${className} mapboxgl-ctrl-group`);
+        if (this._checkFullscreenSupport()) {
+            this._setupUI();
+        } else {
+            util.warnOnce('This device does not support fullscreen mode.');
+        }
+        return this._container;
     }
 
     onRemove() {
@@ -50,6 +52,23 @@ class FullscreenControl {
         window.document.removeEventListener(this._fullscreenchange, this._changeIcon);
     }
 
+    _checkFullscreenSupport() {
+        return !!(
+            this._mapContainer.requestFullscreen ||
+            this._mapContainer.mozRequestFullScreen ||
+            this._mapContainer.msRequestFullscreen ||
+            this._mapContainer.webkitRequestFullscreen
+        );
+    }
+
+    _setupUI() {
+        const button = this._fullscreenButton = DOM.create('button', (`${className}-icon ${className}-fullscreen`), this._container);
+        button.setAttribute("aria-label", "Toggle fullscreen");
+        button.type = 'button';
+        this._fullscreenButton.addEventListener('click', this._onClickFullscreen);
+        window.document.addEventListener(this._fullscreenchange, this._changeIcon);
+    }
+
     _isFullscreen() {
         return this._fullscreen;
     }
@@ -63,7 +82,6 @@ class FullscreenControl {
 
         if ((fullscreenElement === this._mapContainer) !== this._fullscreen) {
             this._fullscreen = !this._fullscreen;
-            const className = 'mapboxgl-ctrl';
             this._fullscreenButton.classList.toggle(`${className}-shrink`);
             this._fullscreenButton.classList.toggle(`${className}-fullscreen`);
         }

test/unit/ui/control/fullscreen.test.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const test = require('mapbox-gl-js-test').test;
+const window = require('../../../../src/util/window');
+const Map = require('../../../../src/ui/map');
+const FullscreenControl = require('../../../../src/ui/control/fullscreen_control');
+
+function createMap() {
+    const container = window.document.createElement('div');
+    return new Map({
+        container: container,
+        style: {
+            version: 8,
+            sources: {},
+            layers: []
+        }
+    });
+}
+
+test('FullscreenControl with no options', (t) => {
+    t.plan(0);
+
+    const map = createMap();
+    const fullscreen = new FullscreenControl();
+    map.addControl(fullscreen);
+    t.end();
+});