@eeacms/volto-hero-block 4.0.0 → 5.1.0

package/CHANGELOG.md

@@ -4,7 +4,36 @@ 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).
 
-### [4.0.0](https://github.com/eea/volto-hero-block/compare/3.0.1...4.0.0) - 7 February 2023
+### [5.1.0](https://github.com/eea/volto-hero-block/compare/5.0.0...5.1.0) - 24 March 2023
+
+#### :rocket: New Features
+
+- feat: add 'with-hero-block' class to body [Miu Razvan - [`12e60a3`](https://github.com/eea/volto-hero-block/commit/12e60a352e60f647346fa00ba3aa8f54f2b8623c)]
+
+#### :hammer_and_wrench: Others
+
+- Release 5.1.0 [Alin Voinea - [`7cd1d6c`](https://github.com/eea/volto-hero-block/commit/7cd1d6c3194b59f9645a716be8364b39136ac6fc)]
+- use stable volto in jenkins [Miu Razvan - [`5459e18`](https://github.com/eea/volto-hero-block/commit/5459e18001486ff05b1e7535685926ef41a233e3)]
+## [5.0.0](https://github.com/eea/volto-hero-block/compare/4.0.0...5.0.0) - 7 March 2023
+
+#### :nail_care: Enhancements
+
+- change(hero): Performance improvement by lazy loading image #15 from eea/performance_lazy_image [ichim-david - [`2c61703`](https://github.com/eea/volto-hero-block/commit/2c617034158a0c6bd7fb7a12f71d13f2664021d2)]
+
+#### :house: Internal changes
+
+- chore(import): Use absolute import [Alin Voinea - [`317feb0`](https://github.com/eea/volto-hero-block/commit/317feb0341c1b2d16fdee61f3dcb3d661d973820)]
+
+#### :hammer_and_wrench: Others
+
+- Release 5.0.0 [Alin Voinea - [`fb56e6c`](https://github.com/eea/volto-hero-block/commit/fb56e6c3b68d1bec5e346bf156e1408df4a567fe)]
+- fix onScreen hook error #16 from eea/fix-onscreen-hook [ichim-david - [`9123541`](https://github.com/eea/volto-hero-block/commit/91235413f423d7e6c4788d70b687b3ed5d4884b4)]
+- no need for comments [andreiggr - [`a14f9c3`](https://github.com/eea/volto-hero-block/commit/a14f9c3bdddfa22e6b4bbc8318f0ca5bdc9c2d38)]
+- fix hook [andreiggr - [`f7fae73`](https://github.com/eea/volto-hero-block/commit/f7fae73007f79af2f06da1d9b72a53ad86fef4ac)]
+- eslint [andreiggr - [`68451b7`](https://github.com/eea/volto-hero-block/commit/68451b725420015fbd5b695e97b8742988d49913)]
+- lazy load huge img on first 10px [andreiggr - [`67dc7d3`](https://github.com/eea/volto-hero-block/commit/67dc7d3475188d692e053032c2639dd1a585c029)]
+- lazy load huge bgimage wip [andreiggr - [`86e45ec`](https://github.com/eea/volto-hero-block/commit/86e45ece842f1cd7452920dffa3a9b4aea945f56)]
+## [4.0.0](https://github.com/eea/volto-hero-block/compare/3.0.1...4.0.0) - 7 February 2023
 
 #### :nail_care: Enhancements
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/Hero/Edit.jsx

@@ -8,6 +8,7 @@ import {
   SidebarPortal,
   UniversalLink,
 } from '@plone/volto/components';
+import { BodyClass } from '@plone/volto/helpers';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { handleKey } from '@plone/volto-slate/blocks/Text/keyboard';
 import {
@@ -66,6 +67,7 @@ const Edit = (props) => {
 
   return (
     <>
+      <BodyClass className="with-hero-block" />
       <Hero {...data}>
         <Hero.Text {...data}>
           <SlateEditor

package/src/components/Blocks/Hero/Hero.jsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import { isImageGif } from '@eeacms/volto-hero-block/helpers';
+import { useOnScreen } from '@eeacms/volto-hero-block/hooks';
 
 Hero.propTypes = {
   image: PropTypes.string,
@@ -30,6 +31,9 @@ function Hero({
   const isExternal = !isInternalURL(image);
   const { alignContent = 'center', backgroundVariant = 'primary' } =
     styles || {};
+
+  const bgImgRef = React.useRef();
+  const onScreen = useOnScreen(bgImgRef);
   return (
     <div
       className={cx(
@@ -59,8 +63,9 @@ function Hero({
       >
         <div
           className={cx('hero-block-image', styles?.bg)}
+          ref={bgImgRef}
           style={
-            image
+            image && onScreen
               ? {
                   backgroundImage: isExternal
                     ? `url(${image})`

package/src/components/Blocks/Hero/View.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Icon } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
+import { BodyClass } from '@plone/volto/helpers';
 import Hero from './Hero';
 import Copyright from './Copyright';
 import { serializeText } from '@eeacms/volto-hero-block/helpers';
@@ -25,22 +26,25 @@ const View = (props) => {
   const { data = {} } = props;
   const { text, copyright, copyrightIcon, copyrightPosition } = data;
   return (
-    <Hero {...data}>
-      <Hero.Text {...data}>{serializeText(text)}</Hero.Text>
-      <Hero.Meta {...data}>
-        <Metadata {...data} />
-      </Hero.Meta>
-      {copyright ? (
-        <Copyright copyrightPosition={copyrightPosition}>
-          <Copyright.Icon>
-            <Icon className={copyrightIcon} />
-          </Copyright.Icon>
-          <Copyright.Text>{copyright}</Copyright.Text>
-        </Copyright>
-      ) : (
-        ''
-      )}
-    </Hero>
+    <React.Fragment>
+      <BodyClass className="with-hero-block" />
+      <Hero {...data}>
+        <Hero.Text {...data}>{serializeText(text)}</Hero.Text>
+        <Hero.Meta {...data}>
+          <Metadata {...data} />
+        </Hero.Meta>
+        {copyright ? (
+          <Copyright copyrightPosition={copyrightPosition}>
+            <Copyright.Icon>
+              <Icon className={copyrightIcon} />
+            </Copyright.Icon>
+            <Copyright.Text>{copyright}</Copyright.Text>
+          </Copyright>
+        ) : (
+          ''
+        )}
+      </Hero>
+    </React.Fragment>
   );
 };
 

package/src/hooks.js

@@ -0,0 +1,31 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React from 'react';
+
+function useOnScreen(ref, rootMargin = '0px') {
+  const [isIntersecting, setIntersecting] = React.useState(false);
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin,
+        threshold: 0,
+        root: null,
+      },
+    );
+    if (ref?.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref?.current) {
+        observer.unobserve(ref.current);
+      }
+      observer.disconnect();
+    };
+  }, [ref, rootMargin]);
+  return isIntersecting;
+}
+
+export { useOnScreen };