Zoom only on click

Add a prop which allows images to only be zoomed in if they are
clicked.

Author: Rose Syrett

src/App/App.jsx

@@ -14,6 +14,7 @@ import {
   Example12,
   Example13,
   Example14,
+  Example15,
 } from './examples';
 import s from './style.scss';
 
@@ -255,6 +256,13 @@ class DevelopmentApp extends React.Component {
               </section>
               )}
 
+              {(value === '0' || value === '14') && (
+              <section id="example--14">
+                <hr />
+                <Example15 />
+              </section>
+              )}
+
             </div>
           </div>
         </div>

src/App/examples/Example15/Example15.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import
+{
+  ButtonBack,
+  ButtonFirst,
+  ButtonLast,
+  ButtonNext,
+  CarouselProvider,
+  Slide,
+  Slider,
+  ImageWithZoom,
+  DotGroup,
+} from '../../..';
+
+import s from '../../style.scss';
+
+export default () => (
+  <CarouselProvider
+    visibleSlides={1}
+    totalSlides={2}
+    step={1}
+    naturalSlideWidth={400}
+    naturalSlideHeight={500}
+  >
+    <h2 className={s.headline}>Zoom only on click</h2>
+    <p>Two images: first will zoom on click, second will not.</p>
+    <Slider className={s.slider}>
+      <Slide tag="a" index={0}>
+        <ImageWithZoom src="./media/img01.jpeg" onlyZoomOnClick />
+      </Slide>
+      <Slide tag="a" index={1}>
+        <ImageWithZoom src="./media/img02.jpeg" />
+      </Slide>
+    </Slider>
+    <ButtonFirst>First</ButtonFirst>
+    <ButtonBack>Back</ButtonBack>
+    <ButtonNext>Next</ButtonNext>
+    <ButtonLast>Last</ButtonLast>
+    <DotGroup dotNumbers />
+  </CarouselProvider>
+);

src/App/examples/Example15/index.js

@@ -0,0 +1,3 @@
+import Example15 from './Example15';
+
+export default Example15;

src/App/examples/index.js

@@ -12,3 +12,4 @@ export { default as Example11 } from './Example11';
 export { default as Example12 } from './Example12';
 export { default as Example13 } from './Example13';
 export { default as Example14 } from './Example14';
+export { default as Example15 } from './Example15';

src/ImageWithZoom/ImageWithZoom.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Image from '../Image';
 import Spinner from '../Spinner';
@@ -25,7 +25,8 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
     srcZoomed: PropTypes.string,
     tag: PropTypes.string,
     isPinchZoomEnabled: PropTypes.bool,
-  }
+    onlyZoomOnClick: PropTypes.bool,
+  };
 
   static defaultProps = {
     alt: undefined,
@@ -40,7 +41,8 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
     onError: null,
     srcZoomed: null,
     tag: 'div',
-  }
+    onlyZoomOnClick: false,
+  };
 
   /**
    * Find the midpoint between two touches.
@@ -86,6 +88,9 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
       // tracks the status via image element's onerror events.
       isImageLoadingError: true,
 
+      // tracks if the user has clicked on the image or not.
+      clicked: false,
+
       // the mouse is currently hovering over the image.
       isHovering: false,
 
@@ -156,6 +161,7 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
     if (this.state.isZooming) return;
     this.setState({
       isHovering: false,
+      clicked: false,
       scale: 1,
     });
   }
@@ -303,6 +309,7 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
       src,
       srcZoomed,
       tag: Tag,
+      onlyZoomOnClick,
       ...filteredProps
     } = this.props;
 
@@ -333,8 +340,32 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
       overlayStyle.transform = `scale(${this.state.scale})`;
     }
 
+    const overlayImage = <Image
+      className={newOverlayClassName}
+      tag="div"
+      src={srcZoomed || src}
+      style={overlayStyle}
+      isBgImage
+      onFocus={this.handleOnMouseOver}
+      onMouseOver={this.handleOnMouseOver}
+      onBlur={this.handleOnMouseOut}
+      onMouseOut={this.handleOnMouseOut}
+      onMouseMove={this.handleOnMouseMove}
+      onTouchStart={this.handleOnTouchStart}
+      onTouchEnd={this.handleOnTouchEnd}
+      onTouchMove={this.handleOnTouchMove}
+    />
+
+    const cursorStyle = onlyZoomOnClick? this.state.clicked? {cursor: "zoom-out"} : {cursor: "zoom-in"} : {cursor: "zoom-in"};
     return (
-      <Tag className={newClassName} {...filteredProps}>
+      <Tag
+        className={newClassName}
+        {...filteredProps}
+        onClick={() => {
+          this.setState({clicked: !this.state.clicked});
+        }}
+        style={cursorStyle}
+      >
         <Image
           alt={alt}
           className={newImageClassName}
@@ -344,21 +375,10 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
           onError={this.handleImageLoadError}
           {...bgImageProps}
         />
-        <Image
-          className={newOverlayClassName}
-          tag="div"
-          src={srcZoomed || src}
-          style={overlayStyle}
-          isBgImage
-          onFocus={this.handleOnMouseOver}
-          onMouseOver={this.handleOnMouseOver}
-          onBlur={this.handleOnMouseOut}
-          onMouseOut={this.handleOnMouseOut}
-          onMouseMove={this.handleOnMouseMove}
-          onTouchStart={this.handleOnTouchStart}
-          onTouchEnd={this.handleOnTouchEnd}
-          onTouchMove={this.handleOnTouchMove}
-        />
+        {onlyZoomOnClick && this.state.clicked? 
+          overlayImage : <></>}
+        {!onlyZoomOnClick && overlayImage}
+        
         {this.renderLoading()}
       </Tag>
     );

src/ImageWithZoom/ImageWithZoom.scss

@@ -12,7 +12,6 @@
   bottom: 0;
   right: 0;
   opacity: 0;
-  cursor: zoom-in;
   transition: opacity 300ms, transform 300ms;
 }