- Patch #787670 by casey, Kiphaas7: clean up tableheader.js.

2 files changed, 104 insertions, 97 deletions

diff --git a/misc/drupal.js b/misc/drupal.js
index 79f9f755c..9f4327cf0 100644
--- a/misc/drupal.js
+++ b/misc/drupal.js
@@ -331,7 +331,21 @@ $('html').addClass('js');
 // 'js enabled' cookie.
 document.cookie = 'has_js=1; path=/';
 
-// Attach all behaviors.
+/**
+ * Additions to jQuery.support.
+ */
+$(function () {
+  /**
+   * Boolean indicating whether or not position:fixed is supported.
+   */
+  if (jQuery.support.positionFixed === undefined) {
+    var el = $('<div style="position:fixed; top:10px" />').appendTo(document.body);
+    jQuery.support.positionFixed = el[0].offsetTop === 10;
+    el.remove();
+  }
+});
+
+//Attach all behaviors.
 $(function () {
   Drupal.attachBehaviors(document, Drupal.settings);
 });
diff --git a/misc/tableheader.js b/misc/tableheader.js
index 4efe26a43..c3e2e3a9d 100644
--- a/misc/tableheader.js
+++ b/misc/tableheader.js
@@ -1,118 +1,111 @@
 // $Id$
 (function ($) {
 
-Drupal.tableHeaderDoScroll = function () {
-  if ($.isFunction(Drupal.tableHeaderOnScroll)) {
-    Drupal.tableHeaderOnScroll();
-  }
-};
-
+/**
+ * Attaches sticky table headers.
+ */
 Drupal.behaviors.tableHeader = {
   attach: function (context, settings) {
-    // This breaks in anything less than IE 7. Prevent it from running.
-    if ($.browser.msie && parseInt($.browser.version, 10) < 7) {
+    if (!$.support.positionFixed) {
       return;
     }
 
-    $('table.sticky-enabled thead', context).once('tableheader', function () {
-      // Clone the table header so it inherits original jQuery properties. Hide
-      // the table to avoid a flash of the header clone upon page load.
-      var headerClone = $(this).clone(true).hide().insertBefore(this.parentNode).wrap('<table class="sticky-header"></table>').parent().css({
-        position: 'fixed',
-        top: '0px'
-      });
-
-      headerClone = $(headerClone)[0];
+    $('table.sticky-enabled', context).once('tableheader', function () {
+      $(this).data("drupal-tableheader", new Drupal.tableHeader(this));
+    });
+  }
+};
 
-      // Store parent table.
-      var table = $(this).parent('table')[0];
-      headerClone.table = table;
-      // Finish initializing header positioning.
-      tracker(headerClone);
-      // We hid the header to avoid it showing up erroneously on page load;
-      // we need to unhide it now so that it will show up when expected.
-      $(headerClone).children('thead').show();
+/**
+ * Constructor for the tableHeader object. Provides sticky table headers.
+ *
+ * @param table
+ *   DOM object for the table to add a sticky header to.
+ */
+Drupal.tableHeader = function (table) {
+  var self = this;
 
-      $(table).addClass('sticky-table');
-    });
+  this.originalTable = $(table);
+  this.originalHeader = $(table).children('thead');
+  this.originalHeaderCells = this.originalHeader.find('> tr > th');
 
-    // Define the anchor holding var.
-    var prevAnchor = '';
+  // Clone the table header so it inherits original jQuery properties. Hide
+  // the table to avoid a flash of the header clone upon page load.
+  this.stickyTable = $('<table class="sticky-header"/>')
+    .insertBefore(this.originalTable)
+    .css({ position: 'fixed', top: '0px' });
+  this.stickyHeader = this.originalHeader.clone(true)
+    .hide()
+    .appendTo(this.stickyTable);
+  this.stickyHeaderCells = this.stickyHeader.find('> tr > th');
 
-    // Track positioning and visibility.
-    function tracker(e) {
-      // Reset top position of sticky table headers to the current top offset.
-      var topOffset = Drupal.settings.tableHeaderOffset ? eval(Drupal.settings.tableHeaderOffset + '()') : 0;
-      $('.sticky-header').css('top', topOffset + 'px');
-      // Save positioning data.
-      var viewHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
-      if (e.viewHeight != viewHeight) {
-        e.viewHeight = viewHeight;
-        e.vPosition = $(e.table).offset().top - 4 - topOffset;
-        e.hPosition = $(e.table).offset().left;
-        e.vLength = e.table.clientHeight - 100;
-        // Resize header and its cell widths.
-        var parentCell = $('th', e.table);
-        $('th', e).each(function (index) {
-          var cellWidth = parentCell.eq(index).css('width');
-          // Exception for IE7.
-          if (cellWidth == 'auto') {
-            cellWidth = parentCell.get(index).clientWidth + 'px';
-          }
-          $(this).css('width', cellWidth);
-        });
-        $(e).css('width', $(e.table).css('width'));
+  this.originalTable.addClass('sticky-table');
+  $(window)
+    .bind('scroll.drupal-tableheader', $.proxy(this, 'eventhandlerRecalculateStickyHeader'))
+    .bind('resize.drupal-tableheader', { calculateWidth: true }, $.proxy(this, 'eventhandlerRecalculateStickyHeader'))
+    // Make sure the anchor being scrolled into view is not hidden beneath the
+    // sticky table header. Adjust the scrollTop if it does.
+    .bind('drupalDisplaceAnchor.drupal-tableheader', function () {
+      window.scrollBy(0, -self.stickyTable.outerHeight());
+    })
+    // Make sure the element being focused is not hidden beneath the sticky
+    // table header. Adjust the scrollTop if it does.
+    .bind('drupalDisplaceFocus.drupal-tableheader', function (event) {
+      if (self.stickyVisible && event.clientY < (self.stickyOffsetTop + self.stickyTable.outerHeight()) && event.$target.closest('sticky-header').length === 0) {
+        window.scrollBy(0, -self.stickyTable.outerHeight());
       }
+    })
+    .triggerHandler('resize.drupal-tableheader');
 
-      // Track horizontal positioning relative to the viewport and set visibility.
-      var hScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
-      var vOffset = (document.documentElement.scrollTop || document.body.scrollTop) - e.vPosition;
-      var visState = (vOffset > 0 && vOffset < e.vLength) ? 'visible' : 'hidden';
-      $(e).css({ left: -hScroll + e.hPosition + 'px', visibility: visState });
+  // We hid the header to avoid it showing up erroneously on page load;
+  // we need to unhide it now so that it will show up when expected.
+  this.stickyHeader.show();
+};
 
-      // Check the previous anchor to see if we need to scroll to make room for the header.
-      // Get the height of the header table and scroll up that amount.
-      if (prevAnchor != location.hash) {
-        if (location.hash != '') {
-          var scrollLocation = $('td' + location.hash).offset().top - $(e).height();
-          $('body, html').scrollTop(scrollLocation);
-        }
-        prevAnchor = location.hash;
-      }
-    }
+/**
+ * Event handler: recalculates position of the sticky table header.
+ *
+ * @param event
+ *   Event being triggered.
+ */
+Drupal.tableHeader.prototype.eventhandlerRecalculateStickyHeader = function (event) {
+  var self = this;
+  var calculateWidth = event.data && event.data.calculateWidth;
 
-    // Only attach to scrollbars once, even if Drupal.attachBehaviors is called
-    //  multiple times.
-    $('body').once(function () {
-      $(window).scroll(Drupal.tableHeaderDoScroll);
-      $(document.documentElement).scroll(Drupal.tableHeaderDoScroll);
-    });
+  // Reset top position of sticky table headers to the current top offset.
+  this.stickyOffsetTop = Drupal.settings.tableHeaderOffset ? eval(Drupal.settings.tableHeaderOffset + '()') : 0;
+  this.stickyTable.css('top', this.stickyOffsetTop + 'px');
 
-    // Track scrolling.
-    Drupal.tableHeaderOnScroll = function () {
-      $('table.sticky-header').each(function () {
-        tracker(this);
-      });
-    };
+  // Save positioning data.
+  var viewHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+  if (calculateWidth || this.viewHeight !== viewHeight) {
+    this.viewHeight = viewHeight;
+    this.vPosition = this.originalTable.offset().top - 4 - this.stickyOffsetTop;
+    this.hPosition = this.originalTable.offset().left;
+    this.vLength = this.originalTable[0].clientHeight - 100;
+    calculateWidth = true;
+  }
+
+  // Track horizontal positioning relative to the viewport and set visibility.
+  var hScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
+  var vOffset = (document.documentElement.scrollTop || document.body.scrollTop) - this.vPosition;
+  this.stickyVisible = vOffset > 0 && vOffset < this.vLength;
+  this.stickyTable.css({ left: (-hScroll + this.hPosition) + 'px', visibility: this.stickyVisible ? 'visible' : 'hidden' });
 
-    // Track resizing.
-    var time = null;
-    var resize = function () {
-      // Ensure minimum time between adjustments.
-      if (time) {
-        return;
+  // Only perform expensive calculations if the sticky header is actually
+  // visible or when forced.
+  if (this.stickyVisible && (calculateWidth || !this.widthCalculated)) {
+    this.widthCalculated = true;
+    // Resize header and its cell widths.
+    this.stickyHeaderCells.each(function (index) {
+      var cellWidth = self.originalHeaderCells.eq(index).css('width');
+      // Exception for IE7.
+      if (cellWidth == 'auto') {
+        cellWidth = self.originalHeaderCells.get(index).clientWidth + 'px';
       }
-      time = setTimeout(function () {
-        $('table.sticky-header').each(function () {
-          // Force cell width calculation.
-          this.viewHeight = 0;
-          tracker(this);
-        });
-        // Reset timer.
-        time = null;
-      }, 250);
-    };
-    $(window).resize(resize);
+      $(this).css('width', cellWidth);
+    });
+    this.stickyTable.css('width', this.originalTable.css('width'));
   }
 };