diff -urp --strip-trailing-cr ../drupal-6.x-dev/misc/tableheader.js ./misc/tableheader.js --- ../drupal-6.x-dev/misc/tableheader.js 2007-10-02 09:09:51.000000000 +0200 +++ ./misc/tableheader.js 2007-12-16 20:25:02.000000000 +0100 @@ -28,32 +28,97 @@ Drupal.behaviors.tableHeader = function html = ''+ html +''; } - // Clone and wrap cell contents in sticky wrapper that overlaps the cell's padding. - $('').prependTo(this); + // Clone and wrap cell contents in sticky wrapper that overlaps the cell's padding, + // and emulates its borders. + $('').prependTo(this); var div = $('div.sticky-header', this).css({ - 'marginLeft': '-'+ $(this).css('paddingLeft'), - 'marginRight': '-'+ $(this).css('paddingRight'), - 'paddingLeft': $(this).css('paddingLeft'), - 'paddingTop': $(this).css('paddingTop'), - 'paddingBottom': $(this).css('paddingBottom'), + 'borderLeftWidth': $(this).css('borderLeftWidth'), + 'borderLeftColor': $(this).css('borderLeftColor'), + 'borderLeftStyle': $(this).css('borderLeftStyle'), + 'borderRightWidth': $(this).css('borderRightWidth'), + 'borderRightColor': $(this).css('borderRightColor'), + 'borderRightStyle': $(this).css('borderRightStyle'), + 'borderTopWidth': $(this).css('borderTopWidth'), + 'borderTopColor': $(this).css('borderTopColor'), + 'borderTopStyle': $(this).css('borderTopStyle'), + 'borderBottomWidth': $(this).css('borderBottomWidth'), + 'borderBottomColor': $(this).css('borderBottomColor'), + 'borderBottomStyle': $(this).css('borderBottomStyle'), 'z-index': ++z })[0]; + + // Wrap the contents in another wrapper, to re-introduce its padding. + var paddingL = parseInt($(this).css('paddingLeft')); + var paddingR = parseInt($(this).css('paddingRight')); + var paddingT = parseInt($(this).css('paddingTop')); + var paddingB = parseInt($(this).css('paddingBottom')); + + $(div).wrapInner('
'); + $(div).children().css({ + 'paddingLeft': paddingL, + 'paddingRight': paddingR, + 'paddingTop': paddingT, + 'paddingBottom': paddingB, + })[0]; cells.push(div); - // Adjust width to fit cell/table. - var ref = this; + // Prepare various dimensions for the cell + var scrollH = document.documentElement.scrollLeft || document.body.scrollLeft; + var addH = paddingL + paddingR - parseInt($(this).css('borderLeftWidth')) - parseInt($(this).css('borderRightWidth')); + var addV = paddingB - parseInt($(this).css('borderBottomWidth')); + var cellOffset = parseInt($(this).css('borderLeftWidth')) + parseInt($(table).css('borderLeftWidth')); + var cellWidth = Math.max(0, $(this).width()) + addH; + var cellHeight = Math.max(0, $(this).height()) + addV; + var cellLeft = $(this).offset().left - cellOffset - scrollH; + + // Adjust width/height to fit cell/table. if (!i++) { - // The first cell is as wide as the table to prevent gaps. - ref = table; + // The first cell is as wide as the table to prevent gaps. Its content + // gets yet another sticky wrapper, to ensure correct position regardless + // alignment (avoiding centered content being positioned to the center + // of table rather than center of cell). + $(div).wrapInner('
'); + $(div).children().css({ + 'left': cellLeft + parseInt($(this).css('borderLeftWidth')), + 'z-index': parseInt($(div).css('z-index')) + 1, + 'width': cellWidth, + 'min-width': cellWidth, + 'max-width': cellWidth + })[0]; div.wide = true; + table.wide = div; + div.cellLeft = cellLeft; } - $(div).width(Math.max(0, $(ref).width() - parseInt($(div).css('paddingLeft')))); + + // Employ also min/max width/height, to avoid unwanted changes done + // by possible browser's corrections (?) + $(div).css({ + 'left': cellLeft, + 'width': cellWidth, + 'height': cellHeight, + 'min-width': cellWidth, + 'max-width': cellWidth, + 'min-height': cellHeight, + 'max-height': cellHeight + }); + + // Enlarge the first wide cell under this one. + wideCell = cellLeft - table.wide.cellLeft + cellWidth - parseInt($(table).css('borderLeftWidth')) - parseInt($(table).css('borderRightWidth')); + $(table.wide).css({ + 'width': wideCell, + 'min-width': wideCell, + 'max-width': wideCell + })[0]; // Get position and store. div.cell = this; div.table = table; div.stickyMax = height; div.stickyPosition = $(this).offset().top; + div.savedScrollH = scrollH; + div.addH = addH; + div.addV = addV; + div.cellOffset = cellOffset; }); $(this).addClass('tableHeader-processed'); }); @@ -61,15 +126,28 @@ Drupal.behaviors.tableHeader = function // Track scrolling. var scroll = function() { $(cells).each(function () { + // Vertical // Fetch scrolling position. var scroll = document.documentElement.scrollTop || document.body.scrollTop; var offset = scroll - this.stickyPosition - 4; - if (offset > 0 && offset < this.stickyMax - 100) { + if (offset > 0 && offset < this.stickyMax - 50) { $(this).css('visibility', 'visible'); } else { $(this).css('visibility', 'hidden'); } + // Horizontal + var scrollH = document.documentElement.scrollLeft || document.body.scrollLeft; + if (this.savedScrollH < scrollH || this.savedScrollH > scrollH) { + this.savedScrollH = scrollH; + var cellLeft = $(this.cell).offset().left - this.cellOffset - scrollH; + + if (this.wide) { + $(this).children('div').css('left', cellLeft + parseInt($(this.cell).css('borderLeftWidth'))); + + } + $(this).css('left', cellLeft); + } }); }; $(window).scroll(scroll); @@ -87,6 +165,15 @@ Drupal.behaviors.tableHeader = function // Precalculate table heights $('table.sticky-table').each(function () { this.savedHeight = $(this).height(); + + // Find the biggest cell-height + this.maxCellHeight = 0; + $('div.sticky-header', this).each(function () { + var cellHeight = Math.max(0, $(this.cell).height()) + this.addV; + if (this.table.maxCellHeight < cellHeight) { + this.table.maxCellHeight = cellHeight; + } + }); }); $('table.sticky-table div.sticky-header').each(function () { @@ -95,14 +182,45 @@ Drupal.behaviors.tableHeader = function this.stickyMax = this.table.savedHeight; // Reflow the cell. - var ref = this.cell; + var scrollH = document.documentElement.scrollLeft || document.body.scrollLeft; + var cellWidth = Math.max(0, $(this.cell).width()) + this.addH; + var cellLeft = $(this.cell).offset().left - this.cellOffset - scrollH; + if (this.wide) { - // Resize the first cell to fit the table. - ref = this.table; + // Resize the first cell content in the inner wrapper. + $(this).children('div').css({ + 'left': cellLeft + parseInt($(this.cell).css('borderLeftWidth')), + 'width': cellWidth, + 'min-width': cellWidth, + 'max-width': cellWidth + })[0]; + this.table.wide = this; + this.cellLeft = cellLeft; } - $(this).width(Math.max(0, $(ref).width() - parseInt($(this).css('paddingLeft')))); + + // Adjust the cell. + $(this).css({ + 'left': cellLeft, + 'width': cellWidth, + 'height': this.table.maxCellHeight, + 'min-width': cellWidth, + 'max-width': cellWidth, + 'min-height': this.table.maxCellHeight, + 'max-height': this.table.maxCellHeight + }); + + // Enlarge the first wide cell under this one. + wideCell = cellLeft - this.table.wide.cellLeft + cellWidth - parseInt($(this.table).css('borderLeftWidth')) - parseInt($(this.table).css('borderRightWidth')); + $(this.table.wide).css({ + 'width': wideCell, + 'min-width': wideCell, + 'max-width': wideCell + })[0]; }); + // Resizing may change position of the tables, so update visibility. + $(scroll); + // Reset timer time = null; }, 250);