From 76e2618bbf7057376018418e55fe0048b0391e06 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Tue, 8 Aug 2017 18:59:12 +0200
Subject: [PATCH] Leaflet 1.0: fix also dragging map with opacity slider in
 Chrome;

update slider version; disable text selection while dragging in Firefox;
no outline in Firefox
---
 bower.json                  | 11 ++++++++---
 css/style.css               |  4 ++--
 js/control/OpacitySlider.js |  8 ++++++++
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/bower.json b/bower.json
index bc49d1b..466c829 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,6 @@
 {
   "name": "brouter-web",
   "version": "0.6.3",
-  "main": "dist/**/*",
   "main": [
     "dist/brouter-web.css",
     "dist/brouter-web.js"
@@ -23,7 +22,7 @@
     "leaflet-control-geocoder": "1.5.3",
     "Leaflet.EasyButton": "*",
     "bootbox": "~4.4.0",
-    "seiyria-bootstrap-slider": "~4.8.1",
+    "seiyria-bootstrap-slider": "^9.8.1",
     "url-search-params": "~0.5.0",
     "Leaflet.RestoreView": "makinacorpus/Leaflet.RestoreView#master",
     "leaflet.locatecontrol": "^0.60.0",
@@ -103,7 +102,13 @@
       ]
     },
     "autosize": {
-      "main":  "dist/autosize.js"
+      "main": "dist/autosize.js"
+    },
+    "seiyria-bootstrap-slider": {
+      "dependencies": {
+        "jquery": "*",
+        "bootstrap": "*"
+      }
     }
   },
   "resolutions": {
diff --git a/css/style.css b/css/style.css
index 5d5911c..7c6b033 100644
--- a/css/style.css
+++ b/css/style.css
@@ -151,7 +151,7 @@ https://css-tricks.com/svg-line-animation-works/
 /* invert track and selection styles to get partial gradient for "selection" */
 .slider.slider-vertical .slider-track {
     width: 8px;
-    margin-left: -4px;
+    margin-left: 1px;
     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);
 }
@@ -169,10 +169,10 @@ https://css-tricks.com/svg-line-animation-works/
 
 .slider.slider-vertical .slider-tick,
 .slider.slider-vertical .slider-handle {
-    margin-left: -6px;
     cursor: ns-resize;
     box-sizing: border-box;
     background: none;
+    outline: none;
 
     /* bootstrap .btn-default */
     background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
diff --git a/js/control/OpacitySlider.js b/js/control/OpacitySlider.js
index 8234806..9560637 100644
--- a/js/control/OpacitySlider.js
+++ b/js/control/OpacitySlider.js
@@ -15,6 +15,9 @@ BR.OpacitySlider = L.Control.extend({
             value = minOpacity;
         }
 
+        // prevent also dragging map in Chrome
+        L.DomEvent.disableClickPropagation(container);
+
         var stopClickAfterSlide = function(evt) {
             L.DomEvent.stop(evt);
             removeStopClickListeners();
@@ -36,12 +39,17 @@ BR.OpacitySlider = L.Control.extend({
             reversed : true,
             selection: 'before', // inverted, serves as track style, see css
             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) {
             evt.data.self.options.callback(evt.value / 100);
         }).on('slideStop', function (evt) {
             if (BR.Util.localStorageAvailable()) {
                 localStorage.opacitySliderValue = evt.value;
             }
+            
+            L.DomUtil.enableTextSelection();
 
             // When dragging outside slider and over map, click event after mouseup
             // adds marker when active on Chromium. So disable click (not needed)