Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

event-flick.js 8.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. /*
  2. Copyright (c) 2010, Yahoo! Inc. All rights reserved.
  3. Code licensed under the BSD License:
  4. http://developer.yahoo.com/yui/license.html
  5. version: 3.4.0
  6. build: nightly
  7. */
  8. YUI.add('event-flick', function(Y) {
  9. /**
  10. * The gestures module provides gesture events such as "flick", which normalize user interactions
  11. * across touch and mouse or pointer based input devices. This layer can be used by application developers
  12. * to build input device agnostic components which behave the same in response to either touch or mouse based
  13. * interaction.
  14. *
  15. * <p>Documentation for events added by this module can be found in the event document for the <a href="YUI.html#events">YUI</a> global.</p>
  16. *
  17. * @module event-gestures
  18. */
  19. /**
  20. * Adds support for a "flick" event, which is fired at the end of a touch or mouse based flick gesture, and provides
  21. * velocity of the flick, along with distance and time information.
  22. *
  23. * @module event-gestures
  24. * @submodule event-flick
  25. */
  26. var EVENT = ("ontouchstart" in Y.config.win && !Y.UA.chrome) ? {
  27. start: "touchstart",
  28. end: "touchend",
  29. move: "touchmove"
  30. } : {
  31. start: "mousedown",
  32. end: "mouseup",
  33. move: "mousemove"
  34. },
  35. START = "start",
  36. END = "end",
  37. MOVE = "move",
  38. OWNER_DOCUMENT = "ownerDocument",
  39. MIN_VELOCITY = "minVelocity",
  40. MIN_DISTANCE = "minDistance",
  41. PREVENT_DEFAULT = "preventDefault",
  42. _FLICK_START = "_fs",
  43. _FLICK_START_HANDLE = "_fsh",
  44. _FLICK_END_HANDLE = "_feh",
  45. _FLICK_MOVE_HANDLE = "_fmh",
  46. NODE_TYPE = "nodeType";
  47. /**
  48. * Sets up a "flick" event, that is fired whenever the user initiates a flick gesture on the node
  49. * where the listener is attached. The subscriber can specify a minimum distance or velocity for
  50. * which the event is to be fired. The subscriber can also specify if there is a particular axis which
  51. * they are interested in - "x" or "y". If no axis is specified, the axis along which there was most distance
  52. * covered is used.
  53. *
  54. * <p>It is recommended that you use Y.bind to set up context and additional arguments for your event handler,
  55. * however if you want to pass the context and arguments as additional signature arguments to "on",
  56. * 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>
  57. *
  58. * @event flick
  59. * @for YUI
  60. * @param type {string} "flick"
  61. * @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.
  62. * @param cfg {Object} Optional. An object which specifies any of the following:
  63. * <dl>
  64. * <dt>minDistance (in pixels, defaults to 10)</dt>
  65. * <dd>The minimum distance between start and end points, which would qualify the gesture as a flick.</dd>
  66. * <dt>minVelocity (in pixels/ms, defaults to 0)</dt>
  67. * <dd>The minimum velocity which would qualify the gesture as a flick.</dd>
  68. * <dt>preventDefault (defaults to false)</dt>
  69. * <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
  70. * prevented. This property can also be set to a function, which returns true or false, based on the event facade passed to it.</dd>
  71. * <dt>axis (no default)</dt>
  72. * <dd>Can be set to "x" or "y" if you want to constrain the flick velocity and distance to a single axis. If not
  73. * defined, the axis along which the maximum distance was covered is used.</dd>
  74. * </dl>
  75. * @return {EventHandle} the detach handle
  76. */
  77. Y.Event.define('flick', {
  78. on: function (node, subscriber, ce) {
  79. var startHandle = node.on(EVENT[START],
  80. this._onStart,
  81. this,
  82. node,
  83. subscriber,
  84. ce);
  85. subscriber[_FLICK_START_HANDLE] = startHandle;
  86. },
  87. detach: function (node, subscriber, ce) {
  88. var startHandle = subscriber[_FLICK_START_HANDLE],
  89. endHandle = subscriber[_FLICK_END_HANDLE];
  90. if (startHandle) {
  91. startHandle.detach();
  92. subscriber[_FLICK_START_HANDLE] = null;
  93. }
  94. if (endHandle) {
  95. endHandle.detach();
  96. subscriber[_FLICK_END_HANDLE] = null;
  97. }
  98. },
  99. processArgs: function(args) {
  100. var params = (args.length > 3) ? Y.merge(args.splice(3, 1)[0]) : {};
  101. if (!(MIN_VELOCITY in params)) {
  102. params[MIN_VELOCITY] = this.MIN_VELOCITY;
  103. }
  104. if (!(MIN_DISTANCE in params)) {
  105. params[MIN_DISTANCE] = this.MIN_DISTANCE;
  106. }
  107. if (!(PREVENT_DEFAULT in params)) {
  108. params[PREVENT_DEFAULT] = this.PREVENT_DEFAULT;
  109. }
  110. return params;
  111. },
  112. _onStart: function(e, node, subscriber, ce) {
  113. var start = true, // always true for mouse
  114. endHandle,
  115. moveHandle,
  116. doc,
  117. preventDefault = subscriber._extra.preventDefault,
  118. origE = e;
  119. if (e.touches) {
  120. start = (e.touches.length === 1);
  121. e = e.touches[0];
  122. }
  123. if (start) {
  124. if (preventDefault) {
  125. // preventDefault is a boolean or function
  126. if (!preventDefault.call || preventDefault(e)) {
  127. origE.preventDefault();
  128. }
  129. }
  130. e.flick = {
  131. time : new Date().getTime()
  132. };
  133. subscriber[_FLICK_START] = e;
  134. endHandle = subscriber[_FLICK_END_HANDLE];
  135. doc = (node.get(NODE_TYPE) === 9) ? node : node.get(OWNER_DOCUMENT);
  136. if (!endHandle) {
  137. endHandle = doc.on(EVENT[END], Y.bind(this._onEnd, this), null, node, subscriber, ce);
  138. subscriber[_FLICK_END_HANDLE] = endHandle;
  139. }
  140. subscriber[_FLICK_MOVE_HANDLE] = doc.once(EVENT[MOVE], Y.bind(this._onMove, this), null, node, subscriber, ce);
  141. }
  142. },
  143. _onMove: function(e, node, subscriber, ce) {
  144. var start = subscriber[_FLICK_START];
  145. // Start timing from first move.
  146. if (start && start.flick) {
  147. start.flick.time = new Date().getTime();
  148. }
  149. },
  150. _onEnd: function(e, node, subscriber, ce) {
  151. var endTime = new Date().getTime(),
  152. start = subscriber[_FLICK_START],
  153. valid = !!start,
  154. endEvent = e,
  155. startTime,
  156. time,
  157. preventDefault,
  158. params,
  159. xyDistance,
  160. distance,
  161. velocity,
  162. axis,
  163. moveHandle = subscriber[_FLICK_MOVE_HANDLE];
  164. if (moveHandle) {
  165. moveHandle.detach();
  166. delete subscriber[_FLICK_MOVE_HANDLE];
  167. }
  168. if (valid) {
  169. if (e.changedTouches) {
  170. if (e.changedTouches.length === 1 && e.touches.length === 0) {
  171. endEvent = e.changedTouches[0];
  172. } else {
  173. valid = false;
  174. }
  175. }
  176. if (valid) {
  177. params = subscriber._extra;
  178. preventDefault = params[PREVENT_DEFAULT];
  179. if (preventDefault) {
  180. // preventDefault is a boolean or function
  181. if (!preventDefault.call || preventDefault(e)) {
  182. e.preventDefault();
  183. }
  184. }
  185. startTime = start.flick.time;
  186. endTime = new Date().getTime();
  187. time = endTime - startTime;
  188. xyDistance = [
  189. endEvent.pageX - start.pageX,
  190. endEvent.pageY - start.pageY
  191. ];
  192. if (params.axis) {
  193. axis = params.axis;
  194. } else {
  195. axis = (Math.abs(xyDistance[0]) >= Math.abs(xyDistance[1])) ? 'x' : 'y';
  196. }
  197. distance = xyDistance[(axis === 'x') ? 0 : 1];
  198. velocity = (time !== 0) ? distance/time : 0;
  199. if (isFinite(velocity) && (Math.abs(distance) >= params[MIN_DISTANCE]) && (Math.abs(velocity) >= params[MIN_VELOCITY])) {
  200. e.type = "flick";
  201. e.flick = {
  202. time:time,
  203. distance: distance,
  204. velocity:velocity,
  205. axis: axis,
  206. start : start
  207. };
  208. ce.fire(e);
  209. }
  210. subscriber[_FLICK_START] = null;
  211. }
  212. }
  213. },
  214. MIN_VELOCITY : 0,
  215. MIN_DISTANCE : 0,
  216. PREVENT_DEFAULT : false
  217. });
  218. }, '3.4.0' ,{requires:['node-base','event-touch','event-synthetic']});