cms/drupal/misc/tableheader.js
author ymh <ymh.work@gmail.com>
Wed, 13 Sep 2017 22:19:48 +0200
changeset 544 ad58d7627f70
parent 541 e756a8c72c3d
permissions -rw-r--r--
use same http client in ImportCocoonRDF and define version 0.22
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
541
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
(function ($) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
/**
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
 * Attaches sticky table headers.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
 */
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
Drupal.behaviors.tableHeader = {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
  attach: function (context, settings) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
    if (!$.support.positionFixed) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
      return;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
    }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
    $('table.sticky-enabled', context).once('tableheader', function () {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
      $(this).data("drupal-tableheader", new Drupal.tableHeader(this));
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
    });
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
  }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
};
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
/**
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
 * Constructor for the tableHeader object. Provides sticky table headers.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
 *
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
 * @param table
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
 *   DOM object for the table to add a sticky header to.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
 */
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
Drupal.tableHeader = function (table) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
  var self = this;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
  this.originalTable = $(table);
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
  this.originalHeader = $(table).children('thead');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
  this.originalHeaderCells = this.originalHeader.find('> tr > th');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
  this.displayWeight = null;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
  // React to columns change to avoid making checks in the scroll callback.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
  this.originalTable.bind('columnschange', function (e, display) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
    // This will force header size to be calculated on scroll.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
    self.widthCalculated = (self.displayWeight !== null && self.displayWeight === display);
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
    self.displayWeight = display;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
  });
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
  // Clone the table header so it inherits original jQuery properties. Hide
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
  // the table to avoid a flash of the header clone upon page load.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
  this.stickyTable = $('<table class="sticky-header"/>')
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
    .insertBefore(this.originalTable)
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
    .css({ position: 'fixed', top: '0px' });
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
  this.stickyHeader = this.originalHeader.clone(true)
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
    .hide()
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
    .appendTo(this.stickyTable);
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
  this.stickyHeaderCells = this.stickyHeader.find('> tr > th');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
  this.originalTable.addClass('sticky-table');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
  $(window)
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
    .bind('scroll.drupal-tableheader', $.proxy(this, 'eventhandlerRecalculateStickyHeader'))
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
    .bind('resize.drupal-tableheader', { calculateWidth: true }, $.proxy(this, 'eventhandlerRecalculateStickyHeader'))
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
    // Make sure the anchor being scrolled into view is not hidden beneath the
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
    // sticky table header. Adjust the scrollTop if it does.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
    .bind('drupalDisplaceAnchor.drupal-tableheader', function () {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
      window.scrollBy(0, -self.stickyTable.outerHeight());
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
    })
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
    // Make sure the element being focused is not hidden beneath the sticky
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
    // table header. Adjust the scrollTop if it does.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
    .bind('drupalDisplaceFocus.drupal-tableheader', function (event) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
      if (self.stickyVisible && event.clientY < (self.stickyOffsetTop + self.stickyTable.outerHeight()) && event.$target.closest('sticky-header').length === 0) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
        window.scrollBy(0, -self.stickyTable.outerHeight());
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
      }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
    })
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
    .triggerHandler('resize.drupal-tableheader');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
  // We hid the header to avoid it showing up erroneously on page load;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
  // we need to unhide it now so that it will show up when expected.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
  this.stickyHeader.show();
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
};
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
/**
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
 * Event handler: recalculates position of the sticky table header.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
 *
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
 * @param event
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
 *   Event being triggered.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
 */
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
Drupal.tableHeader.prototype.eventhandlerRecalculateStickyHeader = function (event) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
  var self = this;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
  var calculateWidth = event.data && event.data.calculateWidth;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
  // Reset top position of sticky table headers to the current top offset.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
  this.stickyOffsetTop = Drupal.settings.tableHeaderOffset ? eval(Drupal.settings.tableHeaderOffset + '()') : 0;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
  this.stickyTable.css('top', this.stickyOffsetTop + 'px');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
  // Save positioning data.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
  var viewHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
  if (calculateWidth || this.viewHeight !== viewHeight) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    89
    this.viewHeight = viewHeight;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
    this.vPosition = this.originalTable.offset().top - 4 - this.stickyOffsetTop;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    91
    this.hPosition = this.originalTable.offset().left;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
    this.vLength = this.originalTable[0].clientHeight - 100;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
    calculateWidth = true;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
  }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
  // Track horizontal positioning relative to the viewport and set visibility.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
  var hScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
  var vOffset = (document.documentElement.scrollTop || document.body.scrollTop) - this.vPosition;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
  this.stickyVisible = vOffset > 0 && vOffset < this.vLength;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
  this.stickyTable.css({ left: (-hScroll + this.hPosition) + 'px', visibility: this.stickyVisible ? 'visible' : 'hidden' });
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
  // Only perform expensive calculations if the sticky header is actually
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
  // visible or when forced.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
  if (this.stickyVisible && (calculateWidth || !this.widthCalculated)) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   105
    this.widthCalculated = true;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   106
    var $that = null;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   107
    var $stickyCell = null;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   108
    var display = null;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   109
    var cellWidth = null;
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   110
    // Resize header and its cell widths.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   111
    // Only apply width to visible table cells. This prevents the header from
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   112
    // displaying incorrectly when the sticky header is no longer visible.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   113
    for (var i = 0, il = this.originalHeaderCells.length; i < il; i += 1) {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   114
      $that = $(this.originalHeaderCells[i]);
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   115
      $stickyCell = this.stickyHeaderCells.eq($that.index());
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   116
      display = $that.css('display');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   117
      if (display !== 'none') {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   118
        cellWidth = $that.css('width');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   119
        // Exception for IE7.
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   120
        if (cellWidth === 'auto') {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   121
          cellWidth = $that[0].clientWidth + 'px';
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   122
        }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   123
        $stickyCell.css({'width': cellWidth, 'display': display});
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   124
      }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   125
      else {
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   126
        $stickyCell.css('display', 'none');
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   127
      }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   128
    }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   129
    this.stickyTable.css('width', this.originalTable.outerWidth());
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   130
  }
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   131
};
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   132
e756a8c72c3d integrate drupal and correct build process. update version
ymh <ymh.work@gmail.com>
parents:
diff changeset
   133
})(jQuery);