diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js index 1eeedb121f3..fbd16c46550 100644 --- a/src/ui/control/fullscreen_control.js +++ b/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`); } } diff --git a/test/unit/ui/control/fullscreen.test.js b/test/unit/ui/control/fullscreen.test.js new file mode 100644 index 00000000000..2273b5aeefd --- /dev/null +++ b/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(); +});