@eeacms/volto-embed 7.0.2 → 9.0.0

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-08-29T17:13:33.263Z\n"
+"POT-Creation-Date: 2023-11-15T18:20:32.637Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -13,37 +13,70 @@ msgstr ""
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
-#: Iframe/EditIframe
+#: Blocks/EmbedMaps/schema
+#: Blocks/Maps/schema
+# defaultMessage: Alignment
+msgid "Alignment"
+msgstr ""
+
+#: Blocks/EmbedMaps/schema
+#: Blocks/Maps/schema
+# defaultMessage: Alt text
+msgid "Alt text"
+msgstr ""
+
+#: Blocks/EmbedMaps/schema
+#: Blocks/Maps/schema
+# defaultMessage: undefined
+msgid "CSSHeight"
+msgstr ""
+
+#: Blocks/EmbedMaps/schema
+#: Blocks/Maps/schema
+# defaultMessage: undefined
+msgid "CSSHeightDescription"
+msgstr ""
+
+#: Blocks/EmbedMaps/Edit
+#: Blocks/Maps/Edit
 # defaultMessage: Center
 msgid "Center"
 msgstr ""
 
-#: Iframe/EditIframe
+#: Blocks/EmbedMaps/Edit
+#: Blocks/Maps/Edit
+#: Widgets/MapsWidget
 # defaultMessage: Embed code error, please follow the instructions and try again.
 msgid "Embed code error, please follow the instructions and try again."
 msgstr ""
 
-#: Iframe/ViewIframe
+#: Blocks/EmbedMaps/View
+#: Blocks/Maps/View
+#: Map/Map
 # defaultMessage: Embeded Google Maps
 msgid "Embeded Google Maps"
 msgstr ""
 
-#: Iframe/EditIframe
+#: Blocks/EmbedMaps/Edit
+#: Blocks/Maps/Edit
 # defaultMessage: Enter map Embed Code
 msgid "Enter map Embed Code"
 msgstr ""
 
-#: Iframe/EditIframe
+#: Blocks/EmbedMaps/Edit
+#: Blocks/Maps/Edit
 # defaultMessage: Full
 msgid "Full"
 msgstr ""
 
-#: Iframe/EditIframe
+#: Blocks/EmbedMaps/Edit
+#: Blocks/Maps/Edit
 # defaultMessage: Google Maps Embedded Block
 msgid "Google Maps Embedded Block"
 msgstr ""
 
-#: Iframe/EditIframe
+#: Blocks/EmbedMaps/Edit
+#: Blocks/Maps/Edit
 # defaultMessage: Left
 msgid "Left"
 msgstr ""
@@ -53,12 +86,35 @@ msgstr ""
 msgid "Live image generated"
 msgstr ""
 
-#: Iframe/EditIframe
+#: Blocks/EmbedMaps/MapsSidebar
+#: Blocks/EmbedMaps/schema
+#: Blocks/Maps/MapsSidebar
+#: Blocks/Maps/schema
+# defaultMessage: Maps
+msgid "Maps"
+msgstr ""
+
+#: Blocks/EmbedMaps/schema
+#: Blocks/Maps/schema
+# defaultMessage: Maps URL
+msgid "Maps URL"
+msgstr ""
+
+#: Blocks/EmbedMaps/MapsSidebar
+#: Blocks/Maps/MapsSidebar
+# defaultMessage: No map selected
+msgid "No map selected"
+msgstr ""
+
+#: Blocks/EmbedMaps/Edit
+#: Blocks/Maps/Edit
+#: Widgets/MapsWidget
 # defaultMessage: Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it.
 msgid "Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it."
 msgstr ""
 
-#: Iframe/EditIframe
+#: Blocks/EmbedMaps/Edit
+#: Blocks/Maps/Edit
 # defaultMessage: Right
 msgid "Right"
 msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "7.0.2",
