Merge pull request #344 from eea/develop

Develop
eea · Nov 14, 2024 · 2d27f02 · 2d27f02
2 parents 2d7c425 + 3f37547
commit 2d27f02
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,11 +4,16 @@ 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.2.78](https://github.com/eea/volto-cca-policy/compare/0.2.77...0.2.78) - 12 November 2024
+### [0.2.79](https://github.com/eea/volto-cca-policy/compare/0.2.78...0.2.79) - 14 November 2024
 
 #### :hammer_and_wrench: Others
 
-- Fix links in acecontent blocks [Tiberiu Ichim - [`93be4c9`](https://github.com/eea/volto-cca-policy/commit/93be4c97e840827574de9b7c70c00b7c96fed49d)]
+- Fix match of url [Tiberiu Ichim - [`9afd6d0`](https://github.com/eea/volto-cca-policy/commit/9afd6d0fae594c70b8e22c77e5017b8a5c3211fb)]
+- Fix match of url [Tiberiu Ichim - [`199befd`](https://github.com/eea/volto-cca-policy/commit/199befd31202a2f2c97b904eb9471027b47e4e18)]
+- Fix getURL [Tiberiu Ichim - [`a9488e2`](https://github.com/eea/volto-cca-policy/commit/a9488e2f289c9898e9182190ba597af00949bef6)]
+- Allow iframes in database items views [Tiberiu Ichim - [`1995e04`](https://github.com/eea/volto-cca-policy/commit/1995e04d86d5594035cd37e8d5f161b33c04280e)]
+### [0.2.78](https://github.com/eea/volto-cca-policy/compare/0.2.77...0.2.78) - 12 November 2024
+
 ### [0.2.77](https://github.com/eea/volto-cca-policy/compare/0.2.76...0.2.77) - 7 November 2024
 
 #### :house: Internal changes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/components/theme/Views/DatabaseItemView.jsx b/src/components/theme/Views/DatabaseItemView.jsx
@@ -53,6 +53,83 @@ const dataprotection = {
   ],
 };
 
+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;
+
+  return !!flourishPath ? (
+    <PrivacyProtection
+      data={{
+        url: flourishUrl,
+        dataprotection: dataprotection,
+      }}
+    >
+      <iframe
+        height="980"
+        width="100%"
+        src={flourishUrl}
+        title="Interactive or visual content"
+        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>
+  ) : null;
+};
+
+function getFirstIframeSrc(htmlString) {
+  const regex = /<iframe[^>]+src=["']([^"']+)["']/;
+  const match = htmlString.match(regex);
+  return match ? match[1] : null;
+}
+
+const MaybeIframeVisualization = ({ content }) => {
+  const { map_graphs } = content;
+
+  const url = getFirstIframeSrc(map_graphs || '');
+
+  const [isClient, setIsClient] = React.useState();
+
+  React.useEffect(() => setIsClient(true), []);
+
+  if (!(isClient && url)) return null;
+
+  // <div dangerouslySetInnerHTML={{ __html: map_graphs }} />
+  return (
+    <PrivacyProtection
+      data={{
+        url: url,
+        dataprotection: dataprotection,
+      }}
+    >
+      <iframe
+        height="980"
+        width="100%"
+        src={url}
+        title="Interactive or visual content"
+        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>
+  );
+};
+
 const DatabaseItemView = (props) => {
   const { content } = props;
   const type = content['@type'];
@@ -62,7 +139,6 @@ const DatabaseItemView = (props) => {
     title,
     acronym,
     embed_url,
-    map_graphs,
     long_description,
     organisational_websites,
     organisational_key_activities,
@@ -98,24 +174,6 @@ const DatabaseItemView = (props) => {
       subtitle = '';
   }
 
-  // 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 is_cmshare_video = share_eea.some((domain) =>
     content?.embed_url?.includes(domain),
   );
@@ -217,23 +275,8 @@ const DatabaseItemView = (props) => {
                 </>
               )}
 
-              {!!flourishPath && (
-                <PrivacyProtection
-                  data={{
-                    url: flourishUrl,
-                    dataprotection: dataprotection,
-                  }}
-                >
-                  <iframe
-                    height="980"
-                    width="100%"
-                    src={flourishUrl}
-                    title="Interactive or visual content"
-                    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>
-              )}
+              <MaybeFlourishVisualization {...props} />
+              <MaybeIframeVisualization {...props} />
 
               <Divider />
 

diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx
@@ -53,7 +53,7 @@ const UniversalLink = ({
       //case: item like a Link
       let remoteUrl = item.remoteUrl || item.getRemoteUrl;
       if (!token && remoteUrl) {
-        url = remoteUrl;
+        url = item.getURL; // we use getURL, it is better
       }
 
       //case: item of type 'File'