wp-gpx-maps/Control.FullScreen.js

203 lines
6.0 KiB
JavaScript
Raw Normal View History

2020-05-10 14:06:09 +00:00
(function () {
L.Control.FullScreen = L.Control.extend({
options: {
position: 'topleft',
title: 'Full Screen',
titleCancel: 'Exit Full Screen',
forceSeparateButton: false,
forcePseudoFullscreen: false,
fullscreenElement: false
},
onAdd: function (map) {
var className = 'leaflet-control-zoom-fullscreen', container, content = '';
if (map.zoomControl && !this.options.forceSeparateButton) {
container = map.zoomControl._container;
} else {
container = L.DomUtil.create('div', 'leaflet-bar');
}
if (this.options.content) {
content = this.options.content;
} else {
className += ' fullscreen-icon';
}
this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
this._map.on('enterFullscreen exitFullscreen', this._toggleTitle, this);
return container;
},
_createButton: function (title, className, content, container, fn, context) {
this.link = L.DomUtil.create('a', className, container);
this.link.href = '#';
this.link.title = title;
this.link.innerHTML = content;
L.DomEvent
.addListener(this.link, 'click', L.DomEvent.stopPropagation)
.addListener(this.link, 'click', L.DomEvent.preventDefault)
.addListener(this.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._handleFullscreenChange, context);
L.DomEvent
.addListener(document, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
.addListener(document, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
.addListener(document, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, context);
return this.link;
},
toggleFullScreen: function () {
var map = this._map;
map._exitFired = false;
if (map._isFullscreen) {
if (fullScreenApi.supportsFullScreen && !this.options.forcePseudoFullscreen) {
fullScreenApi.cancelFullScreen();
} else {
L.DomUtil.removeClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
}
map.fire('exitFullscreen');
map._exitFired = true;
map._isFullscreen = false;
}
else {
if (fullScreenApi.supportsFullScreen && !this.options.forcePseudoFullscreen) {
fullScreenApi.requestFullScreen(this.options.fullscreenElement ? this.options.fullscreenElement : map._container);
} else {
L.DomUtil.addClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
}
map.fire('enterFullscreen');
map._isFullscreen = true;
}
},
_toggleTitle: function () {
this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel;
},
_handleFullscreenChange: function () {
var map = this._map;
map.invalidateSize();
if (!fullScreenApi.isFullScreen() && !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;
}
}
if (typeof document['msExitFullscreen'] !== 'undefined') {
fullScreenApi.prefix = 'ms';
fullScreenApi.supportsFullScreen = true;
}
}
// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
if (fullScreenApi.prefix === 'ms') {
fullScreenApi.fullScreenEventName = 'MSFullscreenChange';
} else {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
}
fullScreenApi.isFullScreen = function () {
switch (this.prefix) {
case '':
return document.fullscreen;
case 'webkit':
return document.webkitIsFullScreen;
case 'ms':
return document.msFullscreenElement;
default:
return document[this.prefix + 'FullScreen'];
}
};
fullScreenApi.requestFullScreen = function (el) {
switch (this.prefix) {
case '':
return el.requestFullscreen();
case 'ms':
return el.msRequestFullscreen();
default:
return el[this.prefix + 'RequestFullScreen']();
}
};
fullScreenApi.cancelFullScreen = function () {
switch (this.prefix) {
case '':
return document.exitFullscreen();
case 'ms':
return document.msExitFullscreen();
default:
return 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;
})();