@eeacms/volto-eea-website-theme 1.9.3 → 1.10.0

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

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
-import './style.less';
 import { Icon } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
@@ -17,59 +16,90 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @class View
  * @extends Component
  */
-const View = ({ data, properties }) => {
+const View = (props) => {
+  const { data, properties } = props;
   const { copyright, copyrightIcon, copyrightPosition } = data;
 
+  // const [hovering, setHovering] = React.useState(false);
+  const [viewLoaded, setViewLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    setViewLoaded(true);
+  }, []);
+
   return (
-    <p
-      className={cx(
-        'block image align',
-        {
-          center: !Boolean(data.align),
-        },
-        data.align,
-      )}
-    >
-      {properties.image && (
-        <>
-          {(() => {
-            const image = (
-              <div className="image-block">
-                <img
-                  className={cx({ 'full-width': data.align === 'full' })}
-                  src={flattenToAppURL(properties.image.download)}
-                  alt={properties.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>
-            );
-            if (data.href) {
-              return (
-                <UniversalLink
-                  href={data.href}
-                  openLinkInNewTab={data.openLinkInNewTab}
-                >
-                  {image}
-                </UniversalLink>
-              );
-            } else {
-              return image;
-            }
-          })()}
-        </>
+    <>
+      {viewLoaded && (
+        <p
+          className={cx(
+            'block image align',
+            {
+              center: !Boolean(data.align),
+            },
+            data.align,
+          )}
+        >
+          <div
+            className={`image-block-container ${
+              data?.align ? data?.align : ''
+            }`}
+          >
+            {properties.image && (
+              <>
+                {(() => {
+                  const image = (
+                    <div className="image-block">
+                      <img
+                        className={cx({ 'full-width': data.align === 'full' })}
+                        src={flattenToAppURL(properties.image.download)}
+                        alt={properties.image_caption || ''}
+                      />
+                      <div
+                        // onMouseEnter={() => setHovering(true)}
+                        // onMouseLeave={() => setHovering(false)}
+                        className={`copyright-wrapper ${
+                          copyrightPosition ? copyrightPosition : 'left'
+                        }`}
+                      >
+                        {copyright ? (
+                          <Copyright copyrightPosition={copyrightPosition}>
+                            <Copyright.Icon>
+                              <Icon className={copyrightIcon} />
+                            </Copyright.Icon>
+                            {/*<div*/}
+                            {/*  className={cx(*/}
+                            {/*    'copyright-hover-container',*/}
+                            {/*    !hovering ? 'hiddenStructure' : '',*/}
+                            {/*  )}*/}
+                            {/*>*/}
+                            <Copyright.Text>{copyright}</Copyright.Text>
+                            {/*</div>*/}
+                          </Copyright>
+                        ) : (
+                          ''
+                        )}
+                      </div>
+                    </div>
+                  );
+                  if (data.href) {
+                    return (
+                      <UniversalLink
+                        href={data.href}
+                        openLinkInNewTab={data.openLinkInNewTab}
+                      >
+                        {image}
+                      </UniversalLink>
+                    );
+                  } else {
+                    return image;
+                  }
+                })()}
+              </>
+            )}
+          </div>
+        </p>
       )}
-    </p>
+    </>
   );
 };
 
@@ -83,4 +113,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default View;
+export default React.memo(View);

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

@@ -0,0 +1,105 @@
+import { defineMessages } from 'react-intl';
+
+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',
+  },
+});
+
+export function LeadImageSchema({ formData, intl }) {
+  return {
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [...(formData.image ? ['alt', 'align'] : [])],
+      },
+
+      ...(formData.image
+        ? [
+            {
+              id: 'link_settings',
+              title: 'Link settings',
+              fields: ['href', 'openLinkInNewTab'],
+            },
+          ]
+        : []),
+      {
+        id: 'copyright',
+        title: 'Copyright',
+        fields: ['copyright', 'copyrightIcon', 'copyrightPosition'],
+      },
+    ],
+    properties: {
+      alt: {
+        title: intl.formatMessage(messages.AltText),
+      },
+      align: {
+        title: intl.formatMessage(messages.Align),
+        widget: 'align',
+      },
+      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/hocs/withDeviceSize.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export default function withDeviceSize(WrappedComponent) {
+  return (props) => {
+    const [device, setDevice] = React.useState(null);
+
+    const updateScreenSize = () => {
+      if (__CLIENT__) {
+        const screenWidth =
+          document.documentElement.clientWidth ||
+          document.body.clientWidth ||
+          window.innerWidth ||
+          0;
+
+        setDevice(getDeviceConfig(screenWidth));
+      }
+    };
+
+    const getDeviceConfig = (width) => {
+      // semantic ui breakpoints
+      if (width < 768) {
+        return 'mobile';
+      } else if (width >= 768 && width < 992) {
+        return 'tablet';
+      } else if (width >= 992 && width < 1200) {
+        return 'computer';
+      } else if (width >= 1200 && width < 1920) {
+        return 'large';
+      } else if (width >= 1920) {
+        return 'widescreen';
+      }
+    };
+
+    React.useEffect(() => {
+      updateScreenSize();
+      window.addEventListener('resize', updateScreenSize);
+      return () => {
+        window.removeEventListener('resize', updateScreenSize);
+      };
+      /* eslint-disable-next-line */
+    }, []);
+
+    return <WrappedComponent {...props} device={device} />;
+  };
+}

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

@@ -1,12 +0,0 @@
-.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/style.less

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