-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[not ready] create fullscreen example and control (#3977)
* create fullscreen example and control * add fullscreen control * toggle fullscreen * clean up code * set height and width * change icon on esc * add fullscreen to debug * address merp comments * remove _onKeyDown and _isFullscreen * address johns comments * move file to src folder and add case for IE11 * add newline to debug page * add second argument
- Loading branch information
1 parent
3a07c35
commit 78fc9c4
Showing
5 changed files
with
119 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| --- | ||
| layout: example | ||
| category: example | ||
| title: View a fullscreen map | ||
| description: Toggle between current view and fullscreen mode | ||
| tags: | ||
| - controls-and-overlays | ||
| --- | ||
|
|
||
| <div id='map'></div> | ||
|
|
||
| <script> | ||
|
|
||
| var map = new mapboxgl.Map({ | ||
| container: 'map', // container id | ||
| style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location | ||
| center: [11.255, 43.77], // starting position | ||
| zoom: 13 // starting zoom | ||
| }); | ||
|
|
||
| map.addControl(new mapboxgl.FullscreenControl()); | ||
|
|
||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| 'use strict'; | ||
|
|
||
| const DOM = require('../../util/dom'); | ||
| const util = require('../../util/util'); | ||
| const window = require('../../util/window'); | ||
|
|
||
| /** | ||
| * A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode. | ||
| * | ||
| * @implements {IControl} | ||
| * @example | ||
| * map.addControl(new mapboxgl.FullscreenControl()); | ||
| * @see [View a fullscreen map](https://www.mapbox.com/mapbox-gl-js/example/fullscreen/) | ||
| */ | ||
|
|
||
| class FullscreenControl { | ||
|
|
||
| constructor() { | ||
| this._fullscreen = false; | ||
| util.bindAll([ | ||
| '_onClickFullscreen', | ||
| '_changeIcon' | ||
| ], this); | ||
| if ('onfullscreenchange' in document) { | ||
| this._fullscreenchange = 'fullscreenchange'; | ||
| } else if ('onmozfullscreenchange' in document) { | ||
| this._fullscreenchange = 'mozfullscreenchange'; | ||
| } else if ('onwebkitfullscreenchange' in document) { | ||
| this._fullscreenchange = 'webkitfullscreenchange'; | ||
| } else if ('onmsfullscreenchange' in document) { | ||
| this._fullscreenchange = 'MSFullscreenChange'; | ||
| } | ||
| } | ||
|
|
||
| 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"); | ||
| this._fullscreenButton.addEventListener('click', this._onClickFullscreen); | ||
| this._mapContainer = map.getContainer(); | ||
| window.document.addEventListener(this._fullscreenchange, this._changeIcon); | ||
| return container; | ||
| } | ||
|
|
||
| onRemove() { | ||
| this._container.parentNode.removeChild(this._container); | ||
| this._map = null; | ||
| window.document.removeEventListener(this._fullscreenchange, this._changeIcon); | ||
| } | ||
|
|
||
| _isFullscreen() { | ||
| return this._fullscreen; | ||
| } | ||
|
|
||
| _changeIcon(e) { | ||
| if (e.target === this._mapContainer) { | ||
| this._fullscreen = !this._fullscreen; | ||
| const className = 'mapboxgl-ctrl'; | ||
| this._fullscreenButton.classList.toggle(`${className}-shrink`); | ||
| this._fullscreenButton.classList.toggle(`${className}-fullscreen`); | ||
| } | ||
| } | ||
|
|
||
| _onClickFullscreen() { | ||
| if (this._isFullscreen()) { | ||
| if (window.document.exitFullscreen) { | ||
| window.document.exitFullscreen(); | ||
| } else if (window.document.mozCancelFullScreen) { | ||
| window.document.mozCancelFullScreen(); | ||
| } else if (window.document.msExitFullscreen) { | ||
| window.document.msExitFullscreen(); | ||
| } else if (window.document.webkitCancelFullScreen) { | ||
| window.document.webkitCancelFullScreen(); | ||
| } | ||
| } else if (this._mapContainer.requestFullscreen) { | ||
| this._mapContainer.requestFullscreen(); | ||
| } else if (this._mapContainer.mozRequestFullScreen) { | ||
| this._mapContainer.mozRequestFullScreen(); | ||
| } else if (this._mapContainer.msRequestFullscreen) { | ||
| this._mapContainer.msRequestFullscreen(); | ||
| } else if (this._mapContainer.webkitRequestFullscreen) { | ||
| this._mapContainer.webkitRequestFullscreen(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| module.exports = FullscreenControl; |