2018-12-07 17:59:50 +00:00
|
|
|
(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;
|
|
|
|
})();
|