lib/yui/3.5.1/build/event-move/event-move-debug.js

   1 /*
   2 YUI 3.5.1 (build 22)
   3 Copyright 2012 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7 YUI.add('event-move', function(Y) {
   8
   9 /**
  10  * Adds lower level support for "gesturemovestart", "gesturemove" and "gesturemoveend" events, which can be used to create drag/drop
  11  * interactions which work across touch and mouse input devices. They correspond to "touchstart", "touchmove" and "touchend" on a touch input
  12  * device, and "mousedown", "mousemove", "mouseup" on a mouse based input device.
  13  *
  14  * @module event-gestures
  15  * @submodule event-move
  16  */
  17
  18 var EVENT = ((Y.config.win && ("ontouchstart" in Y.config.win)) && !(Y.UA.chrome && Y.UA.chrome < 6)) ? {
  19         start: "touchstart",
  20         move: "touchmove",
  21         end: "touchend"
  22     } : {
  23         start: "mousedown",
  24         move: "mousemove",
  25         end: "mouseup"
  26     },
  27
  28     START = "start",
  29     MOVE = "move",
  30     END = "end",
  31
  32     GESTURE_MOVE = "gesture" + MOVE,
  33     GESTURE_MOVE_END = GESTURE_MOVE + END,
  34     GESTURE_MOVE_START = GESTURE_MOVE + START,
  35
  36     _MOVE_START_HANDLE = "_msh",
  37     _MOVE_HANDLE = "_mh",
  38     _MOVE_END_HANDLE = "_meh",
  39
  40     _DEL_MOVE_START_HANDLE = "_dmsh",
  41     _DEL_MOVE_HANDLE = "_dmh",
  42     _DEL_MOVE_END_HANDLE = "_dmeh",
  43
  44     _MOVE_START = "_ms",
  45     _MOVE = "_m",
  46
  47     MIN_TIME = "minTime",
  48     MIN_DISTANCE = "minDistance",
  49     PREVENT_DEFAULT = "preventDefault",
  50     BUTTON = "button",
  51     OWNER_DOCUMENT = "ownerDocument",
  52
  53     CURRENT_TARGET = "currentTarget",
  54     TARGET = "target",
  55
  56     NODE_TYPE = "nodeType",
  57
  58     _defArgsProcessor = function(se, args, delegate) {
  59         var iConfig = (delegate) ? 4 : 3,
  60             config = (args.length > iConfig) ? Y.merge(args.splice(iConfig,1)[0]) : {};
  61
  62         if (!(PREVENT_DEFAULT in config)) {
  63             config[PREVENT_DEFAULT] = se.PREVENT_DEFAULT;
  64         }
  65
  66         return config;
  67     },
  68
  69     _getRoot = function(node, subscriber) {
  70         return subscriber._extra.root || (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);
  71     },
  72
  73     _normTouchFacade = function(touchFacade, touch, params) {
  74         touchFacade.pageX = touch.pageX;
  75         touchFacade.pageY = touch.pageY;
  76         touchFacade.screenX = touch.screenX;
  77         touchFacade.screenY = touch.screenY;
  78         touchFacade.clientX = touch.clientX;
  79         touchFacade.clientY = touch.clientY;
  80         touchFacade[TARGET] = touchFacade[TARGET] || touch[TARGET];
  81         touchFacade[CURRENT_TARGET] = touchFacade[CURRENT_TARGET] || touch[CURRENT_TARGET];
  82
  83         touchFacade[BUTTON] = (params && params[BUTTON]) || 1; // default to left (left as per vendors, not W3C which is 0)
  84     },
  85
  86     _prevent = function(e, preventDefault) {
  87         if (preventDefault) {
  88             // preventDefault is a boolean or a function
  89             if (!preventDefault.call || preventDefault(e)) {
  90                 e.preventDefault();
  91             }
  92         }
  93     },
  94
  95     define = Y.Event.define;
  96
  97 /**
  98  * Sets up a "gesturemovestart" event, that is fired on touch devices in response to a single finger "touchstart",
  99  * and on mouse based devices in response to a "mousedown". The subscriber can specify the minimum time
 100  * and distance thresholds which should be crossed before the "gesturemovestart" is fired and for the mouse,
 101  * which button should initiate a "gesturemovestart". This event can also be listened for using node.delegate().
 102  *
 103  * <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
 104  * however if you want to pass the context and arguments as additional signature arguments to on/delegate,
 105  * you need to provide a null value for the configuration object, e.g: <code>node.on("gesturemovestart", fn, null, context, arg1, arg2, arg3)</code></p>
 106  *
 107  * @event gesturemovestart
 108  * @for YUI
 109  * @param type {string} "gesturemovestart"
 110  * @param fn {function} The method the event invokes. It receives the event facade of the underlying DOM event (mousedown or touchstart.touches[0]) which contains position co-ordinates.
 111  * @param cfg {Object} Optional. An object which specifies:
 112  *
 113  * <dl>
 114  * <dt>minDistance (defaults to 0)</dt>
 115  * <dd>The minimum distance threshold which should be crossed before the gesturemovestart is fired</dd>
 116  * <dt>minTime (defaults to 0)</dt>
 117  * <dd>The minimum time threshold for which the finger/mouse should be help down before the gesturemovestart is fired</dd>
 118  * <dt>button (no default)</dt>
 119  * <dd>In the case of a mouse input device, if the event should only be fired for a specific mouse button.</dd>
 120  * <dt>preventDefault (defaults to false)</dt>
 121  * <dd>Can be set to true/false to prevent default behavior as soon as the touchstart or mousedown is received (that is before minTime or minDistance thresholds are crossed, and so before the gesturemovestart listener is notified) so that things like text selection and context popups (on touch devices) can be
 122  * prevented. This property can also be set to a function, which returns true or false, based on the event facade passed to it (for example, DragDrop can determine if the target is a valid handle or not before preventing default).</dd>
 123  * </dl>
 124  *
 125  * @return {EventHandle} the detach handle
 126  */
 127
 128 define(GESTURE_MOVE_START, {
 129
 130     on: function (node, subscriber, ce) {
 131
 132         subscriber[_MOVE_START_HANDLE] = node.on(EVENT[START],
 133             this._onStart,
 134             this,
 135             node,
 136             subscriber,
 137             ce);
 138     },
 139
 140     delegate : function(node, subscriber, ce, filter) {
 141
 142         var se = this;
 143
 144         subscriber[_DEL_MOVE_START_HANDLE] = node.delegate(EVENT[START],
 145             function(e) {
 146                 se._onStart(e, node, subscriber, ce, true);
 147             },
 148             filter);
 149     },
 150
 151     detachDelegate : function(node, subscriber, ce, filter) {
 152         var handle = subscriber[_DEL_MOVE_START_HANDLE];
 153
 154         if (handle) {
 155             handle.detach();
 156             subscriber[_DEL_MOVE_START_HANDLE] = null;
 157         }
 158     },
 159
 160     detach: function (node, subscriber, ce) {
 161         var startHandle = subscriber[_MOVE_START_HANDLE];
 162
 163         if (startHandle) {
 164             startHandle.detach();
 165             subscriber[_MOVE_START_HANDLE] = null;
 166         }
 167     },
 168
 169     processArgs : function(args, delegate) {
 170         var params = _defArgsProcessor(this, args, delegate);
 171
 172         if (!(MIN_TIME in params)) {
 173             params[MIN_TIME] = this.MIN_TIME;
 174         }
 175
 176         if (!(MIN_DISTANCE in params)) {
 177             params[MIN_DISTANCE] = this.MIN_DISTANCE;
 178         }
 179
 180         return params;
 181     },
 182
 183     _onStart : function(e, node, subscriber, ce, delegate) {
 184
 185         if (delegate) {
 186             node = e[CURRENT_TARGET];
 187         }
 188
 189         var params = subscriber._extra,
 190             fireStart = true,
 191             minTime = params[MIN_TIME],
 192             minDistance = params[MIN_DISTANCE],
 193             button = params.button,
 194             preventDefault = params[PREVENT_DEFAULT],
 195             root = _getRoot(node, subscriber),
 196             startXY;
 197
 198         if (e.touches) {
 199             if (e.touches.length === 1) {
 200                 _normTouchFacade(e, e.touches[0], params);
 201             } else {
 202                 fireStart = false;
 203             }
 204         } else {
 205             fireStart = (button === undefined) || (button === e.button);
 206         }
 207
 208         Y.log("gesturemovestart: params = button:" + button + ", minTime = " + minTime + ", minDistance = " + minDistance, "event-gestures");
 209
 210         if (fireStart) {
 211
 212             _prevent(e, preventDefault);
 213
 214             if (minTime === 0 || minDistance === 0) {
 215                 Y.log("gesturemovestart: No minTime or minDistance. Firing immediately", "event-gestures");
 216                 this._start(e, node, ce, params);
 217
 218             } else {
 219
 220                 startXY = [e.pageX, e.pageY];
 221
 222                 if (minTime > 0) {
 223
 224                     Y.log("gesturemovestart: minTime specified. Setup timer.", "event-gestures");
 225                     Y.log("gesturemovestart: initialTime for minTime = " + new Date().getTime(), "event-gestures");
 226
 227                     params._ht = Y.later(minTime, this, this._start, [e, node, ce, params]);
 228
 229                     params._hme = root.on(EVENT[END], Y.bind(function() {
 230                         this._cancel(params);
 231                     }, this));
 232                 }
 233
 234                 if (minDistance > 0) {
 235
 236                     Y.log("gesturemovestart: minDistance specified. Setup native mouse/touchmove listener to measure distance.", "event-gestures");
 237                     Y.log("gesturemovestart: initialXY for minDistance = " + startXY, "event-gestures");
 238
 239                     params._hm = root.on(EVENT[MOVE], Y.bind(function(em) {
 240                         if (Math.abs(em.pageX - startXY[0]) > minDistance || Math.abs(em.pageY - startXY[1]) > minDistance) {
 241                             Y.log("gesturemovestart: minDistance hit.", "event-gestures");
 242                             this._start(e, node, ce, params);
 243                         }
 244                     }, this));
 245                 }
 246             }
 247         }
 248     },
 249
 250     _cancel : function(params) {
 251         if (params._ht) {
 252             params._ht.cancel();
 253             params._ht = null;
 254         }
 255         if (params._hme) {
 256             params._hme.detach();
 257             params._hme = null;
 258         }
 259         if (params._hm) {
 260             params._hm.detach();
 261             params._hm = null;
 262         }
 263     },
 264
 265     _start : function(e, node, ce, params) {
 266
 267         if (params) {
 268             this._cancel(params);
 269         }
 270
 271         e.type = GESTURE_MOVE_START;
 272
 273         Y.log("gesturemovestart: Firing start: " + new Date().getTime(), "event-gestures");
 274
 275         node.setData(_MOVE_START, e);
 276         ce.fire(e);
 277     },
 278
 279     MIN_TIME : 0,
 280     MIN_DISTANCE : 0,
 281     PREVENT_DEFAULT : false
 282 });
 283
 284 /**
 285  * Sets up a "gesturemove" event, that is fired on touch devices in response to a single finger "touchmove",
 286  * and on mouse based devices in response to a "mousemove".
 287  *
 288  * <p>By default this event is only fired when the same node
 289  * has received a "gesturemovestart" event. The subscriber can set standAlone to true, in the configuration properties,
 290  * if they want to listen for this event without an initial "gesturemovestart".</p>
 291  *
 292  * <p>By default this event sets up it's internal "touchmove" and "mousemove" DOM listeners on the document element. The subscriber
 293  * can set the root configuration property, to specify which node to attach DOM listeners to, if different from the document.</p>
 294  *
 295  * <p>This event can also be listened for using node.delegate().</p>
 296  *
 297  * <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
 298  * however if you want to pass the context and arguments as additional signature arguments to on/delegate,
 299  * you need to provide a null value for the configuration object, e.g: <code>node.on("gesturemove", fn, null, context, arg1, arg2, arg3)</code></p>
 300  *
 301  * @event gesturemove
 302  * @for YUI
 303  * @param type {string} "gesturemove"
 304  * @param fn {function} The method the event invokes. It receives the event facade of the underlying DOM event (mousemove or touchmove.touches[0]) which contains position co-ordinates.
 305  * @param cfg {Object} Optional. An object which specifies:
 306  * <dl>
 307  * <dt>standAlone (defaults to false)</dt>
 308  * <dd>true, if the subscriber should be notified even if a "gesturemovestart" has not occured on the same node.</dd>
 309  * <dt>root (defaults to document)</dt>
 310  * <dd>The node to which the internal DOM listeners should be attached.</dd>
 311  * <dt>preventDefault (defaults to false)</dt>
 312  * <dd>Can be set to true/false to prevent default behavior as soon as the touchmove or mousemove is received. As with gesturemovestart, can also be set to function which returns true/false based on the event facade passed to it.</dd>
 313  * </dl>
 314  *
 315  * @return {EventHandle} the detach handle
 316  */
 317 define(GESTURE_MOVE, {
 318
 319     on : function (node, subscriber, ce) {
 320
 321         var root = _getRoot(node, subscriber),
 322
 323             moveHandle = root.on(EVENT[MOVE],
 324                 this._onMove,
 325                 this,
 326                 node,
 327                 subscriber,
 328                 ce);
 329
 330         subscriber[_MOVE_HANDLE] = moveHandle;
 331     },
 332
 333     delegate : function(node, subscriber, ce, filter) {
 334
 335         var se = this;
 336
 337         subscriber[_DEL_MOVE_HANDLE] = node.delegate(EVENT[MOVE],
 338             function(e) {
 339                 se._onMove(e, node, subscriber, ce, true);
 340             },
 341             filter);
 342     },
 343
 344     detach : function (node, subscriber, ce) {
 345         var moveHandle = subscriber[_MOVE_HANDLE];
 346
 347         if (moveHandle) {
 348             moveHandle.detach();
 349             subscriber[_MOVE_HANDLE] = null;
 350         }
 351     },
 352
 353     detachDelegate : function(node, subscriber, ce, filter) {
 354         var handle = subscriber[_DEL_MOVE_HANDLE];
 355
 356         if (handle) {
 357             handle.detach();
 358             subscriber[_DEL_MOVE_HANDLE] = null;
 359         }
 360
 361     },
 362
 363     processArgs : function(args, delegate) {
 364         return _defArgsProcessor(this, args, delegate);
 365     },
 366
 367     _onMove : function(e, node, subscriber, ce, delegate) {
 368
 369         if (delegate) {
 370             node = e[CURRENT_TARGET];
 371         }
 372
 373         var fireMove = subscriber._extra.standAlone || node.getData(_MOVE_START),
 374             preventDefault = subscriber._extra.preventDefault;
 375
 376         Y.log("onMove initial fireMove check:" + fireMove,"event-gestures");
 377
 378         if (fireMove) {
 379
 380             if (e.touches) {
 381                 if (e.touches.length === 1) {
 382                     _normTouchFacade(e, e.touches[0]);
 383                 } else {
 384                     fireMove = false;
 385                 }
 386             }
 387
 388             if (fireMove) {
 389
 390                 _prevent(e, preventDefault);
 391
 392                 Y.log("onMove second fireMove check:" + fireMove,"event-gestures");
 393
 394                 e.type = GESTURE_MOVE;
 395                 ce.fire(e);
 396             }
 397         }
 398     },
 399
 400     PREVENT_DEFAULT : false
 401 });
 402
 403 /**
 404  * Sets up a "gesturemoveend" event, that is fired on touch devices in response to a single finger "touchend",
 405  * and on mouse based devices in response to a "mouseup".
 406  *
 407  * <p>By default this event is only fired when the same node
 408  * has received a "gesturemove" or "gesturemovestart" event. The subscriber can set standAlone to true, in the configuration properties,
 409  * if they want to listen for this event without a preceding "gesturemovestart" or "gesturemove".</p>
 410  *
 411  * <p>By default this event sets up it's internal "touchend" and "mouseup" DOM listeners on the document element. The subscriber
 412  * can set the root configuration property, to specify which node to attach DOM listeners to, if different from the document.</p>
 413  *
 414  * <p>This event can also be listened for using node.delegate().</p>
 415  *
 416  * <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
 417  * however if you want to pass the context and arguments as additional signature arguments to on/delegate,
 418  * you need to provide a null value for the configuration object, e.g: <code>node.on("gesturemoveend", fn, null, context, arg1, arg2, arg3)</code></p>
 419  *
 420  *
 421  * @event gesturemoveend
 422  * @for YUI
 423  * @param type {string} "gesturemoveend"
 424  * @param fn {function} The method the event invokes. It receives the event facade of the underlying DOM event (mouseup or touchend.changedTouches[0]).
 425  * @param cfg {Object} Optional. An object which specifies:
 426  * <dl>
 427  * <dt>standAlone (defaults to false)</dt>
 428  * <dd>true, if the subscriber should be notified even if a "gesturemovestart" or "gesturemove" has not occured on the same node.</dd>
 429  * <dt>root (defaults to document)</dt>
 430  * <dd>The node to which the internal DOM listeners should be attached.</dd>
 431  * <dt>preventDefault (defaults to false)</dt>
 432  * <dd>Can be set to true/false to prevent default behavior as soon as the touchend or mouseup is received. As with gesturemovestart, can also be set to function which returns true/false based on the event facade passed to it.</dd>
 433  * </dl>
 434  *
 435  * @return {EventHandle} the detach handle
 436  */
 437 define(GESTURE_MOVE_END, {
 438
 439     on : function (node, subscriber, ce) {
 440
 441         var root = _getRoot(node, subscriber),
 442
 443             endHandle = root.on(EVENT[END],
 444                 this._onEnd,
 445                 this,
 446                 node,
 447                 subscriber,
 448                 ce);
 449
 450         subscriber[_MOVE_END_HANDLE] = endHandle;
 451     },
 452
 453     delegate : function(node, subscriber, ce, filter) {
 454
 455         var se = this;
 456
 457         subscriber[_DEL_MOVE_END_HANDLE] = node.delegate(EVENT[END],
 458             function(e) {
 459                 se._onEnd(e, node, subscriber, ce, true);
 460             },
 461             filter);
 462     },
 463
 464     detachDelegate : function(node, subscriber, ce, filter) {
 465         var handle = subscriber[_DEL_MOVE_END_HANDLE];
 466
 467         if (handle) {
 468             handle.detach();
 469             subscriber[_DEL_MOVE_END_HANDLE] = null;
 470         }
 471
 472     },
 473
 474     detach : function (node, subscriber, ce) {
 475         var endHandle = subscriber[_MOVE_END_HANDLE];
 476
 477         if (endHandle) {
 478             endHandle.detach();
 479             subscriber[_MOVE_END_HANDLE] = null;
 480         }
 481     },
 482
 483     processArgs : function(args, delegate) {
 484         return _defArgsProcessor(this, args, delegate);
 485     },
 486
 487     _onEnd : function(e, node, subscriber, ce, delegate) {
 488
 489         if (delegate) {
 490             node = e[CURRENT_TARGET];
 491         }
 492
 493         var fireMoveEnd = subscriber._extra.standAlone || node.getData(_MOVE) || node.getData(_MOVE_START),
 494             preventDefault = subscriber._extra.preventDefault;
 495
 496         if (fireMoveEnd) {
 497
 498             if (e.changedTouches) {
 499                 if (e.changedTouches.length === 1) {
 500                     _normTouchFacade(e, e.changedTouches[0]);
 501                 } else {
 502                     fireMoveEnd = false;
 503                 }
 504             }
 505
 506             if (fireMoveEnd) {
 507
 508                 _prevent(e, preventDefault);
 509
 510                 e.type = GESTURE_MOVE_END;
 511                 ce.fire(e);
 512
 513                 node.clearData(_MOVE_START);
 514                 node.clearData(_MOVE);
 515             }
 516         }
 517     },
 518
 519     PREVENT_DEFAULT : false
 520 });
 521
 522
 523 }, '3.5.1' ,{requires:['node-base','event-touch','event-synthetic']});