From 6ae97b6197807e73260d3d895b2367ae64b1fa22 Mon Sep 17 00:00:00 2001
From: Abbas Mashayekh <martianboy2005@gmail.com>
Date: Wed, 17 Jun 2015 18:58:16 +0430
Subject: [PATCH 1/2] [TimePicker][#230] Got the clock handles working on
 Android Chrome.

There's no offsetX/Y in TouchEvent objects. So we have to calculate it manually.
---
 src/time-picker/clock-hours.jsx   | 43 +++++++++++++++++++++----------
 src/time-picker/clock-minutes.jsx | 32 ++++++++++++++++-------
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/time-picker/clock-hours.jsx b/src/time-picker/clock-hours.jsx
index 2c5d4e761c25b9..fa6ba729029b6a 100644
--- a/src/time-picker/clock-hours.jsx
+++ b/src/time-picker/clock-hours.jsx
@@ -7,6 +7,18 @@ function rad2deg(rad){
   return rad * 57.29577951308232
 }
 
+function getTouchEventOffsetValues(e) {
+  var el = e.target;
+  var boundingRect = el.getBoundingClientRect();
+
+  var offset = {
+    offsetX: e.clientX - boundingRect.left,
+    offsetY: e.clientY - boundingRect.top
+  };
+
+  return offset;
+}
+
 var ClockHours = React.createClass({
 
   mixins: [StylePropable],
@@ -51,29 +63,32 @@ var ClockHours = React.createClass({
   },
   handleUp: function(e){
     e.preventDefault(); 
-    this.setClock(e, true);
+    this.setClock(e.nativeEvent, true);
   },
   handleMove: function(e){
-     e.preventDefault();
+    e.preventDefault();
     if(this.isMousePressed(e) != 1 ) return;
-    this.setClock(e, false);
+    this.setClock(e.nativeEvent, false);
+  },
+  handleTouchMove: function(e){
+    e.preventDefault(); 
+    this.setClock(e.changedTouches[0], false);
   },
-  handleTouch: function(e){
+  handleTouchEnd: function(e){
     e.preventDefault(); 
-    this.setClock(e, false);
+    this.setClock(e.changedTouches[0], true);
   },
   setClock: function(e, finish){
-    var ne = e.nativeEvent;
-     
-    var pos = {
-      x: ne.offsetX === undefined ? ne.layerX : ne.offsetX,
-      y: ne.offsetY === undefined ? ne.layerY : ne.offsetY
-    };
+    if (typeof e.offsetX === 'undefined') {
+      var offset = getTouchEventOffsetValues(e);
+
+      e.offsetX = offset.offsetX;
+      e.offsetY = offset.offsetY;
+    }
   
-    var hours = this.getHours(pos.x, pos.y);
+    var hours = this.getHours(e.offsetX, e.offsetY);
  
     this.props.onChange(hours, finish);
-
   },
   getHours: function(x, y){
 
@@ -168,7 +183,7 @@ var ClockHours = React.createClass({
       <div ref="clock" style={this.mergeAndPrefix(styles.root)} >
         <ClockPointer hasSelected={true} value={hours} type="hour" />
         {numbers}        
-        <div ref="mask" style={this.mergeAndPrefix(styles.hitMask)} onTouchMove={this.handleTouch} onTouchEnd={this.handleUp} onMouseUp={this.handleUp} onMouseMove={this.handleMove}/>
+        <div ref="mask" style={this.mergeAndPrefix(styles.hitMask)} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd} onMouseUp={this.handleUp} onMouseMove={this.handleMove}/>
       </div>
     );
   }
diff --git a/src/time-picker/clock-minutes.jsx b/src/time-picker/clock-minutes.jsx
index ddb16e32b35da2..d4857a10067fa7 100644
--- a/src/time-picker/clock-minutes.jsx
+++ b/src/time-picker/clock-minutes.jsx
@@ -8,6 +8,18 @@ function rad2deg(rad){
   return rad * 57.29577951308232
 }
 
+function getTouchEventOffsetValues(e) {
+  var el = e.target;
+  var boundingRect = el.getBoundingClientRect();
+
+  var offset = {
+    offsetX: e.clientX - boundingRect.left,
+    offsetY: e.clientY - boundingRect.top
+  };
+
+  return offset;
+}
+
 var ClockMinutes = React.createClass({
 
   mixins: [StylePropable],
@@ -54,26 +66,26 @@ var ClockMinutes = React.createClass({
   },
   handleUp: function(e){
     e.preventDefault(); 
-    this.setClock(e, true);
+    this.setClock(e.nativeEvent, true);
   },
   handleMove: function(e){
     e.preventDefault();
     if(this.isMousePressed(e) != 1 ) return;
-    this.setClock(e, false);
+    this.setClock(e.nativeEvent, false);
   },
   handleTouch: function(e){
     e.preventDefault(); 
-    this.setClock(e, false);
+    this.setClock(e.changedTouches[0], false);
   },
   setClock: function(e, finish){
-     var ne = e.nativeEvent;
+    if (typeof e.offsetX === 'undefined') {
+      var offset = getTouchEventOffsetValues(e);
 
-     var pos = {
-        x: ne.offsetX === undefined ? ne.layerX : ne.offsetX,
-        y: ne.offsetY === undefined ? ne.layerY : ne.offsetY
-     };
+      e.offsetX = offset.offsetX;
+      e.offsetY = offset.offsetY;
+    }
 
-     var minutes = this.getMinutes(pos.x, pos.y)
+     var minutes = this.getMinutes(e.offsetX, e.offsetY);
 
      this.props.onChange(minutes, finish);
   },
@@ -148,7 +160,7 @@ var ClockMinutes = React.createClass({
       <div ref="clock" style={this.mergeAndPrefix(styles.root)} >
         <ClockPointer value={minutes.selected}  type="minute" />
         {minutes.numbers}        
-        <div ref="mask"  style={this.mergeAndPrefix(styles.hitMask)} hasSelected={minutes.hasSelected}  onTouchMove={this.handleTouch} onTouchEnd={this.handleUp} onMouseUp={this.handleUp} onMouseMove={this.handleMove} />
+        <div ref="mask"  style={this.mergeAndPrefix(styles.hitMask)} hasSelected={minutes.hasSelected} onTouchMove={this.handleTouch} onTouchEnd={this.handleTouch} onMouseUp={this.handleUp} onMouseMove={this.handleMove} />
       </div>
     );
   }

From 2c16d0316d4457ae84817338df8712594bed0a01 Mon Sep 17 00:00:00 2001
From: Abbas Mashayekh <martianboy2005@gmail.com>
Date: Wed, 17 Jun 2015 19:38:25 +0430
Subject: [PATCH 2/2] [TimePicker] Prevent clock from catching TouchTap event
 of TimePicker input

---
 src/time-picker/time-picker.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx
index 5bfec16332a9c3..613f33ef672ad2 100644
--- a/src/time-picker/time-picker.jsx
+++ b/src/time-picker/time-picker.jsx
@@ -120,6 +120,8 @@ var TimePicker = React.createClass({
   },
 
   _handleInputTouchTap: function(e) {
+    e.preventDefault();
+
     this.setState({
       dialogTime: this.getTime()
     });