tableheader.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. (function ($) {
  2. /**
  3. * Attaches sticky table headers.
  4. */
  5. Drupal.behaviors.tableHeader = {
  6. attach: function (context, settings) {
  7. if (!$.support.positionFixed) {
  8. return;
  9. }
  10. $('table.sticky-enabled', context).once('tableheader', function () {
  11. $(this).data("drupal-tableheader", new Drupal.tableHeader(this));
  12. });
  13. }
  14. };
  15. /**
  16. * Constructor for the tableHeader object. Provides sticky table headers.
  17. *
  18. * @param table
  19. * DOM object for the table to add a sticky header to.
  20. */
  21. Drupal.tableHeader = function (table) {
  22. var self = this;
  23. this.originalTable = $(table);
  24. this.originalHeader = $(table).children('thead');
  25. this.originalHeaderCells = this.originalHeader.find('> tr > th');
  26. this.displayWeight = null;
  27. // React to columns change to avoid making checks in the scroll callback.
  28. this.originalTable.bind('columnschange', function (e, display) {
  29. // This will force header size to be calculated on scroll.
  30. self.widthCalculated = (self.displayWeight !== null && self.displayWeight === display);
  31. self.displayWeight = display;
  32. });
  33. // Clone the table header so it inherits original jQuery properties. Hide
  34. // the table to avoid a flash of the header clone upon page load.
  35. this.stickyTable = $('<table class="sticky-header"/>')
  36. .insertBefore(this.originalTable)
  37. .css({ position: 'fixed', top: '0px' });
  38. this.stickyHeader = this.originalHeader.clone(true)
  39. .hide()
  40. .appendTo(this.stickyTable);
  41. this.stickyHeaderCells = this.stickyHeader.find('> tr > th');
  42. this.originalTable.addClass('sticky-table');
  43. $(window)
  44. .bind('scroll.drupal-tableheader', $.proxy(this, 'eventhandlerRecalculateStickyHeader'))
  45. .bind('resize.drupal-tableheader', { calculateWidth: true }, $.proxy(this, 'eventhandlerRecalculateStickyHeader'))
  46. // Make sure the anchor being scrolled into view is not hidden beneath the
  47. // sticky table header. Adjust the scrollTop if it does.
  48. .bind('drupalDisplaceAnchor.drupal-tableheader', function () {
  49. window.scrollBy(0, -self.stickyTable.outerHeight());
  50. })
  51. // Make sure the element being focused is not hidden beneath the sticky
  52. // table header. Adjust the scrollTop if it does.
  53. .bind('drupalDisplaceFocus.drupal-tableheader', function (event) {
  54. if (self.stickyVisible && event.clientY < (self.stickyOffsetTop + self.stickyTable.outerHeight()) && event.$target.closest('sticky-header').length === 0) {
  55. window.scrollBy(0, -self.stickyTable.outerHeight());
  56. }
  57. })
  58. .triggerHandler('resize.drupal-tableheader');
  59. // We hid the header to avoid it showing up erroneously on page load;
  60. // we need to unhide it now so that it will show up when expected.
  61. this.stickyHeader.show();
  62. };
  63. /**
  64. * Call the header offset function to prevent use of eval().
  65. *
  66. * @param accessor
  67. * The callback function name.
  68. * @return
  69. * The callback result.
  70. */
  71. Drupal.tableHeader.callHeaderOffsetFunction = function(accessor) {
  72. accessor = accessor.split('.');
  73. var callback = window;
  74. for (var i = 0, len = accessor.length - 1; i < len; i++) {
  75. if (typeof callback[accessor[i]] !== 'function' && typeof callback[accessor[i]] != 'object') {
  76. return 0;
  77. }
  78. callback = callback[accessor[i]];
  79. }
  80. if (typeof callback[accessor[accessor.length - 1]] === 'function') {
  81. return callback[accessor[accessor.length - 1]]();
  82. }
  83. return 0;
  84. };
  85. /**
  86. * Event handler: recalculates position of the sticky table header.
  87. *
  88. * @param event
  89. * Event being triggered.
  90. */
  91. Drupal.tableHeader.prototype.eventhandlerRecalculateStickyHeader = function (event) {
  92. var self = this;
  93. var calculateWidth = event.data && event.data.calculateWidth;
  94. // Reset top position of sticky table headers to the current top offset.
  95. this.stickyOffsetTop = Drupal.settings.tableHeaderOffset ? Drupal.tableHeader.callHeaderOffsetFunction(Drupal.settings.tableHeaderOffset) : 0;
  96. this.stickyTable.css('top', this.stickyOffsetTop + 'px');
  97. // Save positioning data.
  98. var viewHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  99. if (calculateWidth || this.viewHeight !== viewHeight) {
  100. this.viewHeight = viewHeight;
  101. this.vPosition = this.originalTable.offset().top - 4 - this.stickyOffsetTop;
  102. this.hPosition = this.originalTable.offset().left;
  103. this.vLength = this.originalTable[0].clientHeight - 100;
  104. calculateWidth = true;
  105. }
  106. // Track horizontal positioning relative to the viewport and set visibility.
  107. var hScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
  108. var vOffset = (document.documentElement.scrollTop || document.body.scrollTop) - this.vPosition;
  109. this.stickyVisible = vOffset > 0 && vOffset < this.vLength;
  110. this.stickyTable.css({ left: (-hScroll + this.hPosition) + 'px', visibility: this.stickyVisible ? 'visible' : 'hidden' });
  111. // Only perform expensive calculations if the sticky header is actually
  112. // visible or when forced.
  113. if (this.stickyVisible && (calculateWidth || !this.widthCalculated)) {
  114. this.widthCalculated = true;
  115. var $that = null;
  116. var $stickyCell = null;
  117. var display = null;
  118. var cellWidth = null;
  119. // Resize header and its cell widths.
  120. // Only apply width to visible table cells. This prevents the header from
  121. // displaying incorrectly when the sticky header is no longer visible.
  122. for (var i = 0, il = this.originalHeaderCells.length; i < il; i += 1) {
  123. $that = $(this.originalHeaderCells[i]);
  124. $stickyCell = this.stickyHeaderCells.eq($that.index());
  125. display = $that.css('display');
  126. if (display !== 'none') {
  127. cellWidth = $that.css('width');
  128. // Exception for IE7.
  129. if (cellWidth === 'auto') {
  130. cellWidth = $that[0].clientWidth + 'px';
  131. }
  132. $stickyCell.css({'width': cellWidth, 'display': display});
  133. }
  134. else {
  135. $stickyCell.css('display', 'none');
  136. }
  137. }
  138. this.stickyTable.css('width', this.originalTable.outerWidth());
  139. }
  140. };
  141. })(jQuery);