@eeacms/volto-embed 7.0.2 → 8.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": "8.0.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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/View.jsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo } from 'react';
+import { connect } from 'react-redux';
+import { Message } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import Map from '@eeacms/volto-embed/Map/Map';
+
+import { getContent } from '@plone/volto/actions';
+
+function View(props) {
+  const {
+    url,
+    with_notes = true,
+    with_sources = true,
+    with_more_info = true,
+    with_share = true,
+    with_enlarge = true,
+  } = props.data;
+
+  const maps = useMemo(() => {
+    if (props.data.maps) {
+      return props.data.maps;
+    }
+    if (props.mapsContent?.maps) {
+      return {
+        ...props.mapsContent.maps,
+        '@id': props.mapsContent['@id'],
+        title: props.mapsContent['title'],
+        publisher: props.mapsContent['publisher'],
+        geo_coverage: props.mapsContent['geo_coverage'],
+        temporal_coverage: props.mapsContent['temporal_coverage'],
+        other_organisations: props.mapsContent['other_organisations'],
+        data_provenance: props.mapsContent['data_provenance'],
+        figure_note: props.mapsContent['figure_note'],
+      };
+    }
+    return undefined;
+  }, [props.data.maps, props.mapsContent]);
+
+  useEffect(() => {
+    if (props.data.url && !props.data.maps) {
+      props.getContent(flattenToAppURL(props.data.url), null, props.id);
+    }
+    /* eslint-disable-next-line */
+  }, [props.data.url]);
+
+  if (props.mode === 'edit' && !url) {
+    return <Message>Please select a map from block editor.</Message>;
+  }
+
+  if (!maps) {
+    return null;
+  }
+
+  return (
+    <div className="embed-map">
+      <Map
+        data={{
+          ...maps,
+          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/index.js

@@ -0,0 +1,22 @@
+import EmbedMap from './Edit';
+import EmbedView from './View';
+
+import sliderSVG from '@plone/volto/icons/slider.svg';
+
+const embedConfig = (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 embedConfig;

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/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/Map/Map.jsx

@@ -0,0 +1,101 @@
+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 Map({ 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}>
+          <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 note={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">
+              <Map
+                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 })),
+)(Map);

package/src/Map/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;
+  }
+}