2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/2815083
8 (function ($, Drupal, displace) {
9 Drupal.behaviors.tableHeader = {
10 attach: function attach(context) {
11 $(window).one('scroll.TableHeaderInit', { context: context }, tableHeaderInitHandler);
15 function scrollValue(position) {
16 return document.documentElement[position] || document.body[position];
19 function tableHeaderInitHandler(e) {
20 var $tables = $(e.data.context).find('table.sticky-enabled').once('tableheader');
21 var il = $tables.length;
22 for (var i = 0; i < il; i++) {
23 TableHeader.tables.push(new TableHeader($tables[i]));
25 forTables('onScroll');
28 function forTables(method, arg) {
29 var tables = TableHeader.tables;
30 var il = tables.length;
31 for (var i = 0; i < il; i++) {
32 tables[i][method](arg);
36 function tableHeaderResizeHandler(e) {
37 forTables('recalculateSticky');
40 function tableHeaderOnScrollHandler(e) {
41 forTables('onScroll');
44 function tableHeaderOffsetChangeHandler(e, offsets) {
45 forTables('stickyPosition', offsets.top);
49 'resize.TableHeader': tableHeaderResizeHandler,
51 'scroll.TableHeader': tableHeaderOnScrollHandler
55 'columnschange.TableHeader': tableHeaderResizeHandler,
57 'drupalViewportOffsetChange.TableHeader': tableHeaderOffsetChangeHandler
60 function TableHeader(table) {
61 var $table = $(table);
63 this.$originalTable = $table;
65 this.$originalHeader = $table.children('thead');
67 this.$originalHeaderCells = this.$originalHeader.find('> tr > th');
69 this.displayWeight = null;
70 this.$originalTable.addClass('sticky-table');
71 this.tableHeight = $table[0].clientHeight;
72 this.tableOffset = this.$originalTable.offset();
74 this.$originalTable.on('columnschange', { tableHeader: this }, function (e, display) {
75 var tableHeader = e.data.tableHeader;
76 if (tableHeader.displayWeight === null || tableHeader.displayWeight !== display) {
77 tableHeader.recalculateSticky();
79 tableHeader.displayWeight = display;
85 $.extend(TableHeader, {
89 $.extend(TableHeader.prototype, {
98 createSticky: function createSticky() {
99 var $stickyHeader = this.$originalHeader.clone(true);
101 this.$stickyTable = $('<table class="sticky-header"/>').css({
102 visibility: 'hidden',
105 }).append($stickyHeader).insertBefore(this.$originalTable);
107 this.$stickyHeaderCells = $stickyHeader.find('> tr > th');
109 this.recalculateSticky();
111 stickyPosition: function stickyPosition(offsetTop, offsetLeft) {
113 if (typeof offsetTop === 'number') {
114 css.top = offsetTop + 'px';
116 if (typeof offsetLeft === 'number') {
117 css.left = this.tableOffset.left - offsetLeft + 'px';
119 return this.$stickyTable.css(css);
121 checkStickyVisible: function checkStickyVisible() {
122 var scrollTop = scrollValue('scrollTop');
123 var tableTop = this.tableOffset.top - displace.offsets.top;
124 var tableBottom = tableTop + this.tableHeight;
127 if (tableTop < scrollTop && scrollTop < tableBottom - this.minHeight) {
131 this.stickyVisible = visible;
134 onScroll: function onScroll(e) {
135 this.checkStickyVisible();
137 this.stickyPosition(null, scrollValue('scrollLeft'));
138 this.$stickyTable.css('visibility', this.stickyVisible ? 'visible' : 'hidden');
140 recalculateSticky: function recalculateSticky(event) {
141 this.tableHeight = this.$originalTable[0].clientHeight;
143 displace.offsets.top = displace.calculateOffset('top');
144 this.tableOffset = this.$originalTable.offset();
145 this.stickyPosition(displace.offsets.top, scrollValue('scrollLeft'));
148 var $stickyCell = null;
151 var il = this.$originalHeaderCells.length;
152 for (var i = 0; i < il; i++) {
153 $that = $(this.$originalHeaderCells[i]);
154 $stickyCell = this.$stickyHeaderCells.eq($that.index());
155 display = $that.css('display');
156 if (display !== 'none') {
157 $stickyCell.css({ width: $that.css('width'), display: display });
159 $stickyCell.css('display', 'none');
162 this.$stickyTable.css('width', this.$originalTable.outerWidth());
166 Drupal.TableHeader = TableHeader;
167 })(jQuery, Drupal, window.parent.Drupal.displace);