MouseWheel.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  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.MouseWheel
  10. * Handler for wheel up/down events.
  11. *
  12. * Inherits from:
  13. * - <OpenLayers.Handler>
  14. */
  15. OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
  16. /**
  17. * Property: wheelListener
  18. * {function}
  19. */
  20. wheelListener: null,
  21. /**
  22. * Property: mousePosition
  23. * {<OpenLayers.Pixel>} mousePosition is necessary because
  24. * evt.clientX/Y is buggy in Moz on wheel events, so we cache and use the
  25. * value from the last mousemove.
  26. */
  27. mousePosition: null,
  28. /**
  29. * Property: interval
  30. * {Integer} In order to increase server performance, an interval (in
  31. * milliseconds) can be set to reduce the number of up/down events
  32. * called. If set, a new up/down event will not be set until the
  33. * interval has passed.
  34. * Defaults to 0, meaning no interval.
  35. */
  36. interval: 0,
  37. /**
  38. * Property: delta
  39. * {Integer} When interval is set, delta collects the mousewheel z-deltas
  40. * of the events that occur within the interval.
  41. * See also the cumulative option
  42. */
  43. delta: 0,
  44. /**
  45. * Property: cumulative
  46. * {Boolean} When interval is set: true to collect all the mousewheel
  47. * z-deltas, false to only record the delta direction (positive or
  48. * negative)
  49. */
  50. cumulative: true,
  51. /**
  52. * Constructor: OpenLayers.Handler.MouseWheel
  53. *
  54. * Parameters:
  55. * control - {<OpenLayers.Control>}
  56. * callbacks - {Object} An object containing a single function to be
  57. * called when the drag operation is finished.
  58. * The callback should expect to recieve a single
  59. * argument, the point geometry.
  60. * options - {Object}
  61. */
  62. initialize: function(control, callbacks, options) {
  63. OpenLayers.Handler.prototype.initialize.apply(this, arguments);
  64. this.wheelListener = OpenLayers.Function.bindAsEventListener(
  65. this.onWheelEvent, this
  66. );
  67. },
  68. /**
  69. * Method: destroy
  70. */
  71. destroy: function() {
  72. OpenLayers.Handler.prototype.destroy.apply(this, arguments);
  73. this.wheelListener = null;
  74. },
  75. /**
  76. * Mouse ScrollWheel code thanks to http://adomas.org/javascript-mouse-wheel/
  77. */
  78. /**
  79. * Method: onWheelEvent
  80. * Catch the wheel event and handle it xbrowserly
  81. *
  82. * Parameters:
  83. * e - {Event}
  84. */
  85. onWheelEvent: function(e){
  86. // make sure we have a map and check keyboard modifiers
  87. if (!this.map || !this.checkModifiers(e)) {
  88. return;
  89. }
  90. // Ride up the element's DOM hierarchy to determine if it or any of
  91. // its ancestors was:
  92. // * specifically marked as scrollable
  93. // * one of our layer divs
  94. // * the map div
  95. //
  96. var overScrollableDiv = false;
  97. var overLayerDiv = false;
  98. var overMapDiv = false;
  99. var elem = OpenLayers.Event.element(e);
  100. while((elem != null) && !overMapDiv && !overScrollableDiv) {
  101. if (!overScrollableDiv) {
  102. try {
  103. if (elem.currentStyle) {
  104. overflow = elem.currentStyle["overflow"];
  105. } else {
  106. var style =
  107. document.defaultView.getComputedStyle(elem, null);
  108. var overflow = style.getPropertyValue("overflow");
  109. }
  110. overScrollableDiv = ( overflow &&
  111. (overflow == "auto") || (overflow == "scroll") );
  112. } catch(err) {
  113. //sometimes when scrolling in a popup, this causes
  114. // obscure browser error
  115. }
  116. }
  117. if (!overLayerDiv) {
  118. for(var i=0, len=this.map.layers.length; i<len; i++) {
  119. // Are we in the layer div? Note that we have two cases
  120. // here: one is to catch EventPane layers, which have a
  121. // pane above the layer (layer.pane)
  122. if (elem == this.map.layers[i].div
  123. || elem == this.map.layers[i].pane) {
  124. overLayerDiv = true;
  125. break;
  126. }
  127. }
  128. }
  129. overMapDiv = (elem == this.map.div);
  130. elem = elem.parentNode;
  131. }
  132. // Logic below is the following:
  133. //
  134. // If we are over a scrollable div or not over the map div:
  135. // * do nothing (let the browser handle scrolling)
  136. //
  137. // otherwise
  138. //
  139. // If we are over the layer div:
  140. // * zoom/in out
  141. // then
  142. // * kill event (so as not to also scroll the page after zooming)
  143. //
  144. // otherwise
  145. //
  146. // Kill the event (dont scroll the page if we wheel over the
  147. // layerswitcher or the pan/zoom control)
  148. //
  149. if (!overScrollableDiv && overMapDiv) {
  150. if (overLayerDiv) {
  151. var delta = 0;
  152. if (!e) {
  153. e = window.event;
  154. }
  155. if (e.wheelDelta) {
  156. delta = e.wheelDelta/120;
  157. if (window.opera && window.opera.version() < 9.2) {
  158. delta = -delta;
  159. }
  160. } else if (e.detail) {
  161. delta = -e.detail / 3;
  162. }
  163. this.delta = this.delta + delta;
  164. if(this.interval) {
  165. window.clearTimeout(this._timeoutId);
  166. this._timeoutId = window.setTimeout(
  167. OpenLayers.Function.bind(function(){
  168. this.wheelZoom(e);
  169. }, this),
  170. this.interval
  171. );
  172. } else {
  173. this.wheelZoom(e);
  174. }
  175. }
  176. OpenLayers.Event.stop(e);
  177. }
  178. },
  179. /**
  180. * Method: wheelZoom
  181. * Given the wheel event, we carry out the appropriate zooming in or out,
  182. * based on the 'wheelDelta' or 'detail' property of the event.
  183. *
  184. * Parameters:
  185. * e - {Event}
  186. */
  187. wheelZoom: function(e) {
  188. var delta = this.delta;
  189. this.delta = 0;
  190. if (delta) {
  191. // add the mouse position to the event because mozilla has
  192. // a bug with clientX and clientY (see
  193. // https://bugzilla.mozilla.org/show_bug.cgi?id=352179)
  194. // getLonLatFromViewPortPx(e) returns wrong values
  195. if (this.mousePosition) {
  196. e.xy = this.mousePosition;
  197. }
  198. if (!e.xy) {
  199. // If the mouse hasn't moved over the map yet, then
  200. // we don't have a mouse position (in FF), so we just
  201. // act as if the mouse was at the center of the map.
  202. // Note that we can tell we are in the map -- and
  203. // this.map is ensured to be true above.
  204. e.xy = this.map.getPixelFromLonLat(
  205. this.map.getCenter()
  206. );
  207. }
  208. if (delta < 0) {
  209. this.callback("down", [e, this.cumulative ? delta : -1]);
  210. } else {
  211. this.callback("up", [e, this.cumulative ? delta : 1]);
  212. }
  213. }
  214. },
  215. /**
  216. * Method: mousemove
  217. * Update the stored mousePosition on every move.
  218. *
  219. * Parameters:
  220. * evt - {Event} The browser event
  221. *
  222. * Returns:
  223. * {Boolean} Allow event propagation
  224. */
  225. mousemove: function (evt) {
  226. this.mousePosition = evt.xy;
  227. },
  228. /**
  229. * Method: activate
  230. */
  231. activate: function (evt) {
  232. if (OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
  233. //register mousewheel events specifically on the window and document
  234. var wheelListener = this.wheelListener;
  235. OpenLayers.Event.observe(window, "DOMMouseScroll", wheelListener);
  236. OpenLayers.Event.observe(window, "mousewheel", wheelListener);
  237. OpenLayers.Event.observe(document, "mousewheel", wheelListener);
  238. return true;
  239. } else {
  240. return false;
  241. }
  242. },
  243. /**
  244. * Method: deactivate
  245. */
  246. deactivate: function (evt) {
  247. if (OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
  248. // unregister mousewheel events specifically on the window and document
  249. var wheelListener = this.wheelListener;
  250. OpenLayers.Event.stopObserving(window, "DOMMouseScroll", wheelListener);
  251. OpenLayers.Event.stopObserving(window, "mousewheel", wheelListener);
  252. OpenLayers.Event.stopObserving(document, "mousewheel", wheelListener);
  253. return true;
  254. } else {
  255. return false;
  256. }
  257. },
  258. CLASS_NAME: "OpenLayers.Handler.MouseWheel"
  259. });