@eeacms/volto-marine-policy 2.0.23 → 2.0.25

package/CHANGELOG.md

@@ -4,6 +4,31 @@ 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).
 
+### [2.0.25](https://github.com/eea/volto-marine-policy/compare/2.0.24...2.0.25) - 27 August 2025
+
+#### :hammer_and_wrench: Others
+
+- pin volto-openlayers-map to 1.0.0 [Nilesh - [`49c4af6`](https://github.com/eea/volto-marine-policy/commit/49c4af6c0edd7473d753a193f8c98c1789818e0f)]
+- fix volto-openlayers-map module resolving [nileshgulia1 - [`c27cfa7`](https://github.com/eea/volto-marine-policy/commit/c27cfa7a067b7c42fdc85a3b847001cd8e3db088)]
+- eslint [nileshgulia1 - [`2c5300e`](https://github.com/eea/volto-marine-policy/commit/2c5300eba990cc4a3d4c3e87d69faa00d93e756c)]
+- eslint . [nileshgulia1 - [`87664a3`](https://github.com/eea/volto-marine-policy/commit/87664a3f5252c4f41ca1a1b069fc3073627e2dcc)]
+- fix imports [nileshgulia1 - [`9baee98`](https://github.com/eea/volto-marine-policy/commit/9baee9884012a41db83c178f3e3e1058ff6ae4ee)]
+- update [nileshgulia1 - [`0d4694c`](https://github.com/eea/volto-marine-policy/commit/0d4694cc75d8c37e1d49fe4808b21e5de9dae9d3)]
+- update open layers map config in simple data block refs#288034 [nileshgulia1 - [`cc14bb7`](https://github.com/eea/volto-marine-policy/commit/cc14bb7e178d111dc0e560d97c83b1f503b607bf)]
+### [2.0.24](https://github.com/eea/volto-marine-policy/compare/2.0.23...2.0.24) - 27 August 2025
+
+#### :rocket: New Features
+
+- feat: select font size for title [Teodor - [`74a1526`](https://github.com/eea/volto-marine-policy/commit/74a1526e7267d72cab7cd1fac838f26f08d51d47)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c30a127`](https://github.com/eea/volto-marine-policy/commit/c30a12768f15e1f325d7cabc42660657002ec2b5)]
+
+#### :hammer_and_wrench: Others
+
+- fix EEA colors for background [Teodor - [`73fed1a`](https://github.com/eea/volto-marine-policy/commit/73fed1a8129ed4730bf4e695c8c1feabd2d4391e)]
+- toc styles [narcis2005 - [`687008b`](https://github.com/eea/volto-marine-policy/commit/687008be99f618cb0f2ca98304c9fe04d0aaefc8)]
 ### [2.0.23](https://github.com/eea/volto-marine-policy/compare/2.0.22...2.0.23) - 26 August 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/Blocks/DemoSitesExplorer/DemoSitesListing.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { centerAndResetMapZoom, isValidURL } from './utils';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
 const showPageNr = (pageNr, currentPage, numberOfPages) => {
   // show first 5 pages
@@ -24,8 +25,8 @@ const showPageNr = (pageNr, currentPage, numberOfPages) => {
   return false;
 };
 
-export default function DemoSitesList(props) {
-  const { selectedCase, onSelectedCase, pointsSource, map } = props;
+function DemoSitesList(props) {
+  const { selectedCase, onSelectedCase, pointsSource, map, ol } = props;
   // const reSearch = new RegExp(`\\b(${searchInput})\\b`, 'gi');
   const [currentPage, setCurrentPage] = React.useState(1);
 
@@ -155,7 +156,7 @@ export default function DemoSitesList(props) {
                         // scrollToElement('search-input');
                         // reset map zoom
                         onSelectedCase(null);
-                        centerAndResetMapZoom(map);
+                        centerAndResetMapZoom({ map, ol });
                         map.getInteractions().array_[9].getFeatures().clear();
                       }}
                     >
@@ -376,3 +377,5 @@ export default function DemoSitesList(props) {
     </>
   );
 }
+
+export default withOpenLayers(DemoSitesList);

package/src/components/Blocks/DemoSitesExplorer/DemoSitesMap.jsx

@@ -2,12 +2,17 @@ import React from 'react';
 
 import cx from 'classnames';
 
-import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import {
+  Map,
+  Layer,
+  Layers,
+  Controls,
+  useMapContext,
+} from '@eeacms/volto-openlayers-map/api';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
 import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
-import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
 import {
   centerAndResetMapZoom,
@@ -25,7 +30,7 @@ const MapContextGateway = ({ setMap }) => {
   return null;
 };
 
-export default function DemoSitesMap(props) {
+function DemoSitesMap(props) {
   const {
     items,
     activeItems,
@@ -37,8 +42,9 @@ export default function DemoSitesMap(props) {
     setMap,
     highlightedIndex,
     setHighlightedIndex,
+    ol,
   } = props;
-  const features = getFeatures(items);
+  const features = getFeatures({ cases: items, ol });
   const [resetMapButtonClass, setResetMapButtonClass] =
     React.useState('inactive');
 
@@ -72,11 +78,11 @@ export default function DemoSitesMap(props) {
 
     if (activeItems) {
       pointsSource.clear();
-      pointsSource.addFeatures(getFeatures(activeItems));
+      pointsSource.addFeatures(getFeatures({ cases: activeItems, ol }));
       // hideFilters && zoomMapToFeatures(map, getFeatures(activeItems));
       // zoomMapToFeatures(map, getFeatures(activeItems));
     }
-  }, [map, activeItems, pointsSource, hideFilters]);
+  }, [map, activeItems, pointsSource, hideFilters, ol]);
 
   React.useEffect(() => {
     if (!map) return null;
@@ -119,11 +125,11 @@ export default function DemoSitesMap(props) {
     return () => {
       map.un('moveend', moveendListener);
     };
-  }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass]);
+  }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass, ol]);
 
   const clusterStyle = React.useMemo(
-    () => selectedClusterStyle(selectedCase),
-    [selectedCase],
+    () => selectedClusterStyle({ selectedCase, ol }),
+    [selectedCase, ol],
   );
 
   const MapWithSelection = React.useMemo(() => Map, []);
@@ -159,9 +165,9 @@ export default function DemoSitesMap(props) {
               setHighlightedIndex(5);
               if (hideFilters) {
                 // zoomMapToFeatures(map, getFeatures(activeItems));
-                centerAndResetMapZoom(map);
+                centerAndResetMapZoom({ map, ol });
               } else {
-                centerAndResetMapZoom(map);
+                centerAndResetMapZoom({ map, ol });
                 // zoomMapToFeatures(map, getFeatures(activeItems));
               }
               map.getInteractions().array_[9].getFeatures().clear();
@@ -194,7 +200,7 @@ export default function DemoSitesMap(props) {
   ) : null;
 }
 
-const selectedClusterStyle = (selectedFeature) => {
+const selectedClusterStyle = ({ selectedFeature, ol }) => {
   function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
     let clusterStyle = styleCache[size];
@@ -247,3 +253,5 @@ const selectedClusterStyle = (selectedFeature) => {
   }
   return _clusterStyle;
 };
+
+export default withOpenLayers(DemoSitesMap);

package/src/components/Blocks/DemoSitesExplorer/FeatureInteraction.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 // import { zoomMapToFeatures } from './utils';
 
-export const useStyles = () => {
+export const useStyles = ({ ol }) => {
   const selected = React.useMemo(
     () =>
       new ol.style.Style({
@@ -18,7 +18,7 @@ export const useStyles = () => {
           }),
         }),
       }),
-    [],
+    [ol],
   );
 
   const selectStyle = React.useCallback(
@@ -35,10 +35,10 @@ export const useStyles = () => {
   return { selected, selectStyle };
 };
 
-export default function FeatureInteraction({ onFeatureSelect }) {
+function FeatureInteraction({ onFeatureSelect, ol }) {
   // console.log('featureinteraction', selectedCase);
   const { map } = useMapContext();
-  const { selectStyle } = useStyles();
+  const { selectStyle } = useStyles({ ol });
 
   const select = new ol.interaction.Select({
     condition: ol.condition.click,
@@ -88,3 +88,5 @@ export default function FeatureInteraction({ onFeatureSelect }) {
 
   return null;
 }
+
+export default withOpenLayers(FeatureInteraction);

package/src/components/Blocks/DemoSitesExplorer/InfoOverlay.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import FeatureDisplay from './FeatureDisplay';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
 
-export default function InfoOverlay({
+function InfoOverlay({
   selectedFeature,
   onFeatureSelect,
   layerId,
   // hideFilters,
+  ol,
 }) {
   const { map } = useMapContext();
   const [tooltip, setTooltipRef] = React.useState();
@@ -63,7 +64,7 @@ export default function InfoOverlay({
       map.un('click', handler);
       map.removeOverlay(overlay);
     };
-  }, [map, tooltip, onFeatureSelect]); //
+  }, [map, tooltip, onFeatureSelect, ol]); //
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);
@@ -82,3 +83,5 @@ export default function InfoOverlay({
     </div>
   ) : null;
 }
+
+export default withOpenLayers(InfoOverlay);

package/src/components/Blocks/DemoSitesExplorer/utils.js

@@ -1,5 +1,3 @@
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-
 export const objectivesCustomOrder = [
   'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity',
   'Objective 2: Prevent and eliminate pollution of our oceans, seas and waters',
@@ -41,7 +39,7 @@ export function isValidURL(string) {
   }
 }
 
-export function centerAndResetMapZoom(map) {
+export function centerAndResetMapZoom({ map, ol }) {
   map.getView().animate({
     zoom: 3.4,
     duration: 1000,
@@ -56,14 +54,14 @@ export function scrollToElement(elementId) {
   });
 }
 
-export function getExtentOfFeatures(features) {
+export function getExtentOfFeatures({ features, ol }) {
   const points = features.map((f) => f.getGeometry().flatCoordinates);
   const point = new ol.geom.MultiPoint(points);
   return point.getExtent();
 }
 
-export function zoomMapToFeatures(map, features, threshold = 500) {
-  const extent = getExtentOfFeatures(features);
+export function zoomMapToFeatures({ map, features, ol, threshold = 500 }) {
+  const extent = getExtentOfFeatures({ map, features, ol });
 
   // let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
   // extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
@@ -89,8 +87,8 @@ export function zoomMapToFeatures(map, features, threshold = 500) {
   }
 }
 
-export function getFeatures(cases) {
-  const Feature = ol.ol.Feature;
+export function getFeatures({ cases, ol }) {
+  const Feature = ol.Feature;
   const colors = {
     'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity':
       '#007b6c',

package/src/customizations/@eeacms/volto-block-toc/Block/schema.js

@@ -0,0 +1,73 @@
+const TableOfContentsSchema = ({ data }) => {
+  const { variation = 'default' } = data;
+
+  return {
+    title: 'Table of Contents',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'title',
+          'hide_title',
+          'title_font_size',
+          ...(variation === 'default' ? ['ordered'] : []),
+          ...(variation === 'horizontalMenu' ? ['sticky'] : []),
+          ...(variation === 'accordionMenu' ? ['sticky', 'side_menu'] : []),
+          ...(variation === 'accordionMenu' ? ['bulleted_list'] : []),
+          'levels',
+        ],
+      },
+    ],
+    properties: {
+      title: {
+        title: 'Block title',
+      },
+      hide_title: {
+        title: 'Hide title',
+        type: 'boolean',
+      },
+      title_font_size: {
+        title: 'Title font size',
+        choices: [
+          ['small', 'Small'],
+          ['medium', 'Medium'],
+          ['large', 'Large'],
+        ],
+        default: 'medium',
+      },
+      sticky: {
+        title: 'Sticky on top',
+        type: 'boolean',
+      },
+      side_menu: {
+        title: 'Use as side menu',
+        type: 'boolean',
+      },
+      levels: {
+        title: 'Entries',
+        isMulti: true,
+        choices: [
+          ['h1', 'h1'],
+          ['h2', 'h2'],
+          ['h3', 'h3'],
+          ['h4', 'h4'],
+          ['h5', 'h5'],
+          ['h6', 'h6'],
+        ],
+      },
+      ordered: {
+        title: 'Ordered',
+        type: 'boolean',
+      },
+      bulleted_list: {
+        title: 'Use bullet list',
+        type: 'boolean',
+        description: 'Bullet point for child items',
+      },
+    },
+    required: [],
+  };
+};
+
+export default TableOfContentsSchema;

package/src/customizations/@eeacms/volto-block-toc/Block/variations/DefaultTocRenderer.jsx

@@ -0,0 +1,85 @@
+/**
+ * View toc block.
+ * @module components/manage/Blocks/ToC/View
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { map } from 'lodash';
+import { List } from 'semantic-ui-react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import Slugger from 'github-slugger';
+import { normalizeString } from './helpers';
+import cx from 'classnames';
+
+const RenderListItems = ({ items, data }) => {
+  return map(items, (item) => {
+    const { id, level, title, override_toc, plaintext } = item;
+    const slug = override_toc
+      ? Slugger.slug(normalizeString(plaintext))
+      : Slugger.slug(normalizeString(title)) || id;
+    return (
+      item && (
+        <List.Item key={id} className={`item headline-${level}`} as="li">
+          <AnchorLink href={`#${slug}`}>{title}</AnchorLink>
+          {item.items?.length > 0 && (
+            <List
+              ordered={data.ordered}
+              bulleted={!data.ordered}
+              as={data.ordered ? 'ol' : 'ul'}
+            >
+              <RenderListItems items={item.items} data={data} />
+            </List>
+          )}
+        </List.Item>
+      )
+    );
+  });
+};
+
+/**
+ * View toc block class.
+ * @class View
+ * @extends Component
+ */
+const View = ({ data, tocEntries }) => {
+  const titleFontSizeClass = data.title_font_size
+    ? `toc-title-${data.title_font_size}`
+    : 'toc-title-medium';
+
+  return (
+    <>
+      {data.title && !data.hide_title ? (
+        <h2 className={cx(titleFontSizeClass)}>
+          {data.title || (
+            <FormattedMessage
+              id="Table of Contents"
+              defaultMessage="Table of Contents"
+            />
+          )}
+        </h2>
+      ) : (
+        ''
+      )}
+      <List
+        ordered={data.ordered}
+        bulleted={!data.ordered}
+        as={data.ordered ? 'ol' : 'ul'}
+      >
+        <RenderListItems items={tocEntries} data={data} />
+      </List>
+    </>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default injectIntl(View);

package/src/customizations/@eeacms/volto-block-toc/Block/variations/helpers.js

@@ -0,0 +1,8 @@
+/**
+ * This function should be removed when upgrading to Volto 17.
+ * Replace with Volto's normalizeString from @plone/volto/helpers.
+ */
+
+export function normalizeString(str) {
+  return str.normalize('NFD').replace(/\p{Diacritic}/gu, '');
+}

package/src/index.js

@@ -16,6 +16,7 @@ import { breadcrumb, localnavigation, workflowProgressPath } from './reducers';
 import customBlockTemplates from '@eeacms/volto-marine-policy/components/Blocks/CustomBlockTemplates/customBlockTemplates';
 import TextAlignWidget from './components/Widgets/TextAlign';
 import './slate-styles.less';
+import './less/toc-title-sizes.less';
 
 import installSearchEngine from './search';
 
@@ -36,23 +37,6 @@ import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/as
 import europeanComissionLogo from '@eeacms/volto-marine-policy/static/ec_logo_white.svg';
 import MeasureView from '@eeacms/volto-marine-policy/components/Widgets/MeasureViewWidget';
 
-const available_colors = [
-  '#ffffff',
-  '#f7f3ef',
-  '#e3edf7',
-  '#002d54',
-  '#59d3ff',
-  '#2dd2b7',
-  '#1271e1',
-  '#826A6A',
-  '#FAD0C3',
-  '#F3E2AB',
-  '#C1E1C5',
-  '#BEDADC',
-  '#BED3F3',
-  '#000000',
-];
-
 const restrictedBlocks = ['imagecards'];
 
 const messages = defineMessages({
@@ -204,8 +188,6 @@ const applyConfig = (config) => {
 
   config.settings.navDepth = 3;
 
-  config.settings.available_colors = available_colors;
-
   // config.settings.externalRoutes = [
   //   ...(config.settings.externalRoutes || []),
   //   ...(config.settings.prefixPath

package/src/less/toc-title-sizes.less

@@ -0,0 +1,17 @@
+/* TOC Title Font Size Customizations */
+.table-of-contents {
+  .toc-title-small {
+    font-size: 1.2rem !important;
+    line-height: 1.3;
+  }
+
+  .toc-title-medium {
+    font-size: 1.5rem !important;
+    line-height: 1.3;
+  }
+
+  .toc-title-large {
+    font-size: 2rem !important;
+    line-height: 1.2;
+  }
+}

package/theme/extras/tocnav.less

@@ -0,0 +1,25 @@
+.table-of-contents.accordionMenu {
+  .ui.accordion {
+    .accordion {
+      margin: 1em 0em 0em !important;
+      padding: 0em;
+    }
+    .title {
+      padding: 0.75em 2em;
+    }
+    .content {
+      --bg-color: initial !important;
+      ul {
+        padding: 0.5rem 10px 1.3rem 50px;
+      }
+      .accordion-list-bulleted li::marker {
+        content: '\25CB';
+        color: @secondaryColor;
+        font-size: 1.2em;
+      }
+      .title {
+        font-size: 1em;
+      }
+    }
+  }
+}

package/theme/globals/site.overrides

@@ -3,6 +3,7 @@
 *******************************/
 
 @import '../extras/print';
+@import '../extras/tocnav';
 
 .documentFirstHeading {
   border-bottom: none !important;