Update Leaflet.Control.FullScreen to version 1.6.0

This commit is contained in:
David Molineus
2020-12-18 10:44:16 +01:00
parent 1baae82984
commit bddadbe22a
7 changed files with 54 additions and 57 deletions

View File

@@ -17,7 +17,7 @@ This package contains following packages:
- [Leaflet.markercluster 1.4.1](https://github.com/Leaflet/Leaflet.markercluster) - [Leaflet.markercluster 1.4.1](https://github.com/Leaflet/Leaflet.markercluster)
- [Leaflet-omnivore 0.3.4](https://github.com/mapbox/leaflet-omnivore) - [Leaflet-omnivore 0.3.4](https://github.com/mapbox/leaflet-omnivore)
- [Leaflet.loading 0.1.24](https://github.com/ebrelsford/Leaflet.loading) - [Leaflet.loading 0.1.24](https://github.com/ebrelsford/Leaflet.loading)
- [Leaflet.Control.FullScreen 1.4.5](https://github.com/brunob/leaflet.fullscreen) - [Leaflet.Control.FullScreen 1.6.0](https://github.com/brunob/leaflet.fullscreen)
- [Leaflet Control Geocoder 1.13.0](https://github.com/perliedman/leaflet-control-geocoder) - [Leaflet Control Geocoder 1.13.0](https://github.com/perliedman/leaflet-control-geocoder)
- [Leaflet.ExtraMarkers 1.0.8](https://github.com/coryasilva/Leaflet.ExtraMarkers) - [Leaflet.ExtraMarkers 1.0.8](https://github.com/coryasilva/Leaflet.ExtraMarkers)
- [leaflet.pm 0.25.0](https://github.com/codeofsumit/leaflet.pm) - [leaflet.pm 0.25.0](https://github.com/codeofsumit/leaflet.pm)

View File

@@ -26,32 +26,53 @@ L.Control.FullScreen = L.Control.extend({
} }
this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this); this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
this._map.fullscreenControl = this;
this._map.on('enterFullscreen exitFullscreen', this._toggleTitle, this); this._map.on('enterFullscreen exitFullscreen', this._toggleTitle, this);
return container; return container;
}, },
onRemove: function (map) {
L.DomEvent
.off(this.link, 'click', L.DomEvent.stopPropagation)
.off(this.link, 'click', L.DomEvent.preventDefault)
.off(this.link, 'click', this.toggleFullScreen, this);
L.DomEvent
.off(this._container, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
.off(this._container, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
.off(this._container, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, this);
L.DomEvent
.off(document, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
.off(document, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
.off(document, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, this);
},
_createButton: function (title, className, content, container, fn, context) { _createButton: function (title, className, content, container, fn, context) {
this.link = L.DomUtil.create('a', className, container); this.link = L.DomUtil.create('a', className, container);
this.link.href = '#'; this.link.href = '#';
this.link.title = title; this.link.title = title;
this.link.innerHTML = content; this.link.innerHTML = content;
this.link.setAttribute('role', 'button');
this.link.setAttribute('aria-label', title);
L.DomEvent L.DomEvent
.addListener(this.link, 'click', L.DomEvent.stopPropagation) .on(this.link, 'click', L.DomEvent.stopPropagation)
.addListener(this.link, 'click', L.DomEvent.preventDefault) .on(this.link, 'click', L.DomEvent.preventDefault)
.addListener(this.link, 'click', fn, context); .on(this.link, 'click', fn, context);
L.DomEvent L.DomEvent
.addListener(container, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation) .on(container, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
.addListener(container, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault) .on(container, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
.addListener(container, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, context); .on(container, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, context);
L.DomEvent L.DomEvent
.addListener(document, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation) .on(document, fullScreenApi.fullScreenEventName, L.DomEvent.stopPropagation)
.addListener(document, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault) .on(document, fullScreenApi.fullScreenEventName, L.DomEvent.preventDefault)
.addListener(document, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, context); .on(document, fullScreenApi.fullScreenEventName, this._handleFullscreenChange, context);
return this.link; return this.link;
}, },
@@ -95,10 +116,15 @@ L.Control.FullScreen = L.Control.extend({
} }
}); });
L.Map.include({
toggleFullscreen: function () {
this.fullscreenControl.toggleFullScreen();
}
});
L.Map.addInitHook(function () { L.Map.addInitHook(function () {
if (this.options.fullscreenControl) { if (this.options.fullscreenControl) {
this.fullscreenControl = L.control.fullscreen(this.options.fullscreenControlOptions); this.addControl(L.control.fullscreen(this.options.fullscreenControlOptions));
this.addControl(this.fullscreenControl);
} }
}); });

View File

@@ -61,6 +61,9 @@ map.on('enterFullscreen', function(){
map.on('exitFullscreen', function(){ map.on('exitFullscreen', function(){
console.log('exited fullscreen'); console.log('exited fullscreen');
}); });
// you can also toggle fullscreen from map object
map.toggleFullScreen();
``` ```
Where ? Where ?

View File

@@ -1,33 +0,0 @@
{
"name": "leaflet.fullscreen",
"version": "1.4.5",
"homepage": "https://github.com/brunob/leaflet.fullscreen",
"license": "MIT",
"authors": [
"brunob <brunobergot@gmail.com>"
],
"description": "Leaflet.Control.FullScreen for Leaflet",
"main": [
"Control.FullScreen.js",
"Control.FullScreen.css",
"icon-fullscreen.png",
"icon-fullscreen-2x.png"
],
"devDependencies": {
"eslint": "2.3.0"
},
"keywords": [
"leaflet",
"plugins",
"maps",
"fullscreen"
],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"index.html"
]
}

View File

@@ -3,18 +3,19 @@
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<title>Leaflet.Control.FullScreen Demo</title> <title>Leaflet.Control.FullScreen Demo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<style type="text/css"> <style type="text/css">
#map { width: 700px; height: 433px; } #map { width: 700px; height: 433px; }
.fullscreen-icon { background-image: url(icon-fullscreen.png); } .fullscreen-icon { background-image: url(icon-fullscreen.png); }
.leaflet-retina .fullscreen-icon { background-image: url(icon-fullscreen-2x.png); background-size: 26px 26px; }
/* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */ /* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
#map:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; } .leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
#map:-ms-fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; } .leaflet-container:-ms-fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
#map:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; } .leaflet-container:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
#map:fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; } .leaflet-container:fullscreen { 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; } .leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }
</style> </style>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="Control.FullScreen.js"></script> <script src="Control.FullScreen.js"></script>
</head> </head>
<body> <body>
@@ -22,13 +23,13 @@
<div id="map"></div> <div id="map"></div>
<script> <script>
var base = new L.TileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { var base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
subdomains: 'abcd', subdomains: 'abcd',
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
}); });
var map = new L.Map('map', { var map = L.map('map', {
layers: [base], layers: [base],
center: new L.LatLng(48.5, -4.5), center: new L.LatLng(48.5, -4.5),
zoom: 5, zoom: 5,

View File

@@ -1,6 +1,6 @@
{ {
"name": "leaflet.fullscreen", "name": "leaflet.fullscreen",
"version": "1.4.5", "version": "1.6.0",
"description": "Simple plugin for Leaflet that adds fullscreen button to your maps.", "description": "Simple plugin for Leaflet that adds fullscreen button to your maps.",
"main": "Control.FullScreen.js", "main": "Control.FullScreen.js",
"scripts": { "scripts": {
@@ -17,7 +17,7 @@
"fullscreen" "fullscreen"
], ],
"devDependencies": { "devDependencies": {
"eslint": "2.3.0" "eslint": "^5.4.0"
}, },
"author": "b_b", "author": "b_b",
"license": "MIT License", "license": "MIT License",

View File

@@ -65,7 +65,7 @@ $GLOBALS['LEAFLET_LIBRARIES']['leaflet-loading'] = array
$GLOBALS['LEAFLET_LIBRARIES']['leaflet-fullscreen'] = array $GLOBALS['LEAFLET_LIBRARIES']['leaflet-fullscreen'] = array
( (
'name' => 'Leaflet.Control.FullScreen', 'name' => 'Leaflet.Control.FullScreen',
'version' => '1.4.5', 'version' => '1.6.0',
'license' => '<a href="https://github.com/brunob/leaflet.fullscreen/blob/master/LICENSE" target="_blank">MIT</a>', 'license' => '<a href="https://github.com/brunob/leaflet.fullscreen/blob/master/LICENSE" target="_blank">MIT</a>',
'homepage' => 'https://github.com/brunob/leaflet.fullscreen', 'homepage' => 'https://github.com/brunob/leaflet.fullscreen',
'css' => 'assets/leaflet/libs/leaflet-fullscreen/Control.FullScreen.min.css', 'css' => 'assets/leaflet/libs/leaflet-fullscreen/Control.FullScreen.min.css',