mirror of
https://github.com/wahyd4/cdnjs.git
synced 2026-08-09 04:46:00 +10:00
Add leaflet fullscreen control
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
.leaflet-control-zoom-fullscreen { background-image: url(icon-fullscreen.png); }
|
||||
.leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
|
||||
.leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }
|
||||
@@ -0,0 +1,165 @@
|
||||
L.Control.FullScreen = L.Control.extend({
|
||||
options: {
|
||||
position: 'topleft',
|
||||
title: 'Full Screen',
|
||||
forceSeparateButton: 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.toogleFullScreen, map);
|
||||
|
||||
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;
|
||||
},
|
||||
|
||||
toogleFullScreen: function () {
|
||||
this._exitFired = false;
|
||||
var container = this._container;
|
||||
if (this._isFullscreen) {
|
||||
if (fullScreenApi.supportsFullScreen) {
|
||||
fullScreenApi.cancelFullScreen(container);
|
||||
} else {
|
||||
L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen');
|
||||
}
|
||||
this.invalidateSize();
|
||||
this.fire('exitFullscreen');
|
||||
this._exitFired = true;
|
||||
this._isFullscreen = false;
|
||||
}
|
||||
else {
|
||||
if (fullScreenApi.supportsFullScreen) {
|
||||
fullScreenApi.requestFullScreen(container);
|
||||
} else {
|
||||
L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen');
|
||||
}
|
||||
this.invalidateSize();
|
||||
this.fire('enterFullscreen');
|
||||
this._isFullscreen = true;
|
||||
}
|
||||
},
|
||||
|
||||
_handleEscKey: function () {
|
||||
if (!fullScreenApi.isFullScreen(this) && !this._exitFired) {
|
||||
this.fire('exitFullscreen');
|
||||
this._exitFired = true;
|
||||
this._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/
|
||||
|
||||
*/
|
||||
|
||||
(function() {
|
||||
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'](Element.ALLOW_KEYBOARD_INPUT);
|
||||
}
|
||||
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;
|
||||
})();
|
||||
@@ -0,0 +1 @@
|
||||
L.Control.FullScreen=L.Control.extend({options:{position:"topleft",title:"Full Screen",forceSeparateButton: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.toogleFullScreen,map);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},toogleFullScreen:function(){this._exitFired=false;var container=this._container;if(this._isFullscreen){if(fullScreenApi.supportsFullScreen){fullScreenApi.cancelFullScreen(container)}else{L.DomUtil.removeClass(container,"leaflet-pseudo-fullscreen")}this.invalidateSize();this.fire("exitFullscreen");this._exitFired=true;this._isFullscreen=false}else{if(fullScreenApi.supportsFullScreen){fullScreenApi.requestFullScreen(container)}else{L.DomUtil.addClass(container,"leaflet-pseudo-fullscreen")}this.invalidateSize();this.fire("enterFullscreen");this._isFullscreen=true}},_handleEscKey:function(){if(!fullScreenApi.isFullScreen(this)&&!this._exitFired){this.fire("exitFullscreen");this._exitFired=true;this._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)};(function(){var fullScreenApi={supportsFullScreen:false,isFullScreen:function(){return false},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",prefix:""},browserPrefixes="webkit moz o ms khtml".split(" ");if(typeof document.exitFullscreen!="undefined"){fullScreenApi.supportsFullScreen=true}else{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(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"](Element.ALLOW_KEYBOARD_INPUT)};fullScreenApi.cancelFullScreen=function(el){return this.prefix===""?document.exitFullscreen():document[this.prefix+"CancelFullScreen"]()}}if(typeof jQuery!="undefined"){jQuery.fn.requestFullScreen=function(){return this.each(function(){var el=jQuery(this);if(fullScreenApi.supportsFullScreen){fullScreenApi.requestFullScreen(el)}})}}window.fullScreenApi=fullScreenApi})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 389 B |
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "leaflet.fullscreen",
|
||||
"filename": "Control.FullScreen.min.js",
|
||||
"version": "1.0.0",
|
||||
"homepage": "https://github.com/brunob/leaflet.fullscreen",
|
||||
"description": "Leaflet.Control.FullScreen for Leaflet http://brunob.github.com/leaflet.fullscreen/",
|
||||
"license": "MIT"
|
||||
}
|
||||
Reference in New Issue
Block a user