Merge pull request #1206 from naknak/issue505

Fix for issue 505: add touch events to jquery.flot.selection.

jquery.flot.selection.js

@@ -85,7 +85,8 @@ The plugin allso adds the following methods to the plot object:
                 first: { x: -1, y: -1},
                 second: { x: -1, y: -1},
                 show: false,
-                active: false
+                active: false,
+                touch: false
             };
 
         // FIXME: The drag handling implemented here should be
@@ -101,23 +102,31 @@ The plugin allso adds the following methods to the plot object:
             if (selection.active) {
                 updateSelection(e);
                 plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
+
+                // prevent the default action if it is a 'touch' action
+                if (selection.touch === true) {
+                    e.preventDefault();
+                }
             }
         }
 
         function onMouseDown(e) {
-            if (e.which !== 1) { // only accept left-click
+            if (e.type === "touchstart" && e.originalEvent.touches.length === 1) { // only accept single touch
+                selection.touch = true;
+            } else if (e.which !== 1 || e.originalEvent.touches && e.originalEvent.touches.length > 1) { // only accept left-click
                 return;
             }
 
+
             // cancel out any text selections
             document.body.focus();
 
             // prevent text selection and drag in old-school browsers
-            if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
+            if (document.onselectstart !== undefined && savedhandlers.onselectstart === null) {
                 savedhandlers.onselectstart = document.onselectstart;
                 document.onselectstart = function () { return false; };
             }
-            if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
+            if (document.ondrag !== undefined && savedhandlers.ondrag === null) {
                 savedhandlers.ondrag = document.ondrag;
                 document.ondrag = function () { return false; };
             }
@@ -130,7 +139,7 @@ The plugin allso adds the following methods to the plot object:
             // able to whack the same handler again
             mouseUpHandler = function (e) { onMouseUp(e); };
 
-            $(document).one("mouseup", mouseUpHandler);
+            $(document).one(selection.touch ? "touchend" : "mouseup", mouseUpHandler);
         }
 
         function onMouseUp(e) {
@@ -156,6 +165,7 @@ The plugin allso adds the following methods to the plot object:
                 plot.getPlaceholder().trigger("plotselecting", [ null ]);
             }
 
+            selection.touch = false;
             return false;
         }
 
@@ -199,8 +209,9 @@ The plugin allso adds the following methods to the plot object:
                 offset = plot.getPlaceholder().offset(),
                 plotOffset = plot.getPlotOffset();
 
-            pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
-            pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
+            var coordHolder = selection.touch ? e.originalEvent.changedTouches[0] : e;
+            pos.x = clamp(0, coordHolder.pageX - offset.left - plotOffset.left, plot.width());
+            pos.y = clamp(0, coordHolder.pageY - offset.top - plotOffset.top, plot.height());
 
             if (o.selection.mode === "y") {
                 pos.x = pos === selection.first ? 0 : plot.width();
@@ -212,7 +223,8 @@ The plugin allso adds the following methods to the plot object:
         }
 
         function updateSelection(pos) {
-            if (pos.pageX == null) {
+            var coordHolder = selection.touch ? pos.originalEvent.changedTouches[0] : pos;
+            if (coordHolder.pageX === null) {
                 return;
             }
 
@@ -316,6 +328,13 @@ The plugin allso adds the following methods to the plot object:
             if (o.selection.mode != null) {
                 eventHolder.mousemove(onMouseMove);
                 eventHolder.mousedown(onMouseDown);
+                eventHolder.bind("touchstart", function(e) {
+                    // Using a touch device, disable mouse events to prevent 
+                    // event handlers being called twice
+                    eventHolder.unbind("mousedown", onMouseDown);
+                    onMouseDown(e);
+                });
+                eventHolder.bind("touchmove", onMouseMove);
             }
         });