Merge pull request #4 from eea/develop

Develop

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).
 
+#### [2.0.3](https://github.com/eea/volto-embed/compare/2.0.2...2.0.3)
+
+- clean embed block [`3b02319`](https://github.com/eea/volto-embed/commit/3b02319b5b465b97591a8d70c9a8f7b8b6ba18f1)
+- fix slate [`a94b4cf`](https://github.com/eea/volto-embed/commit/a94b4cf9016e322691f399d821f8e247f6534235)
+- defaultValue for cookie [`21b8e5f`](https://github.com/eea/volto-embed/commit/21b8e5f905b6cf4bf24117235ac69282e3b5e6ef)
+- modified schema, fix style to fit in small width [`fa9c9cb`](https://github.com/eea/volto-embed/commit/fa9c9cb63eb0bd7a3bab2d9eaea09f3896695a0c)
+- prevent realtime update of block data [`2edd3cc`](https://github.com/eea/volto-embed/commit/2edd3cc212c587cff2eaeb0544c71f4ff742ee77)
+- enable privacy on maps with identical cookie keys [`45b9e56`](https://github.com/eea/volto-embed/commit/45b9e56b9ced541d174966b2b7d6639237fd6251)
+- pass block id correctly [`eb130b9`](https://github.com/eea/volto-embed/commit/eb130b917d4186cde1dfb49ceb5eed8665ff2e5a)
+- custom style to slateWidget toolbar [`7ce9ab7`](https://github.com/eea/volto-embed/commit/7ce9ab716ab067974f56435d557ee57a30f9a5b7)
+- use slate editor in privacy_statement [`f662235`](https://github.com/eea/volto-embed/commit/f66223569bfd9e623bddbf043aeabcc9394eb049)
+
 #### [2.0.2](https://github.com/eea/volto-embed/compare/2.0.1...2.0.2)
 
+> 16 August 2021
+
+- Develop [`#3`](https://github.com/eea/volto-embed/pull/3)
 - add volto-slate [`6e5de2f`](https://github.com/eea/volto-embed/commit/6e5de2f0137404acf8d74892f059b44b2ad89244)
 - revert slate widget addition [`4032799`](https://github.com/eea/volto-embed/commit/403279913c6d50212e0d7856fa640fbf1ab3d6e1)
 - add deps [`b9a16f7`](https://github.com/eea/volto-embed/commit/b9a16f7ce3b52b86e7d310190523e043ee3205f9)

package.json

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

src/PrivacyProtection/PrivacyProtection.jsx

@@ -2,13 +2,16 @@ import React, { useState } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import { Placeholder, Dimmer, Loader } from 'semantic-ui-react';
 import cookie from 'react-cookie';
+//import { find, without } from 'lodash';
+import { serializeNodes } from 'volto-slate/editor/render';
 import { Button, Checkbox } from 'semantic-ui-react';
 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';
 
@@ -45,7 +48,17 @@ function canShow(domain_key) {
 }
 
 export default injectIntl(
-  ({ children, data = {}, block, isEditMode, intl, path, ...rest }) => {
+  ({
+    children,
+    data = {},
+    id,
+    isEditMode,
+    onChangeBlock,
+    intl,
+    path,
+    properties,
+    ...rest
+  }) => {
     const { dataprotection = {} } = data;
     const { background_image: bgImg, enabled = false } = dataprotection;
     const [image, setImage] = React.useState(null);
@@ -57,8 +70,26 @@ export default injectIntl(
       }
     }, [bgImg]);
 
+    const [visible, setVisibility] = useState(false);
+    const defaultShow = canShow(dataprotection.privacy_cookie_key);
+    const [show, setShow] = useState(defaultShow);
+    const [remember, setRemember] = useState(defaultShow);
+
+    // React.useEffect(() => {
+    //   if (isEditMode && defaultShow && !enabled) {
+    //     onChangeBlock(id, {
+    //       ...data,
+    //       dataprotection: {
+    //         ...dataprotection,
+    //         enabled: true,
+    //       },
+    //     });
+    //   }
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, []);
+
     React.useEffect(() => {
-      if (enabled && !bgImg) {
+      if (enabled && !bgImg && !show) {
         fetch(
           `${getBaseUrl(
             path || '',
@@ -80,12 +111,7 @@ export default injectIntl(
             }
           });
       }
-    }, [enabled, data.url, path, dispatch, bgImg, intl, isEditMode]);
-
-    const [visible, setVisibility] = useState(false);
-    const defaultShow = canShow(dataprotection.privacy_cookie_key);
-    const [show, setShow] = useState(defaultShow);
-    const [remember, setRemember] = useState(defaultShow);
+    }, [enabled, data.url, path, dispatch, bgImg, show, intl, isEditMode]);
 
     return (
       <VisibilitySensor
@@ -120,12 +146,9 @@ export default injectIntl(
               >
                 <div className="overlay">
                   <div className="wrapped">
-                    <div
-                      className="privacy-statement"
-                      dangerouslySetInnerHTML={{
-                        __html: dataprotection.privacy_statement,
-                      }}
-                    />
+                    <div className="privacy-statement">
+                      {serializeNodes(dataprotection.privacy_statement || [])}
+                    </div>
                     <div className="privacy-button">
                       <Button
                         primary
@@ -145,7 +168,7 @@ export default injectIntl(
                         <Checkbox
                           toggle
                           label="Remember my choice"
-                          id={`remember-choice-${block}`}
+                          id={`remember-choice-${id}`}
                           onChange={(ev, { checked }) => {
                             setRemember(checked);
                           }}

src/PrivacyProtection/schema.js

@@ -1,5 +1,3 @@
-import config from '@plone/volto/registry';
-
 export const ProtectionSchema = () => ({
   title: 'Data Protection',
 
@@ -19,22 +17,24 @@ export const ProtectionSchema = () => ({
   properties: {
     privacy_statement: {
       title: 'Privacy statement',
-      description: 'Short notification text',
-      widget: config.settings.defaultBlockType, // TODO: is it really applied?
+      description: 'Defined in template. Change only if necessary',
+      widget: 'slate_richtext',
+      className: 'slate-Widget',
     },
     privacy_cookie_key: {
       title: 'Privacy cookie key',
-      description: 'Identifies similar external content',
+      description: 'Use default for Esri maps, otherwise change',
+      defaultValue: 'esri-maps',
     },
     enabled: {
-      title: 'Use privacy screen?',
+      title: 'Data protection disclaimer enabled',
       description: 'Enable/disable the privacy protection',
       type: 'boolean',
     },
     background_image: {
       title: 'Background image',
       description:
-        'Set a placeholder image. This will override the existing one',
+        'The component will automatically generate a static image as placeholder from the URL of the map defined. This image is refreshed on page edit. To override this, upload an image here',
       widget: 'file',
     },
   },

src/css/embed-styles.css

@@ -16,11 +16,12 @@
 }
 
 .wrapped {
-  width: 400px;
+  width: 300px;
   padding: 1.4rem;
   margin: 0 auto;
   background: white;
   border-radius: 5px;
+  opacity: 0.6;
 }
 
 .discreet {
@@ -34,3 +35,7 @@
   padding: 2rem;
   background-color: rgba(0, 0, 0, 0.35);
 }
+
+.slate-Widget {
+  left: 855px !important;
+}