do not display fullscreen control on unsupported devices (#4838)

* do not display fullscreen control on unsupported devices #4786

* move className into class property #4838

* check for fullscreen support with fullscreenEnabled #4838

* remove extra mozFullScreenEnabled check #4838

* check that Fullscreen control gets added then fullscreen is enabled #4838

src/ui/control/fullscreen_control.js

@@ -30,18 +30,20 @@ class FullscreenControl {
         } else if ('onmsfullscreenchange' in window.document) {
             this._fullscreenchange = 'MSFullscreenChange';
         }
+        this._className = 'mapboxgl-ctrl';
     }
 
     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', `${this._className} mapboxgl-ctrl-group`);
+        if (this._checkFullscreenSupport()) {
+            this._setupUI();
+        } else {
+            this._container.style.display = 'none';
+            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 !!(
+            window.document.fullscreenEnabled ||
+            window.document.mozFullscreenEnabled ||
+            window.document.msFullscreenEnabled ||
+            window.document.webkitFullscreenEnabled
+        );
+    }
+
+    _setupUI() {
+        const button = this._fullscreenButton = DOM.create('button', (`${this._className}-icon ${this._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,9 +82,8 @@ 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`);
+            this._fullscreenButton.classList.toggle(`${this._className}-shrink`);
+            this._fullscreenButton.classList.toggle(`${this._className}-fullscreen`);
         }
     }
 

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

@@ -0,0 +1,40 @@
+'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 appears then fullscreen enabled', (t) => {
+    window.document.fullscreenEnabled = true;
+
+    const map = createMap();
+    const fullscreen = new FullscreenControl();
+    map.addControl(fullscreen);
+
+    t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-fullscreen').length, 1);
+    t.end();
+});
+
+test('FullscreenControl does not appears then fullscreen is not enabled', (t) => {
+    window.document.fullscreenEnabled = false;
+
+    const map = createMap();
+    const fullscreen = new FullscreenControl();
+    map.addControl(fullscreen);
+
+    t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-fullscreen').length, 0);
+    t.end();
+});