@eeacms/volto-embed 7.0.2 → 9.0.0

package/src/Toolbar/Toolbar.test.js

@@ -0,0 +1,96 @@
+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 { Enlarge, FigureNote, MoreInfo, Share, Sources } from '.';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+jest.mock('@plone/volto-slate/editor/render', () => ({
+  __esModule: true,
+  serializeNodes: (nodes) => {
+    return nodes.map((node, index) => {
+      const Tag = node.type;
+      return (
+        <Tag key={`node-${index}`}>
+          {node.children.map((item, index) => (
+            <span key={`item-${index}`}>{item.text}</span>
+          ))}
+        </Tag>
+      );
+    });
+  },
+  serializeNodesToText: (nodes) => {
+    return nodes
+      .reduce((texts, node) => {
+        if (node.children) {
+          node.children.forEach((item) => {
+            texts.push(item.text);
+          });
+        }
+        return texts;
+      }, [])
+      .join('');
+  },
+}));
+
+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 toolbar components', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <div className="visualization-toolbar">
+        <div className="left-col">
+          <FigureNote
+            notes={[{ type: 'p', children: [{ text: 'This is a note' }] }]}
+          />
+          <Sources sources={[]} />
+          <MoreInfo href={'/path/to/embeded/content'} />
+        </div>
+        <div className="right-col">
+          <Enlarge className="enlarge-embed-maps">
+            <div>Some enlarged content</div>
+          </Enlarge>
+          <Share href="/path/to/embeded/content" />
+        </div>
+      </div>
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

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 EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+
+const MapView = (props) => {
+  return (
+    <Container>
+      <EmbedMap data={props.content.maps} id={props.content['@id']} />
+    </Container>
+  );
+};
+
+export default MapView;

package/src/Views/MapView.test.js

@@ -0,0 +1,68 @@
+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 MapView from './MapView';
+
+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}>
+      <MapView
+        content={{
+          maps: {
+            '@id': '/path/to/map',
+            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/Widgets/MapsViewWidget.jsx

@@ -0,0 +1,5 @@
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+
+export default function MapsViewWidget({ id, value }) {
+  return <EmbedMap 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 EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+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"
+              >
+                <EmbedMap 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 && <EmbedMap {...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/helpers.js

@@ -0,0 +1,16 @@
+import { pick } from 'lodash';
+
+export function pickMetadata(content) {
+  return {
+    ...pick(content, [
+      '@id',
+      'title',
+      'data_provenance',
+      'figure_note',
+      'other_organisations',
+      'temporan_coverage',
+      'publisher',
+      'geo_coverage',
+    ]),
+  };
+}

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',

package/src/Blocks/Maps/Edit.test.jsx

@@ -1,119 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React from 'react';
-import config from '@plone/volto/registry';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { Provider } from 'react-intl-redux';
-import configureStore from 'redux-mock-store';
-import Edit from './Edit';
-import '@testing-library/jest-dom/extend-expect';
-
-const mockStore = configureStore();
-
-const store = mockStore(() => ({
-  connected_data_parameters: {},
-  router: {
-    location: {
-      pathname: '',
-    },
-  },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-}));
-
-config.blocks.blocksConfig = {
-  ...config.blocks.blocksConfig,
-  maps: {
-    id: 'maps',
-    title: 'Maps',
-    group: 'media',
-    extensions: {},
-    variations: [],
-    restricted: false,
-    mostUsed: true,
-    sidebarTab: 1,
-    security: {
-      addPermission: [],
-      view: [],
-    },
-  },
-};
-
-jest.mock(
-  '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection',
-  () => ({ children }) => children,
-);
-
-describe('Edit', () => {
-  it('renders without crashing', () => {
-    render(
-      <Provider store={store}>
-        <Edit
-          selected={false}
-          block="block"
-          index={1}
-          data={{
-            '@type': 'maps',
-            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',
-          }}
-          pathname="/"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-        />
-      </Provider>,
-    );
-  });
-
-  it('submits url when button is clicked', async () => {
-    const 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';
-
-    const { container, getByPlaceholderText } = render(
-      <Provider store={store}>
-        <Edit
-          selected={false}
-          block="block"
-          index={1}
-          data={{
-            '@type': 'maps',
-            dataprotection: {
-              privacy_statement: 'test',
-            },
-          }}
-          pathname="/"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-        />
-      </Provider>,
-    );
-
-    const input = getByPlaceholderText('Enter map Embed Code');
-
-    fireEvent.click(input);
-    fireEvent.change(input, { target: { value: url } });
-    // screen.debug();
-    // expect(input.value).toBe(url);
-
-    // fireEvent.click(container.querySelector('button.cancel'));
-
-    // fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    // fireEvent.keyDown(input, { key: 'Escape', code: 'Escape' });
-    // fireEvent.keyDown(input, { key: 'KeyA', code: 'KeyA' });
-
-    // fireEvent.change(input, { target: { value: '<iframe src="test"/>' } });
-    // fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-    // const button = container.querySelector('button.ui.basic.primary.button');
-    // fireEvent.click(button);
-  });
-});