/*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */
;(function ($, window, undefined) {
'use strict';
var name = 'stickyTableHeaders';
var defaults = {
fixedOffset: 0
};
function Plugin (el, options) {
// To avoid scope issues, use 'base' instead of 'this'
// to reference this class from internal events and functions.
var base = this;
// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;
// Listen for destroyed, call teardown
base.$el.bind('destroyed',
$.proxy(base.teardown, base));
// Cache DOM refs for performance reasons
base.$window = $(window);
base.$clonedHeader = null;
base.$originalHeader = null;
// Keep track of state
base.isCloneVisible = false;
base.leftOffset = null;
base.topOffset = null;
base.init = function () {
base.options = $.extend({}, defaults, options);
base.$el.each(function () {
var $this = $(this);
// remove padding on
to fix issue #7
$this.css('padding', 0);
base.$originalHeader = $('thead:first', this);
base.$clonedHeader = base.$originalHeader.clone();
// check whether the cloned header has filters
if($('tr.filters', base.$clonedHeader).length) {
// remove them, they will have to be added dynamically
$('tr.filters', base.$clonedHeader).remove();
$('th', base.$originalHeader).each(function (index) {
var $this = $(this);
var $origCell = $('th', base.$originalHeader).eq(index);
$this.css('width', $origCell.width());
});
}
base.$clonedHeader.addClass('tableFloatingHeader');
base.$clonedHeader.css({
'position': 'fixed',
'top': 0,
'z-index': 1, // #18: opacity bug
'display': 'none',
'background-color':'#fff'
});
base.$originalHeader.addClass('tableFloatingHeaderOriginal');
base.$originalHeader.after(base.$clonedHeader);
// enabling support for jquery.tablesorter plugin
// forward clicks on clone to original
$('th', base.$clonedHeader).on('click.' + name, function (e) {
var index = $('th', base.$clonedHeader).index(this);
$('th', base.$originalHeader).eq(index).click();
});
$this.on('sortEnd.' + name, base.updateWidth);
});
base.updateWidth();
base.toggleHeaders();
base.bind();
};
base.destroy = function (){
base.$el.unbind('destroyed', base.teardown);
base.teardown();
};
base.teardown = function(){
$.removeData(base.el, 'plugin_' + name);
base.unbind();
base.$clonedHeader.remove();
base.$originalHeader.removeClass('tableFloatingHeaderOriginal');
base.$originalHeader.css('visibility', 'visible');
base.el = null;
base.$el = null;
};
base.bind = function(){
base.$window.on('scroll.' + name, base.toggleHeaders);
base.$window.on('resize.' + name, base.toggleHeaders);
base.$window.on('resize.' + name, base.updateWidth);
// TODO: move tablesorter bindings here
};
base.unbind = function(){
// unbind window events by specifying handle so we don't remove too much
base.$window.off('.' + name, base.toggleHeaders);
base.$window.off('.' + name, base.updateWidth);
base.$el.off('.' + name);
base.$el.find('*').off('.' + name);
};
base.toggleHeaders = function () {
base.$el.each(function () {
var $this = $(this);
var newTopOffset = isNaN(base.options.fixedOffset) ?
base.options.fixedOffset.height() : base.options.fixedOffset;
var offset = $this.offset();
var scrollTop = base.$window.scrollTop() + newTopOffset;
var scrollLeft = base.$window.scrollLeft();
var filters = null;
if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height())) {
var newLeft = offset.left - scrollLeft;
if (base.isCloneVisible && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) {
return;
}
filters = $('tr.filters', base.$originalHeader);
if(filters.length) {
filters.insertAfter(base.$clonedHeader.children().eq(0));
}
base.$clonedHeader.css({
'top': newTopOffset,
'margin-top': 0,
'left': newLeft,
'display': 'block'
});
base.$originalHeader.css('visibility', 'hidden');
base.isCloneVisible = true;
base.leftOffset = newLeft;
base.topOffset = newTopOffset;
}
else if (base.isCloneVisible) {
filters = $('tr.filters', base.$clonedHeader);
base.$clonedHeader.css('display', 'none');
if(filters.length) {
filters.insertAfter(base.$originalHeader.children().eq(0));
}
base.$originalHeader.css('visibility', 'visible');
base.isCloneVisible = false;
}
});
};
base.updateWidth = function () {
// Copy cell widths and classes from original header
$('th', base.$clonedHeader).each(function (index) {
var $this = $(this);
var $origCell = $('th', base.$originalHeader).eq(index);
this.className = $origCell.attr('class') || '';
$this.css('width', $origCell.width());
});
// Copy row width from whole table
base.$clonedHeader.css('width', base.$originalHeader.width());
};
// Run initializer
base.init();
}
// A plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[name] = function ( options ) {
return this.each(function () {
var instance = $.data(this, 'plugin_' + name);
if (instance) {
if (typeof options === "string") {
instance[options].apply(instance);
}
} else if(options !== 'destroy') {
$.data(this, 'plugin_' + name, new Plugin( this, options ));
}
});
};
})(jQuery, window);