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