1 /*

     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/

     6 */

     7 

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

     9 

    10 /**

    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

    14 interaction.

    15 

    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.

    18 

    19 @example

    20 

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

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

    23             Y.log('Button was tapped on');

    24         });

    25     });

    26 

    27 @module event

    28 @submodule event-tap

    29 @author Andres Garza, matuzak and tilo mitra

    30 @since 3.7.0

    31 

    32 */

    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,

    40     EVT_TAP = 'tap',

    41 

    42     HANDLES = {

    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'

    47     };

    48 

    49 function detachHelper(subscription, handles, subset, context) {

    50 

    51     handles = subset ? handles : [ handles.START, handles.MOVE, handles.END, handles.CANCEL ];

    52 

    53     Y.Array.each(handles, function (item, index, array) {

    54         var handle = subscription[item];

    55         if (handle) {

    56             handle.detach();

    57             subscription[item] = null;

    58         }

    59     });

    60 

    61 }

    62 

    63 

    64 /**

    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().

    68 

    69 @event tap

    70 @param type {string} "tap"

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

    72 @for Event

    73 @return {EventHandle} the detach handle

    74 */

    75 Y.Event.define(EVT_TAP, {

    76 

    77     /**

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

    79 

    80     Usage:

    81 

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

    83             Y.log('the node was tapped on');

    84         });

    85 

    86     @method on

    87     @param {Y.Node} node

    88     @param {Array} subscription

    89     @param {Boolean} notifier

    90     @public

    91     @static

    92     **/

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

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

    95     },

    96 

    97     /**

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

    99 

   100     @method detach

   101     @param {Y.Node} node

   102     @param {Array} subscription

   103     @param {Boolean} notifier

   104     @public

   105     @static

   106     **/

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

   108         detachHelper(subscription, HANDLES);

   109     },

   110 

   111     /**

   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.

   115 

   116     Usage:

   117 

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

   119             Y.log('li a inside node was tapped.');

   120         }, 'li a');

   121 

   122     @method delegate

   123     @param {Y.Node} node

   124     @param {Array} subscription

   125     @param {Boolean} notifier

   126     @param {String | Function} filter

   127     @public

   128     @static

   129     **/

   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);

   133         }, filter, this);

   134     },

   135 

   136     /**

   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(...);

   139 

   140     @method detachDelegate

   141     @param {Y.Node} node

   142     @param {Array} subscription

   143     @param {Boolean} notifier

   144     @public

   145     @static

   146     **/

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

   148         detachHelper(subscription, HANDLES);

   149     },

   150 

   151 

   152     /**

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

   154 

   155     @method touchStart

   156     @param {DOMEventFacade} event

   157     @param {Y.Node} node

   158     @param {Array} subscription

   159     @param {Boolean} notifier

   160     @param {Boolean} delegate

   161     @protected

   162     @static

   163     **/

   164     touchStart: function (event, node, subscription, notifier, delegate) {

   165 

   166         var context = {

   167                 canceled: false

   168             };

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

   170 

   171         // no right clicks

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

   173             return;

   174         }

   175 

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

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

   178             return;

   179         }

   180 

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

   182 

   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 ];

   187         }

   188         else {

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

   190         }

   191 

   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);

   196     },

   197 

   198     /**

   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.

   201 

   202     @method touchMove

   203     @param {DOMEventFacade} event

   204     @param {Y.Node} node

   205     @param {Array} subscription

   206     @param {Boolean} notifier

   207     @param {Boolean} delegate

   208     @param {Object} context

   209     @protected

   210     @static

   211     **/

   212     touchMove: function (event, node, subscription, notifier, delegate, context) {

   213         detachHelper(subscription, [ HANDLES.MOVE, HANDLES.END, HANDLES.CANCEL ], true, context);

   214         context.cancelled = true;

   215 

   216     },

   217 

   218     /**

   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.

   221 

   222     @method touchEnd

   223     @param {DOMEventFacade} event

   224     @param {Y.Node} node

   225     @param {Array} subscription

   226     @param {Boolean} notifier

   227     @param {Boolean} delegate

   228     @param {Object} context

   229     @protected

   230     @static

   231     **/

   232     touchEnd: function (event, node, subscription, notifier, delegate, context) {

   233         var startXY = context.startXY,

   234             endXY,

   235             clientXY;

   236 

   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];

   242         }

   243         else {

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

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

   246         }

   247 

   248         detachHelper(subscription, [ HANDLES.MOVE, HANDLES.END, HANDLES.CANCEL ], true, context);

   249 

   250         // make sure mouse didn't move

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

   252 

   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;

   259 

   260             notifier.fire(event);

   261         }

   262     }

   263 });

   264 

   265 

   266 }, '3.10.3', {"requires": ["node-base", "event-base", "event-touch", "event-synthetic"]});