Subversion-Projekte lars-tiefland.ci

Revision

Blame | Letzte Änderung | Log anzeigen | RSS feed 

/*! 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);