@eeacms/volto-arcgis-block 0.1.403 → 0.1.405

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.405](https://github.com/eea/volto-arcgis-block/compare/0.1.404...0.1.405) - 12 November 2025
+
+### [0.1.404](https://github.com/eea/volto-arcgis-block/compare/0.1.403...0.1.404) - 5 November 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #1050 from eea/develop [Unai Bolivar - [`0708eba`](https://github.com/eea/volto-arcgis-block/commit/0708ebafa517a330ecc02ec7ad073b67cdb9f60d)]
 ### [0.1.403](https://github.com/eea/volto-arcgis-block/compare/0.1.402...0.1.403) - 4 November 2025
 
 ### [0.1.402](https://github.com/eea/volto-arcgis-block/compare/0.1.401...0.1.402) - 3 November 2025

package/package.json

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

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -247,18 +247,60 @@ class BookmarkWidget extends React.Component {
       this.sessionBookmarks.push(bookmark);
     });
     this.Bookmarks.when(() => {
-      document
-        .querySelectorAll('.esri-bookmarks__bookmark')
-        .forEach((bookmark) => {
-          let download_button = document.createElement('button');
-          download_button.className = 'esri-button download-bookmark-button';
-          download_button.innerText = '⭳';
-          download_button.bookmarkName = bookmark.innerText;
-          download_button.addEventListener('click', (e) => {
-            this.downloadBookmark(e.currentTarget.bookmarkName);
+      if (this.userID !== null) {
+        document.querySelector('.upload-bookmark-button').style.display =
+          'flex';
+        document
+          .querySelectorAll('.esri-bookmarks__bookmark')
+          .forEach((bookmark) => {
+            if (bookmark.childNodes.length < 4) {
+              let tooltip = document.createElement('div');
+              tooltip.setAttribute('tooltip', 'Download bookmark');
+              tooltip.setAttribute('direction', 'left');
+              tooltip.setAttribute('type', 'widget');
+              let download_button = document.createElement('div');
+              tooltip.appendChild(download_button);
+              download_button.className =
+                'esri-button download-bookmark-button';
+              download_button.innerText = '⭳';
+              download_button.bookmarkName = bookmark.innerText;
+              download_button.addEventListener('click', (e) => {
+                this.downloadBookmark(e.currentTarget.bookmarkName);
+              });
+              bookmark.insertBefore(tooltip, bookmark.childNodes[2]);
+            }
           });
-          bookmark.insertBefore(download_button, bookmark.childNodes[2]);
-        });
+        let bookmarkList = document.querySelector('.esri-bookmarks__list');
+        const config = { childList: true };
+        const callback = function (mutationList, observer) {
+          for (const mutation of mutationList) {
+            if (mutation.type === 'childList') {
+              document
+                .querySelectorAll('.esri-bookmarks__bookmark')
+                .forEach((bookmark) => {
+                  if (bookmark.childNodes.length < 4) {
+                    let tooltip = document.createElement('div');
+                    tooltip.setAttribute('tooltip', 'Download bookmark');
+                    tooltip.setAttribute('direction', 'left');
+                    tooltip.setAttribute('type', 'widget');
+                    let download_button = document.createElement('div');
+                    tooltip.appendChild(download_button);
+                    download_button.className =
+                      'esri-button download-bookmark-button';
+                    download_button.innerText = '⭳';
+                    download_button.bookmarkName = bookmark.innerText;
+                    download_button.addEventListener('click', (e) => {
+                      this.downloadBookmark(e.currentTarget.bookmarkName);
+                    });
+                    bookmark.insertBefore(tooltip, bookmark.childNodes[2]);
+                  }
+                });
+            }
+          }
+        };
+        const observer = new MutationObserver(callback);
+        observer.observe(bookmarkList, config);
+      }
       this.arcgisEventHandles.push(
         this.Bookmarks.bookmarks.on('change', (e) => {
           if (!this._isMounted) return;
@@ -804,20 +846,6 @@ class BookmarkWidget extends React.Component {
         );
       });
     });
-    document
-      .querySelectorAll('.esri-bookmarks__bookmark')
-      .forEach((bookmark) => {
-        if (bookmark.childNodes.length < 4) {
-          let download_button = document.createElement('button');
-          download_button.className = 'esri-button download-bookmark-button';
-          download_button.innerText = '⭳';
-          download_button.bookmarkName = bookmark.innerText;
-          download_button.addEventListener('click', (e) => {
-            this.downloadBookmark(e.currentTarget.bookmarkName);
-          });
-          bookmark.insertBefore(download_button, bookmark.childNodes[2]);
-        }
-      });
   }
   componentWillUnmount() {
     this._isMounted = false;
@@ -1187,7 +1215,8 @@ class BookmarkWidget extends React.Component {
                 }}
                 type="submit"
               >
-                Upload file
+                <span class="esri-bookmarks__add-bookmark-icon esri-icon-plus"></span>
+                Upload a bookmark
               </button>
             </div>
           </div>

package/src/components/MapViewer/css/ArcgisMap.css

@@ -289,13 +289,16 @@
   color: white !important;
 }
 
-.upload-bookmark-button {
+button.upload-bookmark-button {
+  display: none;
   width: 16rem !important;
   justify-content: start !important;
+  padding-left: 3px;
   border-color: #a0b128 !important;
   margin-left: 0.65rem;
   background-color: white !important;
   color: #a0b128 !important;
+  font-size: 12px !important;
 }
 
 .upload-bookmark-button:hover {