Change mouse scroll sleep feature
This commit is contained in:
parent
11c98ffd90
commit
5c3fb9384f
|
@ -5,8 +5,6 @@
|
||||||
<title>Carte</title>
|
<title>Carte</title>
|
||||||
<link rel="stylesheet" href="leaflet/leaflet.css" />
|
<link rel="stylesheet" href="leaflet/leaflet.css" />
|
||||||
<script src="leaflet/leaflet.js"></script>
|
<script src="leaflet/leaflet.js"></script>
|
||||||
<link rel="stylesheet" href="leaflet-wheelscroll/L.Control.MouseScroll.css" />
|
|
||||||
<script src="leaflet-wheelscroll/L.Control.MouseScroll.js"></script>
|
|
||||||
<link rel="stylesheet" href="leaflet-fullscreen/Control.FullScreen.css" />
|
<link rel="stylesheet" href="leaflet-fullscreen/Control.FullScreen.css" />
|
||||||
<script src="leaflet-fullscreen/Control.FullScreen.js"></script>
|
<script src="leaflet-fullscreen/Control.FullScreen.js"></script>
|
||||||
<script src="leaflet-elevation/d3.v3.min.js" charset="utf-8"></script>
|
<script src="leaflet-elevation/d3.v3.min.js" charset="utf-8"></script>
|
||||||
|
@ -17,6 +15,7 @@
|
||||||
<link rel="stylesheet" href="leaflet-photo/Leaflet.Photo.css" />
|
<link rel="stylesheet" href="leaflet-photo/Leaflet.Photo.css" />
|
||||||
<script src="leaflet-photo/Leaflet.Photo.js"></script>
|
<script src="leaflet-photo/Leaflet.Photo.js"></script>
|
||||||
<script src="leaflet-photo/reqwest.min.js"></script>
|
<script src="leaflet-photo/reqwest.min.js"></script>
|
||||||
|
<script src="leaflet-sleep/Leaflet.Sleep.js"></script>
|
||||||
<script src="leaflet-gpx/gpx.js"></script>
|
<script src="leaflet-gpx/gpx.js"></script>
|
||||||
<style media="screen" type="text/css">
|
<style media="screen" type="text/css">
|
||||||
* { margin: 0; padding: 0; }
|
* { margin: 0; padding: 0; }
|
||||||
|
@ -61,15 +60,14 @@ var map = L.map('map', {
|
||||||
<?php if (!$_GET['scrollwheel']) echo "scrollWheelZoom: false,"; ?>
|
<?php if (!$_GET['scrollwheel']) echo "scrollWheelZoom: false,"; ?>
|
||||||
fullscreenControl: true, // Fullscreen button
|
fullscreenControl: true, // Fullscreen button
|
||||||
attributionControl: false,
|
attributionControl: false,
|
||||||
|
sleepNote: false,
|
||||||
|
sleepOpacity: .7,
|
||||||
fullscreenControlOptions: {
|
fullscreenControlOptions: {
|
||||||
position: 'topleft'
|
position: 'topleft'
|
||||||
}}).setView([47, 2], 6); // Hole france
|
}}).setView([47, 2], 6); // Hole france
|
||||||
|
|
||||||
var attributionControl = map.addControl(new L.control.attribution({position: 'topright'}));
|
var attributionControl = map.addControl(new L.control.attribution({position: 'topright'}));
|
||||||
|
|
||||||
// Mouse Scroll API
|
|
||||||
map.addControl(new L.Control.MouseScroll());
|
|
||||||
|
|
||||||
// Base layers
|
// Base layers
|
||||||
var baseLayers = {
|
var baseLayers = {
|
||||||
"OSM France": osmfr,
|
"OSM France": osmfr,
|
||||||
|
|
|
@ -0,0 +1,240 @@
|
||||||
|
/*
|
||||||
|
* Leaflet.Sleep
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Default Button (touch devices only)
|
||||||
|
*/
|
||||||
|
|
||||||
|
L.Control.SleepMapControl = L.Control.extend({
|
||||||
|
|
||||||
|
initialize: function(opts){
|
||||||
|
L.setOptions(this,opts);
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
position: 'topright',
|
||||||
|
prompt: 'disable map',
|
||||||
|
styles: {
|
||||||
|
'backgroundColor': 'white',
|
||||||
|
'padding': '5px',
|
||||||
|
'border': '2px solid gray'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
buildContainer: function(){
|
||||||
|
var self = this;
|
||||||
|
var container = L.DomUtil.create('p', 'sleep-button');
|
||||||
|
var boundEvent = this._nonBoundEvent.bind(this);
|
||||||
|
container.appendChild( document.createTextNode( this.options.prompt ));
|
||||||
|
L.DomEvent.addListener(container, 'click', boundEvent);
|
||||||
|
L.DomEvent.addListener(container, 'touchstart', boundEvent);
|
||||||
|
|
||||||
|
Object.keys(this.options.styles).map(function(key) {
|
||||||
|
container.style[key] = self.options.styles[key];
|
||||||
|
});
|
||||||
|
|
||||||
|
return (this._container = container);
|
||||||
|
},
|
||||||
|
|
||||||
|
onAdd: function () {
|
||||||
|
return this._container || this.buildContainer();
|
||||||
|
},
|
||||||
|
|
||||||
|
_nonBoundEvent: function(e) {
|
||||||
|
L.DomEvent.stop(e);
|
||||||
|
if (this._map) this._map.sleep._sleepMap();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
L.Control.sleepMapControl = function(){
|
||||||
|
return new L.Control.SleepMapControl();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* The Sleep Handler
|
||||||
|
*/
|
||||||
|
|
||||||
|
L.Map.mergeOptions({
|
||||||
|
sleep: true,
|
||||||
|
sleepTime: 750,
|
||||||
|
wakeTime: 750,
|
||||||
|
wakeMessageTouch: 'Touch to Wake',
|
||||||
|
sleepNote: true,
|
||||||
|
hoverToWake: true,
|
||||||
|
sleepOpacity:.7,
|
||||||
|
sleepButton: L.Control.sleepMapControl
|
||||||
|
});
|
||||||
|
|
||||||
|
L.Map.Sleep = L.Handler.extend({
|
||||||
|
|
||||||
|
addHooks: function () {
|
||||||
|
var self = this;
|
||||||
|
this.sleepNote = L.DomUtil.create('p', 'sleep-note', this._map._container);
|
||||||
|
this._enterTimeout = null;
|
||||||
|
this._exitTimeout = null;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* If the device has only a touchscreen we will never get
|
||||||
|
* a mouseout event, so we add an extra button to put the map
|
||||||
|
* back to sleep manually.
|
||||||
|
*
|
||||||
|
* a custom control/button can be provided by the user
|
||||||
|
* with the map's `sleepButton` option
|
||||||
|
*/
|
||||||
|
this._sleepButton = this._map.options.sleepButton();
|
||||||
|
|
||||||
|
if (this._map.tap) {
|
||||||
|
this._map.addControl(this._sleepButton);
|
||||||
|
}
|
||||||
|
|
||||||
|
var mapStyle = this._map._container.style;
|
||||||
|
mapStyle.WebkitTransition += 'opacity .5s';
|
||||||
|
mapStyle.MozTransition += 'opacity .5s';
|
||||||
|
|
||||||
|
this._setSleepNoteStyle();
|
||||||
|
this._sleepMap();
|
||||||
|
},
|
||||||
|
|
||||||
|
removeHooks: function () {
|
||||||
|
if (!this._map.scrollWheelZoom.enabled()){
|
||||||
|
this._map.scrollWheelZoom.enable();
|
||||||
|
}
|
||||||
|
if (this._map.tap && !this._map.tap.enabled()) {
|
||||||
|
this._map.touchZoom.enable();
|
||||||
|
this._map.dragging.enable();
|
||||||
|
this._map.tap.enable();
|
||||||
|
}
|
||||||
|
L.DomUtil.setOpacity( this._map._container, 1);
|
||||||
|
L.DomUtil.setOpacity( this.sleepNote, 0);
|
||||||
|
this._removeSleepingListeners();
|
||||||
|
this._removeAwakeListeners();
|
||||||
|
},
|
||||||
|
|
||||||
|
_setSleepNoteStyle: function() {
|
||||||
|
var noteString = '';
|
||||||
|
var style = this.sleepNote.style;
|
||||||
|
|
||||||
|
if(this._map.tap) {
|
||||||
|
noteString = this._map.options.wakeMessageTouch;
|
||||||
|
} else if (this._map.options.wakeMessage) {
|
||||||
|
noteString = this._map.options.wakeMessage;
|
||||||
|
} else if (this._map.options.hoverToWake) {
|
||||||
|
noteString = 'click or hover to wake';
|
||||||
|
} else {
|
||||||
|
noteString = 'click to wake';
|
||||||
|
}
|
||||||
|
|
||||||
|
if( this._map.options.sleepNote ){
|
||||||
|
this.sleepNote.appendChild(document.createTextNode( noteString ));
|
||||||
|
style.pointerEvents = 'none';
|
||||||
|
style.maxWidth = '150px';
|
||||||
|
style.transitionDuration = '.2s';
|
||||||
|
style.zIndex = 5000;
|
||||||
|
style.opacity = '.6';
|
||||||
|
style.margin = 'auto';
|
||||||
|
style.textAlign = 'center';
|
||||||
|
style.borderRadius = '4px';
|
||||||
|
style.top = '50%';
|
||||||
|
style.position = 'relative';
|
||||||
|
style.padding = '5px';
|
||||||
|
style.border = 'solid 2px black';
|
||||||
|
style.background = 'white';
|
||||||
|
|
||||||
|
if(this._map.options.sleepNoteStyle) {
|
||||||
|
var noteStyleOverrides = this._map.options.sleepNoteStyle;
|
||||||
|
Object.keys(noteStyleOverrides).map(function(key) {
|
||||||
|
style[key] = noteStyleOverrides[key];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_wakeMap: function (e) {
|
||||||
|
this._stopWaiting();
|
||||||
|
this._map.scrollWheelZoom.enable();
|
||||||
|
if (this._map.tap) {
|
||||||
|
this._map.touchZoom.enable();
|
||||||
|
this._map.dragging.enable();
|
||||||
|
this._map.tap.enable();
|
||||||
|
this._map.addControl(this._sleepButton);
|
||||||
|
}
|
||||||
|
L.DomUtil.setOpacity( this._map._container, 1);
|
||||||
|
this.sleepNote.style.opacity = 0;
|
||||||
|
this._addAwakeListeners();
|
||||||
|
},
|
||||||
|
|
||||||
|
_sleepMap: function () {
|
||||||
|
this._stopWaiting();
|
||||||
|
this._map.scrollWheelZoom.disable();
|
||||||
|
|
||||||
|
if (this._map.tap) {
|
||||||
|
this._map.touchZoom.disable();
|
||||||
|
this._map.dragging.disable();
|
||||||
|
this._map.tap.disable();
|
||||||
|
this._map.removeControl(this._sleepButton);
|
||||||
|
}
|
||||||
|
|
||||||
|
L.DomUtil.setOpacity( this._map._container, this._map.options.sleepOpacity);
|
||||||
|
this.sleepNote.style.opacity = .4;
|
||||||
|
this._addSleepingListeners();
|
||||||
|
},
|
||||||
|
|
||||||
|
_wakePending: function () {
|
||||||
|
this._map.once('mousedown', this._wakeMap, this);
|
||||||
|
if (this._map.options.hoverToWake){
|
||||||
|
var self = this;
|
||||||
|
this._map.once('mouseout', this._sleepMap, this);
|
||||||
|
self._enterTimeout = setTimeout(function(){
|
||||||
|
self._map.off('mouseout', self._sleepMap, self);
|
||||||
|
self._wakeMap();
|
||||||
|
} , self._map.options.wakeTime);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_sleepPending: function () {
|
||||||
|
var self = this;
|
||||||
|
self._map.once('mouseover', self._wakeMap, self);
|
||||||
|
self._exitTimeout = setTimeout(function(){
|
||||||
|
self._map.off('mouseover', self._wakeMap, self);
|
||||||
|
self._sleepMap();
|
||||||
|
} , self._map.options.sleepTime);
|
||||||
|
},
|
||||||
|
|
||||||
|
_addSleepingListeners: function(){
|
||||||
|
this._map.once('mouseover', this._wakePending, this);
|
||||||
|
this._map.tap &&
|
||||||
|
this._map.once('click', this._wakeMap, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
_addAwakeListeners: function(){
|
||||||
|
this._map.once('mouseout', this._sleepPending, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
_removeSleepingListeners: function(){
|
||||||
|
this._map.options.hoverToWake &&
|
||||||
|
this._map.off('mouseover', this._wakePending, this);
|
||||||
|
this._map.off('mousedown', this._wakeMap, this);
|
||||||
|
this._map.tap &&
|
||||||
|
this._map.off('click', this._wakeMap, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
_removeAwakeListeners: function(){
|
||||||
|
this._map.off('mouseout', this._sleepPending, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
_stopWaiting: function () {
|
||||||
|
this._removeSleepingListeners();
|
||||||
|
this._removeAwakeListeners();
|
||||||
|
var self = this;
|
||||||
|
if(this._enterTimeout) clearTimeout(self._enterTimeout);
|
||||||
|
if(this._exitTimeout) clearTimeout(self._exitTimeout);
|
||||||
|
this._enterTimeout = null;
|
||||||
|
this._exitTimeout = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.Map.addInitHook('addHandler', 'sleep', L.Map.Sleep);
|
|
@ -1,19 +0,0 @@
|
||||||
.leaflet-control-scrollzoom {
|
|
||||||
text-indent: -999em;
|
|
||||||
background-image: url(./imgs/wheel.png);
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 16px 16px;
|
|
||||||
}
|
|
||||||
.dark .leaflet-control-scrollzoom {
|
|
||||||
background-image: url(./imgs/wheel-dark.png);
|
|
||||||
}
|
|
||||||
.leaflet-control-scrollzoom:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
.leaflet-control-scrollzoom.leaflet-disabled {
|
|
||||||
background-image: url(./imgs/wheel_over.png);
|
|
||||||
}
|
|
||||||
.dark .leaflet-control-scrollzoom.leaflet-disabled {
|
|
||||||
background-image: url(./imgs/wheel_over-dark.png);
|
|
||||||
}
|
|
|
@ -1,44 +0,0 @@
|
||||||
L.Control.MouseScroll = L.Control.Zoom.extend({
|
|
||||||
options: {
|
|
||||||
position: "topleft",
|
|
||||||
mouseScrollText: "Zoom Molette",
|
|
||||||
forceSeparateButton: false,
|
|
||||||
mouseScrollTitle: "Zoom Molette"
|
|
||||||
},
|
|
||||||
|
|
||||||
onAdd: function (map) {
|
|
||||||
var scrollZoom = "leaflet-control-scrollzoom"
|
|
||||||
, container = L.DomUtil.create("div", scrollZoom + " leaflet-bar")
|
|
||||||
, options = this.options
|
|
||||||
|
|
||||||
this._map = map
|
|
||||||
|
|
||||||
this._mouseScrollButton = this._createButton(options.mouseScrollText, options.mouseScrollTitle,
|
|
||||||
scrollZoom, container, this._mouseScroll, this)
|
|
||||||
|
|
||||||
this._updateDisabled()
|
|
||||||
map.on('focus', this._updateDisabled, this)
|
|
||||||
|
|
||||||
return container
|
|
||||||
},
|
|
||||||
|
|
||||||
_mouseScroll: function () {
|
|
||||||
if(this._map.scrollWheelZoom.enabled()) {
|
|
||||||
this._map.scrollWheelZoom.disable();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this._map.scrollWheelZoom.enable();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_updateDisabled: function () {
|
|
||||||
var map = this._map
|
|
||||||
, className = "leaflet-disabled"
|
|
||||||
|
|
||||||
L.DomUtil.removeClass(this._mouseScrollButton, className)
|
|
||||||
|
|
||||||
if (!map.scrollWheelZoom.enabled()) {
|
|
||||||
L.DomUtil.addClass(this._mouseScrollButton, className)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
Binary file not shown.
Before Width: | Height: | Size: 571 B |
Binary file not shown.
Before Width: | Height: | Size: 516 B |
Binary file not shown.
Before Width: | Height: | Size: 792 B |
Binary file not shown.
Before Width: | Height: | Size: 766 B |
|
@ -1,5 +1,7 @@
|
||||||
<?php // Prepare list of photos
|
<?php // Prepare list of photos
|
||||||
|
|
||||||
|
header('Content-type: text/javascript');
|
||||||
|
|
||||||
define('PHPWG_ROOT_PATH','./');
|
define('PHPWG_ROOT_PATH','./');
|
||||||
include_once( PHPWG_ROOT_PATH.'include/common.inc.php' );
|
include_once( PHPWG_ROOT_PATH.'include/common.inc.php' );
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue