mousewheelhandler.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. // Copyright 2006 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview This event wrapper will dispatch an event when the user uses
  16. * the mouse wheel to scroll an element. You can get the direction by checking
  17. * the deltaX and deltaY properties of the event.
  18. *
  19. * This class aims to smooth out inconsistencies between browser platforms with
  20. * regards to mousewheel events, but we do not cover every possible
  21. * software/hardware combination out there, some of which occasionally produce
  22. * very large deltas in mousewheel events. If your application wants to guard
  23. * against extremely large deltas, use the setMaxDeltaX and setMaxDeltaY APIs
  24. * to set maximum values that make sense for your application.
  25. *
  26. * @author arv@google.com (Erik Arvidsson)
  27. * @see ../demos/mousewheelhandler.html
  28. */
  29. goog.provide('goog.events.MouseWheelEvent');
  30. goog.provide('goog.events.MouseWheelHandler');
  31. goog.provide('goog.events.MouseWheelHandler.EventType');
  32. goog.require('goog.dom');
  33. goog.require('goog.events');
  34. goog.require('goog.events.BrowserEvent');
  35. goog.require('goog.events.EventTarget');
  36. goog.require('goog.math');
  37. goog.require('goog.style');
  38. goog.require('goog.userAgent');
  39. /**
  40. * This event handler allows you to catch mouse wheel events in a consistent
  41. * manner.
  42. * @param {Element|Document} element The element to listen to the mouse wheel
  43. * event on.
  44. * @param {boolean=} opt_capture Whether to handle the mouse wheel event in
  45. * capture phase.
  46. * @constructor
  47. * @extends {goog.events.EventTarget}
  48. */
  49. goog.events.MouseWheelHandler = function(element, opt_capture) {
  50. goog.events.EventTarget.call(this);
  51. /**
  52. * This is the element that we will listen to the real mouse wheel events on.
  53. * @type {Element|Document}
  54. * @private
  55. */
  56. this.element_ = element;
  57. var rtlElement = goog.dom.isElement(this.element_) ?
  58. /** @type {Element} */ (this.element_) :
  59. (this.element_ ?
  60. /** @type {Document} */ (this.element_).body :
  61. null);
  62. /**
  63. * True if the element exists and is RTL, false otherwise.
  64. * @type {boolean}
  65. * @private
  66. */
  67. this.isRtl_ = !!rtlElement && goog.style.isRightToLeft(rtlElement);
  68. var type = goog.userAgent.GECKO ? 'DOMMouseScroll' : 'mousewheel';
  69. /**
  70. * The key returned from the goog.events.listen.
  71. * @type {goog.events.Key}
  72. * @private
  73. */
  74. this.listenKey_ = goog.events.listen(this.element_, type, this, opt_capture);
  75. };
  76. goog.inherits(goog.events.MouseWheelHandler, goog.events.EventTarget);
  77. /**
  78. * Enum type for the events fired by the mouse wheel handler.
  79. * @enum {string}
  80. */
  81. goog.events.MouseWheelHandler.EventType = {
  82. MOUSEWHEEL: 'mousewheel'
  83. };
  84. /**
  85. * Optional maximum magnitude for x delta on each mousewheel event.
  86. * @type {number|undefined}
  87. * @private
  88. */
  89. goog.events.MouseWheelHandler.prototype.maxDeltaX_;
  90. /**
  91. * Optional maximum magnitude for y delta on each mousewheel event.
  92. * @type {number|undefined}
  93. * @private
  94. */
  95. goog.events.MouseWheelHandler.prototype.maxDeltaY_;
  96. /**
  97. * @param {number} maxDeltaX Maximum magnitude for x delta on each mousewheel
  98. * event. Should be non-negative.
  99. */
  100. goog.events.MouseWheelHandler.prototype.setMaxDeltaX = function(maxDeltaX) {
  101. this.maxDeltaX_ = maxDeltaX;
  102. };
  103. /**
  104. * @param {number} maxDeltaY Maximum magnitude for y delta on each mousewheel
  105. * event. Should be non-negative.
  106. */
  107. goog.events.MouseWheelHandler.prototype.setMaxDeltaY = function(maxDeltaY) {
  108. this.maxDeltaY_ = maxDeltaY;
  109. };
  110. /**
  111. * Handles the events on the element.
  112. * @param {goog.events.BrowserEvent} e The underlying browser event.
  113. */
  114. goog.events.MouseWheelHandler.prototype.handleEvent = function(e) {
  115. var deltaX = 0;
  116. var deltaY = 0;
  117. var detail = 0;
  118. var be = e.getBrowserEvent();
  119. if (be.type == 'mousewheel') {
  120. // In IE we get a multiple of 120; we adjust to a multiple of 3 to
  121. // represent number of lines scrolled (like Gecko).
  122. // Newer versions of Webkit match IE behavior, and WebKit on
  123. // Windows also matches IE behavior.
  124. // See bug https://bugs.webkit.org/show_bug.cgi?id=24368
  125. var wheelDeltaScaleFactor = 40;
  126. detail = goog.events.MouseWheelHandler.smartScale_(
  127. -be.wheelDelta, wheelDeltaScaleFactor);
  128. if (goog.isDef(be.wheelDeltaX)) {
  129. // Webkit has two properties to indicate directional scroll, and
  130. // can scroll both directions at once.
  131. deltaX = goog.events.MouseWheelHandler.smartScale_(
  132. -be.wheelDeltaX, wheelDeltaScaleFactor);
  133. deltaY = goog.events.MouseWheelHandler.smartScale_(
  134. -be.wheelDeltaY, wheelDeltaScaleFactor);
  135. } else {
  136. deltaY = detail;
  137. }
  138. // Historical note: Opera (pre 9.5) used to negate the detail value.
  139. } else { // Gecko
  140. // Gecko returns multiple of 3 (representing the number of lines scrolled)
  141. detail = be.detail;
  142. // Gecko sometimes returns really big values if the user changes settings to
  143. // scroll a whole page per scroll
  144. if (detail > 100) {
  145. detail = 3;
  146. } else if (detail < -100) {
  147. detail = -3;
  148. }
  149. // Firefox 3.1 adds an axis field to the event to indicate direction of
  150. // scroll. See https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
  151. if (goog.isDef(be.axis) && be.axis === be.HORIZONTAL_AXIS) {
  152. deltaX = detail;
  153. } else {
  154. deltaY = detail;
  155. }
  156. }
  157. if (goog.isNumber(this.maxDeltaX_)) {
  158. deltaX = goog.math.clamp(deltaX, -this.maxDeltaX_, this.maxDeltaX_);
  159. }
  160. if (goog.isNumber(this.maxDeltaY_)) {
  161. deltaY = goog.math.clamp(deltaY, -this.maxDeltaY_, this.maxDeltaY_);
  162. }
  163. // Don't clamp 'detail', since it could be ambiguous which axis it refers to
  164. // and because it's informally deprecated anyways.
  165. // For horizontal scrolling we need to flip the value for RTL grids.
  166. if (this.isRtl_) {
  167. deltaX = -deltaX;
  168. }
  169. var newEvent = new goog.events.MouseWheelEvent(detail, be, deltaX, deltaY);
  170. this.dispatchEvent(newEvent);
  171. };
  172. /**
  173. * Helper for scaling down a mousewheel delta by a scale factor, if appropriate.
  174. * @param {number} mouseWheelDelta Delta from a mouse wheel event. Expected to
  175. * be an integer.
  176. * @param {number} scaleFactor Factor to scale the delta down by. Expected to
  177. * be an integer.
  178. * @return {number} Scaled-down delta value, or the original delta if the
  179. * scaleFactor does not appear to be applicable.
  180. * @private
  181. */
  182. goog.events.MouseWheelHandler.smartScale_ = function(
  183. mouseWheelDelta, scaleFactor) {
  184. // The basic problem here is that in Webkit on Mac and Linux, we can get two
  185. // very different types of mousewheel events: from continuous devices
  186. // (touchpads, Mighty Mouse) or non-continuous devices (normal wheel mice).
  187. //
  188. // Non-continuous devices in Webkit get their wheel deltas scaled up to
  189. // behave like IE. Continuous devices return much smaller unscaled values
  190. // (which most of the time will not be cleanly divisible by the IE scale
  191. // factor), so we should not try to normalize them down.
  192. //
  193. // Detailed discussion:
  194. // https://bugs.webkit.org/show_bug.cgi?id=29601
  195. // http://trac.webkit.org/browser/trunk/WebKit/chromium/src/mac/WebInputEventFactory.mm#L1063
  196. if (goog.userAgent.WEBKIT && (goog.userAgent.MAC || goog.userAgent.LINUX) &&
  197. (mouseWheelDelta % scaleFactor) != 0) {
  198. return mouseWheelDelta;
  199. } else {
  200. return mouseWheelDelta / scaleFactor;
  201. }
  202. };
  203. /** @override */
  204. goog.events.MouseWheelHandler.prototype.disposeInternal = function() {
  205. goog.events.MouseWheelHandler.superClass_.disposeInternal.call(this);
  206. goog.events.unlistenByKey(this.listenKey_);
  207. this.listenKey_ = null;
  208. };
  209. /**
  210. * A base class for mouse wheel events. This is used with the
  211. * MouseWheelHandler.
  212. *
  213. * @param {number} detail The number of rows the user scrolled.
  214. * @param {Event} browserEvent Browser event object.
  215. * @param {number} deltaX The number of rows the user scrolled in the X
  216. * direction.
  217. * @param {number} deltaY The number of rows the user scrolled in the Y
  218. * direction.
  219. * @constructor
  220. * @extends {goog.events.BrowserEvent}
  221. * @final
  222. */
  223. goog.events.MouseWheelEvent = function(detail, browserEvent, deltaX, deltaY) {
  224. goog.events.BrowserEvent.call(this, browserEvent);
  225. this.type = goog.events.MouseWheelHandler.EventType.MOUSEWHEEL;
  226. /**
  227. * The number of lines the user scrolled
  228. * @type {number}
  229. * NOTE: Informally deprecated. Use deltaX and deltaY instead, they provide
  230. * more information.
  231. */
  232. this.detail = detail;
  233. /**
  234. * The number of "lines" scrolled in the X direction.
  235. *
  236. * Note that not all browsers provide enough information to distinguish
  237. * horizontal and vertical scroll events, so for these unsupported browsers,
  238. * we will always have a deltaX of 0, even if the user scrolled their mouse
  239. * wheel or trackpad sideways.
  240. *
  241. * Currently supported browsers are Webkit and Firefox 3.1 or later.
  242. *
  243. * @type {number}
  244. */
  245. this.deltaX = deltaX;
  246. /**
  247. * The number of lines scrolled in the Y direction.
  248. * @type {number}
  249. */
  250. this.deltaY = deltaY;
  251. };
  252. goog.inherits(goog.events.MouseWheelEvent, goog.events.BrowserEvent);