From e188d8f9dec7d30baa75e626fe8071d08b9d18a7 Mon Sep 17 00:00:00 2001
From: Gautier P <bagage@users.noreply.github.com>
Date: Mon, 1 Mar 2021 20:13:42 +0100
Subject: [PATCH] Use plural form when multiple overlays are active (#378)

---
 index.html              | 10 +++-------
 js/control/LayersTab.js | 13 +++++++++++++
 locales/en.json         |  1 +
 locales/fr.json         |  1 +
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index c7272b3..939bbb4 100644
--- a/index.html
+++ b/index.html
@@ -850,13 +850,9 @@
                                 ><span data-i18n="sidebar.layers.title">Layers</span>
                             </h1>
                             <div id="layers-control-wrapper"></div>
-                            <div class="leaflet-control-layers-separator"></div>
-                            <div>
-                                <label
-                                    id="leaflet-control-layers-overlays-opacity-slider"
-                                    data-i18n="sidebar.layers.overlay-opacity"
-                                    >Overlay transparency</label
-                                >
+                            <div id="leaflet-control-layers-overlays-opacity-slider">
+                                <div class="leaflet-control-layers-separator"></div>
+                                <label data-i18n="sidebar.layers.overlay-opacity">Overlay transparency</label>
                             </div>
                             <div class="leaflet-control-layers-separator"></div>
                             <div id="layers-button-group">
diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js
index 872ec47..922a067 100644
--- a/js/control/LayersTab.js
+++ b/js/control/LayersTab.js
@@ -26,12 +26,14 @@ BR.LayersTab = BR.ControlLayers.extend({
         BR.ControlLayers.prototype.onAdd.call(this, map);
 
         map.on('baselayerchange overlayadd overlayremove', this.storeActiveLayers, this);
+        map.on('overlayadd overlayremove', this.updateOpacityLabel, this);
     },
 
     onRemove: function (map) {
         BR.ControlLayers.prototype.onRemove.call(this, map);
 
         map.off('baselayerchange overlayadd overlayremove', this.storeActiveLayers, this);
+        map.off('overlayadd overlayremove', this.updateOpacityLabel, this);
     },
 
     initOpacitySlider: function (map) {
@@ -472,6 +474,17 @@ BR.LayersTab = BR.ControlLayers.extend({
             }
         }
     },
+
+    updateOpacityLabel: function () {
+        var slider = $('#leaflet-control-layers-overlays-opacity-slider');
+        var overlaysCount = this.getActiveLayers().length - 1;
+        if (overlaysCount === 0) {
+            slider.hide();
+        } else {
+            slider.show();
+            slider.children()[1].innerText = i18next.t('sidebar.layers.overlay-opacity', { count: overlaysCount });
+        }
+    },
 });
 
 BR.layersTab = function (baseLayers, overlays, options) {
diff --git a/locales/en.json b/locales/en.json
index 52592b4..d60259d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -241,6 +241,7 @@
       "optional": "Add or remove optional layers",
       "optional-layers": "More",
       "overlay-opacity": "Overlay transparency",
+      "overlay-opacity_plural": "Overlays transparency",
       "table": {
         "URL": "URL",
         "empty": "No custom layer configured yet.",
diff --git a/locales/fr.json b/locales/fr.json
index 93b27b0..37a47a6 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -238,6 +238,7 @@
       "optional": "Ajouter ou supprimer des calques optionnels",
       "optional-layers": "Plus",
       "overlay-opacity": "Transparence de la surcouche",
+      "overlay-opacity_plural": "Transparence des surcouches",
       "table": {
         "URL": "URL",
         "empty": "Aucun calque personnel trouvé.",