From 1eb3b0e06a940f93a12b50a996c22254faecdfa8 Mon Sep 17 00:00:00 2001
From: Ruben Almeida <aruben@outlook.fr>
Date: Tue, 28 Jun 2016 19:34:08 +0200
Subject: [PATCH] Add touch events

Add the events "touchstart", "touchmove" and "touchend" to also support touch devices.
Need to change the files "README.md", "color.all.min.js", "javascript_implementation/jsColorPicker.min.js"
Successfully tested on a smartphone with Android 4.4.2 / Chrome 51
---
 colorPicker.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/colorPicker.js b/colorPicker.js
index b57b2a5..918b969 100644
--- a/colorPicker.js
+++ b/colorPicker.js
@@ -440,7 +440,7 @@
 	function installEventListeners(THIS, off) {
 		var onOffEvent = off ? removeEvent : addEvent;
 
-		onOffEvent(_nodes.colorPicker, 'mousedown', function(e) {
+		function touchStart_MouseDown(e) {
 			var event = e || window.event,
 				page = getPageXY(event),
 				target = (event.button || event.which) < 2 ?
@@ -494,6 +494,7 @@
 				_mainTarget.style.display = ''; // ??? for resizer...
 				_mouseMoveAction(event);
 				addEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
+				addEvent(_isIE ? document.body : window, 'touchmove', _mouseMoveAction);
 				_renderTimer = window[requestAnimationFrame](renderAll);
 			} else {
 				// console.log(className)
@@ -506,7 +507,10 @@
 				return preventDefault(event);
 				// document.activeElement.blur();
 			}
-		});
+		};
+
+		onOffEvent(_nodes.colorPicker, 'mousedown', touchStart_MouseDown);
+		onOffEvent(_nodes.colorPicker, 'touchstart', touchStart_MouseDown);
 
 		onOffEvent(_nodes.colorPicker, 'click', function(e) {
 			focusInstance(THIS);
@@ -531,6 +535,7 @@
 	}
 
 	addEvent(_isIE ? document.body : window, 'mouseup', stopChange);
+	addEvent(_isIE ? document.body : window, 'touchend', stopChange);
 
 	// ------------------------------------------------------ //
 	// --------- Event listner's callback functions  -------- //
@@ -546,6 +551,7 @@
 			// }
 			window[cancelAnimationFrame](_renderTimer);
 			removeEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
+			removeEvent(_isIE ? document.body : window, 'touchmove', _mouseMoveAction);
 			if (_delayState) { // hapens on inputs
 				_valueType = {type: 'alpha'};
 				renderAll();
@@ -1290,11 +1296,13 @@
 	}
 
 	function getPageXY(e) {
-		var doc = window.document;
+		var doc = window.document,
+			_e = (typeof e.changedTouches !== 'undefined' && e.changedTouches.length)?
+					e.changedTouches[0] : e;
 
 		return {
-			X: e.pageX || e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft,
-			Y: e.pageY || e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop
+			X: _e.pageX || _e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft,
+			Y: _e.pageY || _e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop
 		};
 	}
 
@@ -1411,4 +1419,4 @@
 		return _renderTimer = null;
 	};
 
-})(window);
\ No newline at end of file
+})(window);