+  "version": "9.0.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -20,8 +20,7 @@
   ],
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
-    "@eeacms/volto-datablocks": "*",
-    "react-visibility-sensor": "5.1.1"
+    "@eeacms/volto-datablocks": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",
@@ -72,4 +71,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}

package/src/Blocks/EmbedMaps/Edit.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { SidebarPortal } from '@plone/volto/components';
+import View from './View';
+import getSchema from './schema';
+
+const Edit = (props) => {
+  const schema = React.useMemo(() => getSchema(props), [props]);
+
+  return (
+    <React.Fragment>
+      <View {...props} mode="edit" />
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          block={props.block}
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </React.Fragment>
+  );
+};
+
+export default Edit;

package/src/Blocks/EmbedMaps/Edit.test.js

@@ -0,0 +1,75 @@
+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 Edit from './Edit';
+import installEmbedMaps from '.';
+
+installEmbedMaps(config);
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  SidebarPortal: jest.requireActual(
+    '@plone/volto/components/manage/Sidebar/SidebarPortal',
+  ).default,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+  },
+  connected_data_parameters: {},
+});
+
+test('renders an edit embed map block component', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <Edit
+        id="my-map"
+        data={{
+          '@type': 'embed_maps',
+          with_notes: false,
+          with_sources: false,
+          with_more_info: true,
+          with_share: true,
+          with_enlarge: true,
+          url: '/path/to/map',
+          maps: {
+            '@id': '/path/to/map',
+            title: 'My map',
+            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',
+          },
+          dataprotection: {
+            enabled: false,
+          },
+          useVisibilitySensor: false,
+        }}
+        pathname="/news"
+        selected={false}
+        block="1234"
+        index={1}
+        onChangeBlock={() => {}}
+        onSelectBlock={() => {}}
+        onDeleteBlock={() => {}}
+        onFocusPreviousBlock={() => {}}
+        onFocusNextBlock={() => {}}
+        handleKeyDown={() => {}}
+        content={{}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Blocks/EmbedMaps/View.jsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useMemo } from 'react';
+import { connect } from 'react-redux';
+import { Message } from 'semantic-ui-react';
+import { getContent } from '@plone/volto/actions';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
+
+function getMaps(props) {
+  const content = props.mapsContent || {};
+  const maps = content.maps || props.data?.maps || {};
+  return {
+    ...pickMetadata(content),
+    ...maps,
+  };
+}
+
+function View(props) {
+  const { id, getContent, mode } = props;
+  const {
+    useVisibilitySensor = true,
+    with_notes = true,
+    with_sources = true,
+    with_more_info = true,
+    with_share = true,
+    with_enlarge = true,
+  } = props.data;
+
+  const url = flattenToAppURL(props.data.url || '');
+
+  const maps = useMemo(() => getMaps(props), [props]);
+
+  useEffect(() => {
+    const mapsId = maps['@id'] ? flattenToAppURL(maps['@id']) : undefined;
+    if (mode === 'edit' && url && url !== mapsId) {
+      getContent(url, null, id);
+    }
+  }, [id, getContent, mode, url, maps]);
+
+  if (props.mode === 'edit' && !url) {
+    return <Message>Please select a map from block editor.</Message>;
+  }
+
+  if (!maps) {
+    return null;
+  }
+
+  return (
+    <div className="embed-map">
+      <EmbedMap
+        data={{
+          ...maps,
+          useVisibilitySensor,
+          with_notes,
+          with_sources,
+          with_more_info,
+          with_share,
+          with_enlarge,
+        }}
+        id={props.id}
+      />
+    </div>
+  );
+}
+
+export default connect(
+  (state, props) => ({
+    mapsContent: state.content.subrequests?.[props.id]?.data,
+  }),
+  { getContent },
+)(View);

package/src/Blocks/EmbedMaps/View.test.js

@@ -0,0 +1,60 @@
+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 View from './View';
+import installEmbedMaps from '.';
+
+installEmbedMaps(config);
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+test('renders a view embed map block component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <View
+        id="my-map"
+        data={{
+          '@type': 'embed_maps',
+          with_notes: false,
+          with_sources: false,
+          with_more_info: true,
+          with_share: true,
+          with_enlarge: true,
+          url: '/path/to/map',
+          maps: {
+            '@id': '/path/to/map',
+            title: 'My map',
+            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',
+          },
+          dataprotection: {
+            enabled: false,
+          },
+          useVisibilitySensor: false,
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Blocks/EmbedMaps/index.js

@@ -0,0 +1,22 @@
+import EmbedMap from './Edit';
+import EmbedView from './View';
+
+import sliderSVG from '@plone/volto/icons/slider.svg';
+
+const applyConfig = (config) => {
+  config.blocks.blocksConfig.embed_maps = {
+    id: 'embed_maps',
+    title: 'Embed Map',
+    icon: sliderSVG,
+    group: 'common',
+    edit: EmbedMap,
+    view: EmbedView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+  };
+
+  return config;
+};
+
+export default applyConfig;

package/src/Blocks/EmbedMaps/schema.js

@@ -0,0 +1,62 @@
+export default () => {
+  return {
+    title: 'Embed Map',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['url'],
+      },
+      {
+        id: 'toolbar',
+        title: 'Toolbar',
+        fields: [
+          'with_notes',
+          'with_sources',
+          'with_more_info',
+          'with_share',
+          'with_enlarge',
+        ],
+      },
+    ],
+    properties: {
+      url: {
+        title: 'Map url',
+        widget: 'url',
+      },
+      with_notes: {
+        title: 'Show note',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_sources: {
+        title: 'Show sources',
+        description: 'Will show sources set in this page Data provenance',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_more_info: {
+        title: 'Show more info',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_enlarge: {
+        title: 'Show enlarge button',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_share: {
+        title: 'Show share button',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      tableau_height: {
+        title: 'Height',
+        type: 'text',
+        defaultValue: '700',
+      },
+    },
+
+    required: ['tableau_vis_url'],
+  };
+};

package/src/Blocks/Maps/Edit.jsx

@@ -229,6 +229,7 @@ class Edit extends Component {
             <PrivacyProtection
               data={this.props.data}
               editable={this.props.editable}
+              useVisibilitySensor={this.props.data.useVisibilitySensor ?? true}
             >
               <iframe
                 title={this.props.intl.formatMessage(

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

@@ -0,0 +1,79 @@
+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 Edit from './Edit';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  SidebarPortal: jest.requireActual(
+    '@plone/volto/components/manage/Sidebar/SidebarPortal',
+  ).default,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+  },
+  connected_data_parameters: {},
+});
+
+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 an edit map block component', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <Edit
+        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',
+          dataprotection: {
+            enabled: false,
+          },
+          useVisibilitySensor: false,
+        }}
+        pathname="/news"
+        selected={false}
+        block="1234"
+        index={1}
+        onChangeBlock={() => {}}
+        onSelectBlock={() => {}}
+        onDeleteBlock={() => {}}
+        onFocusPreviousBlock={() => {}}
+        onFocusNextBlock={() => {}}
+        handleKeyDown={() => {}}
+        content={{}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Blocks/Maps/View.jsx

@@ -40,7 +40,11 @@ const View = ({ data, intl, id }) => {
           'full-width': data.align === 'full',
         })}
       >
-        <PrivacyProtection data={data} id={id}>
+        <PrivacyProtection
+          data={data}
+          id={id}
+          useVisibilitySensor={data.useVisibilitySensor}
+        >
           <iframe
             title={intl.formatMessage(messages.EmbededGoogleMaps)}
             src={data.url}

package/src/Blocks/Maps/View.test.js

@@ -0,0 +1,67 @@
+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 View from './View';
+import installEmbedMaps from '.';
+
+installEmbedMaps(config);
+
+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 a view map block component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <View
+        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',
+          useVisibilitySensor: false,
+          dataprotection: {
+            enabled: false,
+          },
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});