wheelhandler.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. // Copyright 2014 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 wheel on an element. The event provides details of the unit type (pixel /
  17. * line / page) and deltas in those units in up to 3 dimensions. Additionally,
  18. * simplified pixel deltas are provided for code that doesn't need to handle the
  19. * different units differently. This is not to be confused with the scroll
  20. * event, where an element in the dom can report that it was scrolled.
  21. *
  22. * This class aims to smooth out inconsistencies between browser platforms with
  23. * regards to wheel events, but we do not cover every possible software/hardware
  24. * combination out there, some of which occasionally produce very large deltas
  25. * in wheel events, especially when the device supports acceleration.
  26. *
  27. * Relevant standard:
  28. * http://www.w3.org/TR/2014/WD-DOM-Level-3-Events-20140925/#interface-WheelEvent
  29. *
  30. * Clients of this code should be aware that some input devices only fire a few
  31. * discrete events (such as a mouse wheel without acceleration) whereas some can
  32. * generate a large number of events for a single interaction (such as a
  33. * touchpad with acceleration). There is no signal in the events to reliably
  34. * distinguish between these.
  35. *
  36. * @author arv@google.com (Erik Arvidsson)
  37. * @see ../demos/wheelhandler.html
  38. */
  39. goog.provide('goog.events.WheelHandler');
  40. goog.require('goog.dom');
  41. goog.require('goog.events');
  42. goog.require('goog.events.EventTarget');
  43. goog.require('goog.events.WheelEvent');
  44. goog.require('goog.style');
  45. goog.require('goog.userAgent');
  46. goog.require('goog.userAgent.product');
  47. goog.require('goog.userAgent.product.isVersion');
  48. /**
  49. * This event handler allows you to catch wheel events in a consistent manner.
  50. * @param {!Element|!Document} element The element to listen to the wheel event
  51. * on.
  52. * @param {boolean=} opt_capture Whether to handle the wheel event in capture
  53. * phase.
  54. * @constructor
  55. * @extends {goog.events.EventTarget}
  56. */
  57. goog.events.WheelHandler = function(element, opt_capture) {
  58. goog.events.WheelHandler.base(this, 'constructor');
  59. /**
  60. * This is the element that we will listen to the real wheel events on.
  61. * @private {!Element|!Document}
  62. */
  63. this.element_ = element;
  64. var rtlElement = goog.dom.isElement(this.element_) ?
  65. /** @type {!Element} */ (this.element_) :
  66. /** @type {!Document} */ (this.element_).body;
  67. /**
  68. * True if the element exists and is RTL, false otherwise.
  69. * @private {boolean}
  70. */
  71. this.isRtl_ = !!rtlElement && goog.style.isRightToLeft(rtlElement);
  72. /**
  73. * The key returned from the goog.events.listen.
  74. * @private {goog.events.Key}
  75. */
  76. this.listenKey_ = goog.events.listen(
  77. this.element_, goog.events.WheelHandler.getDomEventType(), this,
  78. opt_capture);
  79. };
  80. goog.inherits(goog.events.WheelHandler, goog.events.EventTarget);
  81. /**
  82. * Returns the dom event type.
  83. * @return {string} The dom event type.
  84. */
  85. goog.events.WheelHandler.getDomEventType = function() {
  86. // Prefer to use wheel events whenever supported.
  87. if (goog.userAgent.GECKO && goog.userAgent.isVersionOrHigher(17) ||
  88. goog.userAgent.IE && goog.userAgent.isVersionOrHigher(9) ||
  89. goog.userAgent.product.CHROME && goog.userAgent.product.isVersion(31)) {
  90. return 'wheel';
  91. }
  92. // Legacy events. Still the best we have on Opera and Safari.
  93. return goog.userAgent.GECKO ? 'DOMMouseScroll' : 'mousewheel';
  94. };
  95. /**
  96. * Handles the events on the element.
  97. * @param {!goog.events.BrowserEvent} e The underlying browser event.
  98. */
  99. goog.events.WheelHandler.prototype.handleEvent = function(e) {
  100. var deltaMode = goog.events.WheelEvent.DeltaMode.PIXEL;
  101. var deltaX = 0;
  102. var deltaY = 0;
  103. var deltaZ = 0;
  104. var be = e.getBrowserEvent();
  105. if (be.type == 'wheel') {
  106. deltaMode = be.deltaMode;
  107. deltaX = be.deltaX;
  108. deltaY = be.deltaY;
  109. deltaZ = be.deltaZ;
  110. } else if (be.type == 'mousewheel') {
  111. // Assume that these are still comparable to pixels. This may not be true
  112. // for all old browsers.
  113. if (goog.isDef(be.wheelDeltaX)) {
  114. deltaX = -be.wheelDeltaX;
  115. deltaY = -be.wheelDeltaY;
  116. } else {
  117. deltaY = -be.wheelDelta;
  118. }
  119. } else { // Historical Gecko
  120. // Gecko returns multiple of 3 (representing the number of lines)
  121. deltaMode = goog.events.WheelEvent.DeltaMode.LINE;
  122. // Firefox 3.1 adds an axis field to the event to indicate axis.
  123. if (goog.isDef(be.axis) && be.axis === be.HORIZONTAL_AXIS) {
  124. deltaX = be.detail;
  125. } else {
  126. deltaY = be.detail;
  127. }
  128. }
  129. // For horizontal deltas we need to flip the value for RTL grids.
  130. if (this.isRtl_) {
  131. deltaX = -deltaX;
  132. }
  133. var newEvent =
  134. new goog.events.WheelEvent(be, deltaMode, deltaX, deltaY, deltaZ);
  135. this.dispatchEvent(newEvent);
  136. };
  137. /** @override */
  138. goog.events.WheelHandler.prototype.disposeInternal = function() {
  139. goog.events.WheelHandler.superClass_.disposeInternal.call(this);
  140. goog.events.unlistenByKey(this.listenKey_);
  141. this.listenKey_ = null;
  142. };