ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Leaflet 1.0: fix also dragging map with opacity slider in Chrome;

Browse source 
update slider version; disable text selection while dragging in Firefox; 
no outline in Firefox
This commit is contained in:
Norbert Renner 2017-08-08 18:59:12 +02:00
parent 761a053b72
commit 76e2618bbf
3 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
bower.json
View file

@ -1,7 +1,6 @@
{ {
"name": "brouter-web", "name": "brouter-web",
"version": "0.6.3", "version": "0.6.3",
"main": "dist/**/*",
"main": [ "main": [
"dist/brouter-web.css", "dist/brouter-web.css",
"dist/brouter-web.js" "dist/brouter-web.js"
@ -23,7 +22,7 @@
"leaflet-control-geocoder": "1.5.3", "leaflet-control-geocoder": "1.5.3",
"Leaflet.EasyButton": "*", "Leaflet.EasyButton": "*",
"bootbox": "~4.4.0", "bootbox": "~4.4.0",
"seiyria-bootstrap-slider": "~4.8.1", "seiyria-bootstrap-slider": "^9.8.1",
"url-search-params": "~0.5.0", "url-search-params": "~0.5.0",
"Leaflet.RestoreView": "makinacorpus/Leaflet.RestoreView#master", "Leaflet.RestoreView": "makinacorpus/Leaflet.RestoreView#master",
"leaflet.locatecontrol": "^0.60.0", "leaflet.locatecontrol": "^0.60.0",
@ -103,7 +102,13 @@
] ]
}, },
"autosize": { "autosize": {
"main": "dist/autosize.js" "main": "dist/autosize.js"
},
"seiyria-bootstrap-slider": {
"dependencies": {
"jquery": "*",
"bootstrap": "*"
}
} }
}, },
"resolutions": { "resolutions": {

4
css/style.css
View file

@ -151,7 +151,7 @@ https://css-tricks.com/svg-line-animation-works/
/* invert track and selection styles to get partial gradient for "selection" */ /* invert track and selection styles to get partial gradient for "selection" */
.slider.slider-vertical .slider-track { .slider.slider-vertical .slider-track {
width: 8px; width: 8px;
margin-left: -4px; margin-left: 1px;
background-image: linear-gradient(to right, #f0f0f0 0%, #e9e9e9 100%); background-image: linear-gradient(to right, #f0f0f0 0%, #e9e9e9 100%);
box-shadow: inset -1px -0px 1px rgba(55, 55, 55, 0.3), inset 1px 0px 1px rgba(230, 230, 230, 1); box-shadow: inset -1px -0px 1px rgba(55, 55, 55, 0.3), inset 1px 0px 1px rgba(230, 230, 230, 1);
} }
@ -169,10 +169,10 @@ https://css-tricks.com/svg-line-animation-works/
.slider.slider-vertical .slider-tick, .slider.slider-vertical .slider-tick,
.slider.slider-vertical .slider-handle { .slider.slider-vertical .slider-handle {
margin-left: -6px;
cursor: ns-resize; cursor: ns-resize;
box-sizing: border-box; box-sizing: border-box;
background: none; background: none;
outline: none;
/* bootstrap .btn-default */ /* bootstrap .btn-default */
background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%); background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);

8
js/control/OpacitySlider.js
View file

@ -15,6 +15,9 @@ BR.OpacitySlider = L.Control.extend({
value = minOpacity; value = minOpacity;
} }
// prevent also dragging map in Chrome
L.DomEvent.disableClickPropagation(container);
var stopClickAfterSlide = function(evt) { var stopClickAfterSlide = function(evt) {
L.DomEvent.stop(evt); L.DomEvent.stop(evt);
removeStopClickListeners(); removeStopClickListeners();
@ -36,12 +39,17 @@ BR.OpacitySlider = L.Control.extend({
reversed : true, reversed : true,
selection: 'before', // inverted, serves as track style, see css selection: 'before', // inverted, serves as track style, see css
tooltip: 'hide' tooltip: 'hide'
}).on('slideStart', function (evt) {
// dragging beyond slider control selects zoom control +/- text in Firefox
L.DomUtil.disableTextSelection();
}).on('slide slideStop', { self: this }, function (evt) { }).on('slide slideStop', { self: this }, function (evt) {
evt.data.self.options.callback(evt.value / 100); evt.data.self.options.callback(evt.value / 100);
}).on('slideStop', function (evt) { }).on('slideStop', function (evt) {
if (BR.Util.localStorageAvailable()) { if (BR.Util.localStorageAvailable()) {
localStorage.opacitySliderValue = evt.value; localStorage.opacitySliderValue = evt.value;
} }
L.DomUtil.enableTextSelection();
// When dragging outside slider and over map, click event after mouseup // When dragging outside slider and over map, click event after mouseup
// adds marker when active on Chromium. So disable click (not needed) // adds marker when active on Chromium. So disable click (not needed)