Pinch.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. /* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
  2. * full list of contributors). Published under the Clear BSD license.
  3. * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
  4. * full text of the license. */
  5. /**
  6. * @requires OpenLayers/Handler.js
  7. */
  8. /**
  9. * Class: OpenLayers.Handler.Pinch
  10. * The pinch handler is used to deal with sequences of browser events related
  11. * to pinch gestures. The handler is used by controls that want to know
  12. * when a pinch sequence begins, when a pinch is happening, and when it has
  13. * finished.
  14. *
  15. * Controls that use the pinch handler typically construct it with callbacks
  16. * for 'start', 'move', and 'done'. Callbacks for these keys are
  17. * called when the pinch begins, with each change, and when the pinch is
  18. * done.
  19. *
  20. * Create a new pinch handler with the <OpenLayers.Handler.Pinch> constructor.
  21. *
  22. * Inherits from:
  23. * - <OpenLayers.Handler>
  24. */
  25. OpenLayers.Handler.Pinch = OpenLayers.Class(OpenLayers.Handler, {
  26. /**
  27. * Property: started
  28. * {Boolean} When a touchstart event is received, we want to record it,
  29. * but not set 'pinching' until the touchmove get started after
  30. * starting.
  31. */
  32. started: false,
  33. /**
  34. * Property: stopDown
  35. * {Boolean} Stop propagation of touchstart events from getting to
  36. * listeners on the same element. Default is false.
  37. */
  38. stopDown: false,
  39. /**
  40. * Property: pinching
  41. * {Boolean}
  42. */
  43. pinching: false,
  44. /**
  45. * Property: last
  46. * {Object} Object that store informations related to pinch last touch.
  47. */
  48. last: null,
  49. /**
  50. * Property: start
  51. * {Object} Object that store informations related to pinch touchstart.
  52. */
  53. start: null,
  54. /**
  55. * Constructor: OpenLayers.Handler.Pinch
  56. * Returns OpenLayers.Handler.Pinch
  57. *
  58. * Parameters:
  59. * control - {<OpenLayers.Control>} The control that is making use of
  60. * this handler. If a handler is being used without a control, the
  61. * handlers setMap method must be overridden to deal properly with
  62. * the map.
  63. * callbacks - {Object} An object containing functions to be called when
  64. * the pinch operation start, change, or is finished. The callbacks
  65. * should expect to receive an object argument, which contains
  66. * information about scale, distance, and position of touch points.
  67. * options - {Object}
  68. */
  69. initialize: function(control, callbacks, options) {
  70. OpenLayers.Handler.prototype.initialize.apply(this, arguments);
  71. },
  72. /**
  73. * Method: touchstart
  74. * Handle touchstart events
  75. *
  76. * Parameters:
  77. * evt - {Event}
  78. *
  79. * Returns:
  80. * {Boolean} Let the event propagate.
  81. */
  82. touchstart: function(evt) {
  83. var propagate = true;
  84. this.pinching = false;
  85. if (OpenLayers.Event.isMultiTouch(evt)) {
  86. this.started = true;
  87. this.last = this.start = {
  88. distance: this.getDistance(evt.touches),
  89. delta: 0,
  90. scale: 1
  91. };
  92. this.callback("start", [evt, this.start]);
  93. propagate = !this.stopDown;
  94. } else {
  95. this.started = false;
  96. this.start = null;
  97. this.last = null;
  98. }
  99. // prevent document dragging
  100. OpenLayers.Event.stop(evt);
  101. return propagate;
  102. },
  103. /**
  104. * Method: touchmove
  105. * Handle touchmove events
  106. *
  107. * Parameters:
  108. * evt - {Event}
  109. *
  110. * Returns:
  111. * {Boolean} Let the event propagate.
  112. */
  113. touchmove: function(evt) {
  114. if (this.started && OpenLayers.Event.isMultiTouch(evt)) {
  115. this.pinching = true;
  116. var current = this.getPinchData(evt);
  117. this.callback("move", [evt, current]);
  118. this.last = current;
  119. // prevent document dragging
  120. OpenLayers.Event.stop(evt);
  121. }
  122. return true;
  123. },
  124. /**
  125. * Method: touchend
  126. * Handle touchend events
  127. *
  128. * Parameters:
  129. * evt - {Event}
  130. *
  131. * Returns:
  132. * {Boolean} Let the event propagate.
  133. */
  134. touchend: function(evt) {
  135. if (this.started) {
  136. this.started = false;
  137. this.pinching = false;
  138. this.callback("done", [evt, this.start, this.last]);
  139. this.start = null;
  140. this.last = null;
  141. }
  142. return true;
  143. },
  144. /**
  145. * Method: activate
  146. * Activate the handler.
  147. *
  148. * Returns:
  149. * {Boolean} The handler was successfully activated.
  150. */
  151. activate: function() {
  152. var activated = false;
  153. if (OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
  154. this.pinching = false;
  155. activated = true;
  156. }
  157. return activated;
  158. },
  159. /**
  160. * Method: deactivate
  161. * Deactivate the handler.
  162. *
  163. * Returns:
  164. * {Boolean} The handler was successfully deactivated.
  165. */
  166. deactivate: function() {
  167. var deactivated = false;
  168. if (OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
  169. this.started = false;
  170. this.pinching = false;
  171. this.start = null;
  172. this.last = null;
  173. deactivated = true;
  174. }
  175. return deactivated;
  176. },
  177. /**
  178. * Method: getDistance
  179. * Get the distance in pixels between two touches.
  180. *
  181. * Parameters:
  182. * touches - {Array(Object)}
  183. *
  184. * Returns:
  185. * {Number} The distance in pixels.
  186. */
  187. getDistance: function(touches) {
  188. var t0 = touches[0];
  189. var t1 = touches[1];
  190. return Math.sqrt(
  191. Math.pow(t0.clientX - t1.clientX, 2) +
  192. Math.pow(t0.clientY - t1.clientY, 2)
  193. );
  194. },
  195. /**
  196. * Method: getPinchData
  197. * Get informations about the pinch event.
  198. *
  199. * Parameters:
  200. * evt - {Event}
  201. *
  202. * Returns:
  203. * {Object} Object that contains data about the current pinch.
  204. */
  205. getPinchData: function(evt) {
  206. var distance = this.getDistance(evt.touches);
  207. var scale = distance / this.start.distance;
  208. return {
  209. distance: distance,
  210. delta: this.last.distance - distance,
  211. scale: scale
  212. };
  213. },
  214. CLASS_NAME: "OpenLayers.Handler.Pinch"
  215. });