2
YUI 3.10.3 (build 2fb5187)
3
Copyright 2013 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
8
YUI.add('event-tap', function (Y, NAME) {
11
The tap module provides a gesture events, "tap", which normalizes user interactions
12
across touch and mouse or pointer based input devices. This 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
'tap' is like a touchscreen 'click', only it requires much less finger-down time since it listens to touch events,
17
but reverts to mouse events if touch is not supported.
21
YUI().use('event-tap', function (Y) {
22
Y.one('#my-button').on('tap', function (e) {
23
Y.log('Button was tapped on');
29
@author Andres Garza, matuzak and tilo mitra
33
var doc = Y.config.doc,
34
GESTURE_MAP = Y.Event._GESTURE_MAP,
35
SUPPORTS_TOUCHES = !!(doc && doc.createTouch),
36
EVT_START = GESTURE_MAP.start,
37
EVT_MOVE = GESTURE_MAP.move,
38
EVT_END = GESTURE_MAP.end,
39
EVT_CANCEL = GESTURE_MAP.cancel,
43
START: 'Y_TAP_ON_START_HANDLE',
44
MOVE: 'Y_TAP_ON_MOVE_HANDLE',
45
END: 'Y_TAP_ON_END_HANDLE',
46
CANCEL: 'Y_TAP_ON_CANCEL_HANDLE'
49
function detachHelper(subscription, handles, subset, context) {
51
handles = subset ? handles : [ handles.START, handles.MOVE, handles.END, handles.CANCEL ];
53
Y.Array.each(handles, function (item, index, array) {
54
var handle = subscription[item];
57
subscription[item] = null;
65
Sets up a "tap" event, that is fired on touch devices in response to a tap event (finger down, finder up).
66
This event can be used instead of listening for click events which have a 500ms delay on most touch devices.
67
This event can also be listened for using node.delegate().
70
@param type {string} "tap"
71
@param fn {function} The method the event invokes. It receives the event facade of the underlying DOM event.
73
@return {EventHandle} the detach handle
75
Y.Event.define(EVT_TAP, {
78
This function should set up the node that will eventually fire the event.
82
node.on('tap', function (e) {
83
Y.log('the node was tapped on');
88
@param {Array} subscription
89
@param {Boolean} notifier
93
on: function (node, subscription, notifier) {
94
subscription[HANDLES.START] = node.on(EVT_START, this.touchStart, this, node, subscription, notifier);
98
Detaches all event subscriptions set up by the event-tap module
102
@param {Array} subscription
103
@param {Boolean} notifier
107
detach: function (node, subscription, notifier) {
108
detachHelper(subscription, HANDLES);
112
Event delegation for the 'tap' event. The delegated event will use a
113
supplied selector or filtering function to test if the event references at least one
114
node that should trigger the subscription callback.
118
node.delegate('tap', function (e) {
119
Y.log('li a inside node was tapped.');
124
@param {Array} subscription
125
@param {Boolean} notifier
126
@param {String | Function} filter
130
delegate: function (node, subscription, notifier, filter) {
131
subscription[HANDLES.START] = node.delegate(EVT_START, function (e) {
132
this.touchStart(e, node, subscription, notifier, true);
137
Detaches the delegated event subscriptions set up by the event-tap module.
138
Only used if you use node.delegate(...) instead of node.on(...);
140
@method detachDelegate
142
@param {Array} subscription
143
@param {Boolean} notifier
147
detachDelegate: function (node, subscription, notifier) {
148
detachHelper(subscription, HANDLES);
153
Called when the monitor(s) are tapped on, either through touchstart or mousedown.
156
@param {DOMEventFacade} event
158
@param {Array} subscription
159
@param {Boolean} notifier
160
@param {Boolean} delegate
164
touchStart: function (event, node, subscription, notifier, delegate) {
169
//move ways to quit early to the top.
172
if (event.button && event.button === 3) {
176
// for now just support a 1 finger count (later enhance via config)
177
if (event.touches && event.touches.length !== 1) {
181
context.node = delegate ? event.currentTarget : node;
183
//There is a double check in here to support event simulation tests, in which
184
//event.touches can be undefined when simulating 'touchstart' on touch devices.
185
if (SUPPORTS_TOUCHES && event.touches) {
186
context.startXY = [ event.touches[0].pageX, event.touches[0].pageY ];
189
context.startXY = [ event.pageX, event.pageY ];
192
//Possibly outdated issue: something is off with the move that it attaches it but never triggers the handler
193
subscription[HANDLES.MOVE] = node.once(EVT_MOVE, this.touchMove, this, node, subscription, notifier, delegate, context);
194
subscription[HANDLES.END] = node.once(EVT_END, this.touchEnd, this, node, subscription, notifier, delegate, context);
195
subscription[HANDLES.CANCEL] = node.once(EVT_CANCEL, this.touchMove, this, node, subscription, notifier, delegate, context);
199
Called when the monitor(s) fires a touchmove or touchcancel event (or the mouse equivalent).
200
This method detaches event handlers so that 'tap' is not fired.
203
@param {DOMEventFacade} event
205
@param {Array} subscription
206
@param {Boolean} notifier
207
@param {Boolean} delegate
208
@param {Object} context
212
touchMove: function (event, node, subscription, notifier, delegate, context) {
213
detachHelper(subscription, [ HANDLES.MOVE, HANDLES.END, HANDLES.CANCEL ], true, context);
214
context.cancelled = true;
219
Called when the monitor(s) fires a touchend event (or the mouse equivalent).
220
This method fires the 'tap' event if certain requirements are met.
223
@param {DOMEventFacade} event
225
@param {Array} subscription
226
@param {Boolean} notifier
227
@param {Boolean} delegate
228
@param {Object} context
232
touchEnd: function (event, node, subscription, notifier, delegate, context) {
233
var startXY = context.startXY,
237
//There is a double check in here to support event simulation tests, in which
238
//event.touches can be undefined when simulating 'touchstart' on touch devices.
239
if (SUPPORTS_TOUCHES && event.changedTouches) {
240
endXY = [ event.changedTouches[0].pageX, event.changedTouches[0].pageY ];
241
clientXY = [event.changedTouches[0].clientX, event.changedTouches[0].clientY];
244
endXY = [ event.pageX, event.pageY ];
245
clientXY = [event.clientX, event.clientY];
248
detachHelper(subscription, [ HANDLES.MOVE, HANDLES.END, HANDLES.CANCEL ], true, context);
250
// make sure mouse didn't move
251
if (Math.abs(endXY[0] - startXY[0]) === 0 && Math.abs(endXY[1] - startXY[1]) === 0) {
253
event.type = EVT_TAP;
254
event.pageX = endXY[0];
255
event.pageY = endXY[1];
256
event.clientX = clientXY[0];
257
event.clientY = clientXY[1];
258
event.currentTarget = context.node;
260
notifier.fire(event);
266
}, '3.10.3', {"requires": ["node-base", "event-base", "event-touch", "event-synthetic"]});