8ed4a586a151ca0d10201d47ed473aed4219add4b4fa77fd60fb8a4551b48957dd3df3a1c7abd16b7710ab46c510ff977f2944062370c9632ddeaa90045e27 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. import {addClass, removeClass} from './../../helpers/dom/element';
  2. import {arrayEach} from './../../helpers/array';
  3. import BasePlugin from './../_base';
  4. import {registerPlugin} from './../../plugins';
  5. import {isTouchSupported} from './../../helpers/feature';
  6. /**
  7. * @private
  8. * @plugin TouchScroll
  9. * @class TouchScroll
  10. */
  11. class TouchScroll extends BasePlugin {
  12. constructor(hotInstance) {
  13. super(hotInstance);
  14. /**
  15. * Collection of scrollbars to update.
  16. *
  17. * @type {Array}
  18. */
  19. this.scrollbars = [];
  20. /**
  21. * Collection of overlays to update.
  22. *
  23. * @type {Array}
  24. */
  25. this.clones = [];
  26. /**
  27. * Flag which determines if collection of overlays should be refilled on every table render.
  28. *
  29. * @type {Boolean}
  30. * @default false
  31. */
  32. this.lockedCollection = false;
  33. /**
  34. * Flag which determines if walkontable should freeze overlays while scrolling.
  35. *
  36. * @type {Boolean}
  37. * @default false
  38. */
  39. this.freezeOverlays = false;
  40. }
  41. /**
  42. * Check if plugin is enabled.
  43. *
  44. * @returns {Boolean}
  45. */
  46. isEnabled() {
  47. return isTouchSupported();
  48. }
  49. /**
  50. * Enable the plugin.
  51. */
  52. enablePlugin() {
  53. if (this.enabled) {
  54. return;
  55. }
  56. this.addHook('afterRender', () => this.onAfterRender());
  57. this.registerEvents();
  58. super.enablePlugin();
  59. }
  60. /**
  61. * Updates the plugin to use the latest options you have specified.
  62. */
  63. updatePlugin() {
  64. this.lockedCollection = false;
  65. super.updatePlugin();
  66. }
  67. /**
  68. * Disable plugin for this Handsontable instance.
  69. */
  70. disablePlugin() {
  71. super.disablePlugin();
  72. }
  73. /**
  74. * Register all necessary events.
  75. *
  76. * @private
  77. */
  78. registerEvents() {
  79. this.addHook('beforeTouchScroll', () => this.onBeforeTouchScroll());
  80. this.addHook('afterMomentumScroll', () => this.onAfterMomentumScroll());
  81. }
  82. /**
  83. * After render listener.
  84. *
  85. * @private
  86. */
  87. onAfterRender() {
  88. if (this.lockedCollection) {
  89. return;
  90. }
  91. const {topOverlay, bottomOverlay, leftOverlay, topLeftCornerOverlay, bottomLeftCornerOverlay} = this.hot.view.wt.wtOverlays;
  92. this.lockedCollection = true;
  93. this.scrollbars.length = 0;
  94. this.scrollbars.push(topOverlay);
  95. if (bottomOverlay.clone) {
  96. this.scrollbars.push(bottomOverlay);
  97. }
  98. this.scrollbars.push(leftOverlay);
  99. if (topLeftCornerOverlay) {
  100. this.scrollbars.push(topLeftCornerOverlay);
  101. }
  102. if (bottomLeftCornerOverlay && bottomLeftCornerOverlay.clone) {
  103. this.scrollbars.push(bottomLeftCornerOverlay);
  104. }
  105. this.clones.length = 0;
  106. if (topOverlay.needFullRender) {
  107. this.clones.push(topOverlay.clone.wtTable.holder.parentNode);
  108. }
  109. if (bottomOverlay.needFullRender) {
  110. this.clones.push(bottomOverlay.clone.wtTable.holder.parentNode);
  111. }
  112. if (leftOverlay.needFullRender) {
  113. this.clones.push(leftOverlay.clone.wtTable.holder.parentNode);
  114. }
  115. if (topLeftCornerOverlay) {
  116. this.clones.push(topLeftCornerOverlay.clone.wtTable.holder.parentNode);
  117. }
  118. if (bottomLeftCornerOverlay && bottomLeftCornerOverlay.clone) {
  119. this.clones.push(bottomLeftCornerOverlay.clone.wtTable.holder.parentNode);
  120. }
  121. }
  122. /**
  123. * Touch scroll listener.
  124. *
  125. * @private
  126. */
  127. onBeforeTouchScroll() {
  128. this.freezeOverlays = true;
  129. arrayEach(this.clones, (clone) => {
  130. addClass(clone, 'hide-tween');
  131. });
  132. }
  133. /**
  134. * After momentum scroll listener.
  135. *
  136. * @private
  137. */
  138. onAfterMomentumScroll() {
  139. this.freezeOverlays = false;
  140. arrayEach(this.clones, (clone) => {
  141. removeClass(clone, 'hide-tween');
  142. addClass(clone, 'show-tween');
  143. });
  144. setTimeout(() => {
  145. arrayEach(this.clones, (clone) => {
  146. removeClass(clone, 'show-tween');
  147. });
  148. }, 400);
  149. arrayEach(this.scrollbars, (scrollbar) => {
  150. scrollbar.refresh();
  151. scrollbar.resetFixedPosition();
  152. });
  153. this.hot.view.wt.wtOverlays.syncScrollWithMaster();
  154. }
  155. }
  156. registerPlugin('touchScroll', TouchScroll);
  157. export default TouchScroll;