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-flick', function (Y, NAME) {

     9 

    10 /**

    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

    14  * interaction.

    15  *

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

    17  *

    18  *

    19  @example

    20 

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

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

    23          });

    24      });

    25 

    26  *

    27  * @module event-gestures

    28  */

    29 

    30 /**

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

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

    33  *

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

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

    36  *

    37  * @module event-gestures

    38  * @submodule event-flick

    39  */

    40 var GESTURE_MAP = Y.Event._GESTURE_MAP,

    41     EVENT = {

    42         start: GESTURE_MAP.start,

    43         end: GESTURE_MAP.end,

    44         move: GESTURE_MAP.move

    45     },

    46     START = "start",

    47     END = "end",

    48     MOVE = "move",

    49 

    50     OWNER_DOCUMENT = "ownerDocument",

    51     MIN_VELOCITY = "minVelocity",

    52     MIN_DISTANCE = "minDistance",

    53     PREVENT_DEFAULT = "preventDefault",

    54 

    55     _FLICK_START = "_fs",

    56     _FLICK_START_HANDLE = "_fsh",

    57     _FLICK_END_HANDLE = "_feh",

    58     _FLICK_MOVE_HANDLE = "_fmh",

    59 

    60     NODE_TYPE = "nodeType";

    61 

    62 /**

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

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

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

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

    67  * covered is used.

    68  *

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

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

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

    72  *

    73  * @event flick

    74  * @for YUI

    75  * @param type {string} "flick"

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

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

    78  * <dl>

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

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

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

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

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

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

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

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

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

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

    89  * </dl>

    90  * @return {EventHandle} the detach handle

    91  */

    92 

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

    94 

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

    96 

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

    98             this._onStart,

    99             this,

   100             node,

   101             subscriber,

   102             ce);

   103 

   104         subscriber[_FLICK_START_HANDLE] = startHandle;

   105     },

   106 

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

   108 

   109         var startHandle = subscriber[_FLICK_START_HANDLE],

   110             endHandle = subscriber[_FLICK_END_HANDLE];

   111 

   112         if (startHandle) {

   113             startHandle.detach();

   114             subscriber[_FLICK_START_HANDLE] = null;

   115         }

   116 

   117         if (endHandle) {

   118             endHandle.detach();

   119             subscriber[_FLICK_END_HANDLE] = null;

   120         }

   121     },

   122 

   123     processArgs: function(args) {

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

   125 

   126         if (!(MIN_VELOCITY in params)) {

   127             params[MIN_VELOCITY] = this.MIN_VELOCITY;

   128         }

   129 

   130         if (!(MIN_DISTANCE in params)) {

   131             params[MIN_DISTANCE] = this.MIN_DISTANCE;

   132         }

   133 

   134         if (!(PREVENT_DEFAULT in params)) {

   135             params[PREVENT_DEFAULT] = this.PREVENT_DEFAULT;

   136         }

   137 

   138         return params;

   139     },

   140 

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

   142 

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

   144             endHandle,

   145             moveHandle,

   146             doc,

   147             preventDefault = subscriber._extra.preventDefault,

   148             origE = e;

   149 

   150         if (e.touches) {

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

   152             e = e.touches[0];

   153         }

   154 

   155         if (start) {

   156 

   157             if (preventDefault) {

   158                 // preventDefault is a boolean or function

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

   160                     origE.preventDefault();

   161                 }

   162             }

   163 

   164             e.flick = {

   165                 time : new Date().getTime()

   166             };

   167 

   168             subscriber[_FLICK_START] = e;

   169 

   170             endHandle = subscriber[_FLICK_END_HANDLE];

   171 

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

   173             if (!endHandle) {

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

   175                 subscriber[_FLICK_END_HANDLE] = endHandle;

   176             }

   177 

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

   179         }

   180     },

   181 

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

   183         var start = subscriber[_FLICK_START];

   184 

   185         // Start timing from first move.

   186         if (start && start.flick) {

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

   188         }

   189     },

   190 

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

   192 

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

   194             start = subscriber[_FLICK_START],

   195             valid = !!start,

   196             endEvent = e,

   197             startTime,

   198             time,

   199             preventDefault,

   200             params,

   201             xyDistance,

   202             distance,

   203             velocity,

   204             axis,

   205             moveHandle = subscriber[_FLICK_MOVE_HANDLE];

   206 

   207         if (moveHandle) {

   208             moveHandle.detach();

   209             delete subscriber[_FLICK_MOVE_HANDLE];

   210         }

   211 

   212         if (valid) {

   213 

   214             if (e.changedTouches) {

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

   216                     endEvent = e.changedTouches[0];

   217                 } else {

   218                     valid = false;

   219                 }

   220             }

   221 

   222             if (valid) {

   223 

   224                 params = subscriber._extra;

   225                 preventDefault = params[PREVENT_DEFAULT];

   226 

   227                 if (preventDefault) {

   228                     // preventDefault is a boolean or function

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

   230                         e.preventDefault();

   231                     }

   232                 }

   233 

   234                 startTime = start.flick.time;

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

   236                 time = endTime - startTime;

   237 

   238                 xyDistance = [

   239                     endEvent.pageX - start.pageX,

   240                     endEvent.pageY - start.pageY

   241                 ];

   242 

   243                 if (params.axis) {

   244                     axis = params.axis;

   245                 } else {

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

   247                 }

   248 

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

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

   251 

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

   253 

   254                     e.type = "flick";

   255                     e.flick = {

   256                         time:time,

   257                         distance: distance,

   258                         velocity:velocity,

   259                         axis: axis,

   260                         start : start

   261                     };

   262 

   263                     ce.fire(e);

   264 

   265                 }

   266 

   267                 subscriber[_FLICK_START] = null;

   268             }

   269         }

   270     },

   271 

   272     MIN_VELOCITY : 0,

   273     MIN_DISTANCE : 0,

   274     PREVENT_DEFAULT : false

   275 });

   276 

   277 

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