@eeacms/volto-embed 7.0.2 → 9.0.0

package/src/Blocks/Maps/schema.js

@@ -1,67 +1,53 @@
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-  Maps: {
-    id: 'Maps',
-    defaultMessage: 'Maps',
-  },
-  AltText: {
-    id: 'Alt text',
-    defaultMessage: 'Alt text',
-  },
-  MapsURL: {
-    id: 'Maps URL',
-    defaultMessage: 'Maps URL',
-  },
-  Alignment: {
-    id: 'Alignment',
-    defaultMessage: 'Alignment',
-  },
   CSSHeight: {
-    id: 'CSSHeight',
+    id: 'CSS height',
     defineMessages: 'CSS height',
   },
   CSSHeightDescription: {
-    id: 'CSSHeightDescription',
+    id: 'Iframe height',
     defineMessages: 'Iframe height',
   },
 });
 
-export const MapsSchema = (props) => ({
-  title: props.intl.formatMessage(messages.Maps),
-  block: 'Maps',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['url', 'title', 'align', 'height'],
-    },
-  ],
+export const MapsSchema = (props) => {
+  return {
+    title: props.intl.messages['Maps'],
+    block: 'Maps',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['url', 'title', 'align', 'height'],
+      },
+    ],
 
-  properties: {
-    url: {
-      title: props.intl.formatMessage(messages.MapsURL),
-      widget: 'url',
+    properties: {
+      url: {
+        title: props.intl.messages['Maps URL'],
+        widget: 'url',
+      },
+      title: {
+        title: props.intl.messages['Alt text'],
+      },
+      align: {
+        title: props.intl.messages['Alignment'],
+        widget: 'align',
+      },
+      height: {
+        title: (
+          <a
+            rel="noreferrer"
+            target="_blank"
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
+          >
+            {props.intl.formatMessage(messages.CSSHeight)}
+          </a>
+        ),
+        description: props.intl.formatMessage(messages.CSSHeightDescription),
+      },
     },
-    title: {
-      title: props.intl.formatMessage(messages.AltText),
-    },
-    align: {
-      title: props.intl.formatMessage(messages.Alignment),
-      widget: 'align',
-    },
-    height: {
-      title: (
-        <a
-          rel="noreferrer"
-          target="_blank"
-          href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
-        >
-          {props.intl.formatMessage(messages.CSSHeight)}
-        </a>
-      ),
-      description: props.intl.formatMessage(messages.CSSHeightDescription),
-    },
-  },
-  required: [],
-});
+    required: [],
+  };
+};

package/src/Blocks/index.js

@@ -1,5 +1,9 @@
 import installMaps from './Maps';
+import installEmbedMaps from './EmbedMaps';
 
 export default function installBlocks(config) {
-  return [installMaps].reduce((acc, apply) => apply(acc), config);
+  return [installMaps, installEmbedMaps].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
 }

