Fix #77 - dragging of profile image should work on mouse/touch move for all devices

Author: eyalroth

README.md

@@ -69,7 +69,6 @@ The workaround is to instruct users to use HTML tags in their comments.
 + Dragging the profile image is sometimes glitchy, especially on desktop.
 I didn't make too much of an effort to correct that,
 seeing that even major websites such as YouTube and Twitch.tv exhibit a glitchy volume controller in their player.
-+ Dragging the profile image doesn't work on tablets for some reason, only double-clicking does.
 
 ### Unicode
 

src/components/ProfileImg/index.jsx

@@ -3,7 +3,6 @@ import { StaticQuery, graphql } from "gatsby"
 import Img from "gatsby-image"
 import Context from '../Context'
 import { Author } from '../../consts/author'
-import './style.scss'
 
 export const squareImage = graphql`
   fragment squareImage on File {
@@ -22,100 +21,38 @@ class ProfileImg extends React.Component {
             backWidth: 0,
             isMouseUp: true
         }
-        this.toggleMouse = this.toggleMouse.bind(this)
+
+        this.moveElementRef = React.createRef()
+        this.mouseUpElementRef = React.createRef()
+        
+        this.mouseMove = this.mouseMove.bind(this)
+        this.touchMove = this.touchMove.bind(this)
         this.setMouseUp = this.setMouseUp.bind(this)
         this.setMouseDown = this.setMouseDown.bind(this)
     }
 
-    setBackWidth(newWidth) {
-        this.setState({
-            backWidth: newWidth
-        })
-    }
-
-    setMouseUp(event) {
-        this.toggleMouse(event, true)
-    }
-
-    setMouseDown(event) {
-        this.toggleMouse(event, false)
-    }
-    
-    toggleMouse(event, isMouseUp) {
-        const isLeftClick = event.which === 1
-        if (isLeftClick) {
-            this.setState({isMouseUp})
-        }
-    }
-
-
     render() {
         return (
-        <StaticQuery
-            query={graphql`
-                query ProfileImgQuery {
-                    front: file(relativePath: { eq: "icon2.png" }) {
-                        ...squareImage
+            <StaticQuery
+                query={graphql`
+                    query ProfileImgQuery {
+                        front: file(relativePath: { eq: "icon2.png" }) {
+                            ...squareImage
+                        }
+                        
+                        back: file(relativePath: { eq: "icon.png" }) {
+                            ...squareImage
+                        }
                     }
-                    
-                    back: file(relativePath: { eq: "icon.png" }) {
-                        ...squareImage
-                    }
-                }
-            `}
-            render={data => this.renderWithQueryData(data)}
-        />)
+                `}
+                render={data => this.renderWithQueryData(data)}
+            />
+        )
     }
 
     renderWithQueryData(data) {
         const { className } = this.props
         const { language } = this.context.page
-        const _this = this
-
-        function setupMove(div, eventType, extractCoordinates, params = {}) {
-            if (div) {
-                div.addEventListener(eventType, (event) => {
-                    const container = div.parentElement
-                    const { x } = extractCoordinates(event)
-                    const { left } = container.getBoundingClientRect()
-                    const newWidth = x - left
-                    _this.setBackWidth(Math.max(newWidth, 0))
-                }, {once: true, ...params})
-            }
-        }
-
-        function addToggleMouseListener(target, type, listener) {
-            target.removeEventListener(type, listener)
-            target.addEventListener(type, listener)
-        }
-        
-        function setupMouseUp(div) {
-            if (div && !_this.state.isMouseUp) {
-                addToggleMouseListener(div, 'mouseup', _this.setMouseUp)
-            }
-        }
-        
-        function setupMouseMove(div) {
-            if (div) {
-                const toggleEvent = (_this.state.isMouseUp) ? 'mousedown' : 'mouseup'
-                const toggleAction = (_this.state.isMouseUp) ? _this.setMouseDown : _this.setMouseUp
-                addToggleMouseListener(div, toggleEvent,toggleAction)
-            }
-
-            if (!_this.state.isMouseUp) {
-                setupMove(div, 'mousemove', (event) => {
-                    const { clientX: x, clientY: y } = event
-                    return {x, y}
-                })
-            }
-        }
-
-        function setupTouchMove(div) {
-            setupMove(div, 'touchmove', (event) => {
-                const { clientX: x, clientY: y } = event.changedTouches[0]
-                return {x, y}
-            }, {passive: true})
-        }
 
         const authorName = Author.name[language.get().id]
         return (
@@ -128,19 +65,19 @@ class ProfileImg extends React.Component {
                     }}
                 >
                     <div 
-                        ref={setupMouseMove}
-                        className="profile-img-mousemove"
+                        ref={this.moveElementRef}
+                        className="profile-img-pointermove"
                         style={{
                             width: "130%",
                             height: "100%",
                             left: "-15%",
                             position: "absolute",
                             background: "transparent",
-                            zIndex: 2
+                            zIndex: 1
                         }}
                     />
                     <div
-                        ref={setupMouseUp}
+                        ref={this.mouseUpElementRef}
                         className="profile-img-mouseup"
                         style={{
                             position: "fixed",
@@ -151,19 +88,7 @@ class ProfileImg extends React.Component {
                             top: 0,
                             left: 0,
                             background: "transparent",
-                            display: (_this.state.isMouseUp) ? "none" : "inherit"
-                        }}
-                    />
-                    <div 
-                        ref={setupTouchMove}
-                        className="profile-img-touchmove"
-                        style={{
-                            width: "130%",
-                            height: "100%",
-                            left: "-15%",
-                            position: "absolute",
-                            background: "transparent",
-                            zIndex: 1
+                            display: (this.state.isMouseUp) ? "none" : "inherit"
                         }}
                     />
                     <Img
@@ -193,6 +118,57 @@ class ProfileImg extends React.Component {
             </div>
         )
     }
+
+    componentDidMount() {
+        this.moveElementRef.current.addEventListener('mousemove', this.mouseMove)
+        this.moveElementRef.current.addEventListener('touchmove', this.touchMove, {passive: true})
+        this.moveElementRef.current.addEventListener('mouseup', this.setMouseUp)
+        this.moveElementRef.current.addEventListener('mousedown', this.setMouseDown)
+        this.mouseUpElementRef.current.addEventListener('mouseup', this.setMouseUp)
+    }
+    
+    componentWillUnmount() {
+        this.moveElementRef.current.removeEventListener('mousemove', this.mouseMove)
+        this.moveElementRef.current.removeEventListener('touchmove', this.touchMove)
+        this.moveElementRef.current.removeEventListener('mouseup', this.setMouseUp)
+        this.moveElementRef.current.removeEventListener('mousedown', this.setMouseDown)
+        this.mouseUpElementRef.current.removeEventListener('mouseup', this.setMouseUp)
+    }
+
+    mouseMove(event) {
+        if (!this.state.isMouseUp) {
+            this.setBackWidth(event.clientX)
+        }
+    }
+
+    touchMove(event) {
+        this.setBackWidth(event.changedTouches[0].clientX)
+    }
+
+    setBackWidth(x) {
+        const container = this.mouseUpElementRef.current.parentElement
+        const { left } = container.getBoundingClientRect()
+        const newWidth = x - left
+
+        this.setState({
+            backWidth: Math.max(newWidth, 0)
+        })
+    }
+
+    setMouseUp(event) {
+        this.toggleMouse(event, true)
+    }
+
+    setMouseDown(event) {
+        this.toggleMouse(event, false)
+    }
+    
+    toggleMouse(event, isMouseUp) {
+        const isLeftClick = event.which === 1
+        if (isLeftClick) {
+            this.setState({isMouseUp})
+        }
+    }
 }
 
 ProfileImg.contextType = Context