https://www.geoplaner.com/zzco/Control.FullScreen.js

1(function () {
2
3L.Control.FullScreen = L.Control.extend({
4	options: {
5		position: 'topleft',
6		title: 'Full Screen',
7		titleCancel: 'Exit Full Screen',
8		forceSeparateButton: false,
9		forcePseudoFullscreen: false,
10		fullscreenElement: false
11	},
12	
13	onAdd: function (map) {
14		var className = 'leaflet-control-zoom-fullscreen', container, content = '';
15		
16		if (map.zoomControl && !this.options.forceSeparateButton) {
17			container = map.zoomControl._container;
18		} else {
19			container = L.DomUtil.create('div', 'leaflet-bar');
20		}
21		
22		if (this.options.content) {
23			content = this.options.content;
24		} else {
25			className += ' fullscreen-icon';
26		}
27
28		this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
29		this._map.fullscreenControl = this;
30
31		this._map.on('enterFullscreen exitFullscreen', this._toggleTitle, this);
32
33		return container;
34	},
35	
36	onRemove: function (map) {
37		L.DomEvent
38			.off(this.link, 'click', L.DomEvent.stopPropagation)
39			.off(this.link, 'click', L.DomEvent.preventDefault)
40			.off(this.link, 'click', this.toggleFullScreen, this);
41		
42		L.DomEvent
43			.off(this._container, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
44			.off(this._container, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
45			.off(this._container, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, this);
46		
47		L.DomEvent
48			.off(document, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
49			.off(document, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
50			.off(document, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, this);
51	},
52	
53	_createButton: function (title, className, content, container, fn, context) {
54		this.link = L.DomUtil.create('a', className, container);
55		this.link.href = '#';
56		this.link.title = title;
57		this.link.innerHTML = content;
58
59		this.link.setAttribute('role', 'button');
60		this.link.setAttribute('aria-label', title);
61
62		L.DomEvent
63			.on(this.link, 'click', L.DomEvent.stopPropagation)
64			.on(this.link, 'click', L.DomEvent.preventDefault)
65			.on(this.link, 'click', fn, context);
66		
67		L.DomEvent
68			.on(container, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
69			.on(container, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
70			.on(container, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, context);
71		
72		L.DomEvent
73			.on(document, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
74			.on(document, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
75			.on(document, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, context);
76
77		return this.link;
78	},
79	
80	toggleFullScreen: function () {
81		var map = this._map;
82		map._exitFired = false;
83		if (map._isFullscreen) {
84			if (fullScreenApi.supportsFullScreen && !this.options.forcePseudoFullscreen) {
85				fullScreenApi.cancelFullScreen();
86			} else {
87				L.DomUtil.removeClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
88			}
89			map.fire('exitFullscreen');
90			map._exitFired = true;
91			map._isFullscreen = false;
92		}
93		else {
94			if (fullScreenApi.supportsFullScreen && !this.options.forcePseudoFullscreen) {
95				fullScreenApi.requestFullScreen(this.options.fullscreenElement ? this.options.fullscreenElement : map._container);
96			} else {
97				L.DomUtil.addClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
98			}
99			map.fire('enterFullscreen');
100			map._isFullscreen = true;
101		}
102	},
103	
104	_toggleTitle: function () {
105		this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel;
106	},
107	
108	_handleFullscreenChange: function () {
109		var map = this._map;
110		map.invalidateSize();
111		if (!fullScreenApi.isFullScreen() && !map._exitFired) {
112			map.fire('exitFullscreen');
113			map._exitFired = true;
114			map._isFullscreen = false;
115		}
116	}
117});
118
119L.Map.include({
120	toggleFullscreen: function () {
121		this.fullscreenControl.toggleFullScreen();
122	}
123});
124
125L.Map.addInitHook(function () {
126	if (this.options.fullscreenControl) {
127		this.addControl(L.control.fullscreen(this.options.fullscreenControlOptions));
128	}
129});
130
131L.control.fullscreen = function (options) {
132	return new L.Control.FullScreen(options);
133};
134
135/* 
136Native FullScreen JavaScript API
137-------------
138Assumes Mozilla naming conventions instead of W3C for now
139
140source : http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
141
142*/
143
144	var 
145		fullScreenApi = { 
146			supportsFullScreen: false,
147			isFullScreen: function () { return false; }, 
148			requestFullScreen: function () {}, 
149			cancelFullScreen: function () {},
150			fullScreenEventName: '',
151			prefix: ''
152		},
153		browserPrefixes = 'webkit moz o ms khtml'.split(' ');
154	
155	// check for native support
156	if (typeof document.exitFullscreen !== 'undefined') {
157		fullScreenApi.supportsFullScreen = true;
158	} else {
159		// check for fullscreen support by vendor prefix
160		for (var i = 0, il = browserPrefixes.length; i < il; i++) {
161			fullScreenApi.prefix = browserPrefixes[i];
162			if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] !== 'undefined') {
163				fullScreenApi.supportsFullScreen = true;
164				break;
165			}
166		}
167		if (typeof document['msExitFullscreen'] !== 'undefined') {
168			fullScreenApi.prefix = 'ms';
169			fullScreenApi.supportsFullScreen = true;
170		}
171	}
172	
173	// update methods to do something useful
174	if (fullScreenApi.supportsFullScreen) {
175		if (fullScreenApi.prefix === 'ms') {
176			fullScreenApi.fullScreenEventName = 'MSFullscreenChange';
177		} else {
178			fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
179		}
180		fullScreenApi.isFullScreen = function () {
181			switch (this.prefix) {
182				case '':
183					return document.fullscreen;
184				case 'webkit':
185					return document.webkitIsFullScreen;
186				case 'ms':
187					return document.msFullscreenElement;
188				default:
189					return document[this.prefix + 'FullScreen'];
190			}
191		};
192		fullScreenApi.requestFullScreen = function (el) {
193			switch (this.prefix) {
194				case '':
195					return el.requestFullscreen();
196				case 'ms':
197					return el.msRequestFullscreen();
198				default:
199					return el[this.prefix + 'RequestFullScreen']();
200			}
201		};
202		fullScreenApi.cancelFullScreen = function () {
203			switch (this.prefix) {
204				case '':
205					return document.exitFullscreen();
206				case 'ms':
207					return document.msExitFullscreen();
208				default:
209					return document[this.prefix + 'CancelFullScreen']();
210			}
211		};
212	}
213
214	// jQuery plugin
215	if (typeof jQuery !== 'undefined') {
216		jQuery.fn.requestFullScreen = function () {
217			return this.each(function () {
218				var el = jQuery(this);
219				if (fullScreenApi.supportsFullScreen) {
220					fullScreenApi.requestFullScreen(el);
221				}
222			});
223		};
224	}
225
226	// export api
227	window.fullScreenApi = fullScreenApi;
228})();