From 61301cc0269cca05fc9bb3744d15c4f85b70f747 Mon Sep 17 00:00:00 2001
From: Matt Bierner <mattbierner@gmail.com>
Date: Mon, 1 Feb 2016 00:05:14 -0800
Subject: [PATCH 1/2] Make Hue, Sat, and Alpha components respond to touch
 start

This change allows you to directly tap where you want the color
or slider to be to set the value. Currently these components
only update if you drag around a little bit, making precise
input difficult.
---
 src/components/common/Alpha.js      | 4 +++-
 src/components/common/Hue.js        | 4 +++-
 src/components/common/Saturation.js | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/common/Alpha.js b/src/components/common/Alpha.js
index e9a24740..40813049 100644
--- a/src/components/common/Alpha.js
+++ b/src/components/common/Alpha.js
@@ -100,7 +100,9 @@ export class Alpha extends ReactCSS.Component {
           <Checkboard />
         </div>
         <div is="gradient" />
-        <div is="container" ref="container" onMouseDown={ this.handleMouseDown } onTouchMove={ this.handleChange }>
+        <div is="container" ref="container" onMouseDown={ this.handleMouseDown }
+            onTouchMove={ this.handleChange }
+            onTouchStart={ this.handleChange }>
           <div is="pointer" ref="pointer">
             { pointer }
           </div>
diff --git a/src/components/common/Hue.js b/src/components/common/Hue.js
index 9041f361..5ae1e62b 100644
--- a/src/components/common/Hue.js
+++ b/src/components/common/Hue.js
@@ -113,7 +113,9 @@ export class Hue extends ReactCSS.Component {
 
     return (
       <div is="hue">
-        <div is="container" ref="container" onMouseDown={ this.handleMouseDown } onTouchMove={ this.handleChange }>
+        <div is="container" ref="container" onMouseDown={ this.handleMouseDown }
+            onTouchMove={ this.handleChange }
+            onTouchStart={ this.handleChange }>
           <div is="pointer" ref="pointer">
             { pointer }
           </div>
diff --git a/src/components/common/Saturation.js b/src/components/common/Saturation.js
index d9024000..a119ac8d 100644
--- a/src/components/common/Saturation.js
+++ b/src/components/common/Saturation.js
@@ -96,7 +96,9 @@ export class Saturation extends ReactCSS.Component {
     }
 
     return (
-      <div is="color" ref="container" onMouseDown={ this.handleMouseDown } onTouchMove={ this.handleChange }>
+      <div is="color" ref="container" onMouseDown={ this.handleMouseDown }
+          onTouchMove={ this.handleChange }
+          onTouchStart={ this.handleChange }>
         <div is="white">
           <div is="black" />
           <div is="pointer" ref="pointer">

From c0cc94ba1aef264eb32b88ef2cfd83f4d4137d9e Mon Sep 17 00:00:00 2001
From: Matt Bierner <mattbierner@gmail.com>
Date: Tue, 2 Feb 2016 17:18:53 -0800
Subject: [PATCH 2/2] Recompute dist files

---
 lib/components/common/Alpha.js      | 4 +++-
 lib/components/common/Hue.js        | 4 +++-
 lib/components/common/Saturation.js | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/lib/components/common/Alpha.js b/lib/components/common/Alpha.js
index 0ba60b06..5cffaea1 100644
--- a/lib/components/common/Alpha.js
+++ b/lib/components/common/Alpha.js
@@ -137,7 +137,9 @@ var Alpha = exports.Alpha = function (_ReactCSS$Component) {
         _react2.default.createElement('div', { style: this.styles().gradient }),
         _react2.default.createElement(
           'div',
-          { style: this.styles().container, ref: 'container', onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange },
+          { style: this.styles().container, ref: 'container', onMouseDown: this.handleMouseDown,
+            onTouchMove: this.handleChange,
+            onTouchStart: this.handleChange },
           _react2.default.createElement(
             'div',
             { style: this.styles().pointer, ref: 'pointer' },
diff --git a/lib/components/common/Hue.js b/lib/components/common/Hue.js
index 1b4d0746..6e40718c 100644
--- a/lib/components/common/Hue.js
+++ b/lib/components/common/Hue.js
@@ -146,7 +146,9 @@ var Hue = exports.Hue = function (_ReactCSS$Component) {
         { style: this.styles().hue },
         _react2.default.createElement(
           'div',
-          { style: this.styles().container, ref: 'container', onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange },
+          { style: this.styles().container, ref: 'container', onMouseDown: this.handleMouseDown,
+            onTouchMove: this.handleChange,
+            onTouchStart: this.handleChange },
           _react2.default.createElement(
             'div',
             { style: this.styles().pointer, ref: 'pointer' },
diff --git a/lib/components/common/Saturation.js b/lib/components/common/Saturation.js
index 8e05ffa8..40efc256 100644
--- a/lib/components/common/Saturation.js
+++ b/lib/components/common/Saturation.js
@@ -130,7 +130,9 @@ var Saturation = exports.Saturation = function (_ReactCSS$Component) {
 
       return _react2.default.createElement(
         'div',
-        { style: this.styles().color, ref: 'container', onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange },
+        { style: this.styles().color, ref: 'container', onMouseDown: this.handleMouseDown,
+          onTouchMove: this.handleChange,
+          onTouchStart: this.handleChange },
         _react2.default.createElement(
           'div',
           { style: this.styles().white },