@eeacms/volto-cca-policy 0.2.78 → 0.2.80

package/CHANGELOG.md

@@ -4,11 +4,29 @@ 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.80](https://github.com/eea/volto-cca-policy/compare/0.2.79...0.2.80) - 15 November 2024
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-eea-website-theme@3.2.0 [EEA Jenkins - [`1308dd8`](https://github.com/eea/volto-cca-policy/commit/1308dd86de26ed38680967f31b4e83874b54160b)]
 
 #### :hammer_and_wrench: Others
 
-- Fix links in acecontent blocks [Tiberiu Ichim - [`93be4c9`](https://github.com/eea/volto-cca-policy/commit/93be4c97e840827574de9b7c70c00b7c96fed49d)]
+- Cleanup [Tiberiu Ichim - [`965ac84`](https://github.com/eea/volto-cca-policy/commit/965ac84f05dea092dff9b9900dfc41259b3b2caf)]
+- Downgrade eea website theme [Tiberiu Ichim - [`d074718`](https://github.com/eea/volto-cca-policy/commit/d0747189db37e3496baf11b0886c91b18f70b9d4)]
+- Downgrade eea website theme [Tiberiu Ichim - [`38f482f`](https://github.com/eea/volto-cca-policy/commit/38f482fdb52bf7f35c6102021347d3d77b4ee177)]
+- Add patch for compatibility with volto 17 [Tiberiu Ichim - [`393bb08`](https://github.com/eea/volto-cca-policy/commit/393bb085551b8cdef7a0a29fcddb72e5c95f6255)]
+- Add override for LinkView [Tiberiu Ichim - [`b478df3`](https://github.com/eea/volto-cca-policy/commit/b478df3b6cdaa24cdfffd7146181f66c5e3e5ddb)]
+### [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 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.78",
+  "version": "0.2.80",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -30,7 +30,7 @@
     "@eeacms/volto-block-style": "github:eea/volto-block-style#6.x.x",
     "@eeacms/volto-datablocks": "^7.2.5",
     "@eeacms/volto-eea-design-system": "*",
-    "@eeacms/volto-eea-website-theme": "1.35.0",
+    "@eeacms/volto-eea-website-theme": "^1.35.0",
     "@eeacms/volto-embed": "^9.1.1",
     "@eeacms/volto-globalsearch": "^1.1.0",
     "@eeacms/volto-hero-block": "^7.1.0",

package/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 />
 

package/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'

package/src/customizations/volto/components/theme/View/LinkView.jsx

@@ -0,0 +1,105 @@
+/**
+ * Link View.
+ * @module components/theme/View/LinkView
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import { Redirect } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
+
+/**
+ * View container class.
+ * @class View
+ * @extends Component
+ */
+class LinkView extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    content: PropTypes.shape({
+      title: PropTypes.string,
+      description: PropTypes.string,
+      remoteUrl: PropTypes.string,
+    }),
+    token: PropTypes.string,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    content: null,
+    token: null,
+  };
+
+  componentDidMount() {
+    if (!this.props.token) {
+      let { remoteUrl } = this.props.content;
+      // eslint-disable-next-line
+      remoteUrl = remoteUrl.replaceAll('${portal_url}', '');
+
+      if (isInternalURL(remoteUrl)) {
+        this.props.history.replace(flattenToAppURL(remoteUrl));
+      } else if (!__SERVER__) {
+        window.location.href = flattenToAppURL(remoteUrl);
+      }
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    let { remoteUrl } = this.props.content;
+    // eslint-disable-next-line
+    remoteUrl = flattenToAppURL(remoteUrl.replaceAll('${portal_url}', ''));
+
+    if (__SERVER__ && !this.props.token && remoteUrl) {
+      return <Redirect to={remoteUrl} />;
+    }
+    const { openExternalLinkInNewTab } = config.settings;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+    return (
+      <Container id="page-document">
+        <h1 className="documentFirstHeading">{this.props.content.title}</h1>
+        {this.props.content.description && (
+          <p className="documentDescription">
+            {this.props.content.description}
+          </p>
+        )}
+        {remoteUrl && (
+          <p>
+            <FormattedMessage
+              id="The link address is:"
+              defaultMessage="The link address is:"
+            />{' '}
+            <UniversalLink
+              href={remoteUrl}
+              openLinkInNewTab={
+                openExternalLinkInNewTab && !isInternalURL(remoteUrl)
+              }
+            >
+              {flattenToAppURL(remoteUrl)}
+            </UniversalLink>
+          </p>
+        )}
+      </Container>
+    );
+  }
+}
+
+export default LinkView;