Subversion-Projekte lars-tiefland.ci

/*! FixedHeader 3.0.0

 * ©2009-2015 SpryMedia Ltd - datatables.net/license

 */

/**

 * @summary     FixedHeader

 * @description Fix a table's header or footer, so it is always visible while

 *              scrolling

 * @version     3.0.0

 * @file        dataTables.fixedHeader.js

 * @author      SpryMedia Ltd (www.sprymedia.co.uk)

 * @contact     www.sprymedia.co.uk/contact

 * @copyright   Copyright 2009-2015 SpryMedia Ltd.

 *

 * This source file is free software, available under the following license:

 *   MIT license - http://datatables.net/license/mit

 *

 * This source file is distributed in the hope that it will be useful, but

 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY

 * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.

 *

 * For details please refer to: http://www.datatables.net

 */

(function(window, document, undefined) {

var factory = function( $, DataTable ) {

"use strict";

var _instCounter = 0;

var FixedHeader = function ( dt, config ) {

	// Sanity check - you just know it will happen

	if ( ! (this instanceof FixedHeader) ) {

		throw "FixedHeader must be initialised with the 'new' keyword.";

	}

	// Allow a boolean true for defaults

	if ( config === true ) {

		config = {};

	}

	dt = new DataTable.Api( dt );

	this.c = $.extend( true, {}, FixedHeader.defaults, config );

	this.s = {

		dt: dt,

		position: {

			theadTop: 0,

			tbodyTop: 0,

			tfootTop: 0,

			tfootBottom: 0,

			width: 0,

			left: 0,

			tfootHeight: 0,

			theadHeight: 0,

			windowHeight: $(window).height(),

			visible: true

		},

		headerMode: null,

		footerMode: null,

		namespace: '.dtfc'+(_instCounter++)

	};

	this.dom = {

		floatingHeader: null,

		thead: $(dt.table().header()),

		tbody: $(dt.table().body()),

		tfoot: $(dt.table().footer()),

		header: {

			host: null,

			floating: null,

			placeholder: null

		},

		footer: {

			host: null,

			floating: null,

			placeholder: null

		}

	};

	this.dom.header.host = this.dom.thead.parent();

	this.dom.footer.host = this.dom.tfoot.parent();

	var dtSettings = dt.settings()[0];

	if ( dtSettings._fixedHeader ) {

		throw "FixedHeader already initialised on table "+dtSettings.nTable.id;

	}

	dtSettings._fixedHeader = this;

	this._constructor();

};

/*

 * Variable: FixedHeader

 * Purpose:  Prototype for FixedHeader

 * Scope:    global

 */

FixedHeader.prototype = {

	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

	 * API methods

	 */

	/**

	 * Recalculate the position of the fixed elements and force them into place

	 */

	update: function () {

		this._positions();

		this._scroll( true );

	},

	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

	 * Constructor

	 */

	/**

	 * FixedHeader constructor - adding the required event listeners and

	 * simple initialisation

	 *

	 * @private

	 */

	_constructor: function ()

	{

		var that = this;

		var dt = this.s.dt;

		$(window)

			.on( 'scroll'+this.s.namespace, function () {

				that._scroll();

			} )

			.on( 'resize'+this.s.namespace, function () {

				that.s.position.windowHeight = $(window).height();

				that._positions();

				that._scroll( true );

			} );

		dt

			.on( 'column-reorder.dt.dtfc column-visibility.dt.dtfc', function () {

				that._positions();

				that._scroll( true );

			} )

			.on( 'draw.dtfc', function () {

				that._positions();

				that._scroll();

			} );

		dt.on( 'destroy.dtfc', function () {

			dt.off( '.dtfc' );

			$(window).off( this.s.namespace );

		} );

		this._positions();

		this._scroll();

	},

	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

	 * Private methods

	 */

	/**

	 * Clone a fixed item to act as a place holder for the original element

	 * which is moved into a clone of the table element, and moved around the

	 * document to give the fixed effect.

	 *

	 * @param  {string}  item  'header' or 'footer'

	 * @param  {boolean} force Force the clone to happen, or allow automatic

	 *   decision (reuse existing if available)

	 * @private

	 */

	_clone: function ( item, force )

	{

		var dt = this.s.dt;

		var itemDom = this.dom[ item ];

		var itemElement = item === 'header' ?

			this.dom.thead :

			this.dom.tfoot;

		if ( ! force && itemDom.floating ) {

			// existing floating element - reuse it

			itemDom.floating.removeClass( 'fixedHeader-floating fixedHeader-locked' );

		}

		else {

			if ( itemDom.floating ) {

				itemDom.placeholder.remove();

				itemDom.floating.children().detach();

				itemDom.floating.remove();

			}

			itemDom.floating = $( dt.table().node().cloneNode( false ) )

				.removeAttr( 'id' )

				.append( itemElement )

				.appendTo( 'body' );

			// Insert a fake thead/tfoot into the DataTable to stop it jumping around

			itemDom.placeholder = itemElement.clone( false );

			itemDom.host.append( itemDom.placeholder );

			// Footer needs sizes cloned across

			if ( item === 'footer' ) {

				this._footerMatch( itemDom.placeholder, itemDom.floating );

			}

		}

	},

	/**

	 * Copy widths from the cells in one element to another. This is required

	 * for the footer as the footer in the main table takes its sizes from the

	 * header columns. That isn't present in the footer so to have it still

	 * align correctly, the sizes need to be copied over.

	 *

	 * @param  {jQuery} from Copy widths from

	 * @param  {jQuery} to   Copy widths to

	 * @private

	 */

	_footerMatch: function ( from, to ) {

		var type = function ( name ) {

			var toWidths = $(name, from)

				.map( function () {

					return $(this).width();

				} ).toArray();

			$(name, to).each( function ( i ) {

				$(this).width( toWidths[i] );

			} );

		};

		type( 'th' );

		type( 'td' );

	},

	/**

	 * Remove assigned widths from the cells in an element. This is required

	 * when inserting the footer back into the main table so the size is defined

	 * by the header columns.

	 *

	 * @private

	 */

	_footerUnsize: function () {

		var footer = this.dom.footer.floating;

		if ( footer ) {

			$('th, td', footer).css( 'width', '' );

		}

	},

	/**

	 * Change from one display mode to another. Each fixed item can be in one

	 * of:

	 *

	 * * `in-place` - In the main DataTable

	 * * `in` - Floating over the DataTable

	 * * `below` - (Header only) Fixed to the bottom of the table body

	 * * `above` - (Footer only) Fixed to the top of the table body

	 *

	 * @param  {string}  mode        Mode that the item should be shown in

	 * @param  {string}  item        'header' or 'footer'

	 * @param  {boolean} forceChange Force a redraw of the mode, even if already

	 *     in that mode.

	 * @private

	 */

	_modeChange: function ( mode, item, forceChange )

	{

		var dt = this.s.dt;

		var itemDom = this.dom[ item ];

		var position = this.s.position;

		if ( mode === 'in-place' ) {

			// Insert the header back into the table's real header

			if ( itemDom.placeholder ) {

				itemDom.placeholder.remove();

				itemDom.placeholder = null;

			}

			itemDom.host.append( item === 'header' ?

				this.dom.thead :

				this.dom.tfoot

			);

			if ( itemDom.floating ) {

				itemDom.floating.remove();

				itemDom.floating = null;

			}

			if ( item === 'footer' ) {

				this._footerUnsize();

			}

		}

		else if ( mode === 'in' ) {

			// Remove the header from the read header and insert into a fixed

			// positioned floating table clone

			this._clone( item, forceChange );

			itemDom.floating

				.addClass( 'fixedHeader-floating' )

				.css( item === 'header' ? 'top' : 'bottom', this.c[item+'Offset'] )

				.css( 'left', position.left+'px' )

				.css( 'width', position.width+'px' );

			if ( item === 'footer' ) {

				itemDom.floating.css( 'top', '' );

			}

		}

		else if ( mode === 'below' ) { // only used for the header

			// Fix the position of the floating header at base of the table body

			this._clone( item, forceChange );

			itemDom.floating

				.addClass( 'fixedHeader-locked' )

				.css( 'top', position.tfootTop - position.theadHeight )

				.css( 'left', position.left+'px' )

				.css( 'width', position.width+'px' );

		}

		else if ( mode === 'above' ) { // only used for the footer

			// Fix the position of the floating footer at top of the table body

			this._clone( item, forceChange );

			itemDom.floating

				.addClass( 'fixedHeader-locked' )

				.css( 'top', position.tbodyTop )

				.css( 'left', position.left+'px' )

				.css( 'width', position.width+'px' );

		}

		this.s[item+'Mode'] = mode;

	},

	/**

	 * Cache the positional information that is required for the mode

	 * calculations that FixedHeader performs.

	 *

	 * @private

	 */

	_positions: function ()

	{

		var dt = this.s.dt;

		var table = dt.table();

		var position = this.s.position;

		var dom = this.dom;

		var tableNode = $(table.node());

		// Need to use the header and footer that are in the main table,

		// regardless of if they are clones, since they hold the positions we

		// want to measure from

		var thead = tableNode.children('thead');

		var tfoot = tableNode.children('tfoot');

		var tbody = dom.tbody;

		position.visible = tableNode.is(':visible');

		position.width = tableNode.outerWidth();

		position.left = tableNode.offset().left;

		position.theadTop = thead.offset().top;

		position.tbodyTop = tbody.offset().top;

		position.theadHeight = position.tbodyTop - position.theadTop;

		if ( tfoot.length ) {

			position.tfootTop = tfoot.offset().top;

			position.tfootBottom = position.tfootTop + tfoot.outerHeight();

			position.tfootHeight = position.tfootBottom - position.tfootTop;

		}

		else {

			position.tfootTop = position.tbodyTop + tbody.outerHeight();

			position.tfootBottom = position.tfootTop;

			position.tfootHeight = position.tfootTop;

		}

	},

	/**

	 * Mode calculation - determine what mode the fixed items should be placed

	 * into.

	 *

	 * @param  {boolean} forceChange Force a redraw of the mode, even if already

	 *     in that mode.

	 * @private

	 */

	_scroll: function ( forceChange )

	{

		var windowTop = $(document).scrollTop();

		var position = this.s.position;

		var headerMode, footerMode;

		if ( this.c.header ) {

			if ( ! position.visible || windowTop <= position.theadTop - this.c.headerOffset ) {

				headerMode = 'in-place';

			}

			else if ( windowTop <= position.tfootTop - position.theadHeight - this.c.headerOffset ) {

				headerMode = 'in';

			}

			else {

				headerMode = 'below';

			}

			if ( forceChange || headerMode !== this.s.headerMode ) {

				this._modeChange( headerMode, 'header', forceChange );

			}

		}

		if ( this.c.footer && this.dom.tfoot.length ) {

			if ( ! position.visible || windowTop + position.windowHeight >= position.tfootBottom + this.c.footerOffset ) {

				footerMode = 'in-place';

			}

			else if ( position.windowHeight + windowTop > position.tbodyTop + position.tfootHeight + this.c.footerOffset ) {

				footerMode = 'in';

			}

			else {

				footerMode = 'above';

			}

			if ( forceChange || footerMode !== this.s.footerMode ) {

				this._modeChange( footerMode, 'footer', forceChange );

			}

		}

	}

};

/**

 * Version

 * @type {String}

 * @static

 */

FixedHeader.version = "3.0.0";

/**

 * Defaults

 * @type {Object}

 * @static

 */

FixedHeader.defaults = {

	header: true,

	footer: false,

	headerOffset: 0,

	footerOffset: 0

};

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

 * DataTables interfaces

 */

// Attach for constructor access

$.fn.dataTable.FixedHeader = FixedHeader;

$.fn.DataTable.FixedHeader = FixedHeader;

// DataTables creation - check if the FixedHeader option has been defined on the

// table and if so, initialise

$(document).on( 'init.dt.dtb', function (e, settings, json) {

	if ( e.namespace !== 'dt' ) {

		return;

	}

	var opts = settings.oInit.fixedHeader || DataTable.defaults.fixedHeader;

	if ( opts && ! settings._buttons ) {

		new FixedHeader( settings, opts );

	}

} );

// DataTables API methods

DataTable.Api.register( 'fixedHeader()', function () {} );

DataTable.Api.register( 'fixedHeader.adjust()', function () {

	return this.iterator( 'table', function ( ctx ) {

		var fh = ctx._fixedHeader;

		if ( fh ) {

			fh.update();

		}

	} );

} );

return FixedHeader;

}; // /factory

// Define as an AMD module if possible

if ( typeof define === 'function' && define.amd ) {

	define( ['jquery', 'datatables'], factory );

}

else if ( typeof exports === 'object' ) {

    // Node/CommonJS

    factory( require('jquery'), require('datatables') );

}

else if ( jQuery && !jQuery.fn.dataTable.FixedHeader ) {

	// Otherwise simply initialise as normal, stopping multiple evaluation

	factory( jQuery, jQuery.fn.dataTable );

}

})(window, document);