[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.
mui · Jun 17, 2015 · 6ae97b6 · 6ae97b6
1 parent 8c46780
commit 6ae97b6
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 24 deletions.
diff --git 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
@@ -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>
     );
   }