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

package/src/customizations/volto/components/manage/Blocks/Image/schema.js

@@ -0,0 +1,121 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  Source: {
+    id: 'Source',
+    defaultMessage: 'Source',
+  },
+  Image: {
+    id: 'Image',
+    defaultMessage: 'Image',
+  },
+  AltText: {
+    id: 'Alt text',
+    defaultMessage: 'Alt text',
+  },
+  Align: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+  size: {
+    id: 'Image size',
+    defaultMessage: 'Image size',
+  },
+  LinkTo: {
+    id: 'Link to',
+    defaultMessage: 'Link to',
+  },
+  openLinkInNewTab: {
+    id: 'Open in a new tab',
+    defaultMessage: 'Open in a new tab',
+  },
+  AltTextHint: {
+    id: 'Alt text hint',
+    defaultMessage: 'Leave empty if the image is purely decorative.',
+  },
+  AltTextHintLinkText: {
+    id: 'Alt text hint link text',
+    defaultMessage: 'Describe the purpose of the image.',
+  },
+});
+
+export function ImageSchema({ formData, intl }) {
+  return {
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [...(formData.url ? ['url', 'alt', 'align', 'size'] : [])],
+      },
+      {
+        id: 'copyright',
+        title: 'Copyright',
+        fields: ['copyright', 'copyrightIcon', 'copyrightPosition'],
+      },
+      ...(formData.url
+        ? [
+            {
+              id: 'link_settings',
+              title: 'Link settings',
+              fields: ['href', 'openLinkInNewTab'],
+            },
+          ]
+        : []),
+    ],
+    properties: {
+      url: {
+        title: intl.formatMessage(messages.Source),
+        widget: 'url',
+      },
+      alt: {
+        title: intl.formatMessage(messages.AltText),
+        description: (
+          <>
+            <a
+              href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
+              title={intl.formatMessage(messages.openLinkInNewTab)}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {intl.formatMessage(messages.AltTextHintLinkText)}
+            </a>{' '}
+            {intl.formatMessage(messages.AltTextHint)}
+          </>
+        ),
+      },
+      align: {
+        title: intl.formatMessage(messages.Align),
+        widget: 'align',
+      },
+      size: {
+        title: intl.formatMessage(messages.size),
+        widget: 'image_size',
+      },
+      href: {
+        title: intl.formatMessage(messages.LinkTo),
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description', 'hasPreviewImage'],
+        allowExternals: true,
+      },
+      openLinkInNewTab: {
+        title: intl.formatMessage(messages.openLinkInNewTab),
+        type: 'boolean',
+      },
+      copyright: {
+        title: 'Text',
+      },
+      copyrightIcon: {
+        title: 'Icon',
+        default: 'ri-copyright-line',
+      },
+      copyrightPosition: {
+        title: 'Align',
+        widget: 'align',
+        actions: ['left', 'right'],
+        defaultValue: 'left',
+      },
+    },
+    required: [],
+  };
+}

package/src/customizations/volto/components/manage/Blocks/Image/style.less

@@ -0,0 +1,12 @@
+.image-block {
+  position: relative;
+}
+
+.copyright-image {
+  position: absolute;
+  z-index: 1000;
+  top: 90%;
+  width: 100%;
+  padding-right: 10px;
+  padding-left: 10px;
+}

package/src/customizations/volto/components/manage/Blocks/LeadImage/AlignChooser.jsx

