| // 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); |
| }; |
| }); |