1 YUI.add('event-tap', function (Y, NAME) {

     2 

     3 /**

     4 The tap module provides a gesture events, "tap", which normalizes user interactions

     5 across touch and mouse or pointer based input devices.  This can be used by application developers

     6 to build input device agnostic components which behave the same in response to either touch or mouse based

     7 interaction.

     8 

     9 'tap' is like a touchscreen 'click', only it requires much less finger-down time since it listens to touch events,

    10 but reverts to mouse events if touch is not supported.

    11 

    12 @example

    13 

    14     YUI().use('event-tap', function (Y) {

    15         Y.one('#my-button').on('tap', function (e) {

    16         });

    17     });

    18 

    19 @module event

    20 @submodule event-tap

    21 @author Andres Garza, matuzak and tilo mitra

    22 @since 3.7.0

    23 

    24 */

    25 var doc = Y.config.doc,

    26     GESTURE_MAP = Y.Event._GESTURE_MAP,

    27     EVT_START = GESTURE_MAP.start,

    28     EVT_TAP = 'tap',

    29     POINTER_EVENT_TEST = /pointer/i,

    30 

    31     HANDLES = {

    32         START: 'Y_TAP_ON_START_HANDLE',

    33         END: 'Y_TAP_ON_END_HANDLE',

    34         CANCEL: 'Y_TAP_ON_CANCEL_HANDLE'

    35     };

    36 

    37 function detachHandles(subscription, handles) {

    38     handles = handles || Y.Object.values(HANDLES);

    39 

    40     Y.Array.each(handles, function (item) {

    41         var handle = subscription[item];

    42         if (handle) {

    43             handle.detach();

    44             subscription[item] = null;

    45         }

    46     });

    47 

    48 }

    49 

    50 

    51 /**

    52 Sets up a "tap" event, that is fired on touch devices in response to a tap event (finger down, finder up).

    53 This event can be used instead of listening for click events which have a 500ms delay on most touch devices.

    54 This event can also be listened for using node.delegate().

    55 

    56 @event tap

    57 @param type {string} "tap"

    58 @param fn {function} The method the event invokes. It receives the event facade of the underlying DOM event.

    59 @for Event

    60 @return {EventHandle} the detach handle

    61 */

    62 Y.Event.define(EVT_TAP, {

    63     publishConfig: {

    64         preventedFn: function (e) {

    65             var sub = e.target.once('click', function (click) {

    66                 click.preventDefault();

    67             });

    68 

    69             // Make sure to detach the subscription during the next event loop

    70             // so this doesn't `preventDefault()` on the wrong click event.

    71             setTimeout(function () {

    72                 sub.detach();

    73             //Setting this to `0` causes the detachment to occur before the click

    74             //comes in on Android 4.0.3-4.0.4. 100ms seems to be a reliable number here

    75             //that works across the board.

    76             }, 100);

    77         }

    78     },

    79 

    80     processArgs: function (args, isDelegate) {

    81 

    82         //if we return for the delegate use case, then the `filter` argument

    83         //returns undefined, and we have to get the filter from sub._extra[0] (ugly)

    84 

    85         if (!isDelegate) {

    86             var extra = args[3];

    87             // remove the extra arguments from the array as specified by

    88             // http://yuilibrary.com/yui/docs/event/synths.html

    89             args.splice(3,1);

    90             return extra;

    91         }

    92     },

    93     /**

    94     This function should set up the node that will eventually fire the event.

    95 

    96     Usage:

    97 

    98         node.on('tap', function (e) {

    99         });

   100 

   101     @method on

   102     @param {Node} node

   103     @param {Array} subscription

   104     @param {Boolean} notifier

   105     @public

   106     @static

   107     **/

   108     on: function (node, subscription, notifier) {

   109         subscription[HANDLES.START] = node.on(EVT_START, this._start, this, node, subscription, notifier);

   110     },

   111 

   112     /**

   113     Detaches all event subscriptions set up by the event-tap module

   114 

   115     @method detach

   116     @param {Node} node

   117     @param {Array} subscription

   118     @param {Boolean} notifier

   119     @public

   120     @static

   121     **/

   122     detach: function (node, subscription, notifier) {

   123         detachHandles(subscription);

   124     },

   125 

   126     /**

   127     Event delegation for the 'tap' event. The delegated event will use a

   128     supplied selector or filtering function to test if the event references at least one

   129     node that should trigger the subscription callback.

   130 

   131     Usage:

   132 

   133         node.delegate('tap', function (e) {

   134         }, 'li a');

   135 

   136     @method delegate

   137     @param {Node} node

   138     @param {Array} subscription

   139     @param {Boolean} notifier

   140     @param {String | Function} filter

   141     @public

   142     @static

   143     **/

   144     delegate: function (node, subscription, notifier, filter) {

   145         subscription[HANDLES.START] = Y.delegate(EVT_START, function (e) {

   146             this._start(e, node, subscription, notifier, true);

   147         }, node, filter, this);

   148     },

   149 

   150     /**

   151     Detaches the delegated event subscriptions set up by the event-tap module.

   152     Only used if you use node.delegate(...) instead of node.on(...);

   153 

   154     @method detachDelegate

   155     @param {Node} node

   156     @param {Array} subscription

   157     @param {Boolean} notifier

   158     @public

   159     @static

   160     **/

   161     detachDelegate: function (node, subscription, notifier) {

   162         detachHandles(subscription);

   163     },

   164 

   165     /**

   166     Called when the monitor(s) are tapped on, either through touchstart or mousedown.

   167 

   168     @method _start

   169     @param {DOMEventFacade} event

   170     @param {Node} node

   171     @param {Array} subscription

   172     @param {Boolean} notifier

   173     @param {Boolean} delegate

   174     @protected

   175     @static

   176     **/

   177     _start: function (event, node, subscription, notifier, delegate) {

   178 

   179         var context = {

   180                 canceled: false,

   181                 eventType: event.type

   182             },

   183             preventMouse = subscription.preventMouse || false;

   184 

   185         //move ways to quit early to the top.

   186         // no right clicks

   187         if (event.button && event.button === 3) {

   188             return;

   189         }

   190 

   191         // for now just support a 1 finger count (later enhance via config)

   192         if (event.touches && event.touches.length !== 1) {

   193             return;

   194         }

   195 

   196         context.node = delegate ? event.currentTarget : node;

   197 

   198         //There is a double check in here to support event simulation tests, in which

   199         //event.touches can be undefined when simulating 'touchstart' on touch devices.

   200         if (event.touches) {

   201           context.startXY = [ event.touches[0].pageX, event.touches[0].pageY ];

   202         }

   203         else {

   204           context.startXY = [ event.pageX, event.pageY ];

   205         }

   206 

   207         //If `onTouchStart()` was called by a touch event, set up touch event subscriptions.

   208         //Otherwise, set up mouse/pointer event event subscriptions.

   209         if (event.touches) {

   210 

   211             subscription[HANDLES.END] = node.once('touchend', this._end, this, node, subscription, notifier, delegate, context);

   212             subscription[HANDLES.CANCEL] = node.once('touchcancel', this.detach, this, node, subscription, notifier, delegate, context);

   213 

   214             //Since this is a touch* event, there will be corresponding mouse events

   215             //that will be fired. We don't want these events to get picked up and fire

   216             //another `tap` event, so we'll set this variable to `true`.

   217             subscription.preventMouse = true;

   218         }

   219 

   220         //Only add these listeners if preventMouse is `false`

   221         //ie: not when touch events have already been subscribed to

   222         else if (context.eventType.indexOf('mouse') !== -1 && !preventMouse) {

   223             subscription[HANDLES.END] = node.once('mouseup', this._end, this, node, subscription, notifier, delegate, context);

   224             subscription[HANDLES.CANCEL] = node.once('mousecancel', this.detach, this, node, subscription, notifier, delegate, context);

   225         }

   226 

   227         //If a mouse event comes in after a touch event, it will go in here and

   228         //reset preventMouse to `true`.

   229         //If a mouse event comes in without a prior touch event, preventMouse will be

   230         //false in any case, so this block doesn't do anything.

   231         else if (context.eventType.indexOf('mouse') !== -1 && preventMouse) {

   232             subscription.preventMouse = false;

   233         }

   234 

   235         else if (POINTER_EVENT_TEST.test(context.eventType)) {

   236             subscription[HANDLES.END] = node.once(GESTURE_MAP.end, this._end, this, node, subscription, notifier, delegate, context);

   237             subscription[HANDLES.CANCEL] = node.once(GESTURE_MAP.cancel, this.detach, this, node, subscription, notifier, delegate, context);

   238         }

   239 

   240     },

   241 

   242 

   243     /**

   244     Called when the monitor(s) fires a touchend event (or the mouse equivalent).

   245     This method fires the 'tap' event if certain requirements are met.

   246 

   247     @method _end

   248     @param {DOMEventFacade} event

   249     @param {Node} node

   250     @param {Array} subscription

   251     @param {Boolean} notifier

   252     @param {Boolean} delegate

   253     @param {Object} context

   254     @protected

   255     @static

   256     **/

   257     _end: function (event, node, subscription, notifier, delegate, context) {

   258         var startXY = context.startXY,

   259             endXY,

   260             clientXY,

   261             sensitivity = 15;

   262 

   263         if (subscription._extra && subscription._extra.sensitivity >= 0) {

   264             sensitivity = subscription._extra.sensitivity;

   265         }

   266 

   267         //There is a double check in here to support event simulation tests, in which

   268         //event.touches can be undefined when simulating 'touchstart' on touch devices.

   269         if (event.changedTouches) {

   270           endXY = [ event.changedTouches[0].pageX, event.changedTouches[0].pageY ];

   271           clientXY = [event.changedTouches[0].clientX, event.changedTouches[0].clientY];

   272         }

   273         else {

   274           endXY = [ event.pageX, event.pageY ];

   275           clientXY = [event.clientX, event.clientY];

   276         }

   277 

   278         // make sure mouse didn't move

   279         if (Math.abs(endXY[0] - startXY[0]) <= sensitivity && Math.abs(endXY[1] - startXY[1]) <= sensitivity) {

   280 

   281             event.type = EVT_TAP;

   282             event.pageX = endXY[0];

   283             event.pageY = endXY[1];

   284             event.clientX = clientXY[0];

   285             event.clientY = clientXY[1];

   286             event.currentTarget = context.node;

   287 

   288             notifier.fire(event);

   289         }

   290 

   291         detachHandles(subscription, [HANDLES.END, HANDLES.CANCEL]);

   292     }

   293 });

   294 

   295 

   296 }, '@VERSION@', {"requires": ["node-base", "event-base", "event-touch", "event-synthetic"]});