From 518396a4b758fc0a48ffcb6b8b3fd80db94ba0c6 Mon Sep 17 00:00:00 2001 From: Neil Katin Date: Mon, 2 Dec 2013 21:00:44 -0800 Subject: [PATCH 1/2] Fix for issue 505: add touch events to jquery.flot.selection. Code taken from google code issue 426, updated to work against 0.9-work branch. --- jquery.flot.selection.js | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/jquery.flot.selection.js b/jquery.flot.selection.js index 1374806..8873771 100644 --- a/jquery.flot.selection.js +++ b/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); } }); From b6d392b25bf91ee1d7ee3348620adfc06366b1c9 Mon Sep 17 00:00:00 2001 From: Neil Katin Date: Mon, 2 Dec 2013 21:54:40 -0800 Subject: [PATCH 2/2] Fix jslint issues with previous version --- jquery.flot.selection.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/jquery.flot.selection.js b/jquery.flot.selection.js index 8873771..8fbd834 100644 --- a/jquery.flot.selection.js +++ b/jquery.flot.selection.js @@ -111,9 +111,9 @@ The plugin allso adds the following methods to the plot object: } function onMouseDown(e) { - if (e.type === 'touchstart' && e.originalEvent.touches.length === 1) { // only accept single touch + 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 + } else if (e.which !== 1 || e.originalEvent.touches && e.originalEvent.touches.length > 1) { // only accept left-click return; } @@ -328,13 +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) { + eventHolder.bind("touchstart", function(e) { // Using a touch device, disable mouse events to prevent // event handlers being called twice - eventHolder.unbind('mousedown', onMouseDown); + eventHolder.unbind("mousedown", onMouseDown); onMouseDown(e); - }); - eventHolder.bind('touchmove', onMouseMove); + }); + eventHolder.bind("touchmove", onMouseMove); } });