From 632e094fb31e0dc38a78de1e764044b997d88e2a Mon Sep 17 00:00:00 2001
From: Henrik Fehlauer <rkflx@lab12.net>
Date: Mon, 1 Jul 2019 20:46:41 +0200
Subject: [PATCH 1/3] Always show travel time and energy

Always show the entries for travel time and energy in the statistics
bar, so the layout does not suddenly change when starting to draw a route.
---
 index.html               | 4 ++--
 js/control/TrackStats.js | 6 ------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 0ecde7c..f3841a2 100644
--- a/index.html
+++ b/index.html
@@ -966,7 +966,7 @@
                             >
                         </p>
                     </li>
-                    <li hidden>
+                    <li>
                         <div
                             class="text-muted small d-none d-sm-block"
                             data-i18n="footer.travel-time"
@@ -982,7 +982,7 @@
                             >
                         </p>
                     </li>
-                    <li hidden>
+                    <li>
                         <div class="text-muted small d-none d-sm-block">
                             <span data-i18n="footer.total-energy"
                                 >Total Energy</span
diff --git a/js/control/TrackStats.js b/js/control/TrackStats.js
index f2fdd2a..60b06c9 100644
--- a/js/control/TrackStats.js
+++ b/js/control/TrackStats.js
@@ -56,12 +56,6 @@ BR.TrackStats = L.Class.extend({
         $('#totaltime').html(formattedTime);
         $('#totalenergy').html(formattedEnergy);
         $('#meanenergy').html(meanEnergy);
-        document.getElementById(
-            'totaltime'
-        ).parentElement.parentElement.hidden = !stats.totalTime;
-        document.getElementById(
-            'totalenergy'
-        ).parentElement.parentElement.hidden = !stats.totalEnergy;
     },
 
     calcStats: function(polyline, segments) {

From 6b5be516d81234fe33d19c681e990619358e18ef Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Sat, 29 Jun 2019 21:55:37 +0200
Subject: [PATCH 2/3] Run prettier

---
 .prettierrc             | 6 +++---
 css/leaflet-routing.css | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 18815a1..cd93fd9 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,4 @@
 {
-	"singleQuote": true,
-	"tabWidth": 4
-}
\ No newline at end of file
+    "singleQuote": true,
+    "tabWidth": 4
+}
diff --git a/css/leaflet-routing.css b/css/leaflet-routing.css
index 6e098e4..540c852 100644
--- a/css/leaflet-routing.css
+++ b/css/leaflet-routing.css
@@ -1,5 +1,5 @@
 div.line-mouse-marker {
-  background-color: white;
-  border: 4px solid magenta;
-  border-radius: 8px;
+    background-color: white;
+    border: 4px solid magenta;
+    border-radius: 8px;
 }

From 7666daa10f805c2f4adaa977981f627b786b8107 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Sat, 29 Jun 2019 21:55:48 +0200
Subject: [PATCH 3/3] Add an overlay opacity slider

---
 css/style.css               | 17 +++++++++++++----
 index.html                  | 14 ++++++++++++++
 js/control/LayersTab.js     | 26 ++++++++++++++++++++++++++
 js/control/OpacitySlider.js | 28 +++++++++++++++++++---------
 js/index.js                 |  1 +
 5 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6bc2641..3abcbad 100644
--- a/css/style.css
+++ b/css/style.css
@@ -245,7 +245,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 {
+.slider .slider-track {
     width: 8px;
     margin-left: 1px;
     background-image: linear-gradient(to right, #f0f0f0 0%, #e9e9e9 100%);
@@ -253,8 +253,8 @@ https://css-tricks.com/svg-line-animation-works/
         inset 1px 0px 1px rgba(230, 230, 230, 1);
 }
 
-.control-slider:hover .slider-track,
-.control-slider:active .slider-track {
+.control-slider:hover #route .slider-track,
+.control-slider:active #route .slider-track {
     background-image: linear-gradient(to bottom, magenta 0%, white 100%);
 }
 
@@ -267,6 +267,11 @@ https://css-tricks.com/svg-line-animation-works/
 .slider.slider-vertical .slider-tick,
 .slider.slider-vertical .slider-handle {
     cursor: ns-resize;
+}
+
+.slider .slider-tick,
+.slider .slider-handle {
+    cursor: ew-resize;
     box-sizing: border-box;
     background: none;
     outline: none;
@@ -314,6 +319,10 @@ button.btn {
     line-height: 30px;
 }
 
+#leaflet-control-layers-overlays-opacity-slider .leaflet-bar {
+    box-shadow: none;
+}
+
 /* smaller tab height */
 .nav > li > a {
     padding: 2px 15px;
@@ -505,7 +514,7 @@ table.dataTable.display tbody tr.even:hover {
 }
 
 .nav-link.disabled {
-    /* by default, even if disabled, modals are opened by disabled nav-link 
+    /* by default, even if disabled, modals are opened by disabled nav-link
     so we ignore pointer events in this situation to avoid that*/
     pointer-events: none;
 }
diff --git a/index.html b/index.html
index f3841a2..5c49957 100644
--- a/index.html
+++ b/index.html
@@ -795,6 +795,20 @@
                             </h1>
                             <div id="layers-control-wrapper"></div>
                             <div class="leaflet-control-layers-separator"></div>
+                            <div
+                                class="leaflet-control-layers-overlays-opacity"
+                            >
+                                <p>
+                                    <span
+                                        data-i18n="sidebar.layers.overlay-opacity"
+                                        >Overlay transparency</span
+                                    >
+                                    <span
+                                        id="leaflet-control-layers-overlays-opacity-slider"
+                                    ></span>
+                                </p>
+                            </div>
+                            <div class="leaflet-control-layers-separator"></div>
                             <div id="layers-button-group">
                                 <div hidden id="tree-button-group">
                                     <button
diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js
index e577c66..e1e78b5 100644
--- a/js/control/LayersTab.js
+++ b/js/control/LayersTab.js
@@ -20,6 +20,7 @@ BR.LayersTab = BR.ControlLayers.extend({
 
         L.DomUtil.get('layers-control-wrapper').appendChild(this._section);
 
+        this.initOpacitySlider(map);
         this.initButtons();
         this.initJsTree();
 
@@ -46,6 +47,31 @@ BR.LayersTab = BR.ControlLayers.extend({
         );
     },
 
+    initOpacitySlider: function(map) {
+        var self = this;
+        var overlayOpacitySlider = new BR.OpacitySlider({
+            id: 'overlay',
+            reversed: false,
+            orientation: 'horizontal',
+            defaultValue: 1,
+            title: i18next.t('layers.opacity-slider'),
+            callback: function(opacity) {
+                for (var i = 0; i < self._layers.length; i++) {
+                    if (
+                        !self._layers[i].overlay ||
+                        !map.hasLayer(self._layers[i].layer)
+                    ) {
+                        continue;
+                    }
+                    self._layers[i].layer.setOpacity(opacity);
+                }
+            }
+        }).onAdd(map);
+        L.DomUtil.get(
+            'leaflet-control-layers-overlays-opacity-slider'
+        ).appendChild(overlayOpacitySlider);
+    },
+
     initButtons: function() {
         var expandTree = function(e) {
             this.jstree.open_all();
diff --git a/js/control/OpacitySlider.js b/js/control/OpacitySlider.js
index 2ab71e2..c2293e2 100644
--- a/js/control/OpacitySlider.js
+++ b/js/control/OpacitySlider.js
@@ -1,16 +1,23 @@
 BR.OpacitySlider = L.Control.extend({
     options: {
+        id: '',
         position: 'topleft',
+        reversed: true,
+        orientation: 'vertical',
+        defaultValue: BR.conf.defaultOpacity,
+        title: i18next.t('map.opacity-slider'),
         callback: function(opacity) {}
     },
 
     onAdd: function(map) {
         var container = L.DomUtil.create('div', 'leaflet-bar control-slider'),
-            input = $('<input id="slider" type="text"/>'),
+            input = $(
+                '<input id="slider-' + this.options.id + '" type="text"/>'
+            ),
             item = BR.Util.localStorageAvailable()
-                ? localStorage.opacitySliderValue
+                ? localStorage['opacitySliderValue' + this.options.id]
                 : null,
-            value = item ? parseInt(item) : BR.conf.defaultOpacity * 100,
+            value = item ? parseInt(item) : this.options.defaultValue * 100,
             minOpacity = (BR.conf.minOpacity || 0) * 100;
 
         if (value < minOpacity) {
@@ -34,17 +41,18 @@ BR.OpacitySlider = L.Control.extend({
         };
 
         $(container).html(input);
-        $(container).attr('title', i18next.t('map.opacity-slider'));
+        $(container).attr('title', this.options.title);
 
         input
             .slider({
+                id: this.options.id,
                 min: 0,
                 max: 100,
                 step: 1,
                 value: value,
-                orientation: 'vertical',
-                reversed: true,
-                selection: 'before', // inverted, serves as track style, see css
+                orientation: this.options.orientation,
+                reversed: this.options.reversed,
+                selection: this.options.reversed ? 'before' : 'after', // inverted, serves as track style, see css
                 tooltip: 'hide'
             })
             .on('slideStart', function(evt) {
@@ -54,9 +62,11 @@ BR.OpacitySlider = L.Control.extend({
             .on('slide slideStop', { self: this }, function(evt) {
                 evt.data.self.options.callback(evt.value / 100);
             })
-            .on('slideStop', function(evt) {
+            .on('slideStop', { self: this }, function(evt) {
                 if (BR.Util.localStorageAvailable()) {
-                    localStorage.opacitySliderValue = evt.value;
+                    localStorage[
+                        'opacitySliderValue' + evt.data.self.options.id
+                    ] = evt.value;
                 }
 
                 L.DomUtil.enableTextSelection();
diff --git a/js/index.js b/js/index.js
index 1b36642..abb19f1 100644
--- a/js/index.js
+++ b/js/index.js
@@ -283,6 +283,7 @@
 
         map.addControl(
             new BR.OpacitySlider({
+                id: 'route',
                 callback: L.bind(routing.setOpacity, routing)
             })
         );