blob: 7e85fa43636c10c342c3a7243509bb2a593263bf [file] [log] [blame]
// jquery.event.move
//
// 1.3.6
//
// Stephen Band
//
// Triggers 'movestart', 'move' and 'moveend' events after
// mousemoves following a mousedown cross a distance threshold,
// similar to the native 'dragstart', 'drag' and 'dragend' events.
// Move events are throttled to animation frames. Move event objects
// have the properties:
//
// pageX:
// pageY: Page coordinates of pointer.
// startX:
// startY: Page coordinates of pointer at movestart.
// distX:
// distY: Distance the pointer has moved since movestart.
// deltaX:
// deltaY: Distance the finger has moved since last event.
// velocityX:
// velocityY: Average velocity over last few events.
(function (module) {
// Browser globals
module(jQuery);
})(function(jQuery, undefined){
var // Number of pixels a pressed pointer travels before movestart
// event is fired.
threshold = 6,
add = jQuery.event.add,
remove = jQuery.event.remove,
// Just sugar, so we can have arguments in the same order as
// add and remove.
trigger = function(node, type, data) {
jQuery.event.trigger(type, data, node);
},
// Shim for requestAnimationFrame, falling back to timer. See:
// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
requestFrame = (function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(fn, element){
return window.setTimeout(function(){
fn();
}, 25);
}
);
})(),
ignoreTags = {
textarea: true,
input: true,
select: true,
button: true
},
mouseevents = {
move: 'mousemove',
cancel: 'mouseup dragstart',
end: 'mouseup'
},
touchevents = {
move: 'touchmove',
cancel: 'touchend',
end: 'touchend'
};
// Constructors
function Timer(fn){
var callback = fn,
active = false,
running = false;
function trigger(time) {
if (active){
callback();
requestFrame(trigger);
running = true;
active = false;
}
else {
running = false;
}
}
this.kick = function(fn) {
active = true;
if (!running) { trigger(); }
};
this.end = function(fn) {
var cb = callback;
if (!fn) { return; }
// If the timer is not running, simply call the end callback.
if (!running) {
fn();
}
// If the timer is running, and has been kicked lately, then
// queue up the current callback and the end callback, otherwise
// just the end callback.
else {
callback = active ?
function(){ cb(); fn(); } :
fn ;
active = true;
}
};
}
// Functions
function returnTrue() {
return true;
}
function returnFalse() {
return false;
}
function preventDefault(e) {
e.preventDefault();
}
function preventIgnoreTags(e) {
// Don't prevent interaction with form elements.
if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
e.preventDefault();
}
function isLeftButton(e) {
// Ignore mousedowns on any button other than the left (or primary)
// mouse button, or when a modifier key is pressed.
return (e.which === 1 && !e.ctrlKey && !e.altKey);
}
function identifiedTouch(touchList, id) {
var i, l;
if (touchList.identifiedTouch) {
return touchList.identifiedTouch(id);
}
// touchList.identifiedTouch() does not exist in
// webkit yet… we must do the search ourselves...
i = -1;
l = touchList.length;
while (++i < l) {
if (touchList[i].identifier === id) {
return touchList[i];
}
}
}
function changedTouch(e, event) {
var touch = identifiedTouch(e.changedTouches, event.identifier);
// This isn't the touch you're looking for.
if (!touch) { return; }
// Chrome Android (at least) includes touches that have not
// changed in e.changedTouches. That's a bit annoying. Check
// that this touch has changed.
if (touch.pageX === event.pageX && touch.pageY === event.pageY) { return; }
return touch;
}
// Handlers that decide when the first movestart is triggered
function mousedown(e){
var data;
if (!isLeftButton(e)) { return; }
data = {
target: e.target,
startX: e.pageX,
startY: e.pageY,
timeStamp: e.timeStamp
};
add(document, mouseevents.move, mousemove, data);
add(document, mouseevents.cancel, mouseend, data);
}
function mousemove(e){
var data = e.data;
checkThreshold(e, data, e, removeMouse);
}
function mouseend(e) {
removeMouse();
}
function removeMouse() {
remove(document, mouseevents.move, mousemove);
remove(document, mouseevents.cancel, mouseend);
}
function touchstart(e) {
var touch, template;
// Don't get in the way of interaction with form elements.
if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
touch = e.changedTouches[0];
// iOS live updates the touch objects whereas Android gives us copies.
// That means we can't trust the touchstart object to stay the same,
// so we must copy the data. This object acts as a template for
// movestart, move and moveend event objects.
template = {
target: touch.target,
startX: touch.pageX,
startY: touch.pageY,
timeStamp: e.timeStamp,
identifier: touch.identifier
};
// Use the touch identifier as a namespace, so that we can later
// remove handlers pertaining only to this touch.
add(document, touchevents.move + '.' + touch.identifier, touchmove, template);
add(document, touchevents.cancel + '.' + touch.identifier, touchend, template);
}
function touchmove(e){
var data = e.data,
touch = changedTouch(e, data);
if (!touch) { return; }
checkThreshold(e, data, touch, removeTouch);
}
function touchend(e) {
var template = e.data,
touch = identifiedTouch(e.changedTouches, template.identifier);
if (!touch) { return; }
removeTouch(template.identifier);
}
function removeTouch(identifier) {
remove(document, '.' + identifier, touchmove);
remove(document, '.' + identifier, touchend);
}
// Logic for deciding when to trigger a movestart.
function checkThreshold(e, template, touch, fn) {
var distX = touch.pageX - template.startX,
distY = touch.pageY - template.startY;
// Do nothing if the threshold has not been crossed.
if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
triggerStart(e, template, touch, distX, distY, fn);
}
function handled() {
// this._handled should return false once, and after return true.
this._handled = returnTrue;
return false;
}
function flagAsHandled(e) {
e._handled();
}
function triggerStart(e, template, touch, distX, distY, fn) {
var node = template.target,
touches, time;
touches = e.targetTouches;
time = e.timeStamp - template.timeStamp;
// Create a movestart object with some special properties that
// are passed only to the movestart handlers.
template.type = 'movestart';
template.distX = distX;
template.distY = distY;
template.deltaX = distX;
template.deltaY = distY;
template.pageX = touch.pageX;
template.pageY = touch.pageY;
template.velocityX = distX / time;
template.velocityY = distY / time;
template.targetTouches = touches;
template.finger = touches ?
touches.length :
1 ;
// The _handled method is fired to tell the default movestart
// handler that one of the move events is bound.
template._handled = handled;
// Pass the touchmove event so it can be prevented if or when
// movestart is handled.
template._preventTouchmoveDefault = function() {
e.preventDefault();
};
// Trigger the movestart event.
trigger(template.target, template);
// Unbind handlers that tracked the touch or mouse up till now.
fn(template.identifier);
}
// Handlers that control what happens following a movestart
function activeMousemove(e) {
var timer = e.data.timer;
e.data.touch = e;
e.data.timeStamp = e.timeStamp;
timer.kick();
}
function activeMouseend(e) {
var event = e.data.event,
timer = e.data.timer;
removeActiveMouse();
endEvent(event, timer, function() {
// Unbind the click suppressor, waiting until after mouseup
// has been handled.
setTimeout(function(){
remove(event.target, 'click', returnFalse);
}, 0);
});
}
function removeActiveMouse(event) {
remove(document, mouseevents.move, activeMousemove);
remove(document, mouseevents.end, activeMouseend);
}
function activeTouchmove(e) {
var event = e.data.event,
timer = e.data.timer,
touch = changedTouch(e, event);
if (!touch) { return; }
// Stop the interface from gesturing
e.preventDefault();
event.targetTouches = e.targetTouches;
e.data.touch = touch;
e.data.timeStamp = e.timeStamp;
timer.kick();
}
function activeTouchend(e) {
var event = e.data.event,
timer = e.data.timer,
touch = identifiedTouch(e.changedTouches, event.identifier);
// This isn't the touch you're looking for.
if (!touch) { return; }
removeActiveTouch(event);
endEvent(event, timer);
}
function removeActiveTouch(event) {
remove(document, '.' + event.identifier, activeTouchmove);
remove(document, '.' + event.identifier, activeTouchend);
}
// Logic for triggering move and moveend events
function updateEvent(event, touch, timeStamp, timer) {
var time = timeStamp - event.timeStamp;
event.type = 'move';
event.distX = touch.pageX - event.startX;
event.distY = touch.pageY - event.startY;
event.deltaX = touch.pageX - event.pageX;
event.deltaY = touch.pageY - event.pageY;
// Average the velocity of the last few events using a decay
// curve to even out spurious jumps in values.
event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
event.velocityY = 0.3 * event.velocityY + 0.7 * event.deltaY / time;
event.pageX = touch.pageX;
event.pageY = touch.pageY;
}
function endEvent(event, timer, fn) {
timer.end(function(){
event.type = 'moveend';
trigger(event.target, event);
return fn && fn();
});
}
// jQuery special event definition
function setup(data, namespaces, eventHandle) {
// Stop the node from being dragged
//add(this, 'dragstart.move drag.move', preventDefault);
// Prevent text selection and touch interface scrolling
//add(this, 'mousedown.move', preventIgnoreTags);
// Tell movestart default handler that we've handled this
add(this, 'movestart.move', flagAsHandled);
// Don't bind to the DOM. For speed.
return true;
}
function teardown(namespaces) {
remove(this, 'dragstart drag', preventDefault);
remove(this, 'mousedown touchstart', preventIgnoreTags);
remove(this, 'movestart', flagAsHandled);
// Don't bind to the DOM. For speed.
return true;
}
function addMethod(handleObj) {
// We're not interested in preventing defaults for handlers that
// come from internal move or moveend bindings
if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
return;
}
// Stop the node from being dragged
add(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid, preventDefault, undefined, handleObj.selector);
// Prevent text selection and touch interface scrolling
add(this, 'mousedown.' + handleObj.guid, preventIgnoreTags, undefined, handleObj.selector);
}
function removeMethod(handleObj) {
if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
return;
}
remove(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid);
remove(this, 'mousedown.' + handleObj.guid);
}
jQuery.event.special.movestart = {
setup: setup,
teardown: teardown,
add: addMethod,
remove: removeMethod,
_default: function(e) {
var event, data;
// If no move events were bound to any ancestors of this
// target, high tail it out of here.
if (!e._handled()) { return; }
function update(time) {
updateEvent(event, data.touch, data.timeStamp);
trigger(e.target, event);
}
event = {
target: e.target,
startX: e.startX,
startY: e.startY,
pageX: e.pageX,
pageY: e.pageY,
distX: e.distX,
distY: e.distY,
deltaX: e.deltaX,
deltaY: e.deltaY,
velocityX: e.velocityX,
velocityY: e.velocityY,
timeStamp: e.timeStamp,
identifier: e.identifier,
targetTouches: e.targetTouches,
finger: e.finger
};
data = {
event: event,
timer: new Timer(update),
touch: undefined,
timeStamp: undefined
};
if (e.identifier === undefined) {
// We're dealing with a mouse
// Stop clicks from propagating during a move
add(e.target, 'click', returnFalse);
add(document, mouseevents.move, activeMousemove, data);
add(document, mouseevents.end, activeMouseend, data);
}
else {
// We're dealing with a touch. Stop touchmove doing
// anything defaulty.
e._preventTouchmoveDefault();
add(document, touchevents.move + '.' + e.identifier, activeTouchmove, data);
add(document, touchevents.end + '.' + e.identifier, activeTouchend, data);
}
}
};
jQuery.event.special.move = {
setup: function() {
// Bind a noop to movestart. Why? It's the movestart
// setup that decides whether other move events are fired.
add(this, 'movestart.move', jQuery.noop);
},
teardown: function() {
remove(this, 'movestart.move', jQuery.noop);
}
};
jQuery.event.special.moveend = {
setup: function() {
// Bind a noop to movestart. Why? It's the movestart
// setup that decides whether other move events are fired.
add(this, 'movestart.moveend', jQuery.noop);
},
teardown: function() {
remove(this, 'movestart.moveend', jQuery.noop);
}
};
add(document, 'mousedown.move', mousedown);
add(document, 'touchstart.move', touchstart);
// Make jQuery copy touch event properties over to the jQuery event
// object, if they are not already listed. But only do the ones we
// really need. IE7/8 do not have Array#indexOf(), but nor do they
// have touch events, so let's assume we can ignore them.
if (typeof Array.prototype.indexOf === 'function') {
(function(jQuery, undefined){
var props = ["changedTouches", "targetTouches"],
l = props.length;
while (l--) {
if (jQuery.event.props.indexOf(props[l]) === -1) {
jQuery.event.props.push(props[l]);
}
}
})(jQuery);
};
});