@eeacms/volto-arcgis-block 0.1.367 → 0.1.369

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.369](https://github.com/eea/volto-arcgis-block/compare/0.1.368...0.1.369) - 18 June 2025
+
+### [0.1.368](https://github.com/eea/volto-arcgis-block/compare/0.1.367...0.1.368) - 17 June 2025
+
 ### [0.1.367](https://github.com/eea/volto-arcgis-block/compare/0.1.366...0.1.367) - 17 June 2025
 
 #### :house: Internal changes

package/package.json

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

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -27,7 +27,6 @@ class BookmarkWidget extends React.Component {
     this.menuClass =
       'esri-icon-bookmark esri-widget--button esri-widget esri-interactive';
     this.sessionBookmarks = [];
-    this.sessionBookmarkIndexLinkUid = [];
     this.sessionBookmarkLayers = [];
     this.sessionBookmarkOpacity = [];
     this.sessionBookmarkVisible = [];
@@ -93,6 +92,72 @@ class BookmarkWidget extends React.Component {
     }
   }
 
+  processReorder(newOrder) {
+    const oldBookmarks = this.sessionBookmarks;
+    const reorderedBookmarks = newOrder.map((uid) => {
+      const index = oldBookmarks.findIndex(
+        (bookmark) => bookmark && bookmark.uid === uid,
+      );
+      return index !== -1 ? oldBookmarks[index] : null;
+    });
+
+    const hasEqualLength =
+      oldBookmarks.length === newOrder.length &&
+      newOrder.length === reorderedBookmarks.length;
+    const hasNullValues = reorderedBookmarks.some((item) => item === null);
+
+    if (hasEqualLength && !hasNullValues) {
+      return reorderedBookmarks;
+    }
+
+    let missingBookmark = null;
+    let missingIndex = -1;
+
+    for (let i = 0; i < oldBookmarks.length; i++) {
+      const oldBookmark = oldBookmarks[i];
+      const newUid = i < newOrder.length ? newOrder[i] : null;
+
+      if (
+        oldBookmark &&
+        newUid &&
+        oldBookmark.uid === newUid &&
+        !reorderedBookmarks.includes(oldBookmark)
+      ) {
+        missingBookmark = oldBookmark;
+        missingIndex = i;
+        break;
+      }
+    }
+
+    if (missingBookmark && missingIndex !== -1) {
+      if (reorderedBookmarks.length !== oldBookmarks.length) {
+        const finalBookmarks = [];
+        let reorderIndex = 0;
+
+        for (let i = 0; i < oldBookmarks.length; i++) {
+          if (i === missingIndex) {
+            finalBookmarks[i] = missingBookmark;
+          } else {
+            finalBookmarks[i] =
+              reorderIndex < reorderedBookmarks.length
+                ? reorderedBookmarks[reorderIndex]
+                : null;
+            reorderIndex++;
+          }
+        }
+        return finalBookmarks;
+      } else if (hasNullValues) {
+        const nullIndex = reorderedBookmarks.findIndex((item) => item === null);
+        if (nullIndex === missingIndex) {
+          reorderedBookmarks[nullIndex] = missingBookmark;
+        }
+        return reorderedBookmarks;
+      }
+    }
+
+    return reorderedBookmarks;
+  }
+
   async componentDidMount() {
     this._isMounted = true;
     await this.loader();
@@ -201,7 +266,6 @@ class BookmarkWidget extends React.Component {
               }
             });
             this.sessionBookmarks.push(e.added[0]);
-            this.sessionBookmarkIndexLinkUid.push(e.added[0].uid);
             this.sessionBookmarkLayers.push(check);
             this.sessionBookmarkOpacity.push(opacity);
             this.sessionBookmarkVisible.push(visible);
@@ -250,35 +314,37 @@ class BookmarkWidget extends React.Component {
               }
             }
           } else if (e.moved) {
-            let newSessionBookmarks = [];
-            let newSessionBookmarkIndexLinkUid = [];
-            let newSessionBookmarkLayers = [];
-            let newSessionBookmarkOpacity = [];
-            let newSessionBookmarkVisible = [];
-            let newSessionBookmarkHotspot = [];
-            e.moved.forEach((bookmark) => {
-              let index = this.sessionBookmarkIndexLinkUid.indexOf(
-                bookmark.uid,
-              );
-              newSessionBookmarks.push(bookmark);
-              newSessionBookmarkIndexLinkUid.push(bookmark.uid);
-              newSessionBookmarkLayers.push(this.sessionBookmarkLayers[index]);
-              newSessionBookmarkOpacity.push(
-                this.sessionBookmarkOpacity[index],
-              );
-              newSessionBookmarkVisible.push(
-                this.sessionBookmarkVisible[index],
-              );
-              newSessionBookmarkHotspot.push(
-                this.sessionBookmarkHotspot[index],
+            const newOrder = e.target?.items.map((bookmark) => bookmark.uid);
+            const reorderedBookmarks = this.processReorder(newOrder);
+
+            const reorderedLayers = [];
+            const reorderedOpacity = [];
+            const reorderedVisible = [];
+            const reorderedHotspot = [];
+
+            reorderedBookmarks.forEach((bookmark) => {
+              const originalIndex = this.sessionBookmarks.findIndex(
+                (original) => original && original.uid === bookmark.uid,
               );
+              if (originalIndex !== -1) {
+                reorderedLayers.push(this.sessionBookmarkLayers[originalIndex]);
+                reorderedOpacity.push(
+                  this.sessionBookmarkOpacity[originalIndex],
+                );
+                reorderedVisible.push(
+                  this.sessionBookmarkVisible[originalIndex],
+                );
+                reorderedHotspot.push(
+                  this.sessionBookmarkHotspot[originalIndex],
+                );
+              }
             });
-            this.sessionBookmarks = newSessionBookmarks;
-            this.sessionBookmarkIndexLinkUid = newSessionBookmarkIndexLinkUid;
-            this.sessionBookmarkLayers = newSessionBookmarkLayers;
-            this.sessionBookmarkOpacity = newSessionBookmarkOpacity;
-            this.sessionBookmarkVisible = newSessionBookmarkVisible;
-            this.sessionBookmarkHotspot = newSessionBookmarkHotspot;
+
+            this.sessionBookmarks = reorderedBookmarks;
+            this.sessionBookmarkLayers = reorderedLayers;
+            this.sessionBookmarkOpacity = reorderedOpacity;
+            this.sessionBookmarkVisible = reorderedVisible;
+            this.sessionBookmarkHotspot = reorderedHotspot;
             shouldUpdate = true;
           }
           // } else {

package/src/components/MapViewer/MenuWidget.jsx

@@ -1087,6 +1087,15 @@ class MenuWidget extends React.Component {
         if (productDropdown) {
           let scrollPosition = productDropdown.offsetTop;
           if (dataset) {
+            let familyDropdown = node.closest('.map-menu-family-dropdown');
+            if (familyDropdown) {
+              let button = familyDropdown.querySelector(
+                '.ccl-expandable__button',
+              );
+              if (button) {
+                button.setAttribute('aria-expanded', 'true');
+              }
+            }
             let datasetDropdown = node.closest('.map-menu-product-dropdown');
             if (datasetDropdown) {
               let button = datasetDropdown.querySelector(
@@ -1402,13 +1411,14 @@ class MenuWidget extends React.Component {
     );
   }
 
-  metodProcessFamily(family, familyTitle, inheritedIndex, checkProduct) {
+  metodProcessFamily(family, familyTitle, inheritedIndex, checkFamily) {
     var dataset_def = [];
     var datasets = [];
     var index = 0;
     var familyId = familyTitle.replace(/\s+/g, '');
-    var inheritedIndexProduct = inheritedIndex + '_' + familyId;
-    checkProduct = 'map_product_' + inheritedIndexProduct;
+    var inheritedIndexFamily = inheritedIndex + '_' + familyId;
+    checkFamily = 'map_family_' + inheritedIndexFamily;
+    var checkProduct = 'map_product_' + inheritedIndex;
     var familyTitleName = '';
     this.tax.tree.forEach((element) => {
       element.children.forEach((element) => {
@@ -1419,38 +1429,23 @@ class MenuWidget extends React.Component {
     });
     if (family && Array.isArray(family)) {
       for (var i in family) {
-        // if (this.filtersApplied) {
-        //   dataset_def = document
-        //     .querySelector('#' + checkProduct)
-        //     ?.getAttribute('defcheck');
-        // } else if (
-        //   product.Datasets[i] &&
-        //   product.Datasets[i].Default_active === true
-        // ) {
-        //   var idDataset = 'map_dataset_' + inheritedIndexProduct + '_' + index;
-        //   dataset_def.push(idDataset);
-        // }
-
-        // CLMS-1545
-        // if (!product.Datasets[i].MarkAsDownloadableNoServiceToVisualize) {
         if (family[i]) {
           datasets.push(
             this.metodProcessDataset(
               family[i],
               index,
-              inheritedIndexProduct,
-              checkProduct,
+              inheritedIndex,
+              checkFamily,
             ),
           );
           index++;
         }
-        // }
       }
     }
 
     // Empty vector, add the first dataset
     if (!dataset_def.length) {
-      var idDatasetB = 'map_dataset_' + inheritedIndexProduct + '_0';
+      var idDatasetB = 'map_dataset_' + inheritedIndexFamily + '_0';
       dataset_def.push(idDatasetB);
     }
     let style = this.props.download ? { display: 'none' } : {};
@@ -1458,13 +1453,13 @@ class MenuWidget extends React.Component {
     return (
       <div
         className="map-menu-family-dropdown"
-        id={'family_' + inheritedIndexProduct}
+        id={'family_' + inheritedIndexFamily}
         familyid={familyId}
         key={'a' + familyId}
       >
         <fieldset className="ccl-fieldset" key={'b' + familyId}>
           <div
-            id={'dropdown_' + inheritedIndexProduct}
+            id={'dropdown_' + inheritedIndexFamily}
             className="ccl-expandable__button"
             aria-expanded="false"
             key={'c' + familyId}
@@ -1481,7 +1476,8 @@ class MenuWidget extends React.Component {
               <div className="ccl-form-group" key={'e' + familyId}>
                 <input
                   type="checkbox"
-                  id={checkProduct}
+                  id={checkFamily}
+                  parentid={checkProduct}
                   name=""
                   value="name"
                   className="ccl-checkbox ccl-required ccl-form-check-input"
@@ -1493,7 +1489,7 @@ class MenuWidget extends React.Component {
                 ></input>
                 <label
                   className="ccl-form-check-label"
-                  htmlFor={checkProduct}
+                  htmlFor={checkFamily}
                   key={'f' + familyId}
                 >
                   <legend className="ccl-form-legend">
@@ -1517,7 +1513,7 @@ class MenuWidget extends React.Component {
           </div>
           <div
             className="ccl-form map-menu-family-container"
-            id={'family_container_' + inheritedIndexProduct}
+            id={'family_container_' + inheritedIndexFamily}
           >
             {datasets}
           </div>
@@ -1875,6 +1871,27 @@ class MenuWidget extends React.Component {
     datasetCheck.checked = trueChecks > 0;
 
     let parentId = datasetCheck.getAttribute('parentid');
+    if (parentId) {
+      if (parentId.includes('map_family')) {
+        this.updateCheckFamily(parentId);
+      } else {
+        this.updateCheckProduct(parentId);
+      }
+    }
+  }
+
+  updateCheckFamily(id) {
+    let familyCheck = document.querySelector('#' + id);
+    if (!familyCheck) return;
+
+    let layerChecks = Array.from(
+      document.querySelectorAll('[parentid="' + id + '"]'),
+    );
+
+    let trueChecks = layerChecks.filter((elem) => elem.checked).length;
+    familyCheck.checked = trueChecks > 0;
+
+    let parentId = familyCheck.getAttribute('parentid');
     if (parentId) {
       this.updateCheckProduct(parentId);
     }