package/src/EmbedMap/EmbedMap.jsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import cx from 'classnames';
+import {
+  FigureNote,
+  Sources,
+  MoreInfo,
+  Share,
+  Enlarge,
+} from '@eeacms/volto-embed/Toolbar';
+import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
+
+import './style.less';
+
+const messages = defineMessages({
+  EmbededGoogleMaps: {
+    id: 'Embeded Google Maps',
+    defaultMessage: 'Embeded Google Maps',
+  },
+});
+
+function EmbedMap({ data, intl, id, screen }) {
+  const el = useRef();
+  const [mobile, setMobile] = useState(false);
+
+  useEffect(() => {
+    if (el.current) {
+      const visWidth = el.current.offsetWidth;
+
+      if (visWidth < 600 && !mobile) {
+        setMobile(true);
+      } else if (visWidth >= 600 && mobile) {
+        setMobile(false);
+      }
+    }
+  }, [screen, mobile]);
+
+  return (
+    <div
+      ref={el}
+      className={cx(
+        'block maps align',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      <div
+        className={cx('maps-inner', {
+          'full-width': data.align === 'full',
+        })}
+      >
+        <PrivacyProtection
+          data={data}
+          id={id}
+          height={data.height}
+          useVisibilitySensor={data.useVisibilitySensor ?? true}
+        >
+          <iframe
+            title={intl.formatMessage(messages.EmbededGoogleMaps)}
+            src={data.url}
+            className="google-map"
+            frameBorder="0"
+            allowFullScreen
+            style={data.height ? { height: data.height } : {}}
+          />
+        </PrivacyProtection>
+      </div>
+      <div className={cx('visualization-toolbar', { mobile })}>
+        <div className="left-col">
+          {data.with_notes && <FigureNote notes={data.figure_note || []} />}
+          {data.with_sources && <Sources sources={data.sources} />}
+          {data.with_more_info && <MoreInfo href={data['@id']} />}
+        </div>
+        <div className="right-col">
+          {data.with_enlarge && (
+            <Enlarge className="enlarge-embed-maps">
+              <EmbedMap
+                data={{
+                  ...data,
+                  height: '100%',
+                  with_notes: false,
+                  with_sources: false,
+                  with_more_info: false,
+                  with_share: false,
+                  with_enlarge: false,
+                }}
+                id={id}
+                intl={intl}
+              />
+            </Enlarge>
+          )}
+          {data.with_share && <Share href={data['@id']} />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  injectIntl,
+  connect((state) => ({ screen: state.screen })),
+)(EmbedMap);

package/src/EmbedMap/EmbedMap.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import EmbedMap from './EmbedMap';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders map component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <EmbedMap
+        id="my-map"
+        data={{
+          with_notes: false,
+          with_sources: false,
+          with_more_info: true,
+          with_share: true,
+          with_enlarge: true,
+          url:
+            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          useVisibilitySensor: false,
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/EmbedMap/style.less

@@ -0,0 +1,16 @@
+.embed-map .block.maps .maps-inner {
+  margin-bottom: 1rem;
+}
+
+.ui.modal.enlarge-modal.enlarge-embed-maps {
+  .content,
+  .content .block.maps,
+  .content .block.maps .maps-inner {
+    height: 100%;
+  }
+
+  .close.icon {
+    top: 2rem;
+    right: 2rem;
+  }
+}

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import cx from 'classnames';
+import { isNumber } from 'lodash';
 import { compose } from 'redux';
 import { useSelector, useDispatch } from 'react-redux';
-import VisibilitySensor from 'react-visibility-sensor';
 import {
   Placeholder,
   Dimmer,
@@ -21,6 +21,7 @@ import {
   getConnectedDataParametersForContext,
   getFilteredURL,
 } from '@eeacms/volto-datablocks/helpers';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 
 import { createImageUrl } from './helpers';
 import { ProtectionSchema } from './schema';
@@ -86,7 +87,7 @@ const PrivacyProtection = (props) => {
     intl,
     path,
     cookies,
-    height = '',
+    useVisibilitySensor = true,
   } = props;
   const {
     enabled = false,
@@ -96,7 +97,6 @@ const PrivacyProtection = (props) => {
   } = data.dataprotection || {};
 
   const [image, setImage] = React.useState(null);
-  const [visible, setVisibility] = useState(false);
   const defaultShow = canShow(privacy_cookie_key, cookies);
   const [show, setShow] = useState(defaultShow);
   const [remember, setRemember] = useState(
@@ -112,6 +112,12 @@ const PrivacyProtection = (props) => {
   });
   const url = getFilteredURL(data.url, connected_data_parameters);
 
+  const height = React.useMemo(() => {
+    if (!props.height || enabled || !show) return 'auto';
+    if (isNumber(props.height)) return `${props.height}px`;
+    return props.height;
+  }, [props.height, enabled, show]);
+
   React.useEffect(() => {
     if (bgImg) {
       setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
@@ -160,96 +166,92 @@ const PrivacyProtection = (props) => {
         });
     }
   }, [enabled, url, path, dispatch, bgImg, show, intl, editable]);
+
   return (
     <VisibilitySensor
-      onChange={(isVisible) => {
-        !visible && isVisible && setVisibility(true);
-      }}
-      partialVisibility={true}
-      offset={{ bottom: 200 }}
+      Placeholder={() => (
+        <Placeholder style={{ height: '100%', width: '100%' }}>
+          <Placeholder.Image rectangular />
+        </Placeholder>
+      )}
+      useVisibilitySensor={useVisibilitySensor}
     >
-      {visible ? (
-        <div
-          className={cx('privacy-protection-wrapper', className)}
-          style={{
-            position: 'relative',
-            height: height && (!enabled || !show) ? `${height}px` : 'auto',
-            minHeight: '200px',
-            overflow: 'hidden',
-          }}
-        >
-          {!enabled || show ? (
-            children
-          ) : !__DEVELOPMENT__ && !image ? (
-            <Dimmer active>
-              <Loader />
-            </Dimmer>
-          ) : (
-            <div
-              className="privacy-protection"
-              style={
-                image
-                  ? {
-                      backgroundImage: `url(${image})`,
-                      backgroundRepeat: 'no-repeat',
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'center -70px',
-                    }
-                  : {}
-              }
-            >
-              <div className="overlay">
-                <div className="wrapped">
-                  <div className="privacy-button">
-                    <Button
-                      primary
-                      onClick={() => {
-                        setShow(true);
-                        if (remember) {
-                          saveCookie(privacy_cookie_key, cookies);
-                        }
+      <div
+        className={cx('privacy-protection-wrapper', className)}
+        style={{
+          position: 'relative',
+          overflow: 'hidden',
+          height,
+          minHeight: height !== 'auto' ? height : '200px',
+        }}
+      >
+        {!enabled || show ? (
+          children
+        ) : !__DEVELOPMENT__ && !image ? (
+          <Dimmer active>
+            <Loader />
+          </Dimmer>
+        ) : (
+          <div
+            className="privacy-protection"
+            style={
+              image
+                ? {
+                    backgroundImage: `url(${image})`,
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center -70px',
+                  }
+                : {}
+            }
+          >
+            <div className="overlay">
+              <div className="wrapped">
+                <div className="privacy-button">
+                  <Button
+                    primary
+                    onClick={() => {
+                      setShow(true);
+                      if (remember) {
+                        saveCookie(privacy_cookie_key, cookies);
+                      }
+                    }}
+                  >
+                    Show external content
+                  </Button>
+                </div>
+
+                {!editable && (
+                  <div className="privacy-toggle">
+                    <Checkbox
+                      toggle
+                      label="Remember my choice"
+                      id={`remember-choice-${id}`}
+                      onChange={(ev, { checked }) => {
+                        setRemember(checked);
                       }}
-                    >
-                      Show external content
-                    </Button>
+                      checked={remember}
+                    />
                   </div>
+                )}
 
-                  {!editable && (
-                    <div className="privacy-toggle">
-                      <Checkbox
-                        toggle
-                        label="Remember my choice"
-                        id={`remember-choice-${id}`}
-                        onChange={(ev, { checked }) => {
-                          setRemember(checked);
-                        }}
-                        checked={remember}
-                      />
-                    </div>
+                <p className="discreet">
+                  Your choice will be saved in a cookie managed by{' '}
+                  {config.settings.ownDomain || '.eea.europa.eu'} that will
+                  expire in {getExpDays()} days.
+                </p>
+                <p className="discreet">
+                  {serializeNodes(
+                    privacy_statement ||
+                      ProtectionSchema().properties.privacy_statement
+                        .defaultValue,
                   )}
-
-                  <p className="discreet">
-                    Your choice will be saved in a cookie managed by{' '}
-                    {config.settings.ownDomain || '.eea.europa.eu'} that will
-                    expire in {getExpDays()} days.
-                  </p>
-                  <p className="discreet">
-                    {serializeNodes(
-                      privacy_statement ||
-                        ProtectionSchema().properties.privacy_statement
-                          .defaultValue,
-                    )}
-                  </p>
-                </div>
+                </p>
               </div>
             </div>
-          )}
-        </div>
-      ) : (
-        <Placeholder style={{ height: '100%', width: '100%' }}>
-          <Placeholder.Image rectangular />
-        </Placeholder>
-      )}
+          </div>
+        )}
+      </div>
     </VisibilitySensor>
   );
 };

package/src/Toolbar/Enlarge.jsx

@@ -1,29 +1,42 @@
 import React, { useState } from 'react';
+import { isFunction } from 'lodash';
 import { Modal } from 'semantic-ui-react';
+import cx from 'classnames';
 
-const EnlargeWidget = ({ children }) => {
+const Enlarge = ({ children, className, onClick }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div className="enlarge">
-      <button className="trigger-button" onClick={() => setIsOpen(true)}>
+      <button
+        className="trigger-button"
+        onClick={() => {
+          if (isFunction(onClick)) {
+            onClick({ setOpen: setIsOpen });
+          } else {
+            setIsOpen(true);
+          }
+        }}
+      >
         <i className="ri-fullscreen-line" />
         Enlarge
       </button>
-      <Modal
-        open={isOpen}
-        closeIcon={
-          <span className="close icon">
-            <i class="ri-close-line" />
-          </span>
-        }
-        onClose={() => setIsOpen(false)}
-        className="enlarge-modal"
-      >
-        <Modal.Content>{children}</Modal.Content>
-      </Modal>
+      {children && (
+        <Modal
+          open={isOpen}
+          closeIcon={
+            <span className="close icon">
+              <i class="ri-close-line" />
+            </span>
+          }
+          onClose={() => setIsOpen(false)}
+          className={cx('enlarge-modal', className)}
+        >
+          <Modal.Content>{children}</Modal.Content>
+        </Modal>
+      )}
     </div>
   );
 };
 
-export default EnlargeWidget;
+export default Enlarge;

package/src/Toolbar/FigureNote.jsx

@@ -38,8 +38,7 @@ export default function FigureNote({ notes = [] }) {
           <button className={cx('trigger-button', { open })}>Note</button>
         </div>
       }
-    >
-      <Popup.Content>{serializeText(notes)}</Popup.Content>
-    </Popup>
+      content={serializeText(notes)}
+    />
   );
 }