touch events support

antelle · May 23, 2013 · 3bab8b8 · 3bab8b8
1 parent 3fa8203
commit 3bab8b8
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/js/circle-picker.js b/js/circle-picker.js
@@ -116,7 +116,8 @@
                 // Firefox cannot rotate canvas directly: it renders jagged edges (because of empty subpixels outside?)
                 // Other browsers antialias edges and perform canvas rotation faster than converting to dataimg and transforming it
                 directCanvasRotate: navigator.userAgent.indexOf("Firefox") == -1,
-                borderRadius: "borderRadius" in document.body.style
+                borderRadius: "borderRadius" in document.body.style,
+                touch: "ontouchstart" in document
             };
         }
 
@@ -379,10 +380,11 @@
          * Binds events to DOM elements.
          */
         function bindEvents() {
-            _dom.circle.on("mousedown", handleCircleMouseDown);
+            _dom.circle.on(_browserFeatures.touch ? "touchstart" : "mousedown", handleCircleMouseDown);
             _dom.square
-                .on("mousedown", handleSquareMouseDown)
-                .on("selectstart", function(e) { e.preventDefault(); });
+                .on("selectstart", function(e) { e.preventDefault(); })
+                .on(_browserFeatures.touch ? "touchstart" : "mousedown", handleSquareMouseDown);
+
             _dom.sampleNew.click(function() {
                 if (_opts.behavior.hideOnSelect) {
                     hide();
@@ -443,11 +445,11 @@
          */
         function handleCircleMouseDown(e) {
             e.preventDefault();
-            processCircleColorChangeEvent(e.pageX, e.pageY);
+            processCircleColorChangeEvent(getX(e), getY(e));
             toggleGlobalSelection(false);
             $(document)
-                .on("mousemove", handleDocumentMouseMoveForCircle)
-                .one("mouseup", handleDocumentMouseUp);
+                .on(_browserFeatures.touch ? "touchmove" : "mousemove", handleDocumentMouseMoveForCircle)
+                .one(_browserFeatures.touch ? "touchend" : "mouseup", handleDocumentMouseUp);
         }
 
         /**
@@ -456,27 +458,29 @@
          */
         function handleSquareMouseDown(e) {
             e.preventDefault();
-            processSquareColorChangeEvent(e.pageX, e.pageY);
+            processSquareColorChangeEvent(getX(e), getY(e));
             toggleGlobalSelection(false);
             $(document)
-                .on("mousemove", handleDocumentMouseMoveForSquare)
-                .one("mouseup", handleDocumentMouseUp);
+                .on(_browserFeatures.touch ? "touchmove" : "mousemove", handleDocumentMouseMoveForSquare)
+                .one(_browserFeatures.touch ? "touchend" : "mouseup", handleDocumentMouseUp);
         }
 
         /**
          * Mouse is moved in hue changing mode.
          * @param e
          */
         function handleDocumentMouseMoveForCircle(e) {
-            processCircleColorChangeEvent(e.pageX, e.pageY);
+            e.preventDefault();
+            processCircleColorChangeEvent(getX(e), getY(e));
         }
 
         /**
          * Mouse is moved in saturation-value changing mode.
          * @param e
          */
         function handleDocumentMouseMoveForSquare(e) {
-            processSquareColorChangeEvent(e.pageX, e.pageY);
+            e.preventDefault();
+            processSquareColorChangeEvent(getX(e), getY(e));
         }
 
         /**
@@ -485,8 +489,8 @@
         function handleDocumentMouseUp() {
             toggleGlobalSelection(true);
             $(document)
-                .off("mousemove", handleDocumentMouseMoveForCircle)
-                .off("mousemove", handleDocumentMouseMoveForSquare);
+                .off(_browserFeatures.touch ? "touchmove" : "mousemove", handleDocumentMouseMoveForCircle)
+                .off(_browserFeatures.touch ? "touchmove" : "mousemove", handleDocumentMouseMoveForSquare);
         }
 
         /**
@@ -784,6 +788,24 @@
             forceRedrawElement(_dom.squareMark[0]);
         }
 
+        /**
+         * Gets X from event.
+         * @param {jQuery.Event} e - Event
+         * @returns {number} - PageX
+         */
+        function getX(e) {
+            return e.pageX !== undefined ? e.pageX : e.originalEvent.pageX;
+        }
+
+        /**
+         * Gets Y from event.
+         * @param {jQuery.Event} e - Event
+         * @returns {number} - PageX
+         */
+        function getY(e) {
+            return e.pageY !== undefined ? e.pageY : e.originalEvent.pageY;
+        }
+
         /**
          * Redraws element; this is used to overcome a bug in Safari: element border is not redrawn in some cases.
          * see http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SmallColorPicker",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-jshint": "~0.1.1",

diff --git a/release-notes.md b/release-notes.md
@@ -1,5 +1,9 @@
 Release notes
 -------------
+##### v1.1.1 (2013-05-23)
+Touch events support  
+`+` added support for touch events  
+
 ##### v1.1.0 (2013-05-23)
 Numeric color enter mode; new features and bugfixes  
 `+` numeric color selection mode: `behavior.mode`, `behavior.switchMode`