Commit 518396a4 authored by Neil Katin's avatar Neil Katin

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

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.
parent fc1e4094
...@@ -85,7 +85,8 @@ The plugin allso adds the following methods to the plot object: ...@@ -85,7 +85,8 @@ The plugin allso adds the following methods to the plot object:
first: { x: -1, y: -1}, first: { x: -1, y: -1},
second: { x: -1, y: -1}, second: { x: -1, y: -1},
show: false, show: false,
active: false active: false,
touch: false
}; };
// FIXME: The drag handling implemented here should be // FIXME: The drag handling implemented here should be
...@@ -101,23 +102,31 @@ The plugin allso adds the following methods to the plot object: ...@@ -101,23 +102,31 @@ The plugin allso adds the following methods to the plot object:
if (selection.active) { if (selection.active) {
updateSelection(e); updateSelection(e);
plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]); plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
// prevent the default action if it is a 'touch' action
if (selection.touch === true) {
e.preventDefault();
}
} }
} }
function onMouseDown(e) { 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; return;
} }
// cancel out any text selections // cancel out any text selections
document.body.focus(); document.body.focus();
// prevent text selection and drag in old-school browsers // 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; savedhandlers.onselectstart = document.onselectstart;
document.onselectstart = function () { return false; }; document.onselectstart = function () { return false; };
} }
if (document.ondrag !== undefined && savedhandlers.ondrag == null) { if (document.ondrag !== undefined && savedhandlers.ondrag === null) {
savedhandlers.ondrag = document.ondrag; savedhandlers.ondrag = document.ondrag;
document.ondrag = function () { return false; }; document.ondrag = function () { return false; };
} }
...@@ -130,7 +139,7 @@ The plugin allso adds the following methods to the plot object: ...@@ -130,7 +139,7 @@ The plugin allso adds the following methods to the plot object:
// able to whack the same handler again // able to whack the same handler again
mouseUpHandler = function (e) { onMouseUp(e); }; mouseUpHandler = function (e) { onMouseUp(e); };
$(document).one("mouseup", mouseUpHandler); $(document).one(selection.touch ? "touchend" : "mouseup", mouseUpHandler);
} }
function onMouseUp(e) { function onMouseUp(e) {
...@@ -156,6 +165,7 @@ The plugin allso adds the following methods to the plot object: ...@@ -156,6 +165,7 @@ The plugin allso adds the following methods to the plot object:
plot.getPlaceholder().trigger("plotselecting", [ null ]); plot.getPlaceholder().trigger("plotselecting", [ null ]);
} }
selection.touch = false;
return false; return false;
} }
...@@ -199,8 +209,9 @@ The plugin allso adds the following methods to the plot object: ...@@ -199,8 +209,9 @@ The plugin allso adds the following methods to the plot object:
offset = plot.getPlaceholder().offset(), offset = plot.getPlaceholder().offset(),
plotOffset = plot.getPlotOffset(); plotOffset = plot.getPlotOffset();
pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width()); var coordHolder = selection.touch ? e.originalEvent.changedTouches[0] : e;
pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height()); 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") { if (o.selection.mode === "y") {
pos.x = pos === selection.first ? 0 : plot.width(); pos.x = pos === selection.first ? 0 : plot.width();
...@@ -212,7 +223,8 @@ The plugin allso adds the following methods to the plot object: ...@@ -212,7 +223,8 @@ The plugin allso adds the following methods to the plot object:
} }
function updateSelection(pos) { function updateSelection(pos) {
if (pos.pageX == null) { var coordHolder = selection.touch ? pos.originalEvent.changedTouches[0] : pos;
if (coordHolder.pageX === null) {
return; return;
} }
...@@ -316,6 +328,13 @@ The plugin allso adds the following methods to the plot object: ...@@ -316,6 +328,13 @@ The plugin allso adds the following methods to the plot object:
if (o.selection.mode != null) { if (o.selection.mode != null) {
eventHolder.mousemove(onMouseMove); eventHolder.mousemove(onMouseMove);
eventHolder.mousedown(onMouseDown); 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);
} }
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment