@eeacms/volto-arcgis-block 0.1.257 → 0.1.258

package/CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.258](https://github.com/eea/volto-arcgis-block/compare/0.1.257...0.1.258) - 12 February 2024
+
 ### [0.1.257](https://github.com/eea/volto-arcgis-block/compare/0.1.256...0.1.257) - 7 February 2024
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.257",
+  "version": "0.1.258",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -334,15 +334,21 @@ class BookmarkWidget extends React.Component {
         }
         this.map.layers.removeAll();
         this.map.layers.add('bookmark');
+        let layerOpacities = {};
         for (let index = 0; index < selectLayers.length; index++) {
           if (selectOpacity[index]) {
             this.layers[selectLayers[index]].opacity = selectOpacity[index];
+            layerOpacities[selectLayers[index]] = selectOpacity[index];
           }
           if (selectVisible[index] !== null) {
             this.layers[selectLayers[index]].visible = selectVisible[index];
           }
         }
         sessionStorage.setItem('checkedLayers', JSON.stringify(selectLayers));
+        sessionStorage.setItem(
+          'layerOpacities',
+          JSON.stringify(layerOpacities),
+        );
       });
     });
   }

package/src/components/MapViewer/MenuWidget.jsx

@@ -711,6 +711,20 @@ class MenuWidget extends React.Component {
           });
           this.layersReorder();
           this.saveLayerOrder();
+          let elementOpacities = document.querySelectorAll(
+            '.active-layer-opacity',
+          );
+          let layerOpacities = JSON.parse(
+            sessionStorage.getItem('layerOpacities'),
+          );
+          elementOpacities.forEach((element) => {
+            let id = element.parentElement.parentElement.getAttribute(
+              'layer-id',
+            );
+            if (layerOpacities[id]) {
+              element.dataset.opacity = layerOpacities[id] * 100;
+            }
+          });
         }
       });
     });
@@ -3075,24 +3089,20 @@ class MenuWidget extends React.Component {
    * @param {*} e From the click event
    */
   showOpacity(elem, e) {
-    if (
-      document.querySelector('.opacity-slider input').dataset.layer !== elem.id
-    ) {
-      let opacity = e.currentTarget.dataset.opacity;
-      document.querySelector('.opacity-slider input').value = opacity;
-      document.querySelector('.opacity-panel').style.display = 'block';
-      let left = e.currentTarget.offsetLeft + 48;
-      document.querySelector('.opacity-panel').style.left = left + 'px';
-      let top =
-        document.querySelector('.tabs').offsetHeight +
-        15 -
-        document.querySelector('.panels').scrollTop +
-        e.currentTarget.closest('.active-layer').offsetTop +
-        e.currentTarget.closest('.active-layer').offsetHeight / 2 -
-        document.querySelector('.opacity-panel').offsetHeight / 2;
-      document.querySelector('.opacity-panel').style.top = top + 'px';
-      document.querySelector('.opacity-slider input').dataset.layer = elem.id;
-    }
+    let opacity = e.currentTarget.dataset.opacity;
+    document.querySelector('.opacity-slider input').value = opacity;
+    document.querySelector('.opacity-panel').style.display = 'block';
+    let left = e.currentTarget.offsetLeft + 48;
+    document.querySelector('.opacity-panel').style.left = left + 'px';
+    let top =
+      document.querySelector('.tabs').offsetHeight +
+      15 -
+      document.querySelector('.panels').scrollTop +
+      e.currentTarget.closest('.active-layer').offsetTop +
+      e.currentTarget.closest('.active-layer').offsetHeight / 2 -
+      document.querySelector('.opacity-panel').offsetHeight / 2;
+    document.querySelector('.opacity-panel').style.top = top + 'px';
+    document.querySelector('.opacity-slider input').dataset.layer = elem.id;
     e.stopPropagation();
     this.hideOnClickOutsideOpacity();
   }