Merge branch 'orangecms-fix/touch-events'

brainhubeu · Nov 15, 2018 · 7a497a6 · orangecms · Nov 15, 2018 · 7a497a6
2 parents 41a7fa6 + b4a6d65
commit 7a497a6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/docs-www/package.json b/docs-www/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@brainhubeu/gatsby-docs-kit": "^1.0.1",
-    "@brainhubeu/react-carousel": "^1.10.9",
+    "@brainhubeu/react-carousel": "^1.10.10",
     "gatsby": "^1.9.270",
     "react-fa": "^5.0.0"
   },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@brainhubeu/react-carousel",
-  "version": "1.10.9",
+  "version": "1.10.10s",
   "description": "Carousel component for React",
   "engines": {
     "npm": ">=4"

diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -92,9 +92,9 @@ export default class Carousel extends Component {
     if (this.node) {
       this.node.ownerDocument.addEventListener('mousemove', this.onMouseMove, true);
       this.node.ownerDocument.addEventListener('mouseup', this.onMouseUpTouchEnd, true);
-      this.node.ownerDocument.addEventListener('touchstart', this.onTouchStart, true);
-      this.node.ownerDocument.addEventListener('touchmove', this.onTouchMove, { passive: false });
-      this.node.ownerDocument.addEventListener('touchend', this.onMouseUpTouchEnd, true);
+      this.node.ownerDocument.addEventListener('touchstart', this.simulateEvent, true);
+      this.node.ownerDocument.addEventListener('touchmove', this.simulateEvent, { passive: false });
+      this.node.ownerDocument.addEventListener('touchend', this.simulateEvent, true);
     }
 
     // setting size of a carousel in state
@@ -135,8 +135,9 @@ export default class Carousel extends Component {
     if (this.node) {
       this.node.ownerDocument.removeEventListener('mousemove', this.onMouseMove);
       this.node.ownerDocument.removeEventListener('mouseup', this.onMouseUp);
-      this.node.ownerDocument.removeEventListener('touchmove', this.onTouchMove);
-      this.node.ownerDocument.removeEventListener('touchend', this.onTouchEnd);
+      this.node.ownerDocument.removeEventListener('touchstart', this.simulateEvent);
+      this.node.ownerDocument.removeEventListener('touchmove', this.simulateEvent);
+      this.node.ownerDocument.removeEventListener('touchend', this.simulateEvent);
     }
 
     window.removeEventListener('resize', this.onResize);
@@ -401,6 +402,39 @@ export default class Carousel extends Component {
     this.resetInterval();
   };
 
+  /**
+   * Simulates mouse events when touch events occur
+   * @param {event} e A touch event
+   */
+  simulateEvent = e => {
+    const touch = e.changedTouches[0];
+    const {
+      screenX,
+      screenY,
+      clientX,
+      clientY,
+    } = touch;
+    const touchEventMap = {
+      touchstart: 'mousedown',
+      touchmove: 'mousemove',
+      touchend: 'mouseup',
+    };
+    const simulatedEvent = new MouseEvent(
+      touchEventMap[e.type],
+      {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        detail: 1,
+        screenX,
+        screenY,
+        clientX,
+        clientY,
+      }
+    );
+    touch.target.dispatchEvent(simulatedEvent);
+  };
+
 
   /* ========== control ========== */
   /**