Add fullscreen control libs.

This commit is contained in:
David Molineus
2015-01-20 16:03:59 +01:00
parent f21fccd36f
commit 1535698b35
12 changed files with 377 additions and 1 deletions

View File

@@ -14,7 +14,7 @@ This package contains following packages:
- [leaflet 0.7.3](http://leafletjs.com) - [leaflet 0.7.3](http://leafletjs.com)
- [Leaflet-providers 1.0.12](http://leaflet-extras.github.io/leaflet-providers) - [Leaflet-providers 1.0.12](http://leaflet-extras.github.io/leaflet-providers)
- [leaflet-ajax 1.1.0](https://github.com/calvinmetcalf/leaflet-ajax) - [Leaflet-omnivore 0.3.2](https://github.com/mapbox/leaflet-omnivore)
- [Leaflet.loading 0.1.13](https://github.com/ebrelsford/Leaflet.loading) - [Leaflet.loading 0.1.13](https://github.com/ebrelsford/Leaflet.loading)
- [Leaflet Control Geocoder 1.0.0](https://github.com/perliedman/leaflet-control-geocoder) - [Leaflet Control Geocoder 1.0.0](https://github.com/perliedman/leaflet-control-geocoder)
- [spin.js 2.0.2](http://fgnass.github.io/spin.js) - [spin.js 2.0.2](http://fgnass.github.io/spin.js)

View File

@@ -0,0 +1,4 @@
.leaflet-control-zoom-fullscreen { background-image: url(icon-fullscreen.png); }
.leaflet-retina .leaflet-control-zoom-fullscreen { background-image: url(icon-fullscreen-2x.png); background-size: 26px 26px; }
.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; }

View File

@@ -0,0 +1,164 @@
(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;
})();

View File

@@ -0,0 +1,22 @@
Copyright (c) 2013, Bruno Bergot
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are
permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of
conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list
of conditions and the following disclaimer in the documentation and/or other materials
provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View File

@@ -0,0 +1,68 @@
Leaflet.Control.FullScreen
============
What ?
------
Simple plugin for Leaflet that adds fullscreen button to your maps.
Inspired by http://elidupuis.github.com/leaflet.zoomfs/
Use the native javascript fullscreen API http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
Released under the MIT License http://opensource.org/licenses/mit-license.php
How ?
------
Include Control.FullScreen.js and Control.FullScreen.css in your page:
``` html
<link rel="stylesheet" href="Control.FullScreen.css" />
<script src="Control.FullScreen.js"></script>
```
Add the fullscreen control to the map:
``` js
var map = new L.Map('map', {
fullscreenControl: true,
fullscreenControlOptions: {
position: 'topleft'
}
});
```
If your map have a zoomControl the fullscreen button will be added at the bottom of this one.
If your map doesn't have a zoomContron the fullscreen button will be added to topleft corner of the map (same as the zoomcontrol).
__Events and options__:
``` js
// create a fullscreen button and add it to the map
L.control.fullscreen({
position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, defaut topleft
title: 'Show me the fullscreen !', // change the title of the button, default Full Screen
forceSeparateButton: true, // force seperate button to detach from zoom buttons, default false
forcePseudoFullscreen: true // force use of pseudo full screen even if full screen API is available, default false
}).addTo(map);
// events are fired when entering or exiting fullscreen.
map.on('enterFullscreen', function(){
console.log('entered fullscreen');
});
map.on('exitFullscreen', function(){
console.log('exited fullscreen');
});
```
Where ?
------
Source code : https://github.com/brunob/leaflet.fullscreen
Downloads : https://github.com/brunob/leaflet.fullscreen/releases
Demo : http://brunob.github.com/leaflet.fullscreen/

View File

@@ -0,0 +1,30 @@
{
"name": "leaflet.fullscreen",
"version": "1.1.4",
"homepage": "https://github.com/brunob/leaflet.fullscreen",
"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"
],
"keywords": [
"leaflet",
"plugins",
"maps",
"fullscreen"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"index.html"
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 B

View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Leaflet.Control.FullScreen Demo</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<style type="text/css">
#map { width: 700px; height: 433px; }
.leaflet-control-zoom-fullscreen { background-image: url(icon-fullscreen.png); }
/* on 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; }
#map:-moz-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
#map: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; }
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="Control.FullScreen.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var base = new L.TileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
});
var map = new L.Map('map', {
layers: [base],
center: new L.LatLng(48.5, -4.5),
zoom: 5,
fullscreenControl: true,
fullscreenControlOptions: { // optional
title:"Show me the fullscreen !"
}
});
// detect fullscreen toggling
map.on('enterFullscreen', function(){
if(window.console) window.console.log('enterFullscreen');
});
map.on('exitFullscreen', function(){
if(window.console) window.console.log('exitFullscreen');
});
</script>
</body>
</html>

View File

@@ -0,0 +1,25 @@
{
"name": "leaflet.fullscreen",
"version": "1.1.4",
"description": "Simple plugin for Leaflet that adds fullscreen button to your maps.",
"main": "Control.FullScreen.js",
"scripts": {
"test": "jshint Control.FullScreen.js"
},
"repository": {
"type": "git",
"url": "git://github.com/brunob/leaflet.fullscreen.git"
},
"keywords": [
"leaflet",
"plugins",
"maps",
"fullscreen"
],
"devDependencies": {
"jshint": "2.5.0"
},
"author": "b_b",
"license": "MIT License",
"readmeFilename": "README.md"
}

View File

@@ -24,6 +24,11 @@ var paths = [
{ {
dest: 'assets/leaflet', dest: 'assets/leaflet',
css: 'leaflet.css' css: 'leaflet.css'
},
{
dest: 'assets/leaflet-fullscreen',
css: 'Control.FullScreen.min.css',
js: 'Control.FullScreen.min.js'
} }
]; ];

View File

@@ -52,6 +52,16 @@ $GLOBALS['LEAFLET_LIBRARIES']['leaflet-loading'] = array
'javascript' => 'assets/leaflet/libs/leaflet-loading/Control.Loading.min.js' 'javascript' => 'assets/leaflet/libs/leaflet-loading/Control.Loading.min.js'
); );
$GLOBALS['LEAFLET_LIBRARIES']['leaflet-fullscreen'] = array
(
'name' => 'Leaflet.Control.FullScreen',
'version' => '1.1.4',
'license' => '<a href="https://github.com/brunob/leaflet.fullscreen/blob/master/LICENSE" target="_blank">MIT</a>',
'homepage' => 'https://github.com/brunob/leaflet.fullscreen',
'css' => 'assets/leaflet/libs/leaflet-fullscreen/Control.FullScreen.min.css',
'javascript' => 'assets/leaflet/libs/leaflet-fullscreen/Control.FullScreen.min.js'
);
$GLOBALS['LEAFLET_LIBRARIES']['leaflet-control-geocode'] = array $GLOBALS['LEAFLET_LIBRARIES']['leaflet-control-geocode'] = array
( (
'name' => 'Leaflet Control Geocoder', 'name' => 'Leaflet Control Geocoder',