@@ -0,0 +1,76 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import imageLeftSVG from '@plone/volto/icons/image-left.svg';
+import imageRightSVG from '@plone/volto/icons/image-right.svg';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+
+const messages = defineMessages({
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+  wide: {
+    id: 'Wide',
+    defaultMessage: 'Wide',
+  },
+  full: {
+    id: 'Full',
+    defaultMessage: 'Full',
+  },
+});
+
+const AlignChooser = ({
+  align,
+  onChangeBlock,
+  data,
+  block,
+  actions = ['left', 'right', 'center', 'full'],
+}) => {
+  const intl = useIntl();
+
+  const ICON_MAP = {
+    left: imageLeftSVG,
+    right: imageRightSVG,
+    center: imageFitSVG,
+    wide: imageWideSVG,
+    full: imageFullSVG,
+  };
+
+  function onAlignBlock(align) {
+    onChangeBlock(block, {
+      ...data,
+      copyrightPosition: align,
+    });
+  }
+
+  return (
+    <div className="align-buttons">
+      {actions.map((action) => (
+        <Button.Group>
+          <Button
+            icon
+            basic
+            aria-label={intl.formatMessage(messages[action])}
+            onClick={() => onAlignBlock(action)}
+            active={data.copyrightPosition === action}
+          >
+            <Icon name={ICON_MAP[action]} size="24px" />
+          </Button>
+        </Button.Group>
+      ))}
+    </div>
+  );
+};
+
+export default AlignChooser;

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

@@ -0,0 +1,141 @@
+/**
+ * Edit image block.
+ * @module components/manage/Blocks/Image/Edit
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import cx from 'classnames';
+import { Message } from 'semantic-ui-react';
+import { isEqual } from 'lodash';
+import { Copyright } from '@eeacms/volto-eea-design-system/ui';
+import './style.less';
+import { Icon } from 'semantic-ui-react';
+import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+
+const messages = defineMessages({
+  ImageBlockInputPlaceholder: {
+    id: "Upload a lead image in the 'Lead Image' content field.",
+    defaultMessage: "Upload a lead image in the 'Lead Image' content field.",
+  },
+});
+
+/**
+ * Edit image block class.
+ * @class Edit
+ * @extends Component
+ */
+class Edit extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    properties: PropTypes.objectOf(PropTypes.any).isRequired,
+    selected: PropTypes.bool.isRequired,
+    block: PropTypes.string.isRequired,
+    index: PropTypes.number.isRequired,
+    data: PropTypes.objectOf(PropTypes.any).isRequired,
+    pathname: PropTypes.string.isRequired,
+    onChangeBlock: PropTypes.func.isRequired,
+    openObjectBrowser: PropTypes.func.isRequired,
+  };
+
+  /**
+   * Align block handler
+   * @method onAlignBlock
+   * @param {string} align Alignment option
+   * @returns {undefined}
+   */
+  onAlignBlock(align) {
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      align,
+    });
+  }
+
+  /**
+   * @param {*} nextProps
+   * @returns {boolean}
+   * @memberof Edit
+   */
+  shouldComponentUpdate(nextProps) {
+    return (
+      this.props.selected ||
+      nextProps.selected ||
+      !isEqual(this.props.data, nextProps.data)
+    );
+  }
+
+  node = React.createRef();
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { data, properties } = 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,
+        )}
+      >
+        {!properties.image && (
+          <Message>
+            <center>
+              <img src={imageBlockSVG} alt="" />
+              <div className="message-text">{placeholder}</div>
+            </center>
+          </Message>
+        )}
+        {properties.image && (
+          <div className="image-block">
+            <img
+              className={cx({ 'full-width': data.align === 'full' })}
+              src={
+                properties.image.data
+                  ? `data:${properties.image['content-type']};base64,${properties.image.data}`
+                  : flattenToAppURL(properties.image.download)
+              }
+              alt={data.image_caption || ''}
+            />
+            <div className="copyright-image">
+              {copyright ? (
+                <Copyright copyrightPosition={copyrightPosition}>
+                  <Copyright.Icon>
+                    <Icon className={copyrightIcon} />
+                  </Copyright.Icon>
+                  <Copyright.Text>{copyright}</Copyright.Text>
+                </Copyright>
+              ) : (
+                ''
+              )}
+            </div>
+          </div>
+        )}
+        <SidebarPortal selected={this.props.selected}>
+          <LeadImageSidebar {...this.props} />
+        </SidebarPortal>
+      </div>
+    );
+  }
+}
+
+export default compose(injectIntl)(Edit);

package/src/customizations/volto/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx

