f7ccb326453c72bc1fe5c3f4ca432c75aee43628001aeb16efadb037e486ec78e98bed25874c2c80149f88df6ef0a97e0aea1117a4071288babbb40fc5a89b 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. import {
  2. addClass,
  3. getScrollbarWidth,
  4. getScrollLeft,
  5. getWindowScrollTop,
  6. hasClass,
  7. outerWidth,
  8. innerHeight,
  9. removeClass,
  10. setOverlayPosition,
  11. resetCssTransform
  12. } from './../../../../helpers/dom/element';
  13. import Overlay from './_base';
  14. /**
  15. * @class LeftOverlay
  16. */
  17. class LeftOverlay extends Overlay {
  18. /**
  19. * @param {Walkontable} wotInstance
  20. */
  21. constructor(wotInstance) {
  22. super(wotInstance);
  23. this.clone = this.makeClone(Overlay.CLONE_LEFT);
  24. }
  25. /**
  26. * Checks if overlay should be fully rendered
  27. *
  28. * @returns {Boolean}
  29. */
  30. shouldBeRendered() {
  31. return !!(this.wot.getSetting('fixedColumnsLeft') || this.wot.getSetting('rowHeaders').length);
  32. }
  33. /**
  34. * Updates the left overlay position
  35. */
  36. resetFixedPosition() {
  37. if (!this.needFullRender || !this.wot.wtTable.holder.parentNode) {
  38. // removed from DOM
  39. return;
  40. }
  41. let overlayRoot = this.clone.wtTable.holder.parentNode;
  42. let headerPosition = 0;
  43. let preventOverflow = this.wot.getSetting('preventOverflow');
  44. if (this.trimmingContainer === window && (!preventOverflow || preventOverflow !== 'horizontal')) {
  45. let box = this.wot.wtTable.hider.getBoundingClientRect();
  46. let left = Math.ceil(box.left);
  47. let right = Math.ceil(box.right);
  48. let finalLeft;
  49. let finalTop;
  50. finalTop = this.wot.wtTable.hider.style.top;
  51. finalTop = finalTop === '' ? 0 : finalTop;
  52. if (left < 0 && (right - overlayRoot.offsetWidth) > 0) {
  53. finalLeft = -left;
  54. } else {
  55. finalLeft = 0;
  56. }
  57. headerPosition = finalLeft;
  58. finalLeft += 'px';
  59. setOverlayPosition(overlayRoot, finalLeft, finalTop);
  60. } else {
  61. headerPosition = this.getScrollPosition();
  62. resetCssTransform(overlayRoot);
  63. }
  64. this.adjustHeaderBordersPosition(headerPosition);
  65. this.adjustElementsSize();
  66. }
  67. /**
  68. * Sets the main overlay's horizontal scroll position
  69. *
  70. * @param {Number} pos
  71. */
  72. setScrollPosition(pos) {
  73. if (this.mainTableScrollableElement === window) {
  74. window.scrollTo(pos, getWindowScrollTop());
  75. } else {
  76. this.mainTableScrollableElement.scrollLeft = pos;
  77. }
  78. }
  79. /**
  80. * Triggers onScroll hook callback
  81. */
  82. onScroll() {
  83. this.wot.getSetting('onScrollVertically');
  84. }
  85. /**
  86. * Calculates total sum cells width
  87. *
  88. * @param {Number} from Column index which calculates started from
  89. * @param {Number} to Column index where calculation is finished
  90. * @returns {Number} Width sum
  91. */
  92. sumCellSizes(from, to) {
  93. let sum = 0;
  94. let defaultColumnWidth = this.wot.wtSettings.defaultColumnWidth;
  95. while (from < to) {
  96. sum += this.wot.wtTable.getStretchedColumnWidth(from) || defaultColumnWidth;
  97. from++;
  98. }
  99. return sum;
  100. }
  101. /**
  102. * Adjust overlay root element, childs and master table element sizes (width, height).
  103. *
  104. * @param {Boolean} [force=false]
  105. */
  106. adjustElementsSize(force = false) {
  107. this.updateTrimmingContainer();
  108. if (this.needFullRender || force) {
  109. this.adjustRootElementSize();
  110. this.adjustRootChildrenSize();
  111. if (!force) {
  112. this.areElementSizesAdjusted = true;
  113. }
  114. }
  115. }
  116. /**
  117. * Adjust overlay root element size (width and height).
  118. */
  119. adjustRootElementSize() {
  120. let masterHolder = this.wot.wtTable.holder;
  121. let scrollbarHeight = masterHolder.clientHeight === masterHolder.offsetHeight ? 0 : getScrollbarWidth();
  122. let overlayRoot = this.clone.wtTable.holder.parentNode;
  123. let overlayRootStyle = overlayRoot.style;
  124. let preventOverflow = this.wot.getSetting('preventOverflow');
  125. let tableWidth;
  126. if (this.trimmingContainer !== window || preventOverflow === 'vertical') {
  127. let height = this.wot.wtViewport.getWorkspaceHeight() - scrollbarHeight;
  128. height = Math.min(height, innerHeight(this.wot.wtTable.wtRootElement));
  129. overlayRootStyle.height = `${height}px`;
  130. } else {
  131. overlayRootStyle.height = '';
  132. }
  133. this.clone.wtTable.holder.style.height = overlayRootStyle.height;
  134. tableWidth = outerWidth(this.clone.wtTable.TABLE);
  135. overlayRootStyle.width = `${tableWidth === 0 ? tableWidth : tableWidth + 4}px`;
  136. }
  137. /**
  138. * Adjust overlay root childs size
  139. */
  140. adjustRootChildrenSize() {
  141. let scrollbarWidth = getScrollbarWidth();
  142. this.clone.wtTable.hider.style.height = this.hider.style.height;
  143. this.clone.wtTable.holder.style.height = this.clone.wtTable.holder.parentNode.style.height;
  144. if (scrollbarWidth === 0) {
  145. scrollbarWidth = 30;
  146. }
  147. this.clone.wtTable.holder.style.width = `${parseInt(this.clone.wtTable.holder.parentNode.style.width, 10) + scrollbarWidth}px`;
  148. }
  149. /**
  150. * Adjust the overlay dimensions and position
  151. */
  152. applyToDOM() {
  153. let total = this.wot.getSetting('totalColumns');
  154. if (!this.areElementSizesAdjusted) {
  155. this.adjustElementsSize();
  156. }
  157. if (typeof this.wot.wtViewport.columnsRenderCalculator.startPosition === 'number') {
  158. this.spreader.style.left = `${this.wot.wtViewport.columnsRenderCalculator.startPosition}px`;
  159. } else if (total === 0) {
  160. this.spreader.style.left = '0';
  161. } else {
  162. throw new Error('Incorrect value of the columnsRenderCalculator');
  163. }
  164. this.spreader.style.right = '';
  165. if (this.needFullRender) {
  166. this.syncOverlayOffset();
  167. }
  168. }
  169. /**
  170. * Synchronize calculated top position to an element
  171. */
  172. syncOverlayOffset() {
  173. if (typeof this.wot.wtViewport.rowsRenderCalculator.startPosition === 'number') {
  174. this.clone.wtTable.spreader.style.top = `${this.wot.wtViewport.rowsRenderCalculator.startPosition}px`;
  175. } else {
  176. this.clone.wtTable.spreader.style.top = '';
  177. }
  178. }
  179. /**
  180. * Scrolls horizontally to a column at the left edge of the viewport
  181. *
  182. * @param sourceCol {Number} Column index which you want to scroll to
  183. * @param [beyondRendered=false] {Boolean} if `true`, scrolls according to the bottom edge (top edge is by default)
  184. */
  185. scrollTo(sourceCol, beyondRendered) {
  186. let newX = this.getTableParentOffset();
  187. let sourceInstance = this.wot.cloneSource ? this.wot.cloneSource : this.wot;
  188. let mainHolder = sourceInstance.wtTable.holder;
  189. let scrollbarCompensation = 0;
  190. if (beyondRendered && mainHolder.offsetWidth !== mainHolder.clientWidth) {
  191. scrollbarCompensation = getScrollbarWidth();
  192. }
  193. if (beyondRendered) {
  194. newX += this.sumCellSizes(0, sourceCol + 1);
  195. newX -= this.wot.wtViewport.getViewportWidth();
  196. } else {
  197. newX += this.sumCellSizes(this.wot.getSetting('fixedColumnsLeft'), sourceCol);
  198. }
  199. newX += scrollbarCompensation;
  200. this.setScrollPosition(newX);
  201. }
  202. /**
  203. * Gets table parent left position
  204. *
  205. * @returns {Number}
  206. */
  207. getTableParentOffset() {
  208. let preventOverflow = this.wot.getSetting('preventOverflow');
  209. let offset = 0;
  210. if (!preventOverflow && this.trimmingContainer === window) {
  211. offset = this.wot.wtTable.holderOffset.left;
  212. }
  213. return offset;
  214. }
  215. /**
  216. * Gets the main overlay's horizontal scroll position
  217. *
  218. * @returns {Number} Main table's vertical scroll position
  219. */
  220. getScrollPosition() {
  221. return getScrollLeft(this.mainTableScrollableElement);
  222. }
  223. /**
  224. * Adds css classes to hide the header border's header (cell-selection border hiding issue)
  225. *
  226. * @param {Number} position Header X position if trimming container is window or scroll top if not
  227. */
  228. adjustHeaderBordersPosition(position) {
  229. const masterParent = this.wot.wtTable.holder.parentNode;
  230. const rowHeaders = this.wot.getSetting('rowHeaders');
  231. const fixedColumnsLeft = this.wot.getSetting('fixedColumnsLeft');
  232. const totalRows = this.wot.getSetting('totalRows');
  233. if (totalRows) {
  234. removeClass(masterParent, 'emptyRows');
  235. } else {
  236. addClass(masterParent, 'emptyRows');
  237. }
  238. if (fixedColumnsLeft && !rowHeaders.length) {
  239. addClass(masterParent, 'innerBorderLeft');
  240. } else if (!fixedColumnsLeft && rowHeaders.length) {
  241. let previousState = hasClass(masterParent, 'innerBorderLeft');
  242. if (position) {
  243. addClass(masterParent, 'innerBorderLeft');
  244. } else {
  245. removeClass(masterParent, 'innerBorderLeft');
  246. }
  247. if (!previousState && position || previousState && !position) {
  248. this.wot.wtOverlays.adjustElementsSize();
  249. }
  250. }
  251. }
  252. }
  253. Overlay.registerOverlay(Overlay.CLONE_LEFT, LeftOverlay);
  254. export default LeftOverlay;