event-gestures-debug.js revision 9b4b74ff446f59c1a9d2007b20beae1254e19138
377N/AYUI.add('event-flick', function(Y) {
377N/A
377N/A/**
377N/A * The gestures module provides gesture events such as "flick", which normalize user interactions
377N/A * across touch and mouse or pointer based input devices. This layer can be used by application developers
377N/A * to build input device agnostic components which behave the same in response to either touch or mouse based
377N/A * interaction.
377N/A *
377N/A * <p>Documentation for events added by this module can be found in the event document for the <a href="YUI.html#events">YUI</a> global.</p>
377N/A *
377N/A * @module event-gestures
377N/A */
377N/A
377N/A/**
377N/A * Adds support for a "flick" event, which is fired at the end of a touch or mouse based flick gesture, and provides
377N/A * velocity of the flick, along with distance and time information.
377N/A *
377N/A * @module event-gestures
377N/A * @submodule event-flick
377N/A */
1336N/A
377N/Avar EVENT = ("ontouchstart" in Y.config.win && !Y.UA.chrome) ? {
377N/A start: "touchstart",
377N/A end: "touchend"
377N/A } : {
377N/A start: "mousedown",
377N/A end: "mouseup"
377N/A },
377N/A
377N/A START = "start",
377N/A END = "end",
377N/A
377N/A OWNER_DOCUMENT = "ownerDocument",
377N/A MIN_VELOCITY = "minVelocity",
377N/A MIN_DISTANCE = "minDistance",
377N/A PREVENT_DEFAULT = "preventDefault",
377N/A
377N/A _FLICK_START = "_fs",
377N/A _FLICK_START_HANDLE = "_fsh",
377N/A _FLICK_END_HANDLE = "_feh",
377N/A
377N/A NODE_TYPE = "nodeType";
377N/A
377N/A/**
377N/A * Sets up a "flick" event, that is fired whenever the user initiates a flick gesture on the node
377N/A * where the listener is attached. The subscriber can specify a minimum distance or velocity for
377N/A * which the event is to be fired. The subscriber can also specify if there is a particular axis which
377N/A * they are interested in - "x" or "y". If no axis is specified, the axis along which there was most distance
377N/A * covered is used.
377N/A *
377N/A * <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
377N/A * however if you want to pass the context and arguments as additional signature arguments to "on",
377N/A * you need to provide a null value for the configuration object, e.g: <code>node.on("flick", fn, null, context, arg1, arg2, arg3)</code></p>
377N/A *
377N/A * @event flick
377N/A * @for YUI
377N/A * @param type {string} "flick"
377N/A * @param fn {function} The method the event invokes. It receives an event facade with an e.flick object containing the flick related properties: e.flick.time, e.flick.distance, e.flick.velocity and e.flick.axis, e.flick.start.
377N/A * @param cfg {Object} Optional. An object which specifies any of the following:
377N/A * <dl>
377N/A * <dt>minDistance (in pixels, defaults to 10)</dt>
377N/A * <dd>The minimum distance between start and end points, which would qualify the gesture as a flick.</dd>
377N/A * <dt>minVelocity (in pixels/ms, defaults to 0)</dt>
377N/A * <dd>The minimum velocity which would qualify the gesture as a flick.</dd>
377N/A * <dt>preventDefault (defaults to false)</dt>
377N/A * <dd>Can be set to true/false to prevent default behavior as soon as the touchstart/touchend or mousedown/mouseup is received so that things like scrolling or text selection can be
377N/A * prevented. This property can also be set to a function, which returns true or false, based on the event facade passed to it.</dd>
377N/A * <dt>axis (no default)</dt>
377N/A * <dd>Can be set to "x" or "y" if you want to constrain the flick velocity and distance to a single axis. If not
377N/A * defined, the axis along which the maximum distance was covered is used.</dd>
377N/A * </dl>
377N/A * @return {EventHandle} the detach handle
377N/A */
377N/A
377N/AY.Event.define('flick', {
377N/A
377N/A on: function (node, subscriber, ce) {
377N/A
377N/A var startHandle = node.on(EVENT[START],
377N/A this._onStart,
377N/A this,
377N/A node,
377N/A subscriber,
377N/A ce);
377N/A
377N/A subscriber[_FLICK_START_HANDLE] = startHandle;
377N/A },
377N/A
377N/A detach: function (node, subscriber, ce) {
377N/A
377N/A var startHandle = subscriber[_FLICK_START_HANDLE],
377N/A endHandle = subscriber[_FLICK_END_HANDLE];
377N/A
377N/A if (startHandle) {
377N/A startHandle.detach();
377N/A subscriber[_FLICK_START_HANDLE] = null;
377N/A }
377N/A
377N/A if (endHandle) {
377N/A endHandle.detach();
377N/A subscriber[_FLICK_END_HANDLE] = null;
377N/A }
377N/A },
377N/A
377N/A processArgs: function(args) {
496N/A var params = (args.length > 3) ? Y.merge(args.splice(3, 1)[0]) : {};
496N/A
496N/A if (!(MIN_VELOCITY in params)) {
496N/A params[MIN_VELOCITY] = this.MIN_VELOCITY;
496N/A }
496N/A
496N/A if (!(MIN_DISTANCE in params)) {
496N/A params[MIN_DISTANCE] = this.MIN_DISTANCE;
496N/A }
496N/A
496N/A if (!(PREVENT_DEFAULT in params)) {
496N/A params[PREVENT_DEFAULT] = this.PREVENT_DEFAULT;
496N/A }
496N/A
496N/A return params;
496N/A },
496N/A
496N/A _onStart: function(e, node, subscriber, ce) {
496N/A
496N/A var start = true, // always true for mouse
496N/A endHandle,
377N/A doc,
377N/A preventDefault = subscriber._extra.preventDefault,
377N/A origE = e;
1336N/A
1336N/A if (e.touches) {
1336N/A start = (e.touches.length === 1);
1336N/A e = e.touches[0];
1336N/A }
1336N/A
1336N/A if (start) {
1336N/A
1336N/A if (preventDefault) {
1336N/A // preventDefault is a boolean or function
1336N/A if (!preventDefault.call || preventDefault(e)) {
1336N/A origE.preventDefault();
1336N/A }
1336N/A }
1336N/A
1336N/A e.flick = {
1336N/A time : new Date().getTime()
1336N/A };
1336N/A
1336N/A subscriber[_FLICK_START] = e;
1336N/A
1336N/A endHandle = subscriber[_FLICK_END_HANDLE];
1336N/A
1336N/A if (!endHandle) {
1336N/A doc = (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);
377N/A
endHandle = doc.on(EVENT[END], Y.bind(this._onEnd, this), null, node, subscriber, ce);
subscriber[_FLICK_END_HANDLE] = endHandle;
}
}
},
_onEnd: function(e, node, subscriber, ce) {
var endTime = new Date().getTime(),
start = subscriber[_FLICK_START],
valid = !!start,
endEvent = e,
startTime,
time,
preventDefault,
params,
xyDistance,
distance,
velocity,
axis;
if (valid) {
if (e.changedTouches) {
if (e.changedTouches.length === 1 && e.touches.length === 0) {
endEvent = e.changedTouches[0];
} else {
valid = false;
}
}
if (valid) {
params = subscriber._extra;
preventDefault = params[PREVENT_DEFAULT];
if (preventDefault) {
// preventDefault is a boolean or function
if (!preventDefault.call || preventDefault(e)) {
endEvent.preventDefault();
}
}
startTime = start.flick.time;
endTime = new Date().getTime();
time = endTime - startTime;
xyDistance = [
endEvent.pageX - start.pageX,
endEvent.pageY - start.pageY
];
if (params.axis) {
axis = params.axis;
} else {
axis = (Math.abs(xyDistance[0]) >= Math.abs(xyDistance[1])) ? 'x' : 'y';
}
distance = xyDistance[(axis === 'x') ? 0 : 1];
velocity = (time !== 0) ? distance/time : 0;
if (isFinite(velocity) && (Math.abs(distance) >= params[MIN_DISTANCE]) && (Math.abs(velocity) >= params[MIN_VELOCITY])) {
e.type = "flick";
e.flick = {
time:time,
distance: distance,
velocity:velocity,
axis: axis,
start : start
};
ce.fire(e);
}
subscriber[_FLICK_START] = null;
}
}
},
MIN_VELOCITY : 0,
MIN_DISTANCE : 0,
PREVENT_DEFAULT : false
});
}, '@VERSION@' ,{requires:['node-base','event-touch','event-synthetic']});
YUI.add('event-move', function(Y) {
/**
* 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 a touch input
* device, and "mousedown", "mousemove", "mouseup" on a mouse based input device.
*
* @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",
GESTURE_MOVE = "gesture" + MOVE,
GESTURE_MOVE_END = GESTURE_MOVE + END,
GESTURE_MOVE_START = GESTURE_MOVE + START,
_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",
PREVENT_DEFAULT = "preventDefault",
BUTTON = "button",
OWNER_DOCUMENT = "ownerDocument",
CURRENT_TARGET = "currentTarget",
TARGET = "target",
NODE_TYPE = "nodeType",
_defArgsProcessor = function(se, args, delegate) {
var iConfig = (delegate) ? 4 : 3,
config = (args.length > iConfig) ? Y.merge(args.splice(iConfig,1)[0]) : {};
if (!(PREVENT_DEFAULT in config)) {
config[PREVENT_DEFAULT] = se.PREVENT_DEFAULT;
}
return config;
},
_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] = touchFacade[TARGET] || touch[TARGET];
touchFacade[CURRENT_TARGET] = touchFacade[CURRENT_TARGET] || touch[CURRENT_TARGET];
touchFacade[BUTTON] = (params && params[BUTTON]) || 1; // default to left (left as per vendors, not W3C which is 0)
},
_prevent = function(e, preventDefault) {
if (preventDefault) {
// preventDefault is a boolean or a function
if (!preventDefault.call || preventDefault(e)) {
e.preventDefault();
}
}
},
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().
*
* <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
* however if you want to pass the context and arguments as additional signature arguments to on/delegate,
* you need to provide a null value for the configuration object, e.g: <code>node.on("gesturemovestart", fn, null, context, arg1, arg2, arg3)</code></p>
*
* @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>
* <dt>preventDefault (defaults to false)</dt>
* <dd>Can be set to true/false to prevent default behavior as soon as the touchstart or mousedown is received (that is before minTime or minDistance thresholds are crossed, and so before the gesturemovestart listener is notified) so that things like text selection and context popups (on touch devices) can be
* prevented. This property can also be set to a function, which returns true or false, based on the event facade passed to it (for example, DragDrop can determine if the target is a valid handle or not before preventing default).</dd>
* </dl>
*
* @return {EventHandle} the detach handle
*/
define(GESTURE_MOVE_START, {
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(this, 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[CURRENT_TARGET];
}
var params = subscriber._extra,
fireStart = true,
minTime = params[MIN_TIME],
minDistance = params[MIN_DISTANCE],
button = params.button,
preventDefault = params[PREVENT_DEFAULT],
root = _getRoot(node, subscriber),
startXY;
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) {
_prevent(e, preventDefault);
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 = GESTURE_MOVE_START;
Y.log("gesturemovestart: Firing start: " + new Date().getTime(), "event-gestures");
node.setData(_MOVE_START, e);
ce.fire(e);
},
MIN_TIME : 0,
MIN_DISTANCE : 0,
PREVENT_DEFAULT : false
});
/**
* 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>
*
* <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
* however if you want to pass the context and arguments as additional signature arguments to on/delegate,
* you need to provide a null value for the configuration object, e.g: <code>node.on("gesturemove", fn, null, context, arg1, arg2, arg3)</code></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>
* <dt>preventDefault (defaults to false)</dt>
* <dd>Can be set to true/false to prevent default behavior as soon as the touchmove or mousemove is received. As with gesturemovestart, can also be set to function which returns true/false based on the event facade passed to it.</dd>
* </dl>
*
* @return {EventHandle} the detach handle
*/
define(GESTURE_MOVE, {
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 : function(args, delegate) {
return _defArgsProcessor(this, args, delegate);
},
_onMove : function(e, node, subscriber, ce, delegate) {
if (delegate) {
node = e[CURRENT_TARGET];
}
var fireMove = subscriber._extra.standAlone || node.getData(_MOVE_START),
preventDefault = subscriber._extra.preventDefault;
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) {
_prevent(e, preventDefault);
Y.log("onMove second fireMove check:" + fireMove,"event-gestures");
e.type = GESTURE_MOVE;
ce.fire(e);
}
}
},
PREVENT_DEFAULT : false
});
/**
* 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>
*
* <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
* however if you want to pass the context and arguments as additional signature arguments to on/delegate,
* you need to provide a null value for the configuration object, e.g: <code>node.on("gesturemoveend", fn, null, context, arg1, arg2, arg3)</code></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>
* <dt>preventDefault (defaults to false)</dt>
* <dd>Can be set to true/false to prevent default behavior as soon as the touchend or mouseup is received. As with gesturemovestart, can also be set to function which returns true/false based on the event facade passed to it.</dd>
* </dl>
*
* @return {EventHandle} the detach handle
*/
define(GESTURE_MOVE_END, {
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 : function(args, delegate) {
return _defArgsProcessor(this, args, delegate);
},
_onEnd : function(e, node, subscriber, ce, delegate) {
if (delegate) {
node = e[CURRENT_TARGET];
}
var fireMoveEnd = subscriber._extra.standAlone || node.getData(_MOVE) || node.getData(_MOVE_START),
preventDefault = subscriber._extra.preventDefault;
if (fireMoveEnd) {
if (e.changedTouches) {
if (e.changedTouches.length === 1) {
_normTouchFacade(e, e.changedTouches[0]);
} else {
fireMoveEnd = false;
}
}
if (fireMoveEnd) {
_prevent(e, preventDefault);
e.type = GESTURE_MOVE_END;
ce.fire(e);
node.clearData(_MOVE_START);
node.clearData(_MOVE);
}
}
},
PREVENT_DEFAULT : false
});
}, '@VERSION@' ,{requires:['node-base','event-touch','event-synthetic']});
YUI.add('event-gestures', function(Y){}, '@VERSION@' ,{use:['event-flick', 'event-move']});