@eeacms/volto-arcgis-block 0.1.72 → 0.1.74

package/CHANGELOG.md

@@ -4,7 +4,17 @@ 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.72](https://github.com/eea/volto-arcgis-block/compare/0.1.71...0.1.72) - 25 October 2022
+### [0.1.74](https://github.com/eea/volto-arcgis-block/compare/0.1.73...0.1.74) - 27 October 2022
+
+### [0.1.73](https://github.com/eea/volto-arcgis-block/compare/0.1.72...0.1.73) - 26 October 2022
+
+#### :rocket: New Features
+
+- feat: CLMS-1489 use cases viewer now saves dropdown expanded state and scroll position when navigating backwards from either a specific use case or a list of use cases (when clicking a cluster on the map) [joewdavies - [`6f821f4`](https://github.com/eea/volto-arcgis-block/commit/6f821f43fe9f31ccba4547cf01078eab8c2cead9)]
+- feat: CLMS-1489 use cases viewer now saves dropdown expanded state and scroll position when navigating backwards from either a specific use case or a list of use cases (when clicking a cluster on the map) [joewdavies - [`0e4e940`](https://github.com/eea/volto-arcgis-block/commit/0e4e940a7d16674d625f62fe70abca74649d5f52)]
+- feat: CLMS-1489 use cases viewer now saves dropdown expanded state and scroll position when navigating backwards from a specific use case to the product list [joewdavies - [`a7a7255`](https://github.com/eea/volto-arcgis-block/commit/a7a7255ccc9246e0eaf3b9cfa68b83920468d1ee)]
+
+### [0.1.72](https://github.com/eea/volto-arcgis-block/compare/0.1.71...0.1.72) - 26 October 2022
 
 ### [0.1.71](https://github.com/eea/volto-arcgis-block/compare/0.1.70...0.1.71) - 13 October 2022
 

package/package.json

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

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -71,8 +71,10 @@ class InfoWidget extends React.Component {
             <div className="use-case-detail-info">
               <b>{UseCase.Copernicus_Land_Monitoring_Service_products_used}</b>
             </div>
-            <div className="use-case-detail-description">
-              <p>{UseCase.Use_case_summary}</p>
+            <div
+              className="use-case-detail-description"
+              dangerouslySetInnerHTML={{ __html: UseCase.Use_case_summary }}
+            >
               {UseCase.Links_to_web_sites && (
                 <div className="use-case-detail-link">
                   <p>
@@ -141,6 +143,22 @@ class InfoWidget extends React.Component {
           className="use-case-element"
           aria-hidden="true"
           onClick={() => {
+            //save scroll position CLMS-1489
+            let productsScrollPosition;
+            let pl = document.getElementById('use-cases-product-list');
+            if (pl) {
+              productsScrollPosition = pl.scrollTop;
+            } else {
+              productsScrollPosition = null;
+            }
+            let casesScrollPosition;
+            let ucl = document.getElementById('use-cases-list');
+            if (ucl) {
+              casesScrollPosition = ucl.scrollTop;
+            } else {
+              casesScrollPosition = null;
+            }
+
             view.popup.close();
             layerControl.getGeometry(val.Spatial_coverage, layerHighlight);
             layerControl.showLayer(layerHighlight.id);
@@ -148,6 +166,10 @@ class InfoWidget extends React.Component {
               useCaseLevel: 4,
               selectedUseCase: val,
               previousState: prevState.useCaseLevel,
+              productsScrollPosition: productsScrollPosition,
+              casesScrollPosition: casesScrollPosition
+                ? casesScrollPosition
+                : prevState,
             }));
           }}
           id={`use_case_${val.OBJECTID}`}
@@ -208,7 +230,7 @@ class InfoWidget extends React.Component {
               See all use cases
             </button>
           </div>
-          <div className="use-cases-products-list">
+          <div className="use-cases-products-list" id="use-cases-list">
             <div key={selectedRegion} className="use-cases-dropdown">
               {this.getDataBrief(regionFeatures)}
             </div>
@@ -244,7 +266,7 @@ class InfoWidget extends React.Component {
               Back
             </button>
           </div>
-          <div className="use-cases-products-list">
+          <div className="use-cases-products-list" id="specific-use-cases-list">
             <div key={selectedRegion} className="use-cases-dropdown">
               {this.getDataBrief(regionFeatures)}
             </div>
@@ -286,7 +308,8 @@ class InfoWidget extends React.Component {
       <div key={topic_name} className="use-cases-dropdown">
         <div
           className="ccl-expandable__button"
-          aria-expanded="false"
+          aria-expanded={mapViewer.state.activeDropdowns.includes(topic_name)}
+          id={topic_name}
           onClick={this.toggleDropdownContent.bind(this)}
           onKeyDown={this.toggleDropdownContent.bind(this)}
           tabIndex="0"
@@ -306,13 +329,32 @@ class InfoWidget extends React.Component {
   toggleDropdownContent(e) {
     let aria = e.target.getAttribute('aria-expanded');
     e.target.setAttribute('aria-expanded', aria === 'true' ? 'false' : 'true');
+
+    // dropdown expanded
     if (aria === 'false') {
+      //save for reload
+      mapViewer.state.activeDropdowns.push(e.target.getAttribute('id'));
+
+      //scroll position
       document.querySelector('.use-cases-products-list').scrollTo({
         top:
           e.currentTarget.offsetTop -
           document.querySelector('.use-cases-products-list').offsetTop,
         behavior: 'smooth',
       });
+    } else {
+      if (
+        //remove for reload
+        mapViewer.state.activeDropdowns.includes(e.target.getAttribute('id'))
+      ) {
+        const index = mapViewer.state.activeDropdowns.indexOf(
+          e.target.getAttribute('id'),
+        );
+        if (index > -1) {
+          // only splice array when item is found
+          mapViewer.state.activeDropdowns.splice(index, 1);
+        }
+      }
     }
   }
 
@@ -414,7 +456,10 @@ class InfoWidget extends React.Component {
               </span>
               use cases
             </div>
-            <div className="use-cases-products-list">
+            <div
+              className="use-cases-products-list"
+              id="use-cases-product-list"
+            >
               {this.setDOMSummary()}
             </div>
           </>
@@ -460,6 +505,27 @@ class InfoWidget extends React.Component {
     }
   }
 
+  componentDidUpdate() {
+    // code to run after initial render goes here
+    try {
+      // go to saved scroll position(s)
+      let pl = document.getElementById('use-cases-product-list');
+      if (pl) {
+        pl.scrollTo({
+          top: mapViewer.state.productsScrollPosition,
+          behavior: 'auto',
+        });
+      }
+      let ucl = document.getElementById('use-cases-list');
+      if (ucl) {
+        ucl.scrollTo({
+          top: mapViewer.state.casesScrollPosition,
+          behavior: 'auto',
+        });
+      }
+    } catch {}
+  }
+
   /**
    * This method renders the component
    * @returns jsx

package/src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -83,7 +83,21 @@ class NavigationControl extends React.Component {
    */
   returnToPrevious() {
     // this.layerControl.hideLayer(layerHighlight.id);
-
+    // CLMS-1489
+    let productsScrollPosition;
+    let pl = document.getElementById('use-cases-product-list');
+    if (pl) {
+      productsScrollPosition = pl.scrollTop;
+    } else {
+      productsScrollPosition = null;
+    }
+    let casesScrollPosition;
+    let ucl = document.getElementById('use-cases-list');
+    if (ucl) {
+      casesScrollPosition = ucl.scrollTop;
+    } else {
+      casesScrollPosition = null;
+    }
     switch (
       mapViewer.state.previousState === mapViewer.state.useCaseLevel
         ? mapViewer.state.useCaseLevel - 1
@@ -101,14 +115,26 @@ class NavigationControl extends React.Component {
           mapViewer.state.selectedUseCase.Region,
           layerSpatial,
         );
-        mapViewer.setState(() => ({
+        mapViewer.setState((prevState) => ({
           useCaseLevel: 2,
           region: mapViewer.state.selectedUseCase.Region,
+          productsScrollPosition: productsScrollPosition
+            ? productsScrollPosition
+            : prevState.productsScrollPosition,
+          casesScrollPosition: casesScrollPosition
+            ? casesScrollPosition
+            : prevState.casesScrollPosition,
         }));
         break;
       case 3:
-        mapViewer.setState(() => ({
+        mapViewer.setState((prevState) => ({
           useCaseLevel: 3,
+          productsScrollPosition: productsScrollPosition
+            ? productsScrollPosition
+            : prevState.productsScrollPosition,
+          casesScrollPosition: casesScrollPosition
+            ? casesScrollPosition
+            : prevState.casesScrollPosition,
         }));
         break;
       default:

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -61,6 +61,9 @@ class UseCasesMapViewer extends React.Component {
       selectedUseCases: [],
       previousState: 1,
       showMapMenu: false,
+      activeDropdowns: [],
+      productsScrollPosition: 0,
+      casesScrollPosition: 0,
     };
   }
 
@@ -245,6 +248,21 @@ class UseCasesMapViewer extends React.Component {
     });
     view.on('click', (e) => {
       let screenPoint = { x: e.x, y: e.y };
+      // CLMS-1489
+      let productsScrollPosition;
+      let pl = document.getElementById('use-cases-product-list');
+      if (pl) {
+        productsScrollPosition = pl.scrollTop;
+      } else {
+        productsScrollPosition = null;
+      }
+      let casesScrollPosition;
+      let ucl = document.getElementById('use-cases-list');
+      if (ucl) {
+        casesScrollPosition = ucl.scrollTop;
+      } else {
+        casesScrollPosition = null;
+      }
 
       (async () => {
         let selectedPoint = await layerControl.getPointInfo(screenPoint);
@@ -259,12 +277,26 @@ class UseCasesMapViewer extends React.Component {
               selectedRegion,
               layerSpatial,
             );
+            // CLMS-1489
+            let productsScrollPosition;
+            let pl = document.getElementById('use-cases-product-list');
+            if (pl) {
+              productsScrollPosition = pl.scrollTop;
+            } else {
+              productsScrollPosition = 0;
+            }
             this.setState((prevState) => {
               return {
                 useCaseLevel: 2,
                 selectedUseCase: selectedPoint,
                 region: selectedRegion,
                 previousState: prevState.useCaseLevel,
+                productsScrollPosition: productsScrollPosition
+                  ? productsScrollPosition
+                  : prevState.productsScrollPosition,
+                casesScrollPosition: casesScrollPosition
+                  ? casesScrollPosition
+                  : prevState.casesScrollPosition,
               };
             });
           } else if (
@@ -288,6 +320,12 @@ class UseCasesMapViewer extends React.Component {
                       selectedUseCase: data,
                       region: data.Region,
                       previousState: prevState.useCaseLevel,
+                      productsScrollPosition: productsScrollPosition
+                        ? productsScrollPosition
+                        : prevState.productsScrollPosition,
+                      casesScrollPosition: casesScrollPosition
+                        ? casesScrollPosition
+                        : prevState.casesScrollPosition,
                     };
                   });
                 },
@@ -307,6 +345,12 @@ class UseCasesMapViewer extends React.Component {
                       selectedUseCase: selectedPoint,
                       selectedUseCases: data.features,
                       previousState: prevState.useCaseLevel,
+                      productsScrollPosition: productsScrollPosition
+                        ? productsScrollPosition
+                        : prevState.productsScrollPosition,
+                      casesScrollPosition: casesScrollPosition
+                        ? casesScrollPosition
+                        : prevState.casesScrollPosition,
                     };
                   });
                 } else {
@@ -322,6 +366,12 @@ class UseCasesMapViewer extends React.Component {
                       useCaseLevel: 4,
                       selectedUseCase: selectedPoint,
                       previousState: prevState.useCaseLevel,
+                      productsScrollPosition: productsScrollPosition
+                        ? productsScrollPosition
+                        : prevState.productsScrollPosition,
+                      casesScrollPosition: casesScrollPosition
+                        ? casesScrollPosition
+                        : prevState.casesScrollPosition,
                     };
                   });
                 }