2
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.com/yui/license.html
8
YUI.add('event-flick', function(Y) {
11
* The gestures module provides gesture events such as "flick", which normalize user interactions
12
* across touch and mouse or pointer based input devices. This layer can be used by application developers
13
* to build input device agnostic components which behave the same in response to either touch or mouse based
16
* <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>
18
* @module event-gestures
22
* Adds support for a "flick" event, which is fired at the end of a touch or mouse based flick gesture, and provides
23
* velocity of the flick, along with distance and time information.
25
* @module event-gestures
26
* @submodule event-flick
29
var EVENT = ("ontouchstart" in Y.config.win && !Y.UA.chrome) ? {
40
OWNER_DOCUMENT = "ownerDocument",
41
MIN_VELOCITY = "minVelocity",
42
MIN_DISTANCE = "minDistance",
43
PREVENT_DEFAULT = "preventDefault",
46
_FLICK_START_HANDLE = "_fsh",
47
_FLICK_END_HANDLE = "_feh",
49
NODE_TYPE = "nodeType";
52
* Sets up a "flick" event, that is fired whenever the user initiates a flick gesture on the node
53
* where the listener is attached. The subscriber can specify a minimum distance or velocity for
54
* which the event is to be fired. The subscriber can also specify if there is a particular axis which
55
* they are interested in - "x" or "y". If no axis is specified, the axis along which there was most distance
58
* <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
59
* however if you want to pass the context and arguments as additional signature arguments to "on",
60
* 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>
64
* @param type {string} "flick"
65
* @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.
66
* @param cfg {Object} Optional. An object which specifies any of the following:
68
* <dt>minDistance (in pixels, defaults to 10)</dt>
69
* <dd>The minimum distance between start and end points, which would qualify the gesture as a flick.</dd>
70
* <dt>minVelocity (in pixels/ms, defaults to 0)</dt>
71
* <dd>The minimum velocity which would qualify the gesture as a flick.</dd>
72
* <dt>preventDefault (defaults to false)</dt>
73
* <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
74
* prevented. This property can also be set to a function, which returns true or false, based on the event facade passed to it.</dd>
75
* <dt>axis (no default)</dt>
76
* <dd>Can be set to "x" or "y" if you want to constrain the flick velocity and distance to a single axis. If not
77
* defined, the axis along which the maximum distance was covered is used.</dd>
79
* @return {EventHandle} the detach handle
82
Y.Event.define('flick', {
84
on: function (node, subscriber, ce) {
86
var startHandle = node.on(EVENT[START],
93
subscriber[_FLICK_START_HANDLE] = startHandle;
96
detach: function (node, subscriber, ce) {
98
var startHandle = subscriber[_FLICK_START_HANDLE],
99
endHandle = subscriber[_FLICK_END_HANDLE];
102
startHandle.detach();
103
subscriber[_FLICK_START_HANDLE] = null;
108
subscriber[_FLICK_END_HANDLE] = null;
112
processArgs: function(args) {
113
var params = (args.length > 3) ? Y.merge(args.splice(3, 1)[0]) : {};
115
if (!(MIN_VELOCITY in params)) {
116
params[MIN_VELOCITY] = this.MIN_VELOCITY;
119
if (!(MIN_DISTANCE in params)) {
120
params[MIN_DISTANCE] = this.MIN_DISTANCE;
123
if (!(PREVENT_DEFAULT in params)) {
124
params[PREVENT_DEFAULT] = this.PREVENT_DEFAULT;
130
_onStart: function(e, node, subscriber, ce) {
132
var start = true, // always true for mouse
135
preventDefault = subscriber._extra.preventDefault,
139
start = (e.touches.length === 1);
145
if (preventDefault) {
146
// preventDefault is a boolean or function
147
if (!preventDefault.call || preventDefault(e)) {
148
origE.preventDefault();
153
time : new Date().getTime()
156
subscriber[_FLICK_START] = e;
158
endHandle = subscriber[_FLICK_END_HANDLE];
161
doc = (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);
163
endHandle = doc.on(EVENT[END], Y.bind(this._onEnd, this), null, node, subscriber, ce);
164
subscriber[_FLICK_END_HANDLE] = endHandle;
169
_onEnd: function(e, node, subscriber, ce) {
171
var endTime = new Date().getTime(),
172
start = subscriber[_FLICK_START],
186
if (e.changedTouches) {
187
if (e.changedTouches.length === 1 && e.touches.length === 0) {
188
endEvent = e.changedTouches[0];
196
params = subscriber._extra;
197
preventDefault = params[PREVENT_DEFAULT];
199
if (preventDefault) {
200
// preventDefault is a boolean or function
201
if (!preventDefault.call || preventDefault(e)) {
202
endEvent.preventDefault();
206
startTime = start.flick.time;
207
endTime = new Date().getTime();
208
time = endTime - startTime;
212
endEvent.pageX - start.pageX,
213
endEvent.pageY - start.pageY
216
axis = params.axis || (Math.abs(xyDistance[0]) >= Math.abs(xyDistance[1])) ? 'x' : 'y';
217
distance = xyDistance[(axis === 'x') ? 0 : 1];
218
velocity = (time !== 0) ? distance/time : 0;
220
if (isFinite(velocity) && (Math.abs(distance) >= params[MIN_DISTANCE]) && (Math.abs(velocity) >= params[MIN_VELOCITY])) {
235
subscriber[_FLICK_START] = null;
242
PREVENT_DEFAULT : false
246
}, '3.2.0' ,{requires:['node-base','event-touch','event-synthetic']});
added
removed
src-js/lazrjs/yui/event-gestures/event-flick-debug.js
