@eeacms/volto-embed 6.0.0 → 7.0.0

package/locales/volto.pot

@@ -0,0 +1,69 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-08-29T17:13:33.263Z\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"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+#: Iframe/EditIframe
+# defaultMessage: Center
+msgid "Center"
+msgstr ""
+
+#: Iframe/EditIframe
+# 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
+# defaultMessage: Embeded Google Maps
+msgid "Embeded Google Maps"
+msgstr ""
+
+#: Iframe/EditIframe
+# defaultMessage: Enter map Embed Code
+msgid "Enter map Embed Code"
+msgstr ""
+
+#: Iframe/EditIframe
+# defaultMessage: Full
+msgid "Full"
+msgstr ""
+
+#: Iframe/EditIframe
+# defaultMessage: Google Maps Embedded Block
+msgid "Google Maps Embedded Block"
+msgstr ""
+
+#: Iframe/EditIframe
+# defaultMessage: Left
+msgid "Left"
+msgstr ""
+
+#: PrivacyProtection/PrivacyProtection
+# defaultMessage: Live image generated
+msgid "Live image generated"
+msgstr ""
+
+#: Iframe/EditIframe
+# 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
+# defaultMessage: Right
+msgid "Right"
+msgstr ""
+
+#: PrivacyProtection/PrivacyProtection
+# defaultMessage: Success
+msgid "Success"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,21 +27,49 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "make lint-fix",
+      "make prettier-fix"
+    ],
+    "src/**/*.{jsx}": [
+      "make i18n"
+    ],
+    "theme/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "theme/**/*.overrides": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.overrides": [
+      "make stylelint-fix"
+    ]
+  },
   "scripts": {
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",
     "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
-    "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
-    "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "prettier": "../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'",
-    "prettier:fix": "../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'",
-    "lint": "../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
-    "lint:fix": "../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'",
-    "cypress:run": "../../../node_modules/cypress/bin/cypress run",
-    "cypress:open": "../../../node_modules/cypress/bin/cypress open"
+    "test": "make test",
+    "test:fix": "make test-update",
+    "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open",
+    "prepare": "husky install"
   }
-}
+}

package/src/{Iframe/EditIframe.jsx → Blocks/Maps/Edit.jsx}

@@ -9,17 +9,15 @@ import PropTypes from 'prop-types';
 import { Button, Input, Message } from 'semantic-ui-react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import cx from 'classnames';
