nakarte

commit f77ed1c961b71697ef7899e5a8aba83fa4b14b56
parent d3e561f79fa5c2ae570e55b8f5056d435f644878
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Fri,  3 Nov 2017 14:06:02 +0300

[layers config] highlight added layers

Diffstat:
M
src/lib/leaflet.control.layers.configure/index.js
 | 
23
++++++++++++++++++++---
M
src/lib/leaflet.control.layers.configure/style.css
 | 
9
+++++++++

2 files changed, 29 insertions(+), 3 deletions(-)
diff --git a/src/lib/leaflet.control.layers.configure/index.js b/src/lib/leaflet.control.layers.configure/index.js
@@ -150,8 +150,18 @@ function enableConfig(control, layers) {
             },
 
             onSelectWindowOkClicked: function() {
-                [...this._allLayers, ...this._customLayers()].forEach(layer => layer.enabled = layer.checked());
-                this.updateEnabledLayers();
+                const newEnabledLayers = [];
+                for (let layer of [...this._allLayers, ...this._customLayers()]) {
+                    if (layer.checked()) {
+                        if (!layer.enabled) {
+                            newEnabledLayers.push(layer);
+                        }
+                        layer.enabled = true;
+                    } else {
+                        layer.enabled = false;
+                    }
+                }
+                this.updateEnabledLayers(newEnabledLayers);
                 this.hideSelectWindow();
             },
 
@@ -174,7 +184,7 @@ function enableConfig(control, layers) {
                 );
             },
 
-            updateEnabledLayers: function() {
+            updateEnabledLayers: function(addedLayers) {
                 const disabledLayers = [...this._allLayers, ...this._customLayers()].filter(l => !l.enabled);
                 disabledLayers.forEach((l) => this._map.removeLayer(l.layer));
                 [...this._layers].forEach((l) => this.removeLayer(l.layer));
@@ -183,6 +193,7 @@ function enableConfig(control, layers) {
                 const enabledLayers = [...this._allLayers, ...this._customLayers()].filter(l => l.enabled);
                 enabledLayers.sort((l1, l2) => l1.order - l2.order);
                 enabledLayers.forEach((l) => {
+                        l.layer._justAdded = addedLayers && addedLayers.includes(l);
                         l.isOverlay ? this.addOverlay(l.layer, l.title) : this.addBaseLayer(l.layer, l.title);
                         if (!l.isOverlay && this._map.hasLayer(l.layer)) {
                               hasBaselayerOnMap = true;
@@ -309,6 +320,12 @@ ${buttonsHtml}`;
                     editButton.title = 'Edit layer';
                     L.DomEvent.on(editButton, 'click', (e) => this.onCustomLayerEditClicked(obj.layer.__customLayer, e));
                 }
+                if (obj.layer._justAdded) {
+                    L.DomUtil.addClass(label, 'leaflet-layers-configure-just-added-1');
+                    L.Util.requestAnimFrame(() => {
+                        L.DomUtil.addClass(label, 'leaflet-layers-configure-just-added-2');
+                    });
+                }
                 return label;
             },
 
diff --git a/src/lib/leaflet.control.layers.configure/style.css b/src/lib/leaflet.control.layers.configure/style.css
@@ -155,4 +155,13 @@
 
 .custom-layers-window a {
     color: #777;
+}
+
+.leaflet-layers-configure-just-added-1 {
+    background-color: #ff8d4d;
+}
+
+.leaflet-layers-configure-just-added-2 {
+    transition: background-color 7s ease-in;
+    background-color: rgba(0, 0, 0, 0);
 }
 \ No newline at end of file