MSPointer.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /**
  2. * (c) 2010-2019 Torstein Honsi
  3. *
  4. * License: www.highcharts.com/license
  5. */
  6. 'use strict';
  7. import H from './Globals.js';
  8. import './Utilities.js';
  9. import './Pointer.js';
  10. var addEvent = H.addEvent,
  11. charts = H.charts,
  12. css = H.css,
  13. doc = H.doc,
  14. extend = H.extend,
  15. hasTouch = H.hasTouch,
  16. noop = H.noop,
  17. Pointer = H.Pointer,
  18. removeEvent = H.removeEvent,
  19. win = H.win,
  20. wrap = H.wrap;
  21. if (!hasTouch && (win.PointerEvent || win.MSPointerEvent)) {
  22. // The touches object keeps track of the points being touched at all times
  23. var touches = {},
  24. hasPointerEvent = !!win.PointerEvent,
  25. getWebkitTouches = function () {
  26. var fake = [];
  27. fake.item = function (i) {
  28. return this[i];
  29. };
  30. H.objectEach(touches, function (touch) {
  31. fake.push({
  32. pageX: touch.pageX,
  33. pageY: touch.pageY,
  34. target: touch.target
  35. });
  36. });
  37. return fake;
  38. },
  39. translateMSPointer = function (e, method, wktype, func) {
  40. var p;
  41. if (
  42. (
  43. e.pointerType === 'touch' ||
  44. e.pointerType === e.MSPOINTER_TYPE_TOUCH
  45. ) && charts[H.hoverChartIndex]
  46. ) {
  47. func(e);
  48. p = charts[H.hoverChartIndex].pointer;
  49. p[method]({
  50. type: wktype,
  51. target: e.currentTarget,
  52. preventDefault: noop,
  53. touches: getWebkitTouches()
  54. });
  55. }
  56. };
  57. // Extend the Pointer prototype with methods for each event handler and more
  58. extend(Pointer.prototype, /** @lends Pointer.prototype */ {
  59. /**
  60. * @private
  61. * @function Highcharts.Pointer#onContainerPointerDown
  62. *
  63. * @param {Highcharts.PointerEventObject} e
  64. */
  65. onContainerPointerDown: function (e) {
  66. translateMSPointer(
  67. e,
  68. 'onContainerTouchStart',
  69. 'touchstart',
  70. function (e) {
  71. touches[e.pointerId] = {
  72. pageX: e.pageX,
  73. pageY: e.pageY,
  74. target: e.currentTarget
  75. };
  76. }
  77. );
  78. },
  79. /**
  80. * @private
  81. * @function Highcharts.Pointer#onContainerPointerMove
  82. *
  83. * @param {Highcharts.PointerEventObject} e
  84. */
  85. onContainerPointerMove: function (e) {
  86. translateMSPointer(
  87. e,
  88. 'onContainerTouchMove',
  89. 'touchmove',
  90. function (e) {
  91. touches[e.pointerId] = { pageX: e.pageX, pageY: e.pageY };
  92. if (!touches[e.pointerId].target) {
  93. touches[e.pointerId].target = e.currentTarget;
  94. }
  95. }
  96. );
  97. },
  98. /**
  99. * @private
  100. * @function Highcharts.Pointer#onDocumentPointerUp
  101. *
  102. * @param {Highcharts.PointerEventObject} e
  103. */
  104. onDocumentPointerUp: function (e) {
  105. translateMSPointer(
  106. e,
  107. 'onDocumentTouchEnd',
  108. 'touchend',
  109. function (e) {
  110. delete touches[e.pointerId];
  111. }
  112. );
  113. },
  114. /**
  115. * Add or remove the MS Pointer specific events
  116. *
  117. * @private
  118. * @function Highcharts.Pointer#batchMSEvents
  119. *
  120. * @param {Function} fn
  121. */
  122. batchMSEvents: function (fn) {
  123. fn(
  124. this.chart.container,
  125. hasPointerEvent ? 'pointerdown' : 'MSPointerDown',
  126. this.onContainerPointerDown
  127. );
  128. fn(
  129. this.chart.container,
  130. hasPointerEvent ? 'pointermove' : 'MSPointerMove',
  131. this.onContainerPointerMove
  132. );
  133. fn(
  134. doc,
  135. hasPointerEvent ? 'pointerup' : 'MSPointerUp',
  136. this.onDocumentPointerUp
  137. );
  138. }
  139. });
  140. // Disable default IE actions for pinch and such on chart element
  141. wrap(Pointer.prototype, 'init', function (proceed, chart, options) {
  142. proceed.call(this, chart, options);
  143. if (this.hasZoom) { // #4014
  144. css(chart.container, {
  145. '-ms-touch-action': 'none',
  146. 'touch-action': 'none'
  147. });
  148. }
  149. });
  150. // Add IE specific touch events to chart
  151. wrap(Pointer.prototype, 'setDOMEvents', function (proceed) {
  152. proceed.apply(this);
  153. if (this.hasZoom || this.followTouchMove) {
  154. this.batchMSEvents(addEvent);
  155. }
  156. });
  157. // Destroy MS events also
  158. wrap(Pointer.prototype, 'destroy', function (proceed) {
  159. this.batchMSEvents(removeEvent);
  160. proceed.call(this);
  161. });
  162. }