MannequinImage.js

class ManequinGallery extends React.Component {
  
  ESCAPE_KEY = 27

  state = {
    zoomedImage: false,
    isPanning: false,
    left: 0,
    top: 0
   };
  
  _handleKeyDown(e) {
    if (e.keyCode === this.ESCAPE_KEY) {
      this.setState({
        zoomedImage: false
      });
    }
  }

  _calcZoomedImageCoords(e) {
    const xPerc = e.clientX / window.innerWidth * 100;
    const yPerc = e.clientY / window.innerHeight * 100;

    return { left: `${xPerc}%`, top: `${yPerc}%` };
  }

  componentWillMount() {
    if(typeof document !== 'undefined') {
      document.addEventListener("keyup", this._handleKeyDown.bind(this));
    }
  }

  componentWillUnmount() {
    document.removeEventListener("keyup", this._handleKeyDown.bind(this));
  }

  toggleZoomed = (e, imageUrl) => {

    if ( !imageUrl ) {
      this.setState({
        zoomedImage: false,
        left: 0,
        top: 0
      });

      return;
    }

    const coords = this._calcZoomedImageCoords(e);

    this.setState({
      zoomedImage: imageUrl,
      left: coords.left,
      top: coords.top
    });
  };

  onMouseMove = e => {
    e.preventDefault();

    const isTouch = e.type === "touchmove" || e.type === 'touchstart';

    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

    const mouseX = isTouch 
      ? e.touches[0].clientX 
      : e.nativeEvent.offsetX; // Position from left of screen
      
    const mouseY = isTouch 
      ? e.touches[0].clientY 
      : e.nativeEvent.offsetY; // Position top bottom of screen
    let left, top;

    if (isTouch) {
      left = `${mouseX - windowWidth}px`;
      top = `${mouseY - windowHeight}px`;
    } else {
      left = `${mouseX / windowWidth * 100}%`;
      top = `${mouseY / windowHeight * 100}%`;
    }

    this.setState({
      left,
      top
    });
  };

  render() {

    const {
      galleryImages,
      showZoomed,
    } = this.props;

    if ( !galleryImages ) return  null;

    const getSlides = galleryImages.map( (img, ind) => {
      const setZoomedSlide = (e) => this.toggleZoomed(e, img);

      return (
        <div onClick={setZoomedSlide} key={`${img}_${ind}`}>
          <ManequinSlide src={img} aspect="1:1" />
        </div>
      );
    });

    return (
      <Fragment>
        <Carousel>
           {getSlides}
        </Carousel>

        { this.state.zoomedImage && (
          <ZoomedBackground 
            onClick={(e) => this.toggleZoomed(e)} 
            onTouchMove={e => this.onMouseMove(e)}
            onMouseMove={e => this.onMouseMove(e)}
            top={this.state.top} 
            left={this.state.left} 
            src={this.state.zoomedImage} 
          />
        )}

      </Fragment>
    );
  }
}