@eeacms/volto-embed 7.0.2 → 8.0.0

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,6 @@ const PrivacyProtection = (props) => {
     intl,
     path,
     cookies,
-    height = '',
   } = props;
   const {
     enabled = false,
@@ -96,7 +96,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 +111,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 +165,91 @@ 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>
+      )}
     >
-      {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/styles.less

@@ -8,6 +8,7 @@
 .enlarge-modal.ui.modal {
   width: 95% !important;
   height: 85%;
+  overflow-y: auto;
 
   .close.icon {
     top: 1rem;
@@ -22,8 +23,6 @@
   }
 
   .content {
-    height: 90%;
-
     .js-plotly-plot {
       width: 100%;
       height: 100%;

package/src/Views/MapView.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import Map from '@eeacms/volto-embed/Map/Map';
+
+const MapView = (props) => {
+  return (
+    <Container>
+      <Map data={props.content.maps} id={props.content['@id']} />
+    </Container>
+  );
+};
+
+export default MapView;

package/src/Widgets/MapsViewWidget.jsx

@@ -0,0 +1,5 @@
+import Map from '@eeacms/volto-embed/Map/Map';
+
+export default function MapsViewWidget({ id, value }) {
+  return <Map data={value} id={id} />;
+}

package/src/Widgets/MapsWidget.jsx

@@ -0,0 +1,223 @@
+import React, { useMemo, useState } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import { Button, Modal, Grid, Label, Input, Message } from 'semantic-ui-react';
+import { map } from 'lodash';
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
+import Map from '@eeacms/volto-embed/Map/Map';
+import { MapsSchema } from '@eeacms/volto-embed/Blocks/Maps/schema';
+
+import clearSVG from '@plone/volto/icons/clear.svg';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+import mapsBlockSVG from '@plone/volto/components/manage/Blocks/Maps/block-maps.svg';
+
+function MapEditorModal({ id, onClose, onChange, ...rest }) {
+  const intl = useIntl();
+  const [value, setValue] = useState(rest.value);
+  const [url, setUrl] = useState(rest.value.url);
+  const [error, setError] = useState(false);
+
+  const schema = useMemo(
+    () => addPrivacyProtectionToSchema(MapsSchema({ intl })),
+    [intl],
+  );
+
+  const placeholder = useMemo(
+    () => value.placeholder || intl.messages?.['Enter map Embed Code'],
+    [value.placeholder, intl],
+  );
+
+  function getSrc(embed) {
+    if (!embed || embed.trim() === 0) {
+      setError(true);
+      return '';
+    }
+    // Optimization, don't need the src
+    if (!embed.trim().startsWith('<iframe')) {
+      return embed;
+    }
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(embed, 'text/html');
+    const iframe = doc.getElementsByTagName('iframe');
+    if (iframe.length === 0) {
+      setError(true);
+      return '';
+    }
+    setError(false);
+    return iframe[0].src;
+  }
+
+  function onChangeUrl({ target }) {
+    setUrl(target.value);
+  }
+
+  function onKeyDownVariantMenuForm(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      onSubmitUrl();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      // TODO: Do something on ESC key
+    }
+  }
+
+  function onSubmitUrl() {
+    setValue({
+      ...value,
+      url: getSrc(url),
+    });
+  }
+
+  return (
+    <Modal open={true} size="fullscreen" className="chart-editor-modal">
+      <Modal.Content scrolling>
+        <div className="block maps align center">
+          {value.url && (
+            <Grid>
+              <Grid.Column
+                mobile={4}
+                tablet={4}
+                computer={4}
+                className="tableau-editor-column"
+              >
+                <InlineForm
+                  schema={schema}
+                  onChangeField={(id, fieldValue) => {
+                    if (id === 'url' && fieldValue !== url) {
+                      setUrl(fieldValue);
+                    }
+                    setValue((value) => ({
+                      ...value,
+                      [id]: fieldValue,
+                    }));
+                  }}
+                  formData={value}
+                />
+              </Grid.Column>
+              <Grid.Column
+                mobile={8}
+                tablet={8}
+                computer={8}
+                className="tableau-visualization-column"
+              >
+                <Map data={value} id={id} />
+              </Grid.Column>
+            </Grid>
+          )}
+          {!value.url && (
+            <Message>
+              <center>
+                <img src={mapsBlockSVG} alt="" />
+                <div className="toolbar-inner">
+                  <Input
+                    onKeyDown={onKeyDownVariantMenuForm}
+                    onChange={onChangeUrl}
+                    placeholder={placeholder}
+                    value={url}
+                    // Prevents propagation to the Dropzone and the opening
+                    // of the upload browser dialog
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                  {url && (
+                    <Button.Group>
+                      <Button
+                        basic
+                        className="cancel"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setUrl('');
+                        }}
+                      >
+                        <Icon name={clearSVG} size="30px" />
+                      </Button>
+                    </Button.Group>
+                  )}
+                  <Button.Group>
+                    <Button
+                      basic
+                      primary
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onSubmitUrl();
+                      }}
+                    >
+                      <Icon name={aheadSVG} size="30px" />
+                    </Button>
+                  </Button.Group>
+                </div>
+                <div className="message-text">
+                  <FormattedMessage
+                    id="Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it."
+                    defaultMessage="Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it."
+                  />
+                  {error && (
+                    <div style={{ color: 'red' }}>
+                      <FormattedMessage
+                        id="Embed code error, please follow the instructions and try again."
+                        defaultMessage="Embed code error, please follow the instructions and try again."
+                      />
+                    </div>
+                  )}
+                </div>
+              </center>
+            </Message>
+          )}
+        </div>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button primary floated="right" onClick={() => onChange(value)}>
+          Apply changes
+        </Button>
+        <Button floated="right" onClick={onClose}>
+          Close
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+export default function MapsWidget(props) {
+  const { id, title, description, error, value } = props;
+  const [mapEditor, setMapEditor] = useState(false);
+
+  function onChange(value) {
+    props.onChange(props.id, value);
+    setMapEditor(false);
+  }
+
+  return (
+    <FormFieldWrapper {...props} columns={1}>
+      <div className="wrapper">
+        <label htmlFor={`field-${id}`}>{title}</label>
+        <Button
+          floated="right"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setMapEditor(true);
+          }}
+        >
+          Open Map Editor
+        </Button>
+      </div>
+      {description && <p className="help">{description}</p>}
+      {value.url && <Map {...props} data={value} />}
+      {mapEditor && (
+        <MapEditorModal
+          id={id}
+          value={value}
+          onChange={onChange}
+          onClose={() => setMapEditor(false)}
+        />
+      )}
+      {map(error, (message) => (
+        <Label key={message} basic color="red" pointing>
+          {message}
+        </Label>
+      ))}
+    </FormFieldWrapper>
+  );
+}

package/src/index.js

@@ -1,10 +1,17 @@
 import installBlocks from './Blocks';
+import MapView from './Views/MapView';
+import MapsViewWidget from './Widgets/MapsViewWidget';
+import MapsWidget from './Widgets/MapsWidget';
 export {
   PrivacyProtection,
   addPrivacyProtectionToSchema,
 } from './PrivacyProtection';
 
 export default function applyConfig(config) {
+  config.views.contentTypesViews.map = MapView;
+  config.widgets.id.maps = MapsWidget;
+  config.widgets.views.id.maps = MapsViewWidget;
+
   config.settings.allowed_cors_destinations = [
     ...config.settings.allowed_cors_destinations,
     'screenshot.eea.europa.eu',