@eeacms/volto-embed 2.0.11 → 3.0.0

package/CHANGELOG.md

@@ -4,8 +4,23 @@ 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).
 
+#### [3.0.0](https://github.com/eea/volto-embed/compare/3.0.0-beta.0...3.0.0)
+
+
+#### [3.0.0-beta.0](https://github.com/eea/volto-embed/compare/2.0.11...3.0.0-beta.0)
+
+> 7 February 2022
+
+- Release 3.0.0-beta.0 [`c9af803`](https://github.com/eea/volto-embed/commit/c9af80319bc89b1a579d14538ac5509e71db813f)
+- Updated cypress [`9112bee`](https://github.com/eea/volto-embed/commit/9112bee538e457e9f19a687c3442d222129eb95c)
+- Update [`c5c1251`](https://github.com/eea/volto-embed/commit/c5c1251a69c76c341c8deb28e0f2ccc940b2411b)
+- Make this compatible with volto-datablocks@3.x [`3457ee9`](https://github.com/eea/volto-embed/commit/3457ee9e3f5c78cf483525a274f03e6941d06f6f)
+
 #### [2.0.11](https://github.com/eea/volto-embed/compare/2.0.10...2.0.11)
 
+> 11 January 2022
+
+- use latest volto-slate [`#17`](https://github.com/eea/volto-embed/pull/17)
 - add cy tests [`#16`](https://github.com/eea/volto-embed/pull/16)
 - improve arcgis map view [`#14`](https://github.com/eea/volto-embed/pull/14)
 - Update package.json [`0ec673a`](https://github.com/eea/volto-embed/commit/0ec673a8178731b8c1e010101caee2a3c9fafaca)

package/cypress/integration/block-basics.js

@@ -24,14 +24,20 @@ describe('Blocks Tests', () => {
         .first()
         .contains('Embed external content');
 
-      cy.get('.field-wrapper-privacy_statement-0-dataprotection p').first().clear().type('Test text for privacy protection');
+      cy.get('.field-wrapper-privacy_statement-0-dataprotection p')
+        .first()
+        .clear()
+        .type('Test text for privacy protection');
       cy.get('.field-wrapper-privacy_cookie_key-1-dataprotection');
       cy.get('.field-wrapper-enabled-2-dataprotection .checkbox').click();
 
       const imageFile = 'cat.jpg';
-      cy.get('.field-wrapper-background_image-3-dataprotection .dropzone-placeholder').attachFile(imageFile);
-      const embed_url = "<div class=\"mapouter\"><div class=\"gmap_canvas\"><iframe width=\"600\" height=\"500\" id=\"gmap_canvas\" src=\"https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"></iframe><a href=\"https://www.embedgooglemap.net/blog/divi-discount-code-elegant-themes-coupon/\"></a><br></div></div>";
-      cy.get('.block.maps input').click().type(embed_url, { force: true })
+      cy.get(
+        '.field-wrapper-background_image-3-dataprotection .dropzone-placeholder',
+      ).attachFile(imageFile);
+      const embed_url =
+        '<div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.embedgooglemap.net/blog/divi-discount-code-elegant-themes-coupon/"></a><br></div></div>';
+      cy.get('.block.maps input').click().type(embed_url, { force: true });
 
       cy.get('.block-editor-text').last().click();
       cy.get('.block-add-button').first().click();
@@ -39,16 +45,20 @@ describe('Blocks Tests', () => {
       cy.get('.ui.basic.icon.button.maps').contains('Maps').click();
 
       cy.get('.align-widget.field-wrapper-align button').first().click();
-      cy.get('.block.maps input').last().click().type(embed_url, { force: true })
-      cy.get('.field-wrapper-background_image-3-dataprotection .dropzone-placeholder').attachFile(imageFile);
-
+      cy.get('.block.maps input')
+        .last()
+        .click()
+        .type(embed_url, { force: true });
+      cy.get(
+        '.field-wrapper-background_image-3-dataprotection .dropzone-placeholder',
+      ).attachFile(imageFile);
 
       // Save
       cy.get('#toolbar-save').click();
       cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
 
       // then the page view should contain our changes
-      cy.get('.ui.loader');
-      });
+      // cy.get('.ui.loader');
+    });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "2.0.11",
+  "version": "3.0.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -11,14 +11,15 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { toast } from 'react-toastify';
 import config from '@plone/volto/registry';
-import '../css/embed-styles.css';
-import { createImageUrl } from './helpers';
-
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Toast } from '@plone/volto/components';
 import { getConnectedDataParametersForContext } from '@eeacms/volto-datablocks/helpers';
+
+import { createImageUrl } from './helpers';
 import { ProtectionSchema } from './schema';
 
+import './styles.less';
+
 const messages = defineMessages({
   success: {
     id: 'Success',
@@ -68,6 +69,27 @@ const CookieWatcher = (cookie, pollingRate = 250) => {
   return exist;
 };
 
+const getFilteredURL = (url, connected_data_parameters = []) => {
+  if (!connected_data_parameters?.length) return url;
+  let decodedURL = decodeURIComponent(url);
+  const queries = decodedURL.match(/(?<=(<<))(.*?)(?=(>>))/g);
+  if (!queries.length) return url;
+  const keys = connected_data_parameters.map((param) => param.i);
+  for (let poz in queries) {
+    const key = queries[poz];
+    const paramPoz = keys.indexOf(key);
+    if (paramPoz > -1) {
+      decodedURL = decodedURL.replace(
+        `<<${key}>>`,
+        connected_data_parameters[paramPoz].v[0],
+      );
+
+      continue;
+    }
+  }
+  return decodedURL;
+};
+
 export default injectIntl(
   ({
     children,
@@ -91,27 +113,17 @@ export default injectIntl(
     );
     const dispatch = useDispatch();
     const checkExistance = CookieWatcher(dataprotection.privacy_cookie_key);
-    const queryParam = useSelector((state) => {
-      return {
-        connected_data_parameters: getConnectedDataParametersForContext(
-          state?.connected_data_parameters,
-          state.router?.location?.pathname,
-        ),
-      };
+    const connected_data_parameters = useSelector((state) => {
+      return getConnectedDataParametersForContext(
+        state?.connected_data_parameters,
+        state.router?.location?.pathname,
+      );
     });
-    const param = queryParam
-      ? queryParam.connected_data_parameters?.[0]?.query?.[0]?.v?.[0] ||
-        queryParam.connected_data_parameters?.[0]?.v?.[0]
-      : null;
 
-    // create a url with params
-    const url =
-      param && data.url
-        ? decodeURIComponent(data.url).replace('<<NUTS_CODE>>', param)
-        : data.url;
+    const url = getFilteredURL(data.url, connected_data_parameters);
 
     const styles = {
-      height: `${height}px`,
+      minHeight: `${height || 200}px`,
       position: 'relative',
     };
     React.useEffect(() => {
@@ -153,6 +165,12 @@ export default injectIntl(
                 />,
               );
             }
+          })
+          .catch(() => {
+            if (__DEVELOPMENT__) {
+              /* eslint-disable-next-line */
+              console.log('Please enable your VPN!');
+            }
           });
       }
     }, [enabled, url, path, dispatch, bgImg, show, intl, isEditMode]);
@@ -166,10 +184,10 @@ export default injectIntl(
         offset={{ bottom: 200 }}
       >
         {visible ? (
-          <div style={height ? styles : {}}>
+          <div className="privacy-protection-wrapper" style={styles}>
             {!dataprotection.enabled || show ? (
               children
-            ) : !image ? (
+            ) : !__DEVELOPMENT__ && !image ? (
               <Dimmer active>
                 <Loader />
               </Dimmer>

package/src/{css/embed-styles.css → PrivacyProtection/styles.less}

@@ -1,3 +1,13 @@
+.privacy-protection-wrapper {
+  .ui.dimmer {
+    z-index: 9;
+
+    .ui.loader {
+      padding: 0;
+    }
+  }
+}
+
 .privacy-protection {
   display: flex;
   height: 100%;
@@ -16,17 +26,17 @@
 }
 
 .wrapped {
-  position: absolute;
-  top: 50%;
-  left: 50%;
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
   width: 300px;
   padding: 1.4rem;
   margin: 0 auto;
   background: white;
   border-radius: 5px;
-  opacity: 0.8;
-  -ms-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  opacity: 1;
+  // -ms-transform: translate(-50%, -50%);
+  // transform: translate(-50%, -50%);
 }
 
 .discreet,