Add an overlay opacity slider

sylvainavelo · Jul 16, 2019 · 7666daa · 7666daa
1 parent 6b5be51
commit 7666daa
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 13 deletions.
diff --git a/css/style.css b/css/style.css
@@ -245,16 +245,16 @@ 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%);
     box-shadow: inset -1px -0px 1px rgba(55, 55, 55, 0.3),
         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
@@ -795,6 +795,20 @@ <h1 class="leaflet-sidebar-header">
                             </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
@@ -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
@@ -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
@@ -283,6 +283,7 @@
 
         map.addControl(
             new BR.OpacitySlider({
+                id: 'route',
                 callback: L.bind(routing.setOpacity, routing)
             })
         );