tableheader.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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. * Event handler: recalculates position of the sticky table header.
  65. *
  66. * @param event
  67. * Event being triggered.
  68. */
  69. Drupal.tableHeader.prototype.eventhandlerRecalculateStickyHeader = function (event) {
  70. var self = this;
  71. var calculateWidth = event.data && event.data.calculateWidth;
  72. // Reset top position of sticky table headers to the current top offset.
  73. this.stickyOffsetTop = Drupal.settings.tableHeaderOffset ? eval(Drupal.settings.tableHeaderOffset + '()') : 0;
  74. this.stickyTable.css('top', this.stickyOffsetTop + 'px');
  75. // Save positioning data.
  76. var viewHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  77. if (calculateWidth || this.viewHeight !== viewHeight) {
  78. this.viewHeight = viewHeight;
  79. this.vPosition = this.originalTable.offset().top - 4 - this.stickyOffsetTop;
  80. this.hPosition = this.originalTable.offset().left;
  81. this.vLength = this.originalTable[0].clientHeight - 100;
  82. calculateWidth = true;
  83. }
  84. // Track horizontal positioning relative to the viewport and set visibility.
  85. var hScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
  86. var vOffset = (document.documentElement.scrollTop || document.body.scrollTop) - this.vPosition;
  87. this.stickyVisible = vOffset > 0 && vOffset < this.vLength;
  88. this.stickyTable.css({ left: (-hScroll + this.hPosition) + 'px', visibility: this.stickyVisible ? 'visible' : 'hidden' });
  89. // Only perform expensive calculations if the sticky header is actually
  90. // visible or when forced.
  91. if (this.stickyVisible && (calculateWidth || !this.widthCalculated)) {
  92. this.widthCalculated = true;
  93. var $that = null;
  94. var $stickyCell = null;
  95. var display = null;
  96. var cellWidth = null;
  97. // Resize header and its cell widths.
  98. // Only apply width to visible table cells. This prevents the header from
  99. // displaying incorrectly when the sticky header is no longer visible.
  100. for (var i = 0, il = this.originalHeaderCells.length; i < il; i += 1) {
  101. $that = $(this.originalHeaderCells[i]);
  102. $stickyCell = this.stickyHeaderCells.eq($that.index());
  103. display = $that.css('display');
  104. if (display !== 'none') {
  105. cellWidth = $that.css('width');
  106. // Exception for IE7.
  107. if (cellWidth === 'auto') {
  108. cellWidth = $that[0].clientWidth + 'px';
  109. }
  110. $stickyCell.css({'width': cellWidth, 'display': display});
  111. }
  112. else {
  113. $stickyCell.css('display', 'none');
  114. }
  115. }
  116. this.stickyTable.css('width', this.originalTable.css('width'));
  117. }
  118. };
  119. })(jQuery);