(function() { L.Control.FullScreen = L.Control.extend({ options: { position: 'topleft', title: 'Full Screen', forceSeparateButton: false, forcePseudoFullscreen: false }, onAdd: function (map) { var className = 'leaflet-control-zoom-fullscreen', container; if (map.zoomControl && !this.options.forceSeparateButton) { container = map.zoomControl._container; } else { container = L.DomUtil.create('div', 'leaflet-bar'); } this._createButton(this.options.title, className, container, this.toggleFullScreen, this); return container; }, _createButton: function (title, className, container, fn, context) { var link = L.DomUtil.create('a', className, container); link.href = '#'; link.title = title; L.DomEvent .addListener(link, 'click', L.DomEvent.stopPropagation) .addListener(link, 'click', L.DomEvent.preventDefault) .addListener(link, 'click', fn, context); L.DomEvent .addListener(container, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation) .addListener(container, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault) .addListener(container, fullScreenApi.fullScreenEventName, this._handleEscKey, context); L.DomEvent .addListener(document, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation) .addListener(document, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault) .addListener(document, fullScreenApi.fullScreenEventName, this._handleEscKey, context); return link; }, toggleFullScreen: function () { var map = this._map; map._exitFired = false; if (map._isFullscreen) { if (fullScreenApi.supportsFullScreen && !this.options.forcePseudoFullscreen) { fullScreenApi.cancelFullScreen(map._container); } else { L.DomUtil.removeClass(map._container, 'leaflet-pseudo-fullscreen'); } map.invalidateSize(); map.fire('exitFullscreen'); map._exitFired = true; map._isFullscreen = false; } else { if (fullScreenApi.supportsFullScreen && !this.options.forcePseudoFullscreen) { fullScreenApi.requestFullScreen(map._container); } else { L.DomUtil.addClass(map._container, 'leaflet-pseudo-fullscreen'); } map.invalidateSize(); map.fire('enterFullscreen'); map._isFullscreen = true; } }, _handleEscKey: function () { var map = this._map; if (!fullScreenApi.isFullScreen(map) && !map._exitFired) { map.fire('exitFullscreen'); map._exitFired = true; map._isFullscreen = false; } } }); L.Map.addInitHook(function () { if (this.options.fullscreenControl) { this.fullscreenControl = L.control.fullscreen(this.options.fullscreenControlOptions); this.addControl(this.fullscreenControl); } }); L.control.fullscreen = function (options) { return new L.Control.FullScreen(options); }; /* Native FullScreen JavaScript API ------------- Assumes Mozilla naming conventions instead of W3C for now source : http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ */ var fullScreenApi = { supportsFullScreen: false, isFullScreen: function() { return false; }, requestFullScreen: function() {}, cancelFullScreen: function() {}, fullScreenEventName: '', prefix: '' }, browserPrefixes = 'webkit moz o ms khtml'.split(' '); // check for native support if (typeof document.exitFullscreen !== 'undefined') { fullScreenApi.supportsFullScreen = true; } else { // check for fullscreen support by vendor prefix for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { fullScreenApi.prefix = browserPrefixes[i]; if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] !== 'undefined' ) { fullScreenApi.supportsFullScreen = true; break; } } } // update methods to do something useful if (fullScreenApi.supportsFullScreen) { fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange'; fullScreenApi.isFullScreen = function() { switch (this.prefix) { case '': return document.fullScreen; case 'webkit': return document.webkitIsFullScreen; default: return document[this.prefix + 'FullScreen']; } }; fullScreenApi.requestFullScreen = function(el) { return (this.prefix === '') ? el.requestFullscreen() : el[this.prefix + 'RequestFullScreen'](); }; fullScreenApi.cancelFullScreen = function(el) { return (this.prefix === '') ? document.exitFullscreen() : document[this.prefix + 'CancelFullScreen'](); }; } // jQuery plugin if (typeof jQuery !== 'undefined') { jQuery.fn.requestFullScreen = function() { return this.each(function() { var el = jQuery(this); if (fullScreenApi.supportsFullScreen) { fullScreenApi.requestFullScreen(el); } }); }; } // export api window.fullScreenApi = fullScreenApi; })();