@@ -0,0 +1,296 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Form } from 'semantic-ui-react';
+import { Accordion, Grid, Segment } from 'semantic-ui-react';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { CheckboxWidget, Icon, TextWidget } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
+import AlignChooser from './AlignChooser';
+
+import imageSVG from '@plone/volto/icons/image.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+
+const messages = defineMessages({
+  Image: {
+    id: 'Image',
+    defaultMessage: 'Image',
+  },
+  Origin: {
+    id: 'Origin',
+    defaultMessage: 'Origin',
+  },
+  AltText: {
+    id: 'Alt text',
+    defaultMessage: 'Alt text',
+  },
+  Copyright: {
+    id: 'Text',
+    defaultMessage: 'Text',
+  },
+  CopyrightIcon: {
+    id: 'Icon',
+    defaultMessage: 'Icon',
+  },
+  Align: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+  LinkTo: {
+    id: 'Link to',
+    defaultMessage: 'Link to',
+  },
+  openLinkInNewTab: {
+    id: 'Open in a new tab',
+    defaultMessage: 'Open in a new tab',
+  },
+  NoImageSelected: {
+    id: 'No image set in image content field',
+    defaultMessage: 'No image set in image content field',
+  },
+  externalURL: {
+    id: 'External URL',
+    defaultMessage: 'External URL',
+  },
+});
+
+const LeadImageSidebar = ({
+  properties,
+  data,
+  block,
+  onChangeBlock,
+  openObjectBrowser,
+  required = false,
+  onChangeField,
+  intl,
+}) => {
+  const [activeAccIndex, setActiveAccIndex] = useState(0);
+  const defaultValueCopyrightIcon = 'ri-copyright-line';
+  const defaultValueCopyrightPosition = 'left';
+  function handleAccClick(e, titleProps) {
+    const { index } = titleProps;
+    const newIndex = activeAccIndex === index ? -1 : index;
+    setActiveAccIndex(newIndex);
+  }
+
+  useEffect(() => {
+    if (data.copyrightIcon === '' || data.copyrightIcon === undefined)
+      onChangeBlock(block, {
+        ...data,
+        copyrightIcon: defaultValueCopyrightIcon,
+      });
+    if (data.copyrightPosition === '' || data.copyrightPosition === undefined)
+      onChangeBlock(block, {
+        ...data,
+        copyrightPosition: defaultValueCopyrightPosition,
+      });
+  }, [block, data, onChangeBlock]);
+
+  return (
+    <Segment.Group raised>
+      <header className="header pulled">
+        <h2>
+          <FormattedMessage id="Lead Image" defaultMessage="Lead Image" />
+        </h2>
+      </header>
+
+      {!properties.image && (
+        <>
+          <Segment className="sidebar-metadata-container" secondary>
+            <FormattedMessage
+              id="No image set in Lead Image content field"
+              defaultMessage="No image set in Lead Image content field"
+            />
+            <Icon name={imageSVG} size="100px" color="#b8c6c8" />
+          </Segment>
+        </>
+      )}
+      {properties.image && (
+        <>
+          <Segment className="sidebar-metadata-container" secondary>
+            {properties.image.filename}
+            <img
+              src={
+                properties.image.data
+                  ? `data:${properties.image['content-type']};base64,${properties.image.data}`
+                  : flattenToAppURL(properties.image.scales.mini.download)
+              }
+              alt={properties.image_caption || ''}
+            />
+          </Segment>
+          <Segment className="form sidebar-image-data">
+            <TextWidget
+              id="alt"
+              title={intl.formatMessage(messages.AltText)}
+              required={false}
+              value={properties.image_caption}
+              icon={properties.image_caption ? clearSVG : null}
+              iconAction={() => onChangeField('image_caption', '')}
+              onChange={(name, value) => {
+                onChangeField('image_caption', value);
+              }}
+            />
+            <Form.Field inline required={required}>
+              <Grid>
+                <Grid.Row>
+                  <Grid.Column width="4">
+                    <div className="wrapper">
+                      <label htmlFor="field-align">
+                        <FormattedMessage
+                          id="Alignment"
+                          defaultMessage="Alignment"
+                        />
+                      </label>
+                    </div>
+                  </Grid.Column>
+                  <Grid.Column width="8" className="align-tools">
+                    <AlignBlock
+                      align={data.align}
+                      onChangeBlock={onChangeBlock}
+                      data={data}
+                      block={block}
+                    />
+                  </Grid.Column>
+                </Grid.Row>
+              </Grid>
+            </Form.Field>
+          </Segment>
+          <Accordion fluid styled className="form">
+            <Accordion.Title
+              active={activeAccIndex === 0}
+              index={0}
+              onClick={handleAccClick}
+            >
+              Link Settings
+              {activeAccIndex === 0 ? (
+                <Icon name={upSVG} size="20px" />
+              ) : (
+                <Icon name={downSVG} size="20px" />
+              )}
+            </Accordion.Title>
+            <Accordion.Content active={activeAccIndex === 0}>
+              <TextWidget
+                id="link"
+                title={intl.formatMessage(messages.LinkTo)}
+                required={false}
+                value={flattenToAppURL(data.href)}
+                icon={data.href ? clearSVG : navTreeSVG}
+                iconAction={
+                  data.href
+                    ? () => {
+                        onChangeBlock(block, {
+                          ...data,
+                          href: '',
+                        });
+                      }
+                    : () => openObjectBrowser({ mode: 'link' })
+                }
+                onChange={(name, value) => {
+                  onChangeBlock(block, {
+                    ...data,
+                    href: flattenToAppURL(value),
+                  });
+                }}
+              />
+              <CheckboxWidget
+                id="openLinkInNewTab"
+                title={intl.formatMessage(messages.openLinkInNewTab)}
+                value={data.openLinkInNewTab ? data.openLinkInNewTab : false}
+                onChange={(name, value) => {
+                  onChangeBlock(block, {
+                    ...data,
+                    openLinkInNewTab: value,
+                  });
+                }}
+              />
+            </Accordion.Content>
+          </Accordion>
+          <Accordion fluid styled className="form">
+            <Accordion.Title
+              active={activeAccIndex === 1}
+              index={1}
+              onClick={handleAccClick}
+            >
+              Copyright
+              {activeAccIndex === 1 ? (
+                <Icon name={upSVG} size="20px" />
+              ) : (
+                <Icon name={downSVG} size="20px" />
+              )}
+            </Accordion.Title>
+            <Accordion.Content active={activeAccIndex === 1}>
+              <Segment className="form">
+                <TextWidget
+                  id="copyright"
+                  title={intl.formatMessage(messages.Copyright)}
+                  required={false}
+                  value={data.copyright}
+                  icon={data.copyright ? clearSVG : null}
+                  iconAction={() => onChangeField('copyright', '')}
+                  onChange={(name, value) => {
+                    onChangeBlock(block, {
+                      ...data,
+                      copyright: value,
+                    });
+                  }}
+                />
+                <TextWidget
+                  id="copyrightIcon"
+                  title={intl.formatMessage(messages.CopyrightIcon)}
+                  required={false}
+                  value={data.copyrightIcon}
+                  icon={data.copyrightIcon ? clearSVG : null}
+                  iconAction={() => onChangeField('copyrightIcon', '')}
+                  onChange={(name, value) => {
+                    onChangeBlock(block, {
+                      ...data,
+                      copyrightIcon: value,
+                    });
+                  }}
+                />
+                <Form.Field inline required={required}>
+                  <Grid>
+                    <Grid.Row>
+                      <Grid.Column width="4">
+                        <div className="wrapper">
+                          <label htmlFor="field-align">
+                            <FormattedMessage
+                              id="Alignment"
+                              defaultMessage="Alignment"
+                            />
+                          </label>
+                        </div>
+                      </Grid.Column>
+                      <Grid.Column width="8" className="align-tools">
+                        <AlignChooser
+                          align={data.copyrightPosition}
+                          actions={['left', 'right']}
+                          onChangeBlock={onChangeBlock}
+                          block={block}
+                          data={data}
+                        />
+                      </Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Form.Field>
+              </Segment>
+            </Accordion.Content>
+          </Accordion>
+        </>
+      )}
+    </Segment.Group>
+  );
+};
+
+LeadImageSidebar.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  openObjectBrowser: PropTypes.func.isRequired,
+  onChangeField: PropTypes.func.isRequired,
+};
+
+export default injectIntl(LeadImageSidebar);