Move.js revision 4d9092388342d3524e02c61180e49ea27d5e2425
/**
* Adds lower level support for "gesturemovestart", "gesturemove" and "gesturemoveend" events, which can be used to create drag/drop
* interactions which work across touch and mouse input devices. They correspond to "touchstart", "touchmove" and "touchend" on touch input
* device, and "mousedown", "mousemove", "mouseup" on mouse based input devices.
*
* @module event-gestures
* @submodule event-move
*/
var EVENT = ("ontouchstart" in Y.config.win && !Y.UA.chrome) ? {
start: "touchstart",
move: "touchmove",
end: "touchend"
} : {
start: "mousedown",
move: "mousemove",
end: "mouseup"
},
START = "start",
MOVE = "move",
END = "end",
_MOVE_START_HANDLE = "_msh",
_MOVE_HANDLE = "_mh",
_MOVE_END_HANDLE = "_meh",
_DEL_MOVE_START_HANDLE = "_dmsh",
_DEL_MOVE_HANDLE = "_dmh",
_DEL_MOVE_END_HANDLE = "_dmeh",
_MOVE_START = "_ms",
_MOVE = "_m",
MIN_TIME = "minTime",
MIN_DISTANCE = "minDistance",
OWNER_DOCUMENT = "ownerDocument",
NODE_TYPE = "nodeType",
_defArgsProcessor = function(args, delegate) {
var iConfig = (delegate) ? 4 : 3;
return (args.length > iConfig) ? Y.merge(args.splice(iConfig,1)[0]) : {};
},
_getRoot = function(node, subscriber) {
return subscriber._extra.root || (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);
},
_normTouchFacade = function(touchFacade, touch, params) {
touchFacade.pageX = touch.pageX;
touchFacade.pageY = touch.pageY;
touchFacade.screenX = touch.screenX;
touchFacade.screenY = touch.screenY;
touchFacade.clientX = touch.clientX;
touchFacade.clientY = touch.clientY;
touchFacade.target = touch.target || touchFacade.target;
touchFacade.currentTarget = touch.currentTarget || touchFacade.currentTarget;
touchFacade.button = (params && params.button) || 1; // default to left (left as per vendors, not W3C which is 0)
},
define = Y.Event.define;
/**
* Sets up a "gesturemovestart" event, that is fired on touch devices in response to a single finger "touchstart",
* and on mouse based devices in response to a "mousedown". The subscriber can specify the minimum time
* and distance thresholds which should be crossed before the "gesturemovestart" is fired and for the mouse,
* which button should initiate a "gesturemovestart". This event can also be listened for using node.delegate().
*
* @event gesturemovestart
* @for YUI
* @param type {string} "gesturemovestart"
* @param fn {function} The method the event invokes. It receives the event facade of the underlying DOM event (mousedown or touchstart.touches[0]) which contains position co-ordinates.
* @param cfg {Object} Optional. An object which specifies:
* <dl>
* <dt>minDistance (defaults to 0)</dt>
* <dd>The minimum distance threshold which should be crossed before the gesturemovestart is fired</dd>
* <dt>minTime (defaults to 0)</dt>
* <dd>The minimum time threshold for which the finger/mouse should be help down before the gesturemovestart is fired</dd>
* <dt>button (no default)</dt>
* <dd>In the case of a mouse input device, if the event should only be fired for a specific mouse button.</dd>
* </dl>
*
* @return {EventHandle} the detach handle
*/
define('gesturemovestart', {
on: function (node, subscriber, ce) {
subscriber[_MOVE_START_HANDLE] = node.on(EVENT[START],
this._onStart,
this,
node,
subscriber,
ce);
},
delegate : function(node, subscriber, ce, filter) {
var se = this;
subscriber[_DEL_MOVE_START_HANDLE] = node.delegate(EVENT[START],
function(e) {
se._onStart(e, node, subscriber, ce, true);
},
filter);
},
detachDelegate : function(node, subscriber, ce, filter) {
var handle = subscriber[_DEL_MOVE_START_HANDLE];
if (handle) {
handle.detach();
subscriber[_DEL_MOVE_START_HANDLE] = null;
}
},
detach: function (node, subscriber, ce) {
var startHandle = subscriber[_MOVE_START_HANDLE];
if (startHandle) {
startHandle.detach();
subscriber[_MOVE_START_HANDLE] = null;
}
},
processArgs : function(args, delegate) {
var params = _defArgsProcessor(args, delegate);
if (!(MIN_TIME in params)) {
params[MIN_TIME] = this.MIN_TIME;
}
if (!(MIN_DISTANCE in params)) {
params[MIN_DISTANCE] = this.MIN_DISTANCE;
}
return params;
},
_onStart : function(e, node, subscriber, ce, delegate) {
if (delegate) {
node = e.currentTarget;
}
var params = subscriber._extra,
fireStart = true,
minTime = params.minTime,
minDistance = params.minDistance,
button = params.button,
root = _getRoot(node, subscriber),
startXY;
if (e.touches) {
if (e.touches) {
if (e.touches.length === 1) {
_normTouchFacade(e, e.touches[0], params);
} else {
fireStart = false;
}
}
} else {
fireStart = (button === undefined) || (button === e.button);
}
Y.log("gesturemovestart: params = button:" + button + ", minTime = " + minTime + ", minDistance = " + minDistance, "event-gestures");
if (fireStart) {
if (minTime === 0 || minDistance === 0) {
Y.log("gesturemovestart: No minTime or minDistance. Firing immediately", "event-gestures");
this._start(e, node, ce, params);
} else {
startXY = [e.pageX, e.pageY];
if (minTime > 0) {
Y.log("gesturemovestart: minTime specified. Setup timer.", "event-gestures");
Y.log("gesturemovestart: initialTime for minTime = " + new Date().getTime(), "event-gestures");
params._ht = Y.later(minTime, this, this._start, [e, node, ce, params]);
params._hme = root.on(EVENT[END], Y.bind(function() {
this._cancel(params);
}, this));
}
if (minDistance > 0) {
Y.log("gesturemovestart: minDistance specified. Setup native mouse/touchmove listener to measure distance.", "event-gestures");
Y.log("gesturemovestart: initialXY for minDistance = " + startXY, "event-gestures");
params._hm = root.on(EVENT[MOVE], Y.bind(function(em) {
if (Math.abs(em.pageX - startXY[0]) > minDistance || Math.abs(em.pageY - startXY[1]) > minDistance) {
Y.log("gesturemovestart: minDistance hit.", "event-gestures");
this._start(e, node, ce, params);
}
}, this));
}
}
}
},
_cancel : function(params) {
if (params._ht) {
params._ht.cancel();
params._ht = null;
}
if (params._hme) {
params._hme.detach();
params._hme = null;
}
if (params._hm) {
params._hm.detach();
params._hm = null;
}
},
_start : function(e, node, ce, params) {
if (params) {
this._cancel(params);
}
e.type = "gesturemovestart";
Y.log("gesturemovestart: Firing start: " + new Date().getTime(), "event-gestures");
node.setData(_MOVE_START, e);
ce.fire(e);
},
MIN_TIME : 0,
MIN_DISTANCE : 0
});
/**
* Sets up a "gesturemove" event, that is fired on touch devices in response to a single finger "touchmove",
* and on mouse based devices in response to a "mousemove".
*
* <p>By default this event is only fired when the same node
* has received a "gesturemovestart" event. The subscriber can set standAlone to true, in the configuration properties,
* if they want to listen for this event without an initial "gesturemovestart".</p>
*
* <p>By default this event sets up it's internal "touchmove" and "mousemove" DOM listeners on the document element. The subscriber
* can set the root configuration property, to specify which node to attach DOM listeners to, if different from the document.</p>
*
* <p>This event can also be listened for using node.delegate().</p>
*
* @event gesturemove
* @for YUI
* @param type {string} "gesturemove"
* @param fn {function} The method the event invokes. It receives the event facade of the underlying DOM event (mousemove or touchmove.touches[0]) which contains position co-ordinates.
* @param cfg {Object} Optional. An object which specifies:
* <dl>
* <dt>standAlone (defaults to false)</dt>
* <dd>true, if the subscriber should be notified even if a "gesturemovestart" has not occured on the same node.</dd>
* <dt>root (defaults to document)</dt>
* <dd>The node to which the internal DOM listeners should be attached.</dd>
* </dl>
*
* @return {EventHandle} the detach handle
*/
define('gesturemove', {
on : function (node, subscriber, ce) {
var root = _getRoot(node, subscriber),
moveHandle = root.on(EVENT[MOVE],
this._onMove,
this,
node,
subscriber,
ce);
subscriber[_MOVE_HANDLE] = moveHandle;
},
delegate : function(node, subscriber, ce, filter) {
var se = this;
subscriber[_DEL_MOVE_HANDLE] = node.delegate(EVENT[MOVE],
function(e) {
se._onMove(e, node, subscriber, ce, true);
},
filter);
},
detach : function (node, subscriber, ce) {
var moveHandle = subscriber[_MOVE_HANDLE];
if (moveHandle) {
moveHandle.detach();
subscriber[_MOVE_HANDLE] = null;
}
},
detachDelegate : function(node, subscriber, ce, filter) {
var handle = subscriber[_DEL_MOVE_HANDLE];
if (handle) {
handle.detach();
subscriber[_DEL_MOVE_HANDLE] = null;
}
},
processArgs : _defArgsProcessor,
_onMove : function(e, node, subscriber, ce, delegate) {
if (delegate) {
node = e.currentTarget;
}
var fireMove = subscriber._extra.standAlone || node.getData(_MOVE_START);
Y.log("onMove initial fireMove check:" + fireMove,"event-gestures");
if (fireMove) {
if (e.touches) {
if (e.touches.length === 1) {
_normTouchFacade(e, e.touches[0]);
} else {
fireMove = false;
}
}
if (fireMove) {
Y.log("onMove second fireMove check:" + fireMove,"event-gestures");
e.type = "gesturemove";
ce.fire(e);
}
}
}
});
/**
* Sets up a "gesturemoveend" event, that is fired on touch devices in response to a single finger "touchend",
* and on mouse based devices in response to a "mouseup".
*
* <p>By default this event is only fired when the same node
* has received a "gesturemove" or "gesturemovestart" event. The subscriber can set standAlone to true, in the configuration properties,
* if they want to listen for this event without a preceding "gesturemovestart" or "gesturemove".</p>
*
* <p>By default this event sets up it's internal "touchend" and "mouseup" DOM listeners on the document element. The subscriber
* can set the root configuration property, to specify which node to attach DOM listeners to, if different from the document.</p>
*
* <p>This event can also be listened for using node.delegate().</p>
*
* @event gesturemoveend
* @for YUI
* @param type {string} "gesturemoveend"
* @param fn {function} The method the event invokes. It receives the event facade of the underlying DOM event (mouseup or touchend.changedTouches[0]).
* @param cfg {Object} Optional. An object which specifies:
* <dl>
* <dt>standAlone (defaults to false)</dt>
* <dd>true, if the subscriber should be notified even if a "gesturemovestart" or "gesturemove" has not occured on the same node.</dd>
* <dt>root (defaults to document)</dt>
* <dd>The node to which the internal DOM listeners should be attached.</dd>
* </dl>
*
* @return {EventHandle} the detach handle
*/
define('gesturemoveend', {
on : function (node, subscriber, ce) {
var root = _getRoot(node, subscriber),
endHandle = root.on(EVENT[END],
this._onEnd,
this,
node,
subscriber,
ce);
subscriber[_MOVE_END_HANDLE] = endHandle;
},
delegate : function(node, subscriber, ce, filter) {
var se = this;
subscriber[_DEL_MOVE_END_HANDLE] = node.delegate(EVENT[END],
function(e) {
se._onEnd(e, node, subscriber, ce, true);
},
filter);
},
detachDelegate : function(node, subscriber, ce, filter) {
var handle = subscriber[_DEL_MOVE_END_HANDLE];
if (handle) {
handle.detach();
subscriber[_DEL_MOVE_END_HANDLE] = null;
}
},
detach : function (node, subscriber, ce) {
var endHandle = subscriber[_MOVE_END_HANDLE];
if (endHandle) {
endHandle.detach();
subscriber[_MOVE_END_HANDLE] = null;
}
},
processArgs : _defArgsProcessor,
_onEnd : function(e, node, subscriber, ce, delegate) {
if (delegate) {
node = e.currentTarget;
}
var fireMoveEnd = subscriber._extra.standAlone || node.getData(_MOVE) || node.getData(_MOVE_START);
if (fireMoveEnd) {
if (e.changedTouches) {
if (e.changedTouches.length === 1) {
_normTouchFacade(e, e.changedTouches[0]);
} else {
fireMoveEnd = false;
}
}
if (fireMoveEnd) {
e.type = "gesturemoveend";
ce.fire(e);
node.clearData(_MOVE_START);
node.clearData(_MOVE);
}
}
}
});