@eeacms/volto-cca-policy 0.3.63 → 0.3.64

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.64](https://github.com/eea/volto-cca-policy/compare/0.3.63...0.3.64) - 11 July 2025
+
+#### :rocket: New Features
+
+- feat: add flourish embed block - refs #289220 [kreafox - [`6a97c0a`](https://github.com/eea/volto-cca-policy/commit/6a97c0a1b71ff9ad12201a79c951e189931f440d)]
+
+#### :nail_care: Enhancements
+
+- change: improve edit mode message for missing Flourish embed code [kreafox - [`6eb9b2a`](https://github.com/eea/volto-cca-policy/commit/6eb9b2af688ad8a4552382378c8046203ee3e456)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c1813ef`](https://github.com/eea/volto-cca-policy/commit/c1813ef923c3a6e8a37a0a48b7f88772b260fb15)]
+
 ### [0.3.63](https://github.com/eea/volto-cca-policy/compare/0.3.62...0.3.63) - 9 July 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/manage/Blocks/FlourishEmbedBlock/FlourishEmbedBlockEdit.jsx

@@ -0,0 +1,33 @@
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import FlourishEmbedBlockView from './FlourishEmbedBlockView';
+import schema from './schema';
+
+const FlourishEmbedBlockEdit = (props) => {
+  const { block, data, onChangeBlock, selected, id } = props;
+
+  return (
+    <>
+      <div className="flourish-edit-view">
+        <FlourishEmbedBlockView data={data} id={id} mode="edit" />
+      </div>
+
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+export default FlourishEmbedBlockEdit;

package/src/components/manage/Blocks/FlourishEmbedBlock/FlourishEmbedBlockView.jsx

@@ -0,0 +1,40 @@
+import { PrivacyProtection } from '@eeacms/volto-embed';
+import {
+  buildFlourishUrl,
+  flourishDataprotection,
+  getDataSrcFromEmbedCode,
+} from '@eeacms/volto-cca-policy/helpers/flourishUtils';
+
+import './style.less';
+
+const FlourishEmbedBlockView = ({ data, mode }) => {
+  const isEditMode = mode === 'edit';
+  const embed_code = data?.embed_code || '';
+  const flourishPath = getDataSrcFromEmbedCode(embed_code);
+  const flourishUrl = buildFlourishUrl(flourishPath);
+
+  if (!flourishUrl)
+    return isEditMode ? (
+      <div>Add a valid Flourish embed code to display the visualization.</div>
+    ) : null;
+
+  return (
+    <PrivacyProtection
+      data={{
+        url: flourishUrl,
+        dataprotection: flourishDataprotection,
+      }}
+    >
+      <iframe
+        height="980"
+        width="100%"
+        src={flourishUrl}
+        title="Flourish visualization"
+        className="flourish-embed-iframe"
+        sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
+      ></iframe>
+    </PrivacyProtection>
+  );
+};
+
+export default FlourishEmbedBlockView;

package/src/components/manage/Blocks/FlourishEmbedBlock/index.js

@@ -0,0 +1,22 @@
+import FlourishEmbedBlockEdit from './FlourishEmbedBlockEdit';
+import FlourishEmbedBlockView from './FlourishEmbedBlockView';
+import sliderSVG from '@plone/volto/icons/slider.svg';
+
+export default function installBlock(config) {
+  config.blocks.blocksConfig.FlourishEmbedBlock = {
+    id: 'FlourishEmbedBlock',
+    title: 'Flourish visualization',
+    icon: sliderSVG,
+    group: 'site',
+    edit: FlourishEmbedBlockEdit,
+    view: FlourishEmbedBlockView,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+}

package/src/components/manage/Blocks/FlourishEmbedBlock/schema.js

@@ -0,0 +1,17 @@
+export default {
+  title: 'Flourish visualization block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['embed_code'],
+    },
+  ],
+  properties: {
+    embed_code: {
+      title: 'Flourish embed code',
+      widget: 'textarea',
+    },
+  },
+  required: [],
+};

package/src/components/manage/Blocks/FlourishEmbedBlock/style.less

@@ -0,0 +1,13 @@
+.flourish-edit-view {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.5);
+    content: '';
+  }
+}

package/src/components/manage/Blocks/index.js

@@ -19,6 +19,7 @@ import installTabsBlock from './TabsBlock';
 import installRedirectBlock from './RedirectBlock';
 import installContentLinks from './ContentLinks';
 import installASTNavigation from './ASTNavigation';
+import installFlourishEmbedBlock from './FlourishEmbedBlock';
 
 // import installMKHMap from './MKHMap';
 // import installCountryMapHeatIndex from './CountryMapHeatIndex';
@@ -52,6 +53,7 @@ export default function installBlocks(config) {
     installContentLinks,
     installASTNavigation,
     installCountryMapProfile,
+    installFlourishEmbedBlock,
     // installMKHMap,
     // installCountryMapHeatIndex,
   )(config);

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

@@ -7,6 +7,11 @@ import {
   PortalMessage,
 } from '@eeacms/volto-cca-policy/components';
 import { fixEmbedURL } from '@eeacms/volto-cca-policy/helpers';
+import {
+  buildFlourishUrl,
+  flourishDataprotection,
+  getDataSrcFromEmbedCode,
+} from '@eeacms/volto-cca-policy/helpers/flourishUtils';
 import {
   TOOL,
   GUIDANCE,
@@ -30,51 +35,18 @@ import {
 
 const share_eea = ['https://cmshare.eea.eu', 'shareit.eea.europa.eu'];
 
-const dataprotection = {
-  enabled: true,
-  privacy_cookie_key: 'flourish',
-  privacy_statement: [
-    {
-      children: [
-        {
-          text:
-            'This map is hosted by a third party [Flourish]. ' +
-            'By showing the external content you accept the terms ' +
-            'and conditions of www.flourish.studio. This includes ' +
-            'their cookie policies, which we have no control over.',
-        },
-      ],
-      type: 'p',
-    },
-  ],
-};
-
 const MaybeFlourishVisualization = ({ content }) => {
   const { map_graphs } = content;
 
   // https://helpcenter.flourish.studio/hc/en-us/articles/8761537208463-How-to-embed-Flourish-charts-in-your-CMS
-  const data_src = (map_graphs) => {
-    if (typeof map_graphs === 'string') {
-      const regex = /data-src="([^"]*)"/;
-      const match = regex.exec(map_graphs);
-
-      if (match && match.length > 1) {
-        const dataSrcValue = match[1];
-        return dataSrcValue;
-      }
-    }
-    return null;
-  };
-  const flourishPath = data_src(map_graphs);
-  const flourishUrl = map_graphs
-    ? `https://flo.uri.sh/${flourishPath}/embed`
-    : null;
+  const flourishPath = getDataSrcFromEmbedCode(map_graphs);
+  const flourishUrl = buildFlourishUrl(flourishPath);
 
   return !!flourishPath ? (
     <PrivacyProtection
       data={{
         url: flourishUrl,
-        dataprotection: dataprotection,
+        dataprotection: flourishDataprotection,
       }}
     >
       <iframe
@@ -121,7 +93,7 @@ const MaybeIframeVisualization = ({ content }) => {
     <PrivacyProtection
       data={{
         url: url,
-        dataprotection: dataprotection,
+        dataprotection: flourishDataprotection,
       }}
     >
       <iframe

package/src/helpers/flourishUtils.js

@@ -0,0 +1,32 @@
+export const getDataSrcFromEmbedCode = (htmlString) => {
+  if (typeof htmlString !== 'string') return null;
+  const regex = /data-src="([^"]*)"/;
+  const match = regex.exec(htmlString);
+  return match && match[1] ? match[1] : null;
+};
+
+export const buildFlourishUrl = (path) => {
+  if (!path) return null;
+  const [base, query] = path.split('?');
+  return query
+    ? `https://flo.uri.sh/${base}/embed?${query}`
+    : `https://flo.uri.sh/${base}/embed`;
+};
+
+export const flourishDataprotection = {
+  enabled: true,
+  privacy_cookie_key: 'flourish',
+  privacy_statement: [
+    {
+      children: [
+        {
+          text:
+            'This map is hosted by a third party [Flourish]. ' +
+            'By showing the external content you accept the terms ' +
+            'and conditions of www.flourish.studio, including their cookie policy.',
+        },
+      ],
+      type: 'p',
+    },
+  ],
+};