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

     2 

     3 /**

     4  * The gestures module provides gesture events such as "flick", which normalize user interactions

     5  * across touch and mouse or pointer based input devices. This layer 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  * <p>Documentation for events added by this module can be found in the event document for the <a href="../classes/YUI.html#events">YUI</a> global.</p>

    10  *

    11  *

    12  @example

    13 

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

    15          Y.one('#myNode').on('flick', function (e) {

    16              Y.log('flick event fired. The event payload has goodies.');

    17          });

    18      });

    19 

    20  *

    21  * @module event-gestures

    22  */

    23 

    24 /**

    25  * Adds support for a "flick" event, which is fired at the end of a touch or mouse based flick gesture, and provides

    26  * velocity of the flick, along with distance and time information.

    27  *

    28  * <p>Documentation for the flick event can be found on the <a href="../classes/YUI.html#event_flick">YUI</a> global,

    29  * along with the other supported events.</p>

    30  *

    31  * @module event-gestures

    32  * @submodule event-flick

    33  */

    34 var GESTURE_MAP = Y.Event._GESTURE_MAP,

    35     EVENT = {

    36         start: GESTURE_MAP.start,

    37         end: GESTURE_MAP.end,

    38         move: GESTURE_MAP.move

    39     },

    40     START = "start",

    41     END = "end",

    42     MOVE = "move",

    43 

    44     OWNER_DOCUMENT = "ownerDocument",

    45     MIN_VELOCITY = "minVelocity",

    46     MIN_DISTANCE = "minDistance",

    47     PREVENT_DEFAULT = "preventDefault",

    48 

    49     _FLICK_START = "_fs",

    50     _FLICK_START_HANDLE = "_fsh",

    51     _FLICK_END_HANDLE = "_feh",

    52     _FLICK_MOVE_HANDLE = "_fmh",

    53 

    54     NODE_TYPE = "nodeType";

    55 

    56 /**

    57  * Sets up a "flick" event, that is fired whenever the user initiates a flick gesture on the node

    58  * where the listener is attached. The subscriber can specify a minimum distance or velocity for

    59  * which the event is to be fired. The subscriber can also specify if there is a particular axis which

    60  * they are interested in - "x" or "y". If no axis is specified, the axis along which there was most distance

    61  * covered is used.

    62  *

    63  * <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,

    64  * however if you want to pass the context and arguments as additional signature arguments to "on",

    65  * 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>

    66  *

    67  * @event flick

    68  * @for YUI

    69  * @param type {string} "flick"

    70  * @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.

    71  * @param cfg {Object} Optional. An object which specifies any of the following:

    72  * <dl>

    73  * <dt>minDistance (in pixels, defaults to 10)</dt>

    74  * <dd>The minimum distance between start and end points, which would qualify the gesture as a flick.</dd>

    75  * <dt>minVelocity (in pixels/ms, defaults to 0)</dt>

    76  * <dd>The minimum velocity which would qualify the gesture as a flick.</dd>

    77  * <dt>preventDefault (defaults to false)</dt>

    78  * <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

    79  * prevented. This property can also be set to a function, which returns true or false, based on the event facade passed to it.</dd>

    80  * <dt>axis (no default)</dt>

    81  * <dd>Can be set to "x" or "y" if you want to constrain the flick velocity and distance to a single axis. If not

    82  * defined, the axis along which the maximum distance was covered is used.</dd>

    83  * </dl>

    84  * @return {EventHandle} the detach handle

    85  */

    86 

    87 Y.Event.define('flick', {

    88 

    89     on: function (node, subscriber, ce) {

    90 

    91         var startHandle = node.on(EVENT[START],

    92             this._onStart,

    93             this,

    94             node,

    95             subscriber,

    96             ce);

    97 

    98         subscriber[_FLICK_START_HANDLE] = startHandle;

    99     },

   100 

   101     detach: function (node, subscriber, ce) {

   102 

   103         var startHandle = subscriber[_FLICK_START_HANDLE],

   104             endHandle = subscriber[_FLICK_END_HANDLE];

   105 

   106         if (startHandle) {

   107             startHandle.detach();

   108             subscriber[_FLICK_START_HANDLE] = null;

   109         }

   110 

   111         if (endHandle) {

   112             endHandle.detach();

   113             subscriber[_FLICK_END_HANDLE] = null;

   114         }

   115     },

   116 

   117     processArgs: function(args) {

   118         var params = (args.length > 3) ? Y.merge(args.splice(3, 1)[0]) : {};

   119 

   120         if (!(MIN_VELOCITY in params)) {

   121             params[MIN_VELOCITY] = this.MIN_VELOCITY;

   122         }

   123 

   124         if (!(MIN_DISTANCE in params)) {

   125             params[MIN_DISTANCE] = this.MIN_DISTANCE;

   126         }

   127 

   128         if (!(PREVENT_DEFAULT in params)) {

   129             params[PREVENT_DEFAULT] = this.PREVENT_DEFAULT;

   130         }

   131 

   132         return params;

   133     },

   134 

   135     _onStart: function(e, node, subscriber, ce) {

   136 

   137         var start = true, // always true for mouse

   138             endHandle,

   139             moveHandle,

   140             doc,

   141             preventDefault = subscriber._extra.preventDefault,

   142             origE = e;

   143 

   144         if (e.touches) {

   145             start = (e.touches.length === 1);

   146             e = e.touches[0];

   147         }

   148 

   149         if (start) {

   150 

   151             if (preventDefault) {

   152                 // preventDefault is a boolean or function

   153                 if (!preventDefault.call || preventDefault(e)) {

   154                     origE.preventDefault();

   155                 }

   156             }

   157 

   158             e.flick = {

   159                 time : new Date().getTime()

   160             };

   161 

   162             subscriber[_FLICK_START] = e;

   163 

   164             endHandle = subscriber[_FLICK_END_HANDLE];

   165 

   166             doc = (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);

   167             if (!endHandle) {

   168                 endHandle = doc.on(EVENT[END], Y.bind(this._onEnd, this), null, node, subscriber, ce);

   169                 subscriber[_FLICK_END_HANDLE] = endHandle;

   170             }

   171 

   172             subscriber[_FLICK_MOVE_HANDLE] = doc.once(EVENT[MOVE], Y.bind(this._onMove, this), null, node, subscriber, ce);

   173         }

   174     },

   175 

   176     _onMove: function(e, node, subscriber, ce) {

   177         var start = subscriber[_FLICK_START];

   178 

   179         // Start timing from first move.

   180         if (start && start.flick) {

   181             start.flick.time = new Date().getTime();

   182         }

   183     },

   184 

   185     _onEnd: function(e, node, subscriber, ce) {

   186 

   187         var endTime = new Date().getTime(),

   188             start = subscriber[_FLICK_START],

   189             valid = !!start,

   190             endEvent = e,

   191             startTime,

   192             time,

   193             preventDefault,

   194             params,

   195             xyDistance,

   196             distance,

   197             velocity,

   198             axis,

   199             moveHandle = subscriber[_FLICK_MOVE_HANDLE];

   200 

   201         if (moveHandle) {

   202             moveHandle.detach();

   203             delete subscriber[_FLICK_MOVE_HANDLE];

   204         }

   205 

   206         if (valid) {

   207 

   208             if (e.changedTouches) {

   209                 if (e.changedTouches.length === 1 && e.touches.length === 0) {

   210                     endEvent = e.changedTouches[0];

   211                 } else {

   212                     valid = false;

   213                 }

   214             }

   215 

   216             if (valid) {

   217 

   218                 params = subscriber._extra;

   219                 preventDefault = params[PREVENT_DEFAULT];

   220 

   221                 if (preventDefault) {

   222                     // preventDefault is a boolean or function

   223                     if (!preventDefault.call || preventDefault(e)) {

   224                         e.preventDefault();

   225                     }

   226                 }

   227 

   228                 startTime = start.flick.time;

   229                 endTime = new Date().getTime();

   230                 time = endTime - startTime;

   231 

   232                 xyDistance = [

   233                     endEvent.pageX - start.pageX,

   234                     endEvent.pageY - start.pageY

   235                 ];

   236 

   237                 if (params.axis) {

   238                     axis = params.axis;

   239                 } else {

   240                     axis = (Math.abs(xyDistance[0]) >= Math.abs(xyDistance[1])) ? 'x' : 'y';

   241                 }

   242 

   243                 distance = xyDistance[(axis === 'x') ? 0 : 1];

   244                 velocity = (time !== 0) ? distance/time : 0;

   245 

   246                 if (isFinite(velocity) && (Math.abs(distance) >= params[MIN_DISTANCE]) && (Math.abs(velocity)  >= params[MIN_VELOCITY])) {

   247 

   248                     e.type = "flick";

   249                     e.flick = {

   250                         time:time,

   251                         distance: distance,

   252                         velocity:velocity,

   253                         axis: axis,

   254                         start : start

   255                     };

   256 

   257                     ce.fire(e);

   258 

   259                 }

   260 

   261                 subscriber[_FLICK_START] = null;

   262             }

   263         }

   264     },

   265 

   266     MIN_VELOCITY : 0,

   267     MIN_DISTANCE : 0,

   268     PREVENT_DEFAULT : false

   269 });

   270 

   271 

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