@eeacms/volto-eea-website-theme 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
+
+#### :hammer_and_wrench: Others
+
+- Release 1.5.0 [Alin Voinea - [`1b87380`](https://github.com/eea/volto-eea-website-theme/commit/1b87380b5eb5cd7324b1816c08e932c52c7e107b)]
 ### [1.4.2](https://github.com/eea/volto-eea-website-theme/compare/1.4.1...1.4.2) - 29 December 2022
 
 #### :bug: Bug Fixes
@@ -32,7 +37,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
 - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
 ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
 
@@ -42,7 +46,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
 - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
 - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
 ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -51,9 +54,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
 
-#### :hammer_and_wrench: Others
-
-- yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features
@@ -94,7 +94,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
 - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
 - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -142,7 +141,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -410,7 +408,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -452,5 +449,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx

@@ -0,0 +1,408 @@
+/**
+ * Edit image block.
+ * @module components/manage/Blocks/Image/Edit
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { readAsDataURL } from 'promise-file-reader';
+import { Button, Dimmer, Input, Loader, Message } from 'semantic-ui-react';
+import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
+import cx from 'classnames';
+import { isEqual } from 'lodash';
+
+import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
+import { Icon as IconSemantic } from 'semantic-ui-react';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import { createContent } from '@plone/volto/actions';
+import { Copyright } from '@eeacms/volto-eea-design-system/ui';
+
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  isInternalURL,
+} from '@plone/volto/helpers';
+
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+import './style.less';
+const Dropzone = loadable(() => import('react-dropzone'));
+
+const messages = defineMessages({
+  ImageBlockInputPlaceholder: {
+    id: 'Browse the site, drop an image, or type an URL',
+    defaultMessage: 'Browse the site, drop an image, or type an URL',
+  },
+});
+
+/**
+ * Edit image block class.
+ * @class Edit
+ * @extends Component
+ */
+class Edit extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    selected: PropTypes.bool.isRequired,
+    block: PropTypes.string.isRequired,
+    index: PropTypes.number.isRequired,
+    data: PropTypes.objectOf(PropTypes.any).isRequired,
+    content: PropTypes.objectOf(PropTypes.any).isRequired,
+    request: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    pathname: PropTypes.string.isRequired,
+    onChangeBlock: PropTypes.func.isRequired,
+    onSelectBlock: PropTypes.func.isRequired,
+    onDeleteBlock: PropTypes.func.isRequired,
+    onFocusPreviousBlock: PropTypes.func.isRequired,
+    onFocusNextBlock: PropTypes.func.isRequired,
+    handleKeyDown: PropTypes.func.isRequired,
+    createContent: PropTypes.func.isRequired,
+    openObjectBrowser: PropTypes.func.isRequired,
+  };
+
+  state = {
+    uploading: false,
+    url: '',
+    dragging: false,
+  };
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (
+      this.props.request.loading &&
+      nextProps.request.loaded &&
+      this.state.uploading
+    ) {
+      this.setState({
+        uploading: false,
+      });
+      this.props.onChangeBlock(this.props.block, {
+        ...this.props.data,
+        url: nextProps.content['@id'],
+        alt: '',
+      });
+    }
+  }
+
+  /**
+   * @param {*} nextProps
+   * @returns {boolean}
+   * @memberof Edit
+   */
+  shouldComponentUpdate(nextProps) {
+    return (
+      this.props.selected ||
+      nextProps.selected ||
+      !isEqual(this.props.data, nextProps.data)
+    );
+  }
+
+  /**
+   * Upload image handler (not used), but useful in case that we want a button
+   * not powered by react-dropzone
+   * @method onUploadImage
+   * @returns {undefined}
+   */
+  onUploadImage = (e) => {
+    e.stopPropagation();
+    const file = e.target.files[0];
+    this.setState({
+      uploading: true,
+    });
+    readAsDataURL(file).then((data) => {
+      const fields = data.match(/^data:(.*);(.*),(.*)$/);
+      this.props.createContent(
+        getBaseUrl(this.props.pathname),
+        {
+          '@type': 'Image',
+          title: file.name,
+          image: {
+            data: fields[3],
+            encoding: fields[2],
+            'content-type': fields[1],
+            filename: file.name,
+          },
+        },
+        this.props.block,
+      );
+    });
+  };
+
+  /**
+   * Change url handler
+   * @method onChangeUrl
+   * @param {Object} target Target object
+   * @returns {undefined}
+   */
+  onChangeUrl = ({ target }) => {
+    this.setState({
+      url: target.value,
+    });
+  };
+
+  /**
+   * Submit url handler
+   * @method onSubmitUrl
+   * @param {object} e Event
+   * @returns {undefined}
+   */
+  onSubmitUrl = () => {
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      url: flattenToAppURL(this.state.url),
+    });
+  };
+
+  /**
+   * Drop handler
+   * @method onDrop
+   * @param {array} files File objects
+   * @returns {undefined}
+   */
+  onDrop = (file) => {
+    this.setState({
+      uploading: true,
+    });
+
+    readAsDataURL(file[0]).then((data) => {
+      const fields = data.match(/^data:(.*);(.*),(.*)$/);
+      this.props.createContent(
+        getBaseUrl(this.props.pathname),
+        {
+          '@type': 'Image',
+          title: file[0].name,
+          image: {
+            data: fields[3],
+            encoding: fields[2],
+            'content-type': fields[1],
+            filename: file[0].name,
+          },
+        },
+        this.props.block,
+      );
+    });
+  };
+
+  /**
+   * Keydown handler on Variant Menu Form
+   * This is required since the ENTER key is already mapped to a onKeyDown
+   * event and needs to be overriden with a child onKeyDown.
+   * @method onKeyDownVariantMenuForm
+   * @param {Object} e Event object
+   * @returns {undefined}
+   */
+  onKeyDownVariantMenuForm = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      this.onSubmitUrl();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      // TODO: Do something on ESC key
+    }
+  };
+  onDragEnter = () => {
+    this.setState({ dragging: true });
+  };
+  onDragLeave = () => {
+    this.setState({ dragging: false });
+  };
+
+  node = React.createRef();
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { data } = this.props;
+    const placeholder =
+      this.props.data.placeholder ||
+      this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
+    const { copyright, copyrightIcon, copyrightPosition } = data;
+    return (
+      <div
+        className={cx(
+          'block image align',
+          {
+            center: !Boolean(data.align),
+          },
+          data.align,
+        )}
+      >
+        {data.url ? (
+          <div className="image-block">
+            <img
+              className={cx({
+                'full-width': data.align === 'full',
+                large: data.size === 'l',
+                medium: data.size === 'm',
+                small: data.size === 's',
+              })}
+              src={
+                isInternalURL(data.url)
+                  ? // Backwards compat in the case that the block is storing the full server URL
+                    (() => {
+                      if (data.size === 'l')
+                        return `${flattenToAppURL(data.url)}/@@images/image`;
+                      if (data.size === 'm')
+                        return `${flattenToAppURL(
+                          data.url,
+                        )}/@@images/image/preview`;
+                      if (data.size === 's')
+                        return `${flattenToAppURL(
+                          data.url,
+                        )}/@@images/image/mini`;
+                      return `${flattenToAppURL(data.url)}/@@images/image`;
+                    })()
+                  : data.url
+              }
+              alt={data.alt || ''}
+            />
+            <div className="copyright-image">
+              {copyright ? (
+                <Copyright copyrightPosition={copyrightPosition}>
+                  <Copyright.Icon>
+                    <IconSemantic name={copyrightIcon} />
+                  </Copyright.Icon>
+                  <Copyright.Text>{copyright}</Copyright.Text>
+                </Copyright>
+              ) : (
+                ''
+              )}
+            </div>
+          </div>
+        ) : (
+          <div>
+            {this.props.editable && (
+              <Dropzone
+                noClick
+                onDrop={this.onDrop}
+                onDragEnter={this.onDragEnter}
+                onDragLeave={this.onDragLeave}
+                className="dropzone"
+              >
+                {({ getRootProps, getInputProps }) => (
+                  <div {...getRootProps()}>
+                    <Message>
+                      {this.state.dragging && <Dimmer active></Dimmer>}
+                      {this.state.uploading && (
+                        <Dimmer active>
+                          <Loader indeterminate>Uploading image</Loader>
+                        </Dimmer>
+                      )}
+                      <div className="no-image-wrapper">
+                        <img src={imageBlockSVG} alt="" />
+                        <div className="toolbar-inner">
+                          <Button.Group>
+                            <Button
+                              basic
+                              icon
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                this.props.openObjectBrowser();
+                              }}
+                            >
+                              <Icon name={navTreeSVG} size="24px" />
+                            </Button>
+                          </Button.Group>
+                          <Button.Group>
+                            <label className="ui button basic icon">
+                              <Icon name={uploadSVG} size="24px" />
+                              <input
+                                {...getInputProps({
+                                  type: 'file',
+                                  onChange: this.onUploadImage,
+                                  style: { display: 'none' },
+                                })}
+                              />
+                            </label>
+                          </Button.Group>
+                          <Input
+                            onKeyDown={this.onKeyDownVariantMenuForm}
+                            onChange={this.onChangeUrl}
+                            placeholder={placeholder}
+                            value={this.state.url}
+                            onClick={(e) => {
+                              e.target.focus();
+                            }}
+                            onFocus={(e) => {
+                              this.props.onSelectBlock(this.props.id);
+                            }}
+                          />
+                          {this.state.url && (
+                            <Button.Group>
+                              <Button
+                                basic
+                                className="cancel"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  this.setState({ url: '' });
+                                }}
+                              >
+                                <Icon name={clearSVG} size="30px" />
+                              </Button>
+                            </Button.Group>
+                          )}
+                          <Button.Group>
+                            <Button
+                              basic
+                              primary
+                              disabled={!this.state.url}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                this.onSubmitUrl();
+                              }}
+                            >
+                              <Icon name={aheadSVG} size="30px" />
+                            </Button>
+                          </Button.Group>
+                        </div>
+                      </div>
+                    </Message>
+                  </div>
+                )}
+              </Dropzone>
+            )}
+          </div>
+        )}
+        <SidebarPortal selected={this.props.selected}>
+          <ImageSidebar {...this.props} />
+        </SidebarPortal>
+      </div>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  withBlockExtensions,
+  connect(
+    (state, ownProps) => ({
+      request: state.content.subrequests[ownProps.block] || {},
+      content: state.content.subrequests[ownProps.block]?.data,
+    }),
+    { createContent },
+  ),
+)(Edit);

