8709e7d6178eec7de4bb1337bb9ec8a9bb8a5b5d532421ca81419119f926c168797ec787ddf8e66c0790972fef6c2a9aadbaa8daae28afea2630cb18f240ea 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. import {
  2. addClass,
  3. getScrollbarWidth,
  4. getScrollTop,
  5. getWindowScrollLeft,
  6. hasClass,
  7. outerHeight,
  8. innerWidth,
  9. removeClass,
  10. setOverlayPosition,
  11. resetCssTransform
  12. } from './../../../../helpers/dom/element';
  13. import Overlay from './_base';
  14. /**
  15. * @class TopOverlay
  16. */
  17. class TopOverlay extends Overlay {
  18. /**
  19. * @param {Walkontable} wotInstance
  20. */
  21. constructor(wotInstance) {
  22. super(wotInstance);
  23. this.clone = this.makeClone(Overlay.CLONE_TOP);
  24. }
  25. /**
  26. * Checks if overlay should be fully rendered
  27. *
  28. * @returns {Boolean}
  29. */
  30. shouldBeRendered() {
  31. return !!(this.wot.getSetting('fixedRowsTop') || this.wot.getSetting('columnHeaders').length);
  32. }
  33. /**
  34. * Updates the top 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 !== 'vertical')) {
  45. let box = this.wot.wtTable.hider.getBoundingClientRect();
  46. let top = Math.ceil(box.top);
  47. let bottom = Math.ceil(box.bottom);
  48. let finalLeft;
  49. let finalTop;
  50. finalLeft = this.wot.wtTable.hider.style.left;
  51. finalLeft = finalLeft === '' ? 0 : finalLeft;
  52. if (top < 0 && (bottom - overlayRoot.offsetHeight) > 0) {
  53. finalTop = -top;
  54. } else {
  55. finalTop = 0;
  56. }
  57. headerPosition = finalTop;
  58. finalTop += '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 vertical scroll position
  69. *
  70. * @param {Number} pos
  71. */
  72. setScrollPosition(pos) {
  73. if (this.mainTableScrollableElement === window) {
  74. window.scrollTo(getWindowScrollLeft(), pos);
  75. } else {
  76. this.mainTableScrollableElement.scrollTop = pos;
  77. }
  78. }
  79. /**
  80. * Triggers onScroll hook callback
  81. */
  82. onScroll() {
  83. this.wot.getSetting('onScrollHorizontally');
  84. }
  85. /**
  86. * Calculates total sum cells height
  87. *
  88. * @param {Number} from Row index which calculates started from
  89. * @param {Number} to Row index where calculation is finished
  90. * @returns {Number} Height sum
  91. */
  92. sumCellSizes(from, to) {
  93. let sum = 0;
  94. let defaultRowHeight = this.wot.wtSettings.settings.defaultRowHeight;
  95. while (from < to) {
  96. let height = this.wot.wtTable.getRowHeight(from);
  97. sum += height === void 0 ? defaultRowHeight : height;
  98. from++;
  99. }
  100. return sum;
  101. }
  102. /**
  103. * Adjust overlay root element, childs and master table element sizes (width, height).
  104. *
  105. * @param {Boolean} [force=false]
  106. */
  107. adjustElementsSize(force = false) {
  108. this.updateTrimmingContainer();
  109. if (this.needFullRender || force) {
  110. this.adjustRootElementSize();
  111. this.adjustRootChildrenSize();
  112. if (!force) {
  113. this.areElementSizesAdjusted = true;
  114. }
  115. }
  116. }
  117. /**
  118. * Adjust overlay root element size (width and height).
  119. */
  120. adjustRootElementSize() {
  121. let masterHolder = this.wot.wtTable.holder;
  122. let scrollbarWidth = masterHolder.clientWidth === masterHolder.offsetWidth ? 0 : getScrollbarWidth();
  123. let overlayRoot = this.clone.wtTable.holder.parentNode;
  124. let overlayRootStyle = overlayRoot.style;
  125. let preventOverflow = this.wot.getSetting('preventOverflow');
  126. let tableHeight;
  127. if (this.trimmingContainer !== window || preventOverflow === 'horizontal') {
  128. let width = this.wot.wtViewport.getWorkspaceWidth() - scrollbarWidth;
  129. width = Math.min(width, innerWidth(this.wot.wtTable.wtRootElement));
  130. overlayRootStyle.width = `${width}px`;
  131. } else {
  132. overlayRootStyle.width = '';
  133. }
  134. this.clone.wtTable.holder.style.width = overlayRootStyle.width;
  135. tableHeight = outerHeight(this.clone.wtTable.TABLE);
  136. overlayRootStyle.height = `${tableHeight === 0 ? tableHeight : tableHeight + 4}px`;
  137. }
  138. /**
  139. * Adjust overlay root childs size
  140. */
  141. adjustRootChildrenSize() {
  142. let scrollbarWidth = getScrollbarWidth();
  143. this.clone.wtTable.hider.style.width = this.hider.style.width;
  144. this.clone.wtTable.holder.style.width = this.clone.wtTable.holder.parentNode.style.width;
  145. if (scrollbarWidth === 0) {
  146. scrollbarWidth = 30;
  147. }
  148. this.clone.wtTable.holder.style.height = `${parseInt(this.clone.wtTable.holder.parentNode.style.height, 10) + scrollbarWidth}px`;
  149. }
  150. /**
  151. * Adjust the overlay dimensions and position
  152. */
  153. applyToDOM() {
  154. let total = this.wot.getSetting('totalRows');
  155. if (!this.areElementSizesAdjusted) {
  156. this.adjustElementsSize();
  157. }
  158. if (typeof this.wot.wtViewport.rowsRenderCalculator.startPosition === 'number') {
  159. this.spreader.style.top = `${this.wot.wtViewport.rowsRenderCalculator.startPosition}px`;
  160. } else if (total === 0) {
  161. // can happen if there are 0 rows
  162. this.spreader.style.top = '0';
  163. } else {
  164. throw new Error('Incorrect value of the rowsRenderCalculator');
  165. }
  166. this.spreader.style.bottom = '';
  167. if (this.needFullRender) {
  168. this.syncOverlayOffset();
  169. }
  170. }
  171. /**
  172. * Synchronize calculated left position to an element
  173. */
  174. syncOverlayOffset() {
  175. if (typeof this.wot.wtViewport.columnsRenderCalculator.startPosition === 'number') {
  176. this.clone.wtTable.spreader.style.left = `${this.wot.wtViewport.columnsRenderCalculator.startPosition}px`;
  177. } else {
  178. this.clone.wtTable.spreader.style.left = '';
  179. }
  180. }
  181. /**
  182. * Scrolls vertically to a row
  183. *
  184. * @param sourceRow {Number} Row index which you want to scroll to
  185. * @param [bottomEdge=false] {Boolean} if `true`, scrolls according to the bottom edge (top edge is by default)
  186. */
  187. scrollTo(sourceRow, bottomEdge) {
  188. let newY = this.getTableParentOffset();
  189. let sourceInstance = this.wot.cloneSource ? this.wot.cloneSource : this.wot;
  190. let mainHolder = sourceInstance.wtTable.holder;
  191. let scrollbarCompensation = 0;
  192. if (bottomEdge && mainHolder.offsetHeight !== mainHolder.clientHeight) {
  193. scrollbarCompensation = getScrollbarWidth();
  194. }
  195. if (bottomEdge) {
  196. let fixedRowsBottom = this.wot.getSetting('fixedRowsBottom');
  197. let fixedRowsTop = this.wot.getSetting('fixedRowsTop');
  198. let totalRows = this.wot.getSetting('totalRows');
  199. newY += this.sumCellSizes(0, sourceRow + 1);
  200. newY -= this.wot.wtViewport.getViewportHeight() - this.sumCellSizes(totalRows - fixedRowsBottom, totalRows);
  201. // Fix 1 pixel offset when cell is selected
  202. newY += 1;
  203. } else {
  204. newY += this.sumCellSizes(this.wot.getSetting('fixedRowsTop'), sourceRow);
  205. }
  206. newY += scrollbarCompensation;
  207. this.setScrollPosition(newY);
  208. }
  209. /**
  210. * Gets table parent top position
  211. *
  212. * @returns {Number}
  213. */
  214. getTableParentOffset() {
  215. if (this.mainTableScrollableElement === window) {
  216. return this.wot.wtTable.holderOffset.top;
  217. }
  218. return 0;
  219. }
  220. /**
  221. * Gets the main overlay's vertical scroll position
  222. *
  223. * @returns {Number} Main table's vertical scroll position
  224. */
  225. getScrollPosition() {
  226. return getScrollTop(this.mainTableScrollableElement);
  227. }
  228. /**
  229. * Redraw borders of selection
  230. *
  231. * @param {WalkontableSelection} selection Selection for redraw
  232. */
  233. redrawSelectionBorders(selection) {
  234. if (selection && selection.cellRange) {
  235. const border = selection.getBorder(this.wot);
  236. if (border) {
  237. const corners = selection.getCorners();
  238. border.disappear();
  239. border.appear(corners);
  240. }
  241. }
  242. }
  243. /**
  244. * Redrawing borders of all selections
  245. */
  246. redrawAllSelectionsBorders() {
  247. const selections = this.wot.selections;
  248. this.redrawSelectionBorders(selections.current);
  249. this.redrawSelectionBorders(selections.area);
  250. this.redrawSelectionBorders(selections.fill);
  251. this.wot.wtTable.wot.wtOverlays.leftOverlay.refresh();
  252. }
  253. /**
  254. * Adds css classes to hide the header border's header (cell-selection border hiding issue)
  255. *
  256. * @param {Number} position Header Y position if trimming container is window or scroll top if not
  257. */
  258. adjustHeaderBordersPosition(position) {
  259. const masterParent = this.wot.wtTable.holder.parentNode;
  260. const totalColumns = this.wot.getSetting('totalColumns');
  261. if (totalColumns) {
  262. removeClass(masterParent, 'emptyColumns');
  263. } else {
  264. addClass(masterParent, 'emptyColumns');
  265. }
  266. if (this.wot.getSetting('fixedRowsTop') === 0 && this.wot.getSetting('columnHeaders').length > 0) {
  267. let previousState = hasClass(masterParent, 'innerBorderTop');
  268. if (position || this.wot.getSetting('totalRows') === 0) {
  269. addClass(masterParent, 'innerBorderTop');
  270. } else {
  271. removeClass(masterParent, 'innerBorderTop');
  272. }
  273. if (!previousState && position || previousState && !position) {
  274. this.wot.wtOverlays.adjustElementsSize();
  275. // cell borders should be positioned once again,
  276. // because we added / removed 1px border from table header
  277. this.redrawAllSelectionsBorders();
  278. }
  279. }
  280. // nasty workaround for double border in the header, TODO: find a pure-css solution
  281. if (this.wot.getSetting('rowHeaders').length === 0) {
  282. let secondHeaderCell = this.clone.wtTable.THEAD.querySelectorAll('th:nth-of-type(2)');
  283. if (secondHeaderCell) {
  284. for (let i = 0; i < secondHeaderCell.length; i++) {
  285. secondHeaderCell[i].style['border-left-width'] = 0;
  286. }
  287. }
  288. }
  289. }
  290. }
  291. Overlay.registerOverlay(Overlay.CLONE_TOP, TopOverlay);
  292. export default TopOverlay;