-
+import { isEqual } from 'lodash';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import { compose } from 'redux';
 import { Icon, SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 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';
-import schema from './schema';
-import {
-  PrivacyProtection,
-  addPrivacyProtectionToSchema,
-} from '../PrivacyProtection';
+import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
+import MapsSidebar from './MapsSidebar';
 
 const messages = defineMessages({
   MapsBlockInputPlaceholder: {
@@ -90,6 +88,19 @@ class Edit extends Component {
     this.onKeyDownVariantMenuForm = this.onKeyDownVariantMenuForm.bind(this);
   }
 
+  /**
+   * @param {*} nextProps
+   * @returns {boolean}
+   * @memberof Edit
+   */
+  shouldComponentUpdate(nextProps) {
+    return (
+      this.props.selected ||
+      nextProps.selected ||
+      !isEqual(this.props.data, nextProps.data)
+    );
+  }
+
   /**
    * Backward compatibility
    * @method componentDidMount
@@ -196,6 +207,9 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const placeholder =
+      this.props.data.placeholder ||
+      this.props.intl.formatMessage(messages.MapsBlockInputPlaceholder);
     return (
       <div
         className={cx(
@@ -224,6 +238,11 @@ class Edit extends Component {
                 className="google-map"
                 frameBorder="0"
                 allowFullScreen
+                style={
+                  this.props.data.height
+                    ? { height: this.props.data.height }
+                    : {}
+                }
               />
             </PrivacyProtection>
           </div>
@@ -235,9 +254,7 @@ class Edit extends Component {
                 <Input
                   onKeyDown={this.onKeyDownVariantMenuForm}
                   onChange={this.onChangeUrl}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.MapsBlockInputPlaceholder,
-                  )}
+                  placeholder={placeholder}
                   value={this.state.url}
                   // Prevents propagation to the Dropzone and the opening
                   // of the upload browser dialog
@@ -287,22 +304,13 @@ class Edit extends Component {
             </center>
           </Message>
         )}
+        {!this.props.selected && <div className="map-overlay" />}
         <SidebarPortal selected={this.props.selected}>
-          <InlineForm
-            schema={addPrivacyProtectionToSchema(schema)}
-            title={schema.title}
-            onChangeField={(id, value) => {
-              this.props.onChangeBlock(this.props.block, {
-                ...this.props.data,
-                [id]: value,
-              });
-            }}
-            formData={this.props.data}
-          />
+          <MapsSidebar {...this.props} resetSubmitUrl={this.resetSubmitUrl} />
         </SidebarPortal>
       </div>
     );
   }
 }
 
-export default injectIntl(Edit);
+export default compose(injectIntl, withBlockExtensions)(Edit);

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

@@ -0,0 +1,119 @@
+/* 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);
+  });
+});

package/src/Blocks/Maps/MapsSidebar.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BlockDataForm } from '@plone/volto/components';
+import { useIntl, defineMessages } from 'react-intl';
+import globeSVG from '@plone/volto/icons/globe.svg';
+import { Icon } from '@plone/volto/components';
+import { Segment } from 'semantic-ui-react';
+import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
+import { MapsSchema } from './schema';
+
+const messages = defineMessages({
+  Maps: {
+    id: 'Maps',
+    defaultMessage: 'Maps',
+  },
+  NoMaps: {
+    id: 'No map selected',
+    defaultMessage: 'No map selected',
+  },
+});
+
+const MapsSidebar = (props) => {
+  const { data, block, onChangeBlock } = props;
+  const intl = useIntl();
+  const schema = addPrivacyProtectionToSchema(MapsSchema({ ...props, intl }));
+
+  return (
+    <>
+      {!data.url ? (
+        <Segment className="sidebar-metadata-container" secondary>
+          {props.intl.formatMessage(messages.NoMaps)}
+          <Icon name={globeSVG} size="100px" color="#b8c6c8" />
+        </Segment>
+      ) : (
+        <BlockDataForm
+          schema={schema}
+          title={intl.formatMessage(messages.Maps)}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+        />
+      )}
+    </>
+  );
+};
+
+export default MapsSidebar;

package/src/{Iframe/ViewIframe.jsx → Blocks/Maps/View.jsx}

@@ -7,7 +7,9 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { PrivacyProtection } from '../PrivacyProtection';
+import { compose } from 'redux';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
 
 const messages = defineMessages({
   EmbededGoogleMaps: {
@@ -32,17 +34,11 @@ const View = ({ data, intl, id }) => {
         },
         data.align,
       )}
-      style={
-        data.align === 'full'
-          ? { position: 'static', height: data.height }
-          : { height: data.height }
-      }
     >
       <div
-        className={cx({
-          'full-width-block': data.align === 'full',
+        className={cx('maps-inner', {
+          'full-width': data.align === 'full',
         })}
-        style={{ height: '100%' }}
       >
         <PrivacyProtection data={data} id={id}>
           <iframe
@@ -51,7 +47,7 @@ const View = ({ data, intl, id }) => {
             className="google-map"
             frameBorder="0"
             allowFullScreen
-            style={{ height: data.height }}
+            style={data.height ? { height: data.height } : {}}
           />
         </PrivacyProtection>
       </div>
@@ -68,4 +64,4 @@ View.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(View);
+export default compose(injectIntl, withBlockExtensions)(View);

package/src/Blocks/Maps/index.js

@@ -0,0 +1,12 @@
+import Edit from './Edit';
+import View from './View';
+
+export default function installHeroBlock(config) {
+  config.blocks.blocksConfig.maps = {
+    ...config.blocks.blocksConfig.maps,
+    edit: Edit,
+    view: View,
+  };
+
+  return config;
+}

package/src/Blocks/Maps/schema.js

@@ -0,0 +1,67 @@
+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',
+    defineMessages: 'CSS height',
+  },
+  CSSHeightDescription: {
+    id: 'CSSHeightDescription',
+    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'],
+    },
+  ],
+
+  properties: {
+    url: {
+      title: props.intl.formatMessage(messages.MapsURL),
+      widget: 'url',
+    },
+    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: [],
+});

package/src/Blocks/index.js

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

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import cx from 'classnames';
 import { compose } from 'redux';
 import { useSelector, useDispatch } from 'react-redux';
 import VisibilitySensor from 'react-visibility-sensor';
@@ -77,6 +78,7 @@ const CookieWatcher = (domain_key, cookies, pollingRate = 250) => {
 
 const PrivacyProtection = (props) => {
   const {
+    className,
     children,
     data = {},
     id,
@@ -168,7 +170,7 @@ const PrivacyProtection = (props) => {
     >
       {visible ? (
         <div
-          className="privacy-protection-wrapper"
+          className={cx('privacy-protection-wrapper', className)}
           style={{
             position: 'relative',
             height: height && (!enabled || !show) ? `${height}px` : 'auto',

package/src/PrivacyProtection/styles.less

@@ -17,17 +17,12 @@
   text-align: center;
 
   .wrapped {
-    // position: absolute;
-    // top: 50%;
-    // left: 50%;
     width: 300px;
     padding: 1.4rem;
     margin: 0 auto;
     background: white;
     border-radius: 5px;
     opacity: 1;
-    // -ms-transform: translate(-50%, -50%);
-    // transform: translate(-50%, -50%);
   }
 
   .discreet,

package/src/Toolbar/Enlarge.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Modal } from 'semantic-ui-react';
+
+const EnlargeWidget = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="enlarge">
+      <button className="trigger-button" onClick={() => 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>
+    </div>
+  );
+};
+
+export default EnlargeWidget;

package/src/Toolbar/FigureNote.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Popup } from 'semantic-ui-react';
+import { isArray, isString } from 'lodash';
+import cx from 'classnames';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+
+export const serializeText = (notes) => {
+  const content = isArray(notes) ? serializeNodes(notes) : notes;
+  const text = isArray(notes)
+    ? serializeNodesToText(notes)
+    : isString(notes)
+    ? notes
+    : '';
+  if (!text) return <p>There are no notes set for this visualization</p>;
+  return content;
+};
+
+export default function FigureNote({ notes = [] }) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popup
+      popper={{ id: 'vis-toolbar-popup', className: 'figure-note-popup' }}
+      position="bottom left"
+      on="click"
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      trigger={
+        <div className="figure-note">
+          <button className={cx('trigger-button', { open })}>Note</button>
+        </div>
+      }
+    >
+      <Popup.Content>{serializeText(notes)}</Popup.Content>
+    </Popup>
+  );
+}

package/src/Toolbar/MoreInfo.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+export default function MoreInfo({ href }) {
+  return (
+    <div className="more-info">
+      <Link href={href} className="trigger-button">
+        <span>More info</span>
+        <i class="ri-external-link-line" />
+      </Link>
+    </div>
+  );
+}