153 lines
4.9 KiB
JavaScript
Executable File
153 lines
4.9 KiB
JavaScript
Executable File
L.Control.Fullscreen = L.Control.extend({
|
|
options: {
|
|
position: 'topleft',
|
|
title: {
|
|
'false': 'View Fullscreen',
|
|
'true': 'Exit Fullscreen'
|
|
}
|
|
},
|
|
|
|
onAdd: function (map) {
|
|
var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control');
|
|
|
|
this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container);
|
|
this.link.href = '#';
|
|
|
|
this._map = map;
|
|
this._map.on('fullscreenchange', this._toggleTitle, this);
|
|
this._toggleTitle();
|
|
|
|
L.DomEvent.on(this.link, 'click', this._click, this);
|
|
|
|
return container;
|
|
},
|
|
|
|
_click: function (e) {
|
|
L.DomEvent.stopPropagation(e);
|
|
L.DomEvent.preventDefault(e);
|
|
this._map.toggleFullscreen(this.options);
|
|
},
|
|
|
|
_toggleTitle: function() {
|
|
this.link.title = this.options.title[this._map.isFullscreen()];
|
|
}
|
|
});
|
|
|
|
L.Map.include({
|
|
isFullscreen: function () {
|
|
return this._isFullscreen || false;
|
|
},
|
|
|
|
toggleFullscreen: function (options) {
|
|
var container = this.getContainer();
|
|
if (this.isFullscreen()) {
|
|
if (options && options.pseudoFullscreen) {
|
|
this._disablePseudoFullscreen(container);
|
|
} else if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen();
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen();
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen();
|
|
} else {
|
|
this._disablePseudoFullscreen(container);
|
|
}
|
|
} else {
|
|
if (options && options.pseudoFullscreen) {
|
|
this._enablePseudoFullscreen(container);
|
|
} else if (container.requestFullscreen) {
|
|
container.requestFullscreen();
|
|
} else if (container.mozRequestFullScreen) {
|
|
container.mozRequestFullScreen();
|
|
} else if (container.webkitRequestFullscreen) {
|
|
container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
|
} else if (container.msRequestFullscreen) {
|
|
container.msRequestFullscreen();
|
|
} else {
|
|
this._enablePseudoFullscreen(container);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
_enablePseudoFullscreen: function (container) {
|
|
L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen');
|
|
this._setFullscreen(true);
|
|
this.fire('fullscreenchange');
|
|
},
|
|
|
|
_disablePseudoFullscreen: function (container) {
|
|
L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen');
|
|
this._setFullscreen(false);
|
|
this.fire('fullscreenchange');
|
|
},
|
|
|
|
_setFullscreen: function(fullscreen) {
|
|
this._isFullscreen = fullscreen;
|
|
var container = this.getContainer();
|
|
if (fullscreen) {
|
|
L.DomUtil.addClass(container, 'leaflet-fullscreen-on');
|
|
} else {
|
|
L.DomUtil.removeClass(container, 'leaflet-fullscreen-on');
|
|
}
|
|
this.invalidateSize();
|
|
},
|
|
|
|
_onFullscreenChange: function (e) {
|
|
var fullscreenElement =
|
|
document.fullscreenElement ||
|
|
document.mozFullScreenElement ||
|
|
document.webkitFullscreenElement ||
|
|
document.msFullscreenElement;
|
|
|
|
if (fullscreenElement === this.getContainer() && !this._isFullscreen) {
|
|
this._setFullscreen(true);
|
|
this.fire('fullscreenchange');
|
|
} else if (fullscreenElement !== this.getContainer() && this._isFullscreen) {
|
|
this._setFullscreen(false);
|
|
this.fire('fullscreenchange');
|
|
}
|
|
}
|
|
});
|
|
|
|
L.Map.mergeOptions({
|
|
fullscreenControl: false
|
|
});
|
|
|
|
L.Map.addInitHook(function () {
|
|
if (this.options.fullscreenControl) {
|
|
this.fullscreenControl = new L.Control.Fullscreen(this.options.fullscreenControl);
|
|
this.addControl(this.fullscreenControl);
|
|
}
|
|
|
|
var fullscreenchange;
|
|
|
|
if ('onfullscreenchange' in document) {
|
|
fullscreenchange = 'fullscreenchange';
|
|
} else if ('onmozfullscreenchange' in document) {
|
|
fullscreenchange = 'mozfullscreenchange';
|
|
} else if ('onwebkitfullscreenchange' in document) {
|
|
fullscreenchange = 'webkitfullscreenchange';
|
|
} else if ('onmsfullscreenchange' in document) {
|
|
fullscreenchange = 'MSFullscreenChange';
|
|
}
|
|
|
|
if (fullscreenchange) {
|
|
var onFullscreenChange = L.bind(this._onFullscreenChange, this);
|
|
|
|
this.whenReady(function () {
|
|
L.DomEvent.on(document, fullscreenchange, onFullscreenChange);
|
|
});
|
|
|
|
this.on('unload', function () {
|
|
L.DomEvent.off(document, fullscreenchange, onFullscreenChange);
|
|
});
|
|
}
|
|
});
|
|
|
|
L.control.fullscreen = function (options) {
|
|
return new L.Control.Fullscreen(options);
|
|
};
|