| Line 239: |
Line 239: |
| | mw.hook('wikipage.content').add(supportTemplateMapImageNode); | | mw.hook('wikipage.content').add(supportTemplateMapImageNode); |
| | | | |
| − | });
| + | // From gbf.wiki |
| | + | // Add a dynamic fixed header to tables with: |
| | + | // 1) table with "header-fixed" class |
| | + | // 2) a table row with "header-row" class |
| | + | console.debug('FixedHeader: before jquery.tablesorter') |
| | + | mw.loader.using('jquery.tablesorter', function() { |
| | | | |
| − | // From gbf.wiki
| + | console.debug('FixedHeader: after jquery.tablesorter') |
| − | // Add a dynamic fixed header to tables with:
| |
| − | // 1) table with "header-fixed" class
| |
| − | // 2) a table row with "header-row" class
| |
| − | ;(function (mw, $) {
| |
| − | 'use strict';
| |
| | | | |
| − | mw.loader.using('jquery.tablesorter', function() {
| + | var ts = $.fn.tablesorter; |
| − |
| + | $.fn.tablesorter = function() { |
| − | var ts = $.fn.tablesorter;
| + | ts.apply(this, arguments); |
| − | $.fn.tablesorter = function() {
| + | initializeStickyHeader(); |
| − | ts.apply(this, arguments);
| + | } |
| − | initializeStickyHeader();
| + | |
| − | }
| + | function initializeStickyHeader() { |
| − |
| + | var tables = []; |
| − | function initializeStickyHeader() {
| + | var $tables = $('.header-fixed'); |
| − | var tables = [];
| + | |
| − | var $tables = $('.header-fixed');
| + | if ($tables.length == 0) return; |
| − | | + | |
| − | if ($tables.length == 0) return;
| + | $tables.each(function() { |
| − | | + | // If this table is under tabber AND is hidden, |
| − | $tables.each(function() {
| + | // temporarily make element visible so we can pull its width data later |
| − | // If this table is under tabber AND is hidden,
| + | var tabberTabParent = $(this).parent(".tabbertab")[0]; |
| − | // temporarily make element visible so we can pull its width data later
| + | var originalStyleDisplay; |
| − | var tabberTabParent = $(this).parent(".tabbertab")[0];
| + | if (tabberTabParent) { |
| − | var originalStyleDisplay;
| + | originalStyleDisplay = tabberTabParent.style.display; |
| − | if (tabberTabParent) {
| + | tabberTabParent.style.visibility = "hidden"; |
| − | originalStyleDisplay = tabberTabParent.style.display;
| + | tabberTabParent.style.display = "block"; |
| − | tabberTabParent.style.visibility = "hidden";
| + | } |
| − | tabberTabParent.style.display = "block";
| + | |
| − | }
| + | // Build fixed-header-table content |
| − | | + | var $headerRow = $(this).find('.header-row'); |
| − | // Build fixed-header-table content
| + | var $newHeaderContent = $('<tbody>'); |
| − | var $headerRow = $(this).find('.header-row');
| + | $newHeaderContent.append($headerRow.clone()); |
| − | var $newHeaderContent = $('<tbody>');
| + | |
| − | $newHeaderContent.append($headerRow.clone());
| + | // Add fixed-header-table colgroup to fix width |
| − | | + | var $columnsOld = $headerRow.find('td:not([colspan]),th:not([colspan])'); |
| − | // Add fixed-header-table colgroup to fix width
| + | var $newHeaderColgroup = $('<colgroup>'); |
| − | var $columnsOld = $headerRow.find('td:not([colspan]),th:not([colspan])');
| + | |
| − | var $newHeaderColgroup = $('<colgroup>');
| + | for (var i = 0; i < $columnsOld.length; i++) { |
| − | | + | var width = $columnsOld[i].getBoundingClientRect().width; |
| − | for (var i = 0; i < $columnsOld.length; i++) {
| + | $newHeaderColgroup.append( |
| − | var width = $columnsOld[i].getBoundingClientRect().width;
| + | $('<col>').css('width', width) |
| − | $newHeaderColgroup.append(
| + | ); |
| − | $('<col>').css('width', width)
| + | } |
| − | );
| + | |
| − | }
| + | $(this).before( |
| − | | + | $('<table>') |
| − | $(this).before(
| + | .addClass('header-fixed-helper') |
| − | $('<table>')
| + | .addClass('wikitable') |
| − | .addClass('header-fixed-helper')
| + | .css('position', 'sticky') |
| − | .addClass('wikitable')
| + | .css('top', '0') |
| − | .css('position', 'sticky')
| + | .css('z-index', '9') |
| − | .css('top', '0')
| + | .css('display', 'none') |
| − | .css('z-index', '9')
| + | .css('background-color', '#fff') |
| − | .css('display', 'none')
| + | .css('margin-top', '0') |
| − | .css('background-color', '#fff')
| + | .css('margin-bottom', '0') |
| − | .css('margin-top', '0')
| + | .css('table-layout', 'fixed') |
| − | .css('margin-bottom', '0')
| + | .append($newHeaderColgroup) |
| − | .css('table-layout', 'fixed')
| + | .append($newHeaderContent) |
| − | .append($newHeaderColgroup)
| + | ); |
| − | .append($newHeaderContent)
| + | tables.push({ |
| − | );
| + | table: this, |
| − | tables.push({
| + | helper: this.previousSibling |
| − | table: this,
| + | }); |
| − | helper: this.previousSibling
| + | $(this.previousSibling).css('width', $(this).width() + 1); |
| − | });
| + | |
| − | $(this.previousSibling).css('width', $(this).width() + 1);
| + | // Restore original tab display status |
| − | | + | // if this table was under tabber and hidden |
| − | // Restore original tab display status
| + | if (tabberTabParent) { |
| − | // if this table was under tabber and hidden
| + | tabberTabParent.style.visibility = ""; |
| − | if (tabberTabParent) {
| + | tabberTabParent.style.display = originalStyleDisplay; |
| − | tabberTabParent.style.visibility = "";
| + | } |
| − | tabberTabParent.style.display = originalStyleDisplay;
| + | }); |
| − | }
| + | |
| − | });
| + | $(window).on('scroll', function() { |
| − |
| + | var scrollOffset = $(this).scrollTop(); |
| − | $(window).on('scroll', function() {
| + | for (var i = 0; i < tables.length; i++) { |
| − | var scrollOffset = $(this).scrollTop();
| + | var tableOffset = $(tables[i].table).offset().top; |
| − | for (var i = 0; i < tables.length; i++) {
| + | var tableHeight = $(tables[i].table).height(); |
| − | var tableOffset = $(tables[i].table).offset().top;
| + | var helperHeight = $(tables[i].helper).height(); |
| − | var tableHeight = $(tables[i].table).height();
| + | if ((scrollOffset > tableOffset) && (scrollOffset < (tableOffset + tableHeight - helperHeight))) { |
| − | var helperHeight = $(tables[i].helper).height();
| + | if ($(tables[i].helper).is(':hidden')) |
| − | if ((scrollOffset > tableOffset) && (scrollOffset < (tableOffset + tableHeight - helperHeight))) {
| + | $(tables[i].helper).show(); |
| − | if ($(tables[i].helper).is(':hidden'))
| + | } else { |
| − | $(tables[i].helper).show();
| + | $(tables[i].helper).hide(); |
| − | } else {
| + | } |
| − | $(tables[i].helper).hide();
| + | } |
| − | }
| + | }); |
| − | }
| + | } |
| − | });
| + | }) |
| − | }
| + | }); |
| − | });
| |
| − | })(mediaWiki, jQuery); | |