@eeacms/volto-cca-policy 0.3.18 → 0.3.20

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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.3.20](https://github.com/eea/volto-cca-policy/compare/0.3.19...0.3.20) - 24 March 2025
+
+#### :rocket: New Features
+
+- feat: refs #285888 make case study header click open image carousel [laszlocseh - [`9bdf161`](https://github.com/eea/volto-cca-policy/commit/9bdf1615b0120cb22be342c4cb4396c4a81c39dc)]
+
+### [0.3.19](https://github.com/eea/volto-cca-policy/compare/0.3.18...0.3.19) - 21 March 2025
+
+#### :bug: Bug Fixes
+
+- fix: stylelint [kreafox - [`1337dee`](https://github.com/eea/volto-cca-policy/commit/1337dee1acd7f239c605c89536ddd4915c89409b)]
+- fix: stylelint [kreafox - [`bae43eb`](https://github.com/eea/volto-cca-policy/commit/bae43ebbba20085f04a37741962ce93e6a16b006)]
+- fix: stylelint [kreafox - [`118510b`](https://github.com/eea/volto-cca-policy/commit/118510be22b732779c4090143e0ffb27c7e6d3ed)]
+- fix: stylelint [kreafox - [`22d0850`](https://github.com/eea/volto-cca-policy/commit/22d08500f566acceaf8f1cf80f4f720f988cf085)]
+- fix: stylelint [kreafox - [`54efc0b`](https://github.com/eea/volto-cca-policy/commit/54efc0b7048d81071ae1f8fff85faad9b7aa646d)]
+- fix: ast navigation for AdaptationSupportTool [laszlocseh - [`94a58dc`](https://github.com/eea/volto-cca-policy/commit/94a58dc30c7b5339a814c714c1e982bea8e08727)]
+
+#### :hammer_and_wrench: Others
+
+- Tweaks to functionality of case study explorer [Tiberiu Ichim - [`e7cad8a`](https://github.com/eea/volto-cca-policy/commit/e7cad8aa932373b255c875f14f59a18ef3aa51c0)]
 ### [0.3.18](https://github.com/eea/volto-cca-policy/compare/0.3.17...0.3.18) - 21 March 2025
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.18",
+  "version": "0.3.20",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureDisplay.jsx

@@ -1,9 +1,19 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Icon } from 'semantic-ui-react';
 
-export default function FeatureDisplay({ feature }) {
+export default function FeatureDisplay({ feature, onClose }) {
   return feature ? (
     <div id="csepopup">
+      <div
+        className="close"
+        role="button"
+        onClick={onClose}
+        tabIndex={-1}
+        onKeyDown={onClose}
+      >
+        <Icon className="ri-close-circle-line" />
+      </div>
       <p>
         <strong>
           <a className="dbitem" href={feature.url} target="_blank">

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureInteraction.jsx

@@ -121,15 +121,6 @@ export default function FeatureInteraction({
 
     function handleClick(evt) {
       if (evt.originalEvent.target.tagName === 'A') return;
-      if (selectedFeature) {
-        onFeatureSelect(null);
-
-        const view = map.getView();
-        view.animate({
-          ...mapCenter,
-          duration: 1000,
-        });
-      }
     }
 
     function handlePointerMove(e) {
@@ -158,6 +149,20 @@ export default function FeatureInteraction({
     clusterCirclesLayer,
   ]);
 
+  function onClosePopup(evt) {
+    evt.preventDefault();
+
+    if (selectedFeature) {
+      onFeatureSelect(null);
+
+      const view = map.getView();
+      view.animate({
+        ...mapCenter,
+        duration: 2000,
+      });
+    }
+  }
+
   return isClient ? (
     <div
       id="popup-overlay"
@@ -169,7 +174,9 @@ export default function FeatureInteraction({
         visibility: selectedFeature ? 'visible' : 'hidden',
       }}
     >
-      {selectedFeature ? <FeatureDisplay feature={selectedFeature} /> : null}
+      {selectedFeature ? (
+        <FeatureDisplay feature={selectedFeature} onClose={onClosePopup} />
+      ) : null}
     </div>
   ) : null;
 }

package/src/components/manage/Blocks/CaseStudyExplorer/styles.less

@@ -6,6 +6,15 @@
   border-bottom: 6px solid #005c96;
   background-color: white;
 
+  .close {
+    position: relative;
+    top: -8px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    float: right;
+  }
+
   a.dbitem {
     font-size: 14px;
     text-decoration: none;

package/src/components/manage/Blocks/CaseStudyExplorer/useInteractiveStyles.jsx

@@ -10,7 +10,7 @@ function getStyle(size, haveAdaptecca) {
       size === 1
         ? new ol.style.Style({
             image: new ol.style.Circle({
-              radius: 5,
+              radius: 7,
               stroke: new ol.style.Stroke({
                 color: '#fff',
               }),

package/src/components/theme/ASTNavigation/ASTNavigation.jsx

@@ -29,7 +29,8 @@ const ASTNavigation = (props) => {
           rootPath,
           {
             'path.depth': 1,
-            portal_type: ['collective.cover.content'],
+            portal_type: ['Folder'],
+            object_provides: 'eea.climateadapt.interfaces.ICover',
             review_state: 'published',
             b_size: 100,
           },

package/src/components/theme/ImageGallery/ImageGallery.jsx

@@ -10,10 +10,27 @@ import './styles.less';
 const Slider = loadable(() => import('react-slick'));
 
 const ImageGallery = (props) => {
-  const { items = [] } = props;
+  const {
+    items = [],
+    propOpen,
+    setPropOpen,
+    propSlideIndex,
+    setPropSlideIndex,
+  } = props;
+  // if state is managed from an external component then use the external state
+  // else use the local one
+  const [localOpen, setLocalOpen] = React.useState(false);
+  const open = propOpen === undefined ? localOpen : propOpen;
+  const setOpen = propOpen === undefined ? setLocalOpen : setPropOpen;
+
+  // if state is managed from an external component then use the external state
+  // else use the local one
+  const [localSlideIndex, setLocalSlideIndex] = React.useState(0);
+  const slideIndex =
+    propSlideIndex === undefined ? localSlideIndex : propSlideIndex;
+  const setSlideIndex =
+    propSlideIndex === undefined ? setLocalSlideIndex : setPropSlideIndex;
 
-  const [open, setOpen] = React.useState(false);
-  const [slideIndex, setSlideIndex] = React.useState(0);
   const [updateCount, setUpdateCount] = React.useState(0);
   const sliderRef = React.useRef(null);
 
@@ -32,7 +49,7 @@ const ImageGallery = (props) => {
       useTransform: false,
       initialSlide: slideIndex,
     }),
-    [slideIndex, updateCount],
+    [slideIndex, setSlideIndex, updateCount],
   );
 
   const handleClick = () => {

package/src/components/theme/Views/CaseStudyView.jsx

@@ -222,11 +222,24 @@ export const sectionID = (title) => findSection(title)?.section || title;
 const PhotoGallery = ({ content }) => {
   const { cca_gallery } = content;
 
+  const [open, setOpen] = React.useState(false);
+  const [slideIndex, setSlideIndex] = React.useState(0);
+
+  const handleTitleClick = () => {
+    setSlideIndex(0);
+    setOpen(true);
+  };
   return (
     <>
       {cca_gallery && cca_gallery.length > 0 && (
         <div className="case-study-gallery">
-          <div className="gallery-title">
+          <div
+            className="gallery-title"
+            tabIndex={0}
+            role="button"
+            onClick={handleTitleClick}
+            onKeyDown={handleTitleClick}
+          >
             <span>
               <FormattedMessage
                 id="Case Study illustrations"
@@ -236,7 +249,13 @@ const PhotoGallery = ({ content }) => {
             <span> ({cca_gallery.length}) </span>
             <Icon className="ri-image-fill" />
           </div>
-          <ImageGallery items={cca_gallery} />
+          <ImageGallery
+            items={cca_gallery}
+            propOpen={open}
+            setPropOpen={setOpen}
+            propSlideIndex={slideIndex}
+            setPropSlideIndex={setSlideIndex}
+          />
         </div>
       )}
     </>