From 54ce8ff9c2688144cd91ffd3f0fd25b2d139e2c6 Mon Sep 17 00:00:00 2001
From: davidchin <davidchin.yf@gmail.com>
Date: Tue, 29 Sep 2015 22:42:12 +1000
Subject: [PATCH] Handle touch event

---
 src/js/InputRangeSlider.js           | 34 +++++++++++++++++++++++++---
 src/js/InputRangeTrack.js            | 13 ++++++++++-
 src/js/InputRangeUtil.js             | 20 +---------------
 src/js/InputRangeValueTransformer.js |  3 ++-
 4 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/js/InputRangeSlider.js b/src/js/InputRangeSlider.js
index 052920d..435d430 100644
--- a/src/js/InputRangeSlider.js
+++ b/src/js/InputRangeSlider.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { autobind, extend } from 'InputRangeUtil';
 
+// Enable touch
+React.initializeTouchEvents(true);
+
 class InputRangeSlider extends React.Component {
   constructor(props) {
     super(props);
@@ -14,6 +17,9 @@ class InputRangeSlider extends React.Component {
       'handleMouseDown',
       'handleMouseUp',
       'handleMouseMove',
+      'handleTouchStart',
+      'handleTouchEnd',
+      'handleTouchMove',
       'handleKeyDown',
     ], this);
   }
@@ -49,6 +55,10 @@ class InputRangeSlider extends React.Component {
   }
 
   // Handlers
+  handleClick(event) {
+    event.preventDefault();
+  }
+
   handleMouseDown() {
     const document = this.document;
 
@@ -65,15 +75,32 @@ class InputRangeSlider extends React.Component {
     document.removeEventListener('mouseup', this.handleMouseUp);
   }
 
-  handleClick(event) {
+  handleMouseMove(event) {
+    this.props.onSliderMouseMove(this, event);
+  }
+
+  handleTouchStart(event) {
+    const document = this.document;
+
     event.preventDefault();
+
+    document.addEventListener('touchmove', this.handleTouchMove);
+    document.addEventListener('touchend', this.handleTouchEnd);
   }
 
-  handleMouseMove(event) {
-    // Delegate
+  handleTouchMove(event) {
     this.props.onSliderMouseMove(this, event);
   }
 
+  handleTouchEnd() {
+    const document = this.document;
+
+    event.preventDefault();
+
+    document.removeEventListener('touchmove', this.handleTouchMove);
+    document.removeEventListener('touchend', this.handleTouchEnd);
+  }
+
   handleKeyDown(event) {
     this.props.onSliderKeyDown(this, event);
   }
@@ -101,6 +128,7 @@ class InputRangeSlider extends React.Component {
           onClick={ this.handleClick }
           onKeyDown={ this.handleKeyDown }
           onMouseDown={ this.handleMouseDown }
+          onTouchStart={ this.handleTouchStart }
           role="slider">
         </a>
       </span>
diff --git a/src/js/InputRangeTrack.js b/src/js/InputRangeTrack.js
index 7b263ec..81a3e84 100644
--- a/src/js/InputRangeTrack.js
+++ b/src/js/InputRangeTrack.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { autobind, extend } from 'InputRangeUtil';
 
+// Enable touch
+React.initializeTouchEvents(true);
+
 class InputRangeTrack extends React.Component {
   constructor(props) {
     super(props);
@@ -11,6 +14,7 @@ class InputRangeTrack extends React.Component {
     // Auto-bind
     autobind([
       'handleMouseDown',
+      'handleTouchStart',
     ], this);
   }
 
@@ -49,7 +53,7 @@ class InputRangeTrack extends React.Component {
   // Handlers
   handleMouseDown(event) {
     const trackClientRect = this.clientRect;
-    const { clientX } = event;
+    const { clientX } = event.touches ? event.touches[0] : event;
     const position = {
       x: clientX - trackClientRect.left,
       y: 0,
@@ -58,6 +62,12 @@ class InputRangeTrack extends React.Component {
     this.props.onTrackMouseDown(this, position);
   }
 
+  handleTouchStart(event) {
+    event.preventDefault();
+
+    this.handleMouseDown(event);
+  }
+
   // Render
   render() {
     const activeTrackStyle = this.state.activeTrackStyle || {};
@@ -65,6 +75,7 @@ class InputRangeTrack extends React.Component {
     return (
       <div
         onMouseDown={ this.handleMouseDown }
+        onTouchStart={ this.handleTouchStart }
         className="InputRange-track InputRange-track--container">
         <div
           style={ activeTrackStyle }
diff --git a/src/js/InputRangeUtil.js b/src/js/InputRangeUtil.js
index 09f4276..2344bb3 100644
--- a/src/js/InputRangeUtil.js
+++ b/src/js/InputRangeUtil.js
@@ -2,26 +2,8 @@ function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 
-function assign(target) {
-  const sources = Array.prototype.slice.call(arguments, 1);
-
-  sources.forEach((source) => {
-    if (!source) {
-      return;
-    }
-
-    const keys = Object.keys(source);
-
-    keys.forEach((key) => {
-      target[key] = source[key];
-    });
-  });
-
-  return target;
-}
-
 function extend() {
-  return assign.apply(Object, arguments);
+  return Object.assign.apply(Object, arguments);
 }
 
 function captialize(string) {
diff --git a/src/js/InputRangeValueTransformer.js b/src/js/InputRangeValueTransformer.js
index 7488b8f..ed260b2 100644
--- a/src/js/InputRangeValueTransformer.js
+++ b/src/js/InputRangeValueTransformer.js
@@ -27,8 +27,9 @@ class InputRangeValueTransformer {
   positionFromEvent(event) {
     const trackClientRect = this.component.trackClientRect;
     const length = trackClientRect.width;
+    const { clientX } = event.touches ? event.touches[0] : event;
     const position = {
-      x: clamp(event.clientX - trackClientRect.left, 0, length),
+      x: clamp(clientX - trackClientRect.left, 0, length),
       y: 0,
     };