Add support for lazy loading images, placeholder and accessibility (#162)

Author: Nir Maoz

bundlewatch.config.js

@@ -2,7 +2,7 @@ const bundlewatchConfig = {
   files: [
     {
       path: './dist/cloudinary-react.js',
-      maxSize: '42kb'
+      maxSize: '43kb'
     }
   ],
   defaultCompression: 'gzip',

e2e-test/cypress/integration/lazyLoad.spec.js

@@ -0,0 +1,18 @@
+describe('Placeholder Image', () => {
+  beforeEach(() => {
+    // runs before each test in the block
+    cy.visit('/');
+    cy.get('#lazyBtn').click();          // Click on button
+  });
+  it('Should not have src attribute when not in view', () => {
+    cy.get('#lazy')
+      .should('not.be.visible')
+      .should('not.have.attr', 'src');
+  });
+  it('Should have src attribute when view', () => {
+    cy.scrollTo(0, 3000);
+    cy.get('#lazy')
+      .should('be.visible')
+      .should('have.attr', 'src').should('equal', 'http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample');
+  });
+});

e2e-test/cypress/integration/placeholder.spec.js

@@ -0,0 +1,18 @@
+describe('Placeholder Image', () => {
+  beforeEach(() => {
+    // runs before each test in the block
+    cy.visit('/');
+    cy.get('#placeholderBtn').click();
+  });
+  
+  /**
+   * Cypress seems to be not fast enough to catch the placeholder render.
+   * So we test that the placeholder is rendered in out Unit Tests,
+   * And here we make sure that eventually we render the original image.
+   */
+  it('Show original image', () => {
+    cy.get('#placeholder')
+      .should('be.visible')
+      .should('have.attr', 'src').should('equal', 'http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample')
+  });
+});

e2e-test/cypress/integration/placeholderLazyLoad.spec.js

@@ -0,0 +1,20 @@
+describe('Placeholder Lazy Load Image', () => {
+  beforeEach(() => {
+    // runs before each test in the block
+    cy.visit('/');
+    cy.get('#lazyPlaceholderBtn').click();          // Click on button
+  });
+  it('Should not have src attribute when not in view', () => {
+    cy.get('#lazyPlaceholder-cld-placeholder')
+      .should('not.be.visible')
+      .should('not.have.attr', 'src');
+    cy.get('#lazyPlaceholder-cld-placeholder')
+      .should('have.attr', 'data-src').should('equal', "http://res.cloudinary.com/demo/image/upload/c_scale,w_300/e_blur:2000,f_auto,q_1/sample");
+  });
+  it('Should have src attribute when view', () => {
+    cy.scrollTo(0, 3000);
+    cy.get('#lazyPlaceholder')
+      .should('be.visible')
+      .should('have.attr', 'src').should('equal', 'http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample');
+  });
+});

e2e-test/cypress/integration/responsive.spec.js

@@ -1,29 +1,25 @@
 describe('Responsive Image', () => {
-  it('Responsive Image', () => {
+  beforeEach(() => {
+    // runs before each test in the block
     cy.visit('/');
-
+    cy.get('#responsiveBtn').click();          // Click on button
+  });
+  it('Responsive Image', () => {
     cy.get('#responsive')
       .should('have.attr', 'data-src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_auto/sample')
     cy.get('#responsive')
       .should('have.attr', 'src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_400/sample')
   });
   it('Disabled Breakpoints', () => {
-    cy.visit('/');
-
     cy.get('#responsive')
       .should('have.attr', 'data-src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_auto/sample')
     cy.get('#disable-breakpoints')
       .should('have.attr', 'src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_330/sample')
   });
   it('Enabled Breakpoints', () => {
-    cy.visit('/');
-
     cy.get('#responsive')
       .should('have.attr', 'data-src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_auto/sample')
     cy.get('#breakpoints')
       .should('have.attr', 'src').should('equal','http://res.cloudinary.com/demo/image/upload/c_scale,w_450/sample')
   });
-
-
-
 });

e2e-test/package.json

@@ -15,7 +15,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "cypress": "./node_modules/.bin/cypress run",
-    "pretest": "npm install",
+    "pretest": "npm uninstall cloudinary-react && npm install cloudinary-react.tgz && npm install",
     "test": "start-server-and-test start http://localhost:3000 cypress",
     "eject": "react-scripts eject"
   },

e2e-test/src/App.js

@@ -1,21 +1,73 @@
-import React from 'react';
-import {Image} from 'cloudinary-react';
+import React, {Fragment, useState} from 'react';
+import {Image, Placeholder} from 'cloudinary-react';
 import './App.css';
 
+const tests = [
+  'responsive',
+  'placeholder',
+  'lazy',
+  'lazyPlaceholder'
+];
+
 function App() {
+  const [test, setTest] = useState(0);
+
+  const Buttons = () => (
+    <Fragment>
+      {
+        tests.map((t, i) =>
+          <button key={"btn-"+i} id={t + 'Btn'} onClick={() => setTest(t)}>{t + ' test'}</button>
+        )
+      }
+    </Fragment>
+  );
+
   return (
-    <div>
-      <h1>Responsive Image</h1>
-      <div style={{width: "330px"}}>
-        <Image id="responsive" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive/>
+    <Fragment>
+      <Buttons />
+      {test === 'responsive' &&
+      <Fragment>
+        <h1>Responsive Image</h1>
+        <div style={{width: "330px"}}>
+          <Image id="responsive" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive/>
+        </div>
+        <div style={{width: "330px"}}>
+          <Image id="disable-breakpoints" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive
+                 responsiveUseBreakpoints={false}/>
+        </div>
+        <div style={{width: "330px"}}>
+          <Image id="breakpoints" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive
+                 responsiveUseBreakpoints={true} breakpoints={() => 450}/>
+        </div>
+      </Fragment>
+      }
+      {test === 'placeholder' &&
+      <div>
+        <h1>Placeholder</h1>
+        <Image id="placeholder" publicId="sample" cloudName="demo" width="300" crop="scale">
+          <Placeholder/>
+        </Image>
       </div>
-      <div style={{width: "330px"}}>
-        <Image id="disable-breakpoints" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive responsiveUseBreakpoints={false}/>
+      }
+      {test === 'lazy' &&
+      <div>
+        <h1>Lazy</h1>
+        <div style={{marginTop: '3000px'}}>
+          <Image id="lazy" publicId="sample" cloudName="demo" width="300" crop="scale" loading="lazy"/>
+        </div>
       </div>
-      <div style={{width: "330px"}}>
-        <Image id="breakpoints" publicId="sample" cloudName="demo" width="auto" crop="scale" responsive responsiveUseBreakpoints={true} breakpoints={()=>450}/>
+      }
+      {test === 'lazyPlaceholder' &&
+      <div>
+        <h1>Lazy Placeholder</h1>
+        <div style={{marginTop: '3000px'}}>
+          <Image id="lazyPlaceholder" publicId="sample" cloudName="demo" width="300" crop="scale" loading="lazy">
+            <Placeholder/>
+          </Image>
+        </div>
       </div>
-    </div>
+      }
+    </Fragment>
   );
 }
 

src/Util/cloudinaryCoreUtils.js

@@ -39,17 +39,19 @@ const getVideoTag = (props) => getTag(props, "video");
  * Cloudinary underlying JS library will handle responsive behavior
  * @param {HTMLImageElement} img
  * @param {object} options
+ * @Return callback that when called, will remove the listener created by Cloudinary.responsive
  */
 const makeElementResponsive = (img, options) =>{
   const snakeCaseOptions = Util.withSnakeCaseKeys(options);
   const cld = getConfiguredCloudinary(snakeCaseOptions); // Initialize cloudinary with new props
   cld.cloudinary_update(img, snakeCaseOptions);
-  cld.responsive(snakeCaseOptions, false);
+  return cld.responsive(snakeCaseOptions, false);
 };
 
 export {
   nonEmpty,
   getImageTag,
   getVideoTag,
-  makeElementResponsive
+  makeElementResponsive,
+  getConfiguredCloudinary
 };

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -53,6 +53,20 @@ class CloudinaryComponent extends PureComponent {
     return this.context || {};
   }
 
+  /**
+   * React function: Called when this element is in view
+   */
+  onIntersect = () =>{
+    this.setState({isInView: true})
+  }
+
+  getChildPlaceholder(children){
+    if (children) {
+      return React.Children.toArray(children)
+        .find(child => isCloudinaryComponent(child, "CloudinaryPlaceholder"));
+    }
+  }
+
   getChildTransformations(children) {
     let result = children ? React.Children.toArray(children)
       .filter(child => isCloudinaryComponent(child, "CloudinaryTransformation"))
@@ -76,13 +90,19 @@ class CloudinaryComponent extends PureComponent {
    * @protected
    */
   getTransformation(extendedProps) {
-    let {children, ...rest} = extendedProps;
+    let {children, accessibility, placeholder, ...rest} = extendedProps;
     let ownTransformation = only(Util.withCamelCaseKeys(rest), Transformation.methods) || {};
     let childrenOptions = this.getChildTransformations(children);
     if (!Util.isEmpty(childrenOptions)) {
       ownTransformation.transformation = childrenOptions;
     }
 
+    //Append placeholder and accessibility if exists
+    const advancedTransformations = {accessibility, placeholder};
+    Object.keys(advancedTransformations).filter(k=>advancedTransformations[k]).map(k=>{
+      ownTransformation[k] = advancedTransformations[k];
+    });
+
     return ownTransformation;
   }
 
@@ -106,14 +126,23 @@ class CloudinaryComponent extends PureComponent {
       , {});
   }
 
+  /**
+   * Generated a configured Cloudinary object.
+   * @param extendedProps React props combined with custom Cloudinary configuration options
+   * @return {Cloudinary} configured using extendedProps
+   */
+  getConfiguredCloudinary(extendedProps){
+    const options = Util.extractUrlParams(Util.withSnakeCaseKeys(extendedProps));
+    return Cloudinary.new(options);
+  }
+
   /**
    * Generate a Cloudinary resource URL based on the options provided and child Transformation elements
    * @param extendedProps React props combined with custom Cloudinary configuration options
    * @returns {string} a cloudinary URL
    * @protected
    */
   getUrl(extendedProps) {
-
     const {publicId} = extendedProps;
     const cl = getConfiguredCloudinary(extendedProps);
     return cl.url(publicId, this.getTransformation(extendedProps));