dmitryshelomanov · December 14, 2017 15:02 · Dec 14, 2017
diff --git a/.js b/.js
@@ -0,0 +1,92 @@
+componentDidUpdate() {
+    if (this.cloneImage && this.originalWrap) {
+      this.originalImage = this.originalWrap.querySelector('img')
+      this.addEventListener()
+      this.clearStyles()
+    }
+  }
+
+  componentWillUnmount() {
+    this.removeListeners()
+  }
+
+  addEventListener = () => {
+    this.originalWrap.addEventListener('mousedown', this.imageHandleDown)
+    this.originalWrap.addEventListener('mouseup', this.imageHandleUp)
+    this.originalWrap.addEventListener('mousewheel', this.scale)
+  }
+
+  removeListeners = () => { 
+    this.originalWrap.removeEventListener('mousedown', this.imageHandleDown)
+    this.originalWrap.removeEventListener('mouseup', this.imageHandleUp)
+    this.originalWrap.removeEventListener('mousewheel', this.scale)
+  }
+
+  imageHandleDown = (e) => {
+    this.setState({ isPressed: true }, () => {
+      this.originalWrap.onmousemove = this.mouseMove
+    })
+  }
+
+  imageHandleUp = () => { 
+    this.setState({ isPressed: false })
+  }
+
+  mouseMove = (e) => {
+    if (this.state.isPressed) {
+      const { offsetX, offsetY } = this.getMouseCoord(e)
+      const { oldX, oldY } = this.state
+
+      oldX > offsetX
+        ? this.moveX('left')
+        : this.moveX('right')
+      oldY > offsetY
+        ? this.moveY('bottom')
+        : this.moveY('top')
+      this.setState({
+        oldX: offsetX,
+        oldY: offsetY
+      })
+    }
+  }
+
+  moveX = (direction) => {
+    direction === 'right'
+      ? this.originalImage.style.left = `${parseInt(this.originalImage.style.left || 0) + this.state.swipeSpeed}px`
+      : this.originalImage.style.left = `${parseInt(this.originalImage.style.left || 0) - this.state.swipeSpeed}px`
+  }
+
+  moveY = (direction) => {
+    direction === 'top'
+      ? this.originalImage.style.top = `${parseInt(this.originalImage.style.top || 0) + this.state.swipeSpeed}px`
+      : this.originalImage.style.top = `${parseInt(this.originalImage.style.top || 0) - this.state.swipeSpeed}px`
+  }
+
+  scale = (e) => {
+    const { deltaY } = e
+    const { oldScale } = this.state
+
+    e.preventDefault()
+
+    if (deltaY > 0) {
+      console.log(oldScale)
+      this.setState({ oldScale: oldScale - .2 }, () => {
+        this.originalImage.style.transform = `scale(${oldScale})`
+      })
+    } else { 
+      this.setState({ oldScale: oldScale + .2 }, () => {
+        this.originalImage.style.transform = `scale(${oldScale})`
+      })
+    }
+  }
+
+  getMouseCoord = (e) => ({
+    px: e.x,
+		py: e.y,
+		offsetX: e.offsetX,
+		offsetY: e.offsetY
+  })
+
+  clearStyles = () => { 
+    this.originalImage.removeAttribute('style')
+  }