Chris@0: /** Chris@0: * DO NOT EDIT THIS FILE. Chris@0: * See the following change record for more information, Chris@0: * https://www.drupal.org/node/2815083 Chris@0: * @preserve Chris@0: **/ Chris@0: Chris@0: (function ($, Drupal, displace) { Chris@17: function TableHeader(table) { Chris@17: var $table = $(table); Chris@17: Chris@17: this.$originalTable = $table; Chris@17: Chris@17: this.$originalHeader = $table.children('thead'); Chris@17: Chris@17: this.$originalHeaderCells = this.$originalHeader.find('> tr > th'); Chris@17: Chris@17: this.displayWeight = null; Chris@17: this.$originalTable.addClass('sticky-table'); Chris@17: this.tableHeight = $table[0].clientHeight; Chris@17: this.tableOffset = this.$originalTable.offset(); Chris@17: Chris@17: this.$originalTable.on('columnschange', { tableHeader: this }, function (e, display) { Chris@17: var tableHeader = e.data.tableHeader; Chris@17: if (tableHeader.displayWeight === null || tableHeader.displayWeight !== display) { Chris@17: tableHeader.recalculateSticky(); Chris@17: } Chris@17: tableHeader.displayWeight = display; Chris@17: }); Chris@17: Chris@17: this.createSticky(); Chris@17: } Chris@17: Chris@17: function forTables(method, arg) { Chris@17: var tables = TableHeader.tables; Chris@17: var il = tables.length; Chris@17: for (var i = 0; i < il; i++) { Chris@17: tables[i][method](arg); Chris@0: } Chris@0: } Chris@0: Chris@0: function tableHeaderInitHandler(e) { Chris@0: var $tables = $(e.data.context).find('table.sticky-enabled').once('tableheader'); Chris@0: var il = $tables.length; Chris@0: for (var i = 0; i < il; i++) { Chris@0: TableHeader.tables.push(new TableHeader($tables[i])); Chris@0: } Chris@0: forTables('onScroll'); Chris@0: } Chris@0: Chris@17: Drupal.behaviors.tableHeader = { Chris@17: attach: function attach(context) { Chris@17: $(window).one('scroll.TableHeaderInit', { context: context }, tableHeaderInitHandler); Chris@0: } Chris@17: }; Chris@17: Chris@17: function scrollValue(position) { Chris@17: return document.documentElement[position] || document.body[position]; Chris@0: } Chris@0: Chris@0: function tableHeaderResizeHandler(e) { Chris@0: forTables('recalculateSticky'); Chris@0: } Chris@0: Chris@0: function tableHeaderOnScrollHandler(e) { Chris@0: forTables('onScroll'); Chris@0: } Chris@0: Chris@0: function tableHeaderOffsetChangeHandler(e, offsets) { Chris@0: forTables('stickyPosition', offsets.top); Chris@0: } Chris@0: Chris@0: $(window).on({ Chris@0: 'resize.TableHeader': tableHeaderResizeHandler, Chris@0: Chris@0: 'scroll.TableHeader': tableHeaderOnScrollHandler Chris@0: }); Chris@0: Chris@0: $(document).on({ Chris@0: 'columnschange.TableHeader': tableHeaderResizeHandler, Chris@0: Chris@0: 'drupalViewportOffsetChange.TableHeader': tableHeaderOffsetChangeHandler Chris@0: }); Chris@0: Chris@0: $.extend(TableHeader, { Chris@0: tables: [] Chris@0: }); Chris@0: Chris@0: $.extend(TableHeader.prototype, { Chris@0: minHeight: 100, Chris@0: Chris@0: tableOffset: null, Chris@0: Chris@0: tableHeight: null, Chris@0: Chris@0: stickyVisible: false, Chris@0: Chris@0: createSticky: function createSticky() { Chris@0: var $stickyHeader = this.$originalHeader.clone(true); Chris@0: Chris@0: this.$stickyTable = $('').css({ Chris@0: visibility: 'hidden', Chris@0: position: 'fixed', Chris@0: top: '0px' Chris@0: }).append($stickyHeader).insertBefore(this.$originalTable); Chris@0: Chris@0: this.$stickyHeaderCells = $stickyHeader.find('> tr > th'); Chris@0: Chris@0: this.recalculateSticky(); Chris@0: }, Chris@0: stickyPosition: function stickyPosition(offsetTop, offsetLeft) { Chris@0: var css = {}; Chris@0: if (typeof offsetTop === 'number') { Chris@0: css.top = offsetTop + 'px'; Chris@0: } Chris@0: if (typeof offsetLeft === 'number') { Chris@0: css.left = this.tableOffset.left - offsetLeft + 'px'; Chris@0: } Chris@0: return this.$stickyTable.css(css); Chris@0: }, Chris@0: checkStickyVisible: function checkStickyVisible() { Chris@0: var scrollTop = scrollValue('scrollTop'); Chris@0: var tableTop = this.tableOffset.top - displace.offsets.top; Chris@0: var tableBottom = tableTop + this.tableHeight; Chris@0: var visible = false; Chris@0: Chris@0: if (tableTop < scrollTop && scrollTop < tableBottom - this.minHeight) { Chris@0: visible = true; Chris@0: } Chris@0: Chris@0: this.stickyVisible = visible; Chris@0: return visible; Chris@0: }, Chris@0: onScroll: function onScroll(e) { Chris@0: this.checkStickyVisible(); Chris@0: Chris@0: this.stickyPosition(null, scrollValue('scrollLeft')); Chris@0: this.$stickyTable.css('visibility', this.stickyVisible ? 'visible' : 'hidden'); Chris@0: }, Chris@0: recalculateSticky: function recalculateSticky(event) { Chris@0: this.tableHeight = this.$originalTable[0].clientHeight; Chris@0: Chris@0: displace.offsets.top = displace.calculateOffset('top'); Chris@0: this.tableOffset = this.$originalTable.offset(); Chris@0: this.stickyPosition(displace.offsets.top, scrollValue('scrollLeft')); Chris@0: Chris@0: var $that = null; Chris@0: var $stickyCell = null; Chris@0: var display = null; Chris@0: Chris@0: var il = this.$originalHeaderCells.length; Chris@0: for (var i = 0; i < il; i++) { Chris@0: $that = $(this.$originalHeaderCells[i]); Chris@0: $stickyCell = this.$stickyHeaderCells.eq($that.index()); Chris@0: display = $that.css('display'); Chris@0: if (display !== 'none') { Chris@0: $stickyCell.css({ width: $that.css('width'), display: display }); Chris@0: } else { Chris@0: $stickyCell.css('display', 'none'); Chris@0: } Chris@0: } Chris@0: this.$stickyTable.css('width', this.$originalTable.outerWidth()); Chris@0: } Chris@0: }); Chris@0: Chris@0: Drupal.TableHeader = TableHeader; Chris@17: })(jQuery, Drupal, window.Drupal.displace);