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. Drupal.behaviors.tableHeader = {
  9. attach: function attach(context) {
  10. $(window).one('scroll.TableHeaderInit', { context: context }, tableHeaderInitHandler);
  11. }
  12. };
  13. function scrollValue(position) {
  14. return document.documentElement[position] || document.body[position];
  15. }
  16. function tableHeaderInitHandler(e) {
  17. var $tables = $(e.data.context).find('table.sticky-enabled').once('tableheader');
  18. var il = $tables.length;
  19. for (var i = 0; i < il; i++) {
  20. TableHeader.tables.push(new TableHeader($tables[i]));
  21. }
  22. forTables('onScroll');
  23. }
  24. function forTables(method, arg) {
  25. var tables = TableHeader.tables;
  26. var il = tables.length;
  27. for (var i = 0; i < il; i++) {
  28. tables[i][method](arg);
  29. }
  30. }
  31. function tableHeaderResizeHandler(e) {
  32. forTables('recalculateSticky');
  33. }
  34. function tableHeaderOnScrollHandler(e) {
  35. forTables('onScroll');
  36. }
  37. function tableHeaderOffsetChangeHandler(e, offsets) {
  38. forTables('stickyPosition', offsets.top);
  39. }
  40. $(window).on({
  41. 'resize.TableHeader': tableHeaderResizeHandler,
  42. 'scroll.TableHeader': tableHeaderOnScrollHandler
  43. });
  44. $(document).on({
  45. 'columnschange.TableHeader': tableHeaderResizeHandler,
  46. 'drupalViewportOffsetChange.TableHeader': tableHeaderOffsetChangeHandler
  47. });
  48. function TableHeader(table) {
  49. var $table = $(table);
  50. this.$originalTable = $table;
  51. this.$originalHeader = $table.children('thead');
  52. this.$originalHeaderCells = this.$originalHeader.find('> tr > th');
  53. this.displayWeight = null;
  54. this.$originalTable.addClass('sticky-table');
  55. this.tableHeight = $table[0].clientHeight;
  56. this.tableOffset = this.$originalTable.offset();
  57. this.$originalTable.on('columnschange', { tableHeader: this }, function (e, display) {
  58. var tableHeader = e.data.tableHeader;
  59. if (tableHeader.displayWeight === null || tableHeader.displayWeight !== display) {
  60. tableHeader.recalculateSticky();
  61. }
  62. tableHeader.displayWeight = display;
  63. });
  64. this.createSticky();
  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"/>').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.parent.Drupal.displace);