@eeacms/volto-arcgis-block 0.1.257 → 0.1.259

package/CHANGELOG.md

@@ -4,6 +4,10 @@ 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.259](https://github.com/eea/volto-arcgis-block/compare/0.1.258...0.1.259) - 14 February 2024
+
+### [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.259",
   "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

@@ -701,16 +701,32 @@ class MenuWidget extends React.Component {
               }
             }
           }
+          let counter = layers.length - 1;
           layers.forEach((layer, index) => {
+            let order = counter - index;
             let activeLayers = document.querySelectorAll('.active-layer');
             activeLayers.forEach((item) => {
               if (layer === item.getAttribute('layer-id')) {
-                item.parentElement.insertBefore(item, activeLayers[index]);
+                item.parentElement.insertBefore(item, activeLayers[order]);
               }
             });
           });
           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;
+            }
+          });
         }
       });
     });
@@ -2829,7 +2845,7 @@ class MenuWidget extends React.Component {
     let activeLayers = document.querySelectorAll('.active-layer');
     let newLayerOrder = [];
     for (let i = 0; i < activeLayers.length; i++) {
-      newLayerOrder.push(activeLayers[i].getAttribute('layer-id'));
+      newLayerOrder.unshift(activeLayers[i].getAttribute('layer-id'));
     }
     sessionStorage.setItem('checkedLayers', JSON.stringify(newLayerOrder));
     window.dispatchEvent(new Event('storage'));
@@ -3047,6 +3063,9 @@ class MenuWidget extends React.Component {
     });
     if (layers.length === 0 && document.querySelector('.info-container')) {
       document.querySelector('.info-container').style.display = 'none';
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
     } else if (layers.length > 0) {
       document.querySelector('.info-container').style.display = 'flex';
     }
@@ -3075,24 +3094,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();
   }