summaryrefslogtreecommitdiff
path: root/misc/tableheader.js
blob: 5b84126ca4f0c73f7940d38f2ba00300f0368bd4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
// $Id$

// Global Killswitch
if (Drupal.jsEnabled) {
  // Keep track of all header cells.
  var cells = [];

  // Attach to all headers.
  $(document).ready(function() {
    var z = 0;
    $('table thead').each(function () {
      // Find table height.
      var table = $(this).parent('table')[0];
      var height = $(table).addClass('sticky-table').height();
      var i = 0;

      // Find all header cells.
      $('th', this).each(function () {

        // Ensure each cell has an element in it.
        var html = $(this).html();
        if (html == ' ') {
          html = ' ';
        }
        if ($(this).children().size() == 0) {
          html = '<span>'+ html +'</span>';
        }

        // Clone and wrap cell contents in sticky wrapper that overlaps the cell's padding.
        $('<div class="sticky-header" style="position: fixed; visibility: hidden; top: 0px;">'+ html +'</div>').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'),
          'z-index': ++z
        })[0];
        cells.push(div);

        // Adjust width to fit cell/table.
        var ref = this;
        if (!i++) {
          // The first cell is as wide as the table to prevent gaps.
          ref = table;
          div.wide = true;
        }
        $(div).css('width', parseInt($(ref).width())
                          - parseInt($(div).css('paddingLeft')) +'px');

        // Get position and store.
        div.cell = this;
        div.table = table;
        div.stickyMax = height;
        div.stickyPosition = Drupal.absolutePosition(this).y;
      });
    });
  });

  // Track scrolling.
  var scroll = function() {
    $(cells).each(function () {
      // Fetch scrolling position.
      var scroll = document.documentElement.scrollTop || document.body.scrollTop;
      var offset = scroll - this.stickyPosition - 4;
      if (offset > 0 && offset < this.stickyMax - 100) {
        $(this).css('visibility', 'visible');
      }
      else {
        $(this).css('visibility', 'hidden');
      }
    });
  };
  $(window).scroll(scroll);
  $(document.documentElement).scroll(scroll);

  // Track resizing.
  var time = null;
  var resize = function () {
    // Ensure minimum time between adjustments.
    if (time) {
      return;
    }
    time = setTimeout(function () {

      // Precalculate table heights
      $('table.sticky-table').each(function () {
        this.height = $(this).height();
      });

      $(cells).each(function () {
        // Get position.
        this.stickyPosition = Drupal.absolutePosition(this.cell).y;
        this.stickyMax = this.table.height;

        // Reflow the cell.
        var ref = this.cell;
        if (this.wide) {
          // Resize the first cell to fit the table.
          ref = this.table;
        }
        $(this).css('width', parseInt($(ref).width())
                           - parseInt($(this).css('paddingLeft')) +'px');
      });

      // Reset timer
      time = null;
    }, 250);
  };
  $(window).resize(resize);
}