tableheader.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Drupal, displace) {
  8. function TableHeader(table) {
  9. var $table = $(table);
  10. this.$originalTable = $table;
  11. this.$originalHeader = $table.children('thead');
  12. this.$originalHeaderCells = this.$originalHeader.find('> tr > th');
  13. this.displayWeight = null;
  14. this.$originalTable.addClass('sticky-table');
  15. this.tableHeight = $table[0].clientHeight;
  16. this.tableOffset = this.$originalTable.offset();
  17. this.$originalTable.on('columnschange', { tableHeader: this }, function (e, display) {
  18. var tableHeader = e.data.tableHeader;
  19. if (tableHeader.displayWeight === null || tableHeader.displayWeight !== display) {
  20. tableHeader.recalculateSticky();
  21. }
  22. tableHeader.displayWeight = display;
  23. });
  24. this.createSticky();
  25. }
  26. function forTables(method, arg) {
  27. var tables = TableHeader.tables;
  28. var il = tables.length;
  29. for (var i = 0; i < il; i++) {
  30. tables[i][method](arg);
  31. }
  32. }
  33. function tableHeaderInitHandler(e) {
  34. var $tables = $(e.data.context).find('table.sticky-enabled').once('tableheader');
  35. var il = $tables.length;
  36. for (var i = 0; i < il; i++) {
  37. TableHeader.tables.push(new TableHeader($tables[i]));
  38. }
  39. forTables('onScroll');
  40. }
  41. Drupal.behaviors.tableHeader = {
  42. attach: function attach(context) {
  43. $(window).one('scroll.TableHeaderInit', { context: context }, tableHeaderInitHandler);
  44. }
  45. };
  46. function scrollValue(position) {
  47. return document.documentElement[position] || document.body[position];
  48. }
  49. function tableHeaderResizeHandler(e) {
  50. forTables('recalculateSticky');
  51. }
  52. function tableHeaderOnScrollHandler(e) {
  53. forTables('onScroll');
  54. }
  55. function tableHeaderOffsetChangeHandler(e, offsets) {
  56. forTables('stickyPosition', offsets.top);
  57. }
  58. $(window).on({
  59. 'resize.TableHeader': tableHeaderResizeHandler,
  60. 'scroll.TableHeader': tableHeaderOnScrollHandler
  61. });
  62. $(document).on({
  63. 'columnschange.TableHeader drupalToolbarTrayChange': tableHeaderResizeHandler,
  64. 'drupalViewportOffsetChange.TableHeader': tableHeaderOffsetChangeHandler
  65. });
  66. $.extend(TableHeader, {
  67. tables: []
  68. });
  69. $.extend(TableHeader.prototype, {
  70. minHeight: 100,
  71. tableOffset: null,
  72. tableHeight: null,
  73. stickyVisible: false,
  74. createSticky: function createSticky() {
  75. var $stickyHeader = this.$originalHeader.clone(true);
  76. this.$stickyTable = $('<table class="sticky-header"></table>').css({
  77. visibility: 'hidden',
  78. position: 'fixed',
  79. top: '0px'
  80. }).append($stickyHeader).insertBefore(this.$originalTable);
  81. this.$stickyHeaderCells = $stickyHeader.find('> tr > th');
  82. this.recalculateSticky();
  83. },
  84. stickyPosition: function stickyPosition(offsetTop, offsetLeft) {
  85. var css = {};
  86. if (typeof offsetTop === 'number') {
  87. css.top = offsetTop + 'px';
  88. }
  89. if (typeof offsetLeft === 'number') {
  90. css.left = this.tableOffset.left - offsetLeft + 'px';
  91. }
  92. return this.$stickyTable.css(css);
  93. },
  94. checkStickyVisible: function checkStickyVisible() {
  95. var scrollTop = scrollValue('scrollTop');
  96. var tableTop = this.tableOffset.top - displace.offsets.top;
  97. var tableBottom = tableTop + this.tableHeight;
  98. var visible = false;
  99. if (tableTop < scrollTop && scrollTop < tableBottom - this.minHeight) {
  100. visible = true;
  101. }
  102. this.stickyVisible = visible;
  103. return visible;
  104. },
  105. onScroll: function onScroll(e) {
  106. this.checkStickyVisible();
  107. this.stickyPosition(null, scrollValue('scrollLeft'));
  108. this.$stickyTable.css('visibility', this.stickyVisible ? 'visible' : 'hidden');
  109. },
  110. recalculateSticky: function recalculateSticky(event) {
  111. this.tableHeight = this.$originalTable[0].clientHeight;
  112. displace.offsets.top = displace.calculateOffset('top');
  113. this.tableOffset = this.$originalTable.offset();
  114. this.stickyPosition(displace.offsets.top, scrollValue('scrollLeft'));
  115. var $that = null;
  116. var $stickyCell = null;
  117. var display = null;
  118. var il = this.$originalHeaderCells.length;
  119. for (var i = 0; i < il; i++) {
  120. $that = $(this.$originalHeaderCells[i]);
  121. $stickyCell = this.$stickyHeaderCells.eq($that.index());
  122. display = $that.css('display');
  123. if (display !== 'none') {
  124. $stickyCell.css({ width: $that.css('width'), display: display });
  125. } else {
  126. $stickyCell.css('display', 'none');
  127. }
  128. }
  129. this.$stickyTable.css('width', this.$originalTable.outerWidth());
  130. }
  131. });
  132. Drupal.TableHeader = TableHeader;
  133. })(jQuery, Drupal, window.Drupal.displace);