From bd3891d60783a6b81ae7dc0ed75a001930280afb Mon Sep 17 00:00:00 2001 From: Stepan Kuzmin Date: Thu, 15 Jun 2017 17:26:15 +0300 Subject: [PATCH 1/5] do not display fullscreen control on unsupported devices #4786 --- src/ui/control/fullscreen_control.js | 38 ++++++++++++++++++------- test/unit/ui/control/fullscreen.test.js | 27 ++++++++++++++++++ 2 files changed, 55 insertions(+), 10 deletions(-) create mode 100644 test/unit/ui/control/fullscreen.test.js diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js index 1eeedb121f3..530212d7f06 100644 --- a/src/ui/control/fullscreen_control.js +++ b/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`); } diff --git a/test/unit/ui/control/fullscreen.test.js b/test/unit/ui/control/fullscreen.test.js new file mode 100644 index 00000000000..955fa9cb91a --- /dev/null +++ b/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(); +}); From c3065966ba93d129fa35b6d3c96c48ad1ba06137 Mon Sep 17 00:00:00 2001 From: Stepan Kuzmin Date: Tue, 20 Jun 2017 23:30:46 +0300 Subject: [PATCH 2/5] move className into class property #4838 --- src/ui/control/fullscreen_control.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js index 530212d7f06..d820f816dc0 100644 --- a/src/ui/control/fullscreen_control.js +++ b/src/ui/control/fullscreen_control.js @@ -4,8 +4,6 @@ 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. * @@ -32,12 +30,13 @@ class FullscreenControl { } else if ('onmsfullscreenchange' in window.document) { this._fullscreenchange = 'MSFullscreenChange'; } + this._className = 'mapboxgl-ctrl'; } onAdd(map) { this._map = map; this._mapContainer = this._map.getContainer(); - this._container = DOM.create('div', `${className} mapboxgl-ctrl-group`); + this._container = DOM.create('div', `${this._className} mapboxgl-ctrl-group`); if (this._checkFullscreenSupport()) { this._setupUI(); } else { @@ -62,7 +61,7 @@ class FullscreenControl { } _setupUI() { - const button = this._fullscreenButton = DOM.create('button', (`${className}-icon ${className}-fullscreen`), this._container); + 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); @@ -82,8 +81,8 @@ class FullscreenControl { if ((fullscreenElement === this._mapContainer) !== this._fullscreen) { this._fullscreen = !this._fullscreen; - 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`); } } From c662998fd5862f76e05ca32d0474f3633c2f815b Mon Sep 17 00:00:00 2001 From: Stepan Kuzmin Date: Wed, 21 Jun 2017 00:03:43 +0300 Subject: [PATCH 3/5] check for fullscreen support with fullscreenEnabled #4838 --- src/ui/control/fullscreen_control.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js index d820f816dc0..f458fbd9fb7 100644 --- a/src/ui/control/fullscreen_control.js +++ b/src/ui/control/fullscreen_control.js @@ -40,6 +40,7 @@ class FullscreenControl { if (this._checkFullscreenSupport()) { this._setupUI(); } else { + this._container.style.display = 'none'; util.warnOnce('This device does not support fullscreen mode.'); } return this._container; @@ -53,10 +54,11 @@ class FullscreenControl { _checkFullscreenSupport() { return !!( - this._mapContainer.requestFullscreen || - this._mapContainer.mozRequestFullScreen || - this._mapContainer.msRequestFullscreen || - this._mapContainer.webkitRequestFullscreen + window.document.fullscreenEnabled || + window.document.mozFullscreenEnabled || + window.document.mozFullScreenEnabled || + window.document.msFullscreenEnabled || + window.document.webkitFullscreenEnabled ); } From 5529de4bd5552ad355f3fcf93d5039c1c6272f31 Mon Sep 17 00:00:00 2001 From: Stepan Kuzmin Date: Wed, 21 Jun 2017 00:05:59 +0300 Subject: [PATCH 4/5] remove extra mozFullScreenEnabled check #4838 --- src/ui/control/fullscreen_control.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js index f458fbd9fb7..fbd16c46550 100644 --- a/src/ui/control/fullscreen_control.js +++ b/src/ui/control/fullscreen_control.js @@ -56,7 +56,6 @@ class FullscreenControl { return !!( window.document.fullscreenEnabled || window.document.mozFullscreenEnabled || - window.document.mozFullScreenEnabled || window.document.msFullscreenEnabled || window.document.webkitFullscreenEnabled ); From 4adf6bc78afeddffbcb8aa06fc067151713ac29a Mon Sep 17 00:00:00 2001 From: Stepan Kuzmin Date: Wed, 21 Jun 2017 11:17:43 +0300 Subject: [PATCH 5/5] check that Fullscreen control gets added then fullscreen is enabled #4838 --- test/unit/ui/control/fullscreen.test.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/test/unit/ui/control/fullscreen.test.js b/test/unit/ui/control/fullscreen.test.js index 955fa9cb91a..2273b5aeefd 100644 --- a/test/unit/ui/control/fullscreen.test.js +++ b/test/unit/ui/control/fullscreen.test.js @@ -17,11 +17,24 @@ function createMap() { }); } -test('FullscreenControl with no options', (t) => { - t.plan(0); +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(); });