Browse Source

Change mouse scroll sleep feature

master
leosw 10 months ago
parent
commit
5c3fb9384f
9 changed files with 245 additions and 68 deletions
  1. +3
    -5
      iFrameGPX/index.php
  2. +240
    -0
      iFrameGPX/leaflet-sleep/Leaflet.Sleep.js
  3. +0
    -19
      iFrameGPX/leaflet-wheelscroll/L.Control.MouseScroll.css
  4. +0
    -44
      iFrameGPX/leaflet-wheelscroll/L.Control.MouseScroll.js
  5. BIN
      iFrameGPX/leaflet-wheelscroll/imgs/wheel-dark.png
  6. BIN
      iFrameGPX/leaflet-wheelscroll/imgs/wheel.png
  7. BIN
      iFrameGPX/leaflet-wheelscroll/imgs/wheel_over-dark.png
  8. BIN
      iFrameGPX/leaflet-wheelscroll/imgs/wheel_over.png
  9. +2
    -0
      imagesInCat.php

+ 3
- 5
iFrameGPX/index.php View File

@@ -5,8 +5,6 @@
<title>Carte</title>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<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" />
<script src="leaflet-fullscreen/Control.FullScreen.js"></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" />
<script src="leaflet-photo/Leaflet.Photo.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>
<style media="screen" type="text/css">
* { margin: 0; padding: 0; }
@@ -61,15 +60,14 @@ var map = L.map('map', {
<?php if (!$_GET['scrollwheel']) echo "scrollWheelZoom: false,"; ?>
fullscreenControl: true, // Fullscreen button
attributionControl: false,
sleepNote: false,
sleepOpacity: .7,
fullscreenControlOptions: {
position: 'topleft'
}}).setView([47, 2], 6); // Hole france

var attributionControl = map.addControl(new L.control.attribution({position: 'topright'}));

// Mouse Scroll API
map.addControl(new L.Control.MouseScroll());

// Base layers
var baseLayers = {
"OSM France": osmfr,

+ 240
- 0
iFrameGPX/leaflet-sleep/Leaflet.Sleep.js View File

@@ -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);

+ 0
- 19
iFrameGPX/leaflet-wheelscroll/L.Control.MouseScroll.css View File

@@ -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);
}

+ 0
- 44
iFrameGPX/leaflet-wheelscroll/L.Control.MouseScroll.js View File

@@ -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)
}
}
})

BIN
iFrameGPX/leaflet-wheelscroll/imgs/wheel-dark.png View File

Before After
Width: 24  |  Height: 24  |  Size: 571B

BIN
iFrameGPX/leaflet-wheelscroll/imgs/wheel.png View File

Before After
Width: 24  |  Height: 24  |  Size: 516B

BIN
iFrameGPX/leaflet-wheelscroll/imgs/wheel_over-dark.png View File

Before After
Width: 24  |  Height: 24  |  Size: 792B

BIN
iFrameGPX/leaflet-wheelscroll/imgs/wheel_over.png View File

Before After
Width: 24  |  Height: 24  |  Size: 766B

+ 2
- 0
imagesInCat.php View File

@@ -1,5 +1,7 @@
<?php // Prepare list of photos

header('Content-type: text/javascript');

define('PHPWG_ROOT_PATH','./');
include_once( PHPWG_ROOT_PATH.'include/common.inc.php' );


Loading…
Cancel
Save