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