package/src/customizations/volto/components/manage/Blocks/Image/View.jsx

@@ -0,0 +1,111 @@
+/**
+ * View image block.
+ * @module components/manage/Blocks/Image/View
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { UniversalLink } from '@plone/volto/components';
+import { Icon } from 'semantic-ui-react';
+import cx from 'classnames';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+import { Copyright } from '@eeacms/volto-eea-design-system/ui';
+import './style.less';
+/**
+ * View image block class.
+ * @class View
+ * @extends Component
+ */
+export const View = ({ data, detached }) => {
+  const href = data?.href?.[0]?.['@id'] || '';
+  const { copyright, copyrightIcon, copyrightPosition } = data;
+  return (
+    <p
+      className={cx(
+        'block image align',
+        {
+          center: !Boolean(data.align),
+          detached,
+        },
+        data.align,
+      )}
+    >
+      {data.url && (
+        <>
+          {(() => {
+            const image = (
+              <div className="image-block">
+                <img
+                  className={cx({
+                    'full-width': data.align === 'full',
+                    large: data.size === 'l',
+                    medium: data.size === 'm',
+                    small: data.size === 's',
+                  })}
+                  src={
+                    isInternalURL(data.url)
+                      ? // Backwards compat in the case that the block is storing the full server URL
+                        (() => {
+                          if (data.size === 'l')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image`;
+                          if (data.size === 'm')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/preview`;
+                          if (data.size === 's')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/mini`;
+                          return `${flattenToAppURL(data.url)}/@@images/image`;
+                        })()
+                      : data.url
+                  }
+                  alt={data.alt || ''}
+                  loading="lazy"
+                />
+                <div className="copyright-image">
+                  {copyright ? (
+                    <Copyright copyrightPosition={copyrightPosition}>
+                      <Copyright.Icon>
+                        <Icon className={copyrightIcon} />
+                      </Copyright.Icon>
+                      <Copyright.Text>{copyright}</Copyright.Text>
+                    </Copyright>
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+            );
+            if (href) {
+              return (
+                <UniversalLink
+                  href={href}
+                  openLinkInNewTab={data.openLinkInNewTab}
+                >
+                  {image}
+                </UniversalLink>
+              );
+            } else {
+              return image;
+            }
+          })()}
+        </>
+      )}
+    </p>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default withBlockExtensions(View);