GPQAPP

1
/*! FixedHeader 3.2.1
2
 * ©2009-2021 SpryMedia Ltd - datatables.net/license
3
 */
4

5
/**
6
 * @summary     FixedHeader
7
 * @description Fix a table's header or footer, so it is always visible while
8
 *              scrolling
9
 * @version     3.2.1
10
 * @file        dataTables.fixedHeader.js
11
 * @author      SpryMedia Ltd (www.sprymedia.co.uk)
12
 * @contact     www.sprymedia.co.uk/contact
13
 * @copyright   Copyright 2009-2021 SpryMedia Ltd.
14
 *
15
 * This source file is free software, available under the following license:
16
 *   MIT license - http://datatables.net/license/mit
17
 *
18
 * This source file is distributed in the hope that it will be useful, but
19
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
20
 * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
21
 *
22
 * For details please refer to: http://www.datatables.net
23
 */
24

25
(function( factory ){
26
	if ( typeof define === 'function' && define.amd ) {
27
		// AMD
28
		define( ['jquery', 'datatables.net'], function ( $ ) {
29
			return factory( $, window, document );
30
		} );
31
	}
32
	else if ( typeof exports === 'object' ) {
33
		// CommonJS
34
		module.exports = function (root, $) {
35
			if ( ! root ) {
36
				root = window;
37
			}
38

39
			if ( ! $ || ! $.fn.dataTable ) {
40
				$ = require('datatables.net')(root, $).$;
41
			}
42

43
			return factory( $, root, root.document );
44
		};
45
	}
46
	else {
47
		// Browser
48
		factory( jQuery, window, document );
49
	}
50
}(function( $, window, document, undefined ) {
51
'use strict';
52
var DataTable = $.fn.dataTable;
53

54

55
var _instCounter = 0;
56

57
var FixedHeader = function ( dt, config ) {
58
	// Sanity check - you just know it will happen
59
	if ( ! (this instanceof FixedHeader) ) {
60
		throw "FixedHeader must be initialised with the 'new' keyword.";
61
	}
62

63
	// Allow a boolean true for defaults
64
	if ( config === true ) {
65
		config = {};
66
	}
67

68
	dt = new DataTable.Api( dt );
69

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

72
	this.s = {
73
		dt: dt,
74
		position: {
75
			theadTop: 0,
76
			tbodyTop: 0,
77
			tfootTop: 0,
78
			tfootBottom: 0,
79
			width: 0,
80
			left: 0,
81
			tfootHeight: 0,
82
			theadHeight: 0,
83
			windowHeight: $(window).height(),
84
			visible: true
85
		},
86
		headerMode: null,
87
		footerMode: null,
88
		autoWidth: dt.settings()[0].oFeatures.bAutoWidth,
89
		namespace: '.dtfc'+(_instCounter++),
90
		scrollLeft: {
91
			header: -1,
92
			footer: -1
93
		},
94
		enable: true
95
	};
96

97
	this.dom = {
98
		floatingHeader: null,
99
		thead: $(dt.table().header()),
100
		tbody: $(dt.table().body()),
101
		tfoot: $(dt.table().footer()),
102
		header: {
103
			host: null,
104
			floating: null,
105
			floatingParent: $('<div class="dtfh-floatingparent">'),
106
			placeholder: null
107
		},
108
		footer: {
109
			host: null,
110
			floating: null,
111
			floatingParent: $('<div class="dtfh-floatingparent">'),
112
			placeholder: null
113
		}
114
	};
115

116
	this.dom.header.host = this.dom.thead.parent();
117
	this.dom.footer.host = this.dom.tfoot.parent();
118

119
	var dtSettings = dt.settings()[0];
120
	if ( dtSettings._fixedHeader ) {
121
		throw "FixedHeader already initialised on table "+dtSettings.nTable.id;
122
	}
123

124
	dtSettings._fixedHeader = this;
125

126
	this._constructor();
127
};
128

129

130
/*
131
 * Variable: FixedHeader
132
 * Purpose:  Prototype for FixedHeader
133
 * Scope:    global
134
 */
135
$.extend( FixedHeader.prototype, {
136
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
137
	 * API methods
138
	 */
139

140
	/**
141
	 * Kill off FH and any events
142
	 */
143
	destroy: function () {
144
		this.s.dt.off( '.dtfc' );
145
		$(window).off( this.s.namespace );
146

147
		if ( this.c.header ) {
148
			this._modeChange( 'in-place', 'header', true );
149
		}
150

151
		if ( this.c.footer && this.dom.tfoot.length ) {
152
			this._modeChange( 'in-place', 'footer', true );
153
		}
154
	},
155

156
	/**
157
	 * Enable / disable the fixed elements
158
	 *
159
	 * @param  {boolean} enable `true` to enable, `false` to disable
160
	 */
161
	enable: function ( enable, update )
162
	{
163
		this.s.enable = enable;
164

165
		if ( update || update === undefined ) {
166
			this._positions();
167
			this._scroll( true );
168
		}
169
	},
170

171
	/**
172
	 * Get enabled status
173
	 */
174
	enabled: function ()
175
	{
176
		return this.s.enable;
177
	},
178
	
179
	/**
180
	 * Set header offset 
181
	 *
182
	 * @param  {int} new value for headerOffset
183
	 */
184
	headerOffset: function ( offset )
185
	{
186
		if ( offset !== undefined ) {
187
			this.c.headerOffset = offset;
188
			this.update();
189
		}
190

191
		return this.c.headerOffset;
192
	},
193
	
194
	/**
195
	 * Set footer offset
196
	 *
197
	 * @param  {int} new value for footerOffset
198
	 */
199
	footerOffset: function ( offset )
200
	{
201
		if ( offset !== undefined ) {
202
			this.c.footerOffset = offset;
203
			this.update();
204
		}
205

206
		return this.c.footerOffset;
207
	},
208

209
	
210
	/**
211
	 * Recalculate the position of the fixed elements and force them into place
212
	 */
213
	update: function (force)
214
	{
215
		var table = this.s.dt.table().node();
216

217
		if ( $(table).is(':visible') ) {
218
			this.enable( true, false );
219
		}
220
		else {
221
			this.enable( false, false );
222
		}
223

224
		// Don't update if header is not in the document atm (due to
225
		// async events)
226
		if ($(table).children('thead').length === 0) {
227
			return;
228
		}
229

230
		this._positions();
231
		this._scroll( force !== undefined ? force : true );
232
	},
233

234

235
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
236
	 * Constructor
237
	 */
238
	
239
	/**
240
	 * FixedHeader constructor - adding the required event listeners and
241
	 * simple initialisation
242
	 *
243
	 * @private
244
	 */
245
	_constructor: function ()
246
	{
247
		var that = this;
248
		var dt = this.s.dt;
249

250
		$(window)
251
			.on( 'scroll'+this.s.namespace, function () {
252
				that._scroll();
253
			} )
254
			.on( 'resize'+this.s.namespace, DataTable.util.throttle( function () {
255
				that.s.position.windowHeight = $(window).height();
256
				that.update();
257
			}, 50 ) );
258

259
		var autoHeader = $('.fh-fixedHeader');
260
		if ( ! this.c.headerOffset && autoHeader.length ) {
261
			this.c.headerOffset = autoHeader.outerHeight();
262
		}
263

264
		var autoFooter = $('.fh-fixedFooter');
265
		if ( ! this.c.footerOffset && autoFooter.length ) {
266
			this.c.footerOffset = autoFooter.outerHeight();
267
		}
268

269
		dt
270
			.on( 'column-reorder.dt.dtfc column-visibility.dt.dtfc column-sizing.dt.dtfc responsive-display.dt.dtfc', function (e, ctx) {
271
				that.update();
272
			} )
273
			.on( 'draw.dt.dtfc', function (e, ctx) {
274
				// For updates from our own table, don't reclone, but for all others, do
275
				that.update(ctx === dt.settings()[0] ? false : true);
276
			} );
277

278
		dt.on( 'destroy.dtfc', function () {
279
			that.destroy();
280
		} );
281

282
		this._positions();
283
		this._scroll();
284
	},
285

286

287
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
288
	 * Private methods
289
	 */
290

291
	/**
292
	 * Clone a fixed item to act as a place holder for the original element
293
	 * which is moved into a clone of the table element, and moved around the
294
	 * document to give the fixed effect.
295
	 *
296
	 * @param  {string}  item  'header' or 'footer'
297
	 * @param  {boolean} force Force the clone to happen, or allow automatic
298
	 *   decision (reuse existing if available)
299
	 * @private
300
	 */
301
	_clone: function ( item, force )
302
	{
303
		var dt = this.s.dt;
304
		var itemDom = this.dom[ item ];
305
		var itemElement = item === 'header' ?
306
			this.dom.thead :
307
			this.dom.tfoot;
308

309
		// If footer and scrolling is enabled then we don't clone
310
		// Instead the table's height is decreased accordingly - see `_scroll()`
311
		if (item === 'footer' && this._scrollEnabled()) {
312
			return;
313
		}	
314

315
		if ( ! force && itemDom.floating ) {
316
			// existing floating element - reuse it
317
			itemDom.floating.removeClass( 'fixedHeader-floating fixedHeader-locked' );
318
		}
319
		else {
320
			if ( itemDom.floating ) {
321
				if(itemDom.placeholder !== null) {
322
					itemDom.placeholder.remove();
323
				}
324
				this._unsize( item );
325
				itemDom.floating.children().detach();
326
				itemDom.floating.remove();
327
			}
328

329
			var tableNode = $(dt.table().node()); 
330
			var scrollBody = $(tableNode.parent());
331
			var scrollEnabled = this._scrollEnabled();
332

333
			itemDom.floating = $( dt.table().node().cloneNode( false ) )
334
				.attr( 'aria-hidden', 'true' )
335
				.css({
336
					'table-layout': 'fixed',
337
					top: 0,
338
					left: 0
339
				})
340
				.removeAttr( 'id' )
341
				.append( itemElement );
342

343
			itemDom.floatingParent
344
				.css({
345
					width: scrollBody.width(),
346
					overflow: 'hidden',
347
					height: 'fit-content',
348
					position: 'fixed',
349
					left: scrollEnabled ? tableNode.offset().left + scrollBody.scrollLeft() : 0
350
				})
351
				.css(
352
					item === 'header' ?
353
						{
354
							top: this.c.headerOffset,
355
							bottom: ''
356
						} :
357
						{
358
							top: '',
359
							bottom: this.c.footerOffset
360
						}
361
				)
362
				.addClass(item === 'footer' ? 'dtfh-floatingparentfoot' : 'dtfh-floatingparenthead')
363
				.append(itemDom.floating)
364
				.appendTo( 'body' );
365

366
			this._stickyPosition(itemDom.floating, '-');
367

368
			var scrollLeftUpdate = () => {
369
				var scrollLeft = scrollBody.scrollLeft()
370
				this.s.scrollLeft = {footer: scrollLeft, header: scrollLeft};
371
				itemDom.floatingParent.scrollLeft(this.s.scrollLeft.header);
372
			}
373

374
			scrollLeftUpdate();
375
			scrollBody.scroll(scrollLeftUpdate)
376

377
			// Insert a fake thead/tfoot into the DataTable to stop it jumping around
378
			itemDom.placeholder = itemElement.clone( false );
379
			itemDom.placeholder
380
				.find( '*[id]' )
381
				.removeAttr( 'id' );
382

383
			itemDom.host.prepend( itemDom.placeholder );
384

385
			// Clone widths
386
			this._matchWidths( itemDom.placeholder, itemDom.floating );
387
		}
388
	},
389

390
	/**
391
	 * This method sets the sticky position of the header elements to match fixed columns
392
	 * @param {JQuery<HTMLElement>} el 
393
	 * @param {string} sign 
394
	 */
395
	_stickyPosition(el, sign) {
396
		if (this._scrollEnabled()) {
397
			var that = this
398
			var rtl = $(that.s.dt.table().node()).css('direction') === 'rtl';
399

400
			el.find('th').each(function() {
401
				// Find out if fixed header has previously set this column
402
				if ($(this).css('position') === 'sticky') {
403
					var right = $(this).css('right');
404
					var left = $(this).css('left');
405
					if (right !== 'auto' && !rtl) {
406
						// New position either adds or dismisses the barWidth
407
						var potential = +right.replace(/px/g, '') + (sign === '-' ? -1 : 1) * that.s.dt.settings()[0].oBrowser.barWidth;
408
						$(this).css('right', potential > 0 ? potential : 0);
409
					}
410
					else if(left !== 'auto' && rtl) {
411
						var potential = +left.replace(/px/g, '') + (sign === '-' ? -1 : 1) * that.s.dt.settings()[0].oBrowser.barWidth;
412
						$(this).css('left', potential > 0 ? potential : 0);
413
					}
414
				}
415
			});
416
		}
417
	},
418

419
	/**
420
	 * Copy widths from the cells in one element to another. This is required
421
	 * for the footer as the footer in the main table takes its sizes from the
422
	 * header columns. That isn't present in the footer so to have it still
423
	 * align correctly, the sizes need to be copied over. It is also required
424
	 * for the header when auto width is not enabled
425
	 *
426
	 * @param  {jQuery} from Copy widths from
427
	 * @param  {jQuery} to   Copy widths to
428
	 * @private
429
	 */
430
	_matchWidths: function ( from, to ) {
431
		var get = function ( name ) {
432
			return $(name, from)
433
				.map( function () {
434
					return $(this).css('width').replace(/[^\d\.]/g, '') * 1;
435
				} ).toArray();
436
		};
437

438
		var set = function ( name, toWidths ) {
439
			$(name, to).each( function ( i ) {
440
				$(this).css( {
441
					width: toWidths[i],
442
					minWidth: toWidths[i]
443
				} );
444
			} );
445
		};
446

447
		var thWidths = get( 'th' );
448
		var tdWidths = get( 'td' );
449

450
		set( 'th', thWidths );
451
		set( 'td', tdWidths );
452
	},
453

454
	/**
455
	 * Remove assigned widths from the cells in an element. This is required
456
	 * when inserting the footer back into the main table so the size is defined
457
	 * by the header columns and also when auto width is disabled in the
458
	 * DataTable.
459
	 *
460
	 * @param  {string} item The `header` or `footer`
461
	 * @private
462
	 */
463
	_unsize: function ( item ) {
464
		var el = this.dom[ item ].floating;
465

466
		if ( el && (item === 'footer' || (item === 'header' && ! this.s.autoWidth)) ) {
467
			$('th, td', el).css( {
468
				width: '',
469
				minWidth: ''
470
			} );
471
		}
472
		else if ( el && item === 'header' ) {
473
			$('th, td', el).css( 'min-width', '' );
474
		}
475
	},
476

477
	/**
478
	 * Reposition the floating elements to take account of horizontal page
479
	 * scroll
480
	 *
481
	 * @param  {string} item       The `header` or `footer`
482
	 * @param  {int}    scrollLeft Document scrollLeft
483
	 * @private
484
	 */
485
	_horizontal: function ( item, scrollLeft )
486
	{
487
		var itemDom = this.dom[ item ];
488
		var position = this.s.position;
489
		var lastScrollLeft = this.s.scrollLeft;
490

491
		if ( itemDom.floating && lastScrollLeft[ item ] !== scrollLeft ) {
492
			// If scrolling is enabled we need to match the floating header to the body
493
			if (this._scrollEnabled()) {
494
				var newScrollLeft = $($(this.s.dt.table().node()).parent()).scrollLeft()
495
				itemDom.floating.scrollLeft(newScrollLeft);
496
				itemDom.floatingParent.scrollLeft(newScrollLeft);
497
			}
498

499
			lastScrollLeft[ item ] = scrollLeft;
500
		}
501
	},
502

503
	/**
504
	 * Change from one display mode to another. Each fixed item can be in one
505
	 * of:
506
	 *
507
	 * * `in-place` - In the main DataTable
508
	 * * `in` - Floating over the DataTable
509
	 * * `below` - (Header only) Fixed to the bottom of the table body
510
	 * * `above` - (Footer only) Fixed to the top of the table body
511
	 * 
512
	 * @param  {string}  mode        Mode that the item should be shown in
513
	 * @param  {string}  item        'header' or 'footer'
514
	 * @param  {boolean} forceChange Force a redraw of the mode, even if already
515
	 *     in that mode.
516
	 * @private
517
	 */
518
	_modeChange: function ( mode, item, forceChange )
519
	{
520
		var dt = this.s.dt;
521
		var itemDom = this.dom[ item ];
522
		var position = this.s.position;
523

524
		// Just determine if scroll is enabled once
525
		var scrollEnabled = this._scrollEnabled();
526

527
		// If footer and scrolling is enabled then we don't clone
528
		// Instead the table's height is decreased accordingly - see `_scroll()`
529
		if (item === 'footer' && scrollEnabled) {
530
			return;
531
		}		
532

533
		// It isn't trivial to add a !important css attribute...
534
		var importantWidth = function (w) {
535
			itemDom.floating.attr('style', function(i,s) {
536
				return (s || '') + 'width: '+w+'px !important;';
537
			});
538

539
			// If not scrolling also have to update the floatingParent
540
			if (!scrollEnabled) {
541
				itemDom.floatingParent.attr('style', function(i,s) {
542
					return (s || '') + 'width: '+w+'px !important;';
543
				});
544
			}
545
		};
546

547
		// Record focus. Browser's will cause input elements to loose focus if
548
		// they are inserted else where in the doc
549
		var tablePart = this.dom[ item==='footer' ? 'tfoot' : 'thead' ];
550
		var focus = $.contains( tablePart[0], document.activeElement ) ?
551
			document.activeElement :
552
			null;
553
		var scrollBody = $($(this.s.dt.table().node()).parent());
554

555
		if ( mode === 'in-place' ) {
556
			// Insert the header back into the table's real header
557
			if ( itemDom.placeholder ) {
558
				itemDom.placeholder.remove();
559
				itemDom.placeholder = null;
560
			}
561

562
			this._unsize( item );
563

564
			if ( item === 'header' ) {
565
				itemDom.host.prepend( tablePart );
566
			}
567
			else {
568
				itemDom.host.append( tablePart );
569
			}
570

571
			if ( itemDom.floating ) {
572
				itemDom.floating.remove();
573
				itemDom.floating = null;
574
				this._stickyPosition(itemDom.host, '+');
575
			}
576

577
			if ( itemDom.floatingParent ) {
578
				itemDom.floatingParent.remove();
579
			}
580

581
			$($(itemDom.host.parent()).parent()).scrollLeft(scrollBody.scrollLeft())
582
		}
583
		else if ( mode === 'in' ) {
584
			// Remove the header from the read header and insert into a fixed
585
			// positioned floating table clone
586
			this._clone( item, forceChange );
587

588
			// Get useful position values
589
			var scrollOffset = scrollBody.offset();
590
			var windowTop = $(document).scrollTop();
591
			var windowHeight = $(window).height();
592
			var windowBottom = windowTop + windowHeight;
593
			var bodyTop = scrollEnabled ? scrollOffset.top : position.tbodyTop;
594
			var bodyBottom = scrollEnabled ? scrollOffset.top + scrollBody.outerHeight() : position.tfootTop
595

596
			// Calculate the amount that the footer or header needs to be shuffled
597
			var shuffle = item === 'footer' ?
598
				// footer and top of body isn't on screen
599
				bodyTop > windowBottom ?
600
					// Yes - push the footer below
601
					position.tfootHeight :
602
					// No - bottom set to the gap between the top of the body and the bottom of the window
603
					bodyTop + position.tfootHeight - windowBottom :
604
				// Otherwise must be a header so get the difference from the bottom of the
605
				//  desired floating header and the bottom of the table body
606
				windowTop + this.c.headerOffset + position.theadHeight - bodyBottom
607
				
608
			// Set the top or bottom based off of the offset and the shuffle value
609
			var prop = item === 'header' ? 'top' : 'bottom';
610
			var val = this.c[item+'Offset'] - (shuffle > 0 ? shuffle : 0);
611

612
			itemDom.floating.addClass( 'fixedHeader-floating' );
613
			itemDom.floatingParent
614
				.css(prop, val)
615
				.css( {
616
					'left': position.left,
617
					'height': item === 'header' ? position.theadHeight : position.tfootHeight,
618
					'z-index': 2
619
				})
620
				.append(itemDom.floating);
621

622
			importantWidth(position.width);
623

624
			if ( item === 'footer' ) {
625
				itemDom.floating.css( 'top', '' );
626
			}
627
		}
628
		else if ( mode === 'below' ) { // only used for the header
629
			// Fix the position of the floating header at base of the table body
630
			this._clone( item, forceChange );
631

632
			itemDom.floating.addClass( 'fixedHeader-locked' );
633
			itemDom.floatingParent.css({
634
				position: 'absolute',
635
				top: position.tfootTop - position.theadHeight,
636
				left: position.left+'px'
637
			});
638

639
			importantWidth(position.width);
640
		}
641
		else if ( mode === 'above' ) { // only used for the footer
642
			// Fix the position of the floating footer at top of the table body
643
			this._clone( item, forceChange );
644

645
			itemDom.floating.addClass( 'fixedHeader-locked' );
646
			itemDom.floatingParent.css({
647
				position: 'absolute',
648
				top: position.tbodyTop,
649
				left: position.left+'px'
650
			});
651

652
			importantWidth(position.width);
653
		}
654

655
		// Restore focus if it was lost
656
		if ( focus && focus !== document.activeElement ) {
657
			setTimeout( function () {
658
				focus.focus();
659
			}, 10 );
660
		}
661

662
		this.s.scrollLeft.header = -1;
663
		this.s.scrollLeft.footer = -1;
664
		this.s[item+'Mode'] = mode;
665
	},
666

667
	/**
668
	 * Cache the positional information that is required for the mode
669
	 * calculations that FixedHeader performs.
670
	 *
671
	 * @private
672
	 */
673
	_positions: function ()
674
	{
675
		var dt = this.s.dt;
676
		var table = dt.table();
677
		var position = this.s.position;
678
		var dom = this.dom;
679
		var tableNode = $(table.node());
680
		var scrollEnabled = this._scrollEnabled();
681

682
		// Need to use the header and footer that are in the main table,
683
		// regardless of if they are clones, since they hold the positions we
684
		// want to measure from
685
		var thead = $(dt.table().header());
686
		var tfoot = $(dt.table().footer());
687
		var tbody = dom.tbody;
688
		var scrollBody = tableNode.parent();
689

690
		position.visible = tableNode.is(':visible');
691
		position.width = tableNode.outerWidth();
692
		position.left = tableNode.offset().left;
693
		position.theadTop = thead.offset().top;
694
		position.tbodyTop = scrollEnabled ? scrollBody.offset().top : tbody.offset().top;
695
		position.tbodyHeight = scrollEnabled ? scrollBody.outerHeight() : tbody.outerHeight();
696
		position.theadHeight = thead.outerHeight();
697
		position.theadBottom = position.theadTop + position.theadHeight;
698

699
		if ( tfoot.length ) {
700
			position.tfootTop = position.tbodyTop + position.tbodyHeight; //tfoot.offset().top;
701
			position.tfootBottom = position.tfootTop + tfoot.outerHeight();
702
			position.tfootHeight = tfoot.outerHeight();
703
		}
704
		else {
705
			position.tfootTop = position.tbodyTop + tbody.outerHeight();
706
			position.tfootBottom = position.tfootTop;
707
			position.tfootHeight = position.tfootTop;
708
		}
709
	},
710

711

712
	/**
713
	 * Mode calculation - determine what mode the fixed items should be placed
714
	 * into.
715
	 *
716
	 * @param  {boolean} forceChange Force a redraw of the mode, even if already
717
	 *     in that mode.
718
	 * @private
719
	 */
720
	_scroll: function ( forceChange )
721
	{
722
		// ScrollBody details
723
		var scrollEnabled = this._scrollEnabled();
724
		var scrollBody = $(this.s.dt.table().node()).parent();
725
		var scrollOffset =  scrollBody.offset();
726
		var scrollHeight =  scrollBody.outerHeight();
727

728
		// Window details
729
		var windowLeft = $(document).scrollLeft();
730
		var windowTop = $(document).scrollTop();
731
		var windowHeight = $(window).height();
732
		var windowBottom = windowHeight + windowTop
733

734

735
		var position = this.s.position;
736
		var headerMode, footerMode;
737

738
		// Body Details
739
		var bodyTop = (scrollEnabled ? scrollOffset.top : position.tbodyTop);
740
		var bodyLeft = (scrollEnabled ? scrollOffset.left : position.left);
741
		var bodyBottom = (scrollEnabled ? scrollOffset.top + scrollHeight : position.tfootTop);
742
		var bodyWidth = (scrollEnabled ? scrollBody.outerWidth() : position.tbodyWidth);
743

744
		var windowBottom = windowTop + windowHeight;
745

746
		if ( this.c.header ) {
747
			if ( ! this.s.enable ) {
748
				headerMode = 'in-place';
749
			}
750
			// The header is in it's normal place if the body top is lower than
751
			//  the scroll of the window plus the headerOffset and the height of the header
752
			else if ( ! position.visible || windowTop + this.c.headerOffset + position.theadHeight <= bodyTop) {
753
				headerMode = 'in-place';
754
			}
755
			// The header should be floated if
756
			else if (
757
				// The scrolling plus the header offset plus the height of the header is lower than the top of the body
758
				windowTop + this.c.headerOffset + position.theadHeight > bodyTop &&
759
				// And the scrolling at the top plus the header offset is above the bottom of the body
760
				windowTop + this.c.headerOffset < bodyBottom
761
			) {
762
				headerMode = 'in';
763
				var scrollBody = $($(this.s.dt.table().node()).parent());
764

765
				// Further to the above, If the scrolling plus the header offset plus the header height is lower
766
				// than the bottom of the table a shuffle is required so have to force the calculation
767
				if(windowTop + this.c.headerOffset + position.theadHeight > bodyBottom || this.dom.header.floatingParent === undefined){
768
					forceChange = true;
769
				}
770
				else {
771
					this.dom.header.floatingParent
772
						.css({
773
							'top': this.c.headerOffset,
774
							'position': 'fixed'
775
						})
776
						.append(this.dom.header.floating);
777
				}
778
			}
779
			// Anything else and the view is below the table
780
			else {
781
				headerMode = 'below';
782
			}
783

784
			if ( forceChange || headerMode !== this.s.headerMode ) {
785
				this._modeChange( headerMode, 'header', forceChange );
786
			}
787

788
			this._horizontal( 'header', windowLeft );
789
		}
790

791
		var header = {
792
			offset: {top: 0, left: 0},
793
			height: 0
794
		}
795
		var footer = {
796
			offset: {top: 0, left: 0},
797
			height: 0
798
		}
799

800
		if ( this.c.footer && this.dom.tfoot.length ) {
801
			if ( ! this.s.enable ) {
802
				footerMode = 'in-place';
803
			}
804
			else if ( ! position.visible || position.tfootBottom + this.c.footerOffset <= windowBottom ) {
805
				footerMode = 'in-place';
806
			}
807
			else if (
808
				bodyBottom + position.tfootHeight + this.c.footerOffset > windowBottom &&
809
				bodyTop + this.c.footerOffset < windowBottom
810
			) {
811
				footerMode = 'in';
812
				forceChange = true;
813
			}
814
			else {
815
				footerMode = 'above';
816
			}
817
			
818
			if ( forceChange || footerMode !== this.s.footerMode ) {
819
				this._modeChange( footerMode, 'footer', forceChange );
820
			}
821

822
			this._horizontal( 'footer', windowLeft );
823
			
824
			var getOffsetHeight = (el) => {
825
				return {
826
					offset: el.offset(),
827
					height: el.outerHeight()
828
				}
829
			}
830
		
831
			header = this.dom.header.floating ? getOffsetHeight(this.dom.header.floating) : getOffsetHeight(this.dom.thead);
832
			footer = this.dom.footer.floating ? getOffsetHeight(this.dom.footer.floating) : getOffsetHeight(this.dom.tfoot);
833

834
			// If scrolling is enabled and the footer is off the screen
835
			if (scrollEnabled && footer.offset.top > windowTop){// && footer.offset.top >= windowBottom) {
836
				// Calculate the gap between the top of the scrollBody and the top of the window
837
				var overlap = windowTop - scrollOffset.top;
838
				// The new height is the bottom of the window
839
				var newHeight = windowBottom +
840
					// If the gap between the top of the scrollbody and the window is more than
841
					//  the height of the header then the top of the table is still visible so add that gap
842
					// Doing this has effectively calculated the height from the top of the table to the bottom of the current page
843
					(overlap > -header.height ? overlap : 0) -
844
					// Take from that
845
					(
846
						// The top of the header plus
847
						header.offset.top +
848
						// The header height if the standard header is present
849
						(overlap < -header.height ? header.height : 0) +
850
						// And the height of the footer
851
						footer.height
852
					)
853

854
					// Don't want a negative height
855
				if (newHeight < 0) {
856
					newHeight = 0;
857
				}
858

859
				// At the end of the above calculation the space between the header (top of the page if floating)
860
				// and the point just above the footer should be the new value for the height of the table.
861
				scrollBody.outerHeight(newHeight);
862
				
863
				// Need some rounding here as sometimes very small decimal places are encountered
864
				// If the actual height is bigger or equal to the height we just applied then the footer is "Floating"
865
				if(Math.round(scrollBody.outerHeight()) >= Math.round(newHeight)) {
866
					$(this.dom.tfoot.parent()).addClass("fixedHeader-floating");
867
				}
868
				// Otherwise max-width has kicked in so it is not floating
869
				else {
870
					$(this.dom.tfoot.parent()).removeClass("fixedHeader-floating");
871
				}
872
			}
873
		}
874

875
		if(this.dom.header.floating){
876
			this.dom.header.floatingParent.css('left', bodyLeft-windowLeft);
877
		}
878
		if(this.dom.footer.floating){
879
			this.dom.footer.floatingParent.css('left', bodyLeft-windowLeft);
880
		}
881

882
		// If fixed columns is being used on this table then the blockers need to be copied across
883
		// Cloning these is cleaner than creating as our own as it will keep consistency with fixedColumns automatically
884
		// ASSUMING that the class remains the same
885
		if (this.s.dt.settings()[0]._fixedColumns !== undefined) {
886
			var adjustBlocker = (side, end, el) => {
887
				if (el === undefined) {
888
					let blocker = $('div.dtfc-'+side+'-'+end+'-blocker');
889
					el = blocker.length === 0 ?
890
						null :
891
						blocker.clone().appendTo('body').css('z-index', 1);
892
				}
893
				if(el !== null) {
894
					el.css({
895
						top: end === 'top' ? header.offset.top : footer.offset.top,
896
						left: side === 'right' ? bodyLeft + bodyWidth - el.width() : bodyLeft
897
					});
898
				}
899

900
				return el;
901
			}
902

903
			// Adjust all blockers
904
			this.dom.header.rightBlocker = adjustBlocker('right', 'top', this.dom.header.rightBlocker);
905
			this.dom.header.leftBlocker = adjustBlocker('left', 'top', this.dom.header.leftBlocker);
906
			this.dom.footer.rightBlocker = adjustBlocker('right', 'bottom', this.dom.footer.rightBlocker);
907
			this.dom.footer.leftBlocker = adjustBlocker('left', 'bottom', this.dom.footer.leftBlocker);
908
		}
909
	},
910

911
	/**
912
	 * Function to check if scrolling is enabled on the table or not
913
	 * @returns Boolean value indicating if scrolling on the table is enabled or not
914
	 */
915
	_scrollEnabled: function() {
916
		var oScroll = this.s.dt.settings()[0].oScroll;
917
		if(oScroll.sY !== "" || oScroll.sX !== "") {
918
			return true;
919
		}
920
		return false
921
	}
922
} );
923

924

925
/**
926
 * Version
927
 * @type {String}
928
 * @static
929
 */
930
FixedHeader.version = "3.2.1";
931

932
/**
933
 * Defaults
934
 * @type {Object}
935
 * @static
936
 */
937
FixedHeader.defaults = {
938
	header: true,
939
	footer: false,
940
	headerOffset: 0,
941
	footerOffset: 0
942
};
943

944

945
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
946
 * DataTables interfaces
947
 */
948

949
// Attach for constructor access
950
$.fn.dataTable.FixedHeader = FixedHeader;
951
$.fn.DataTable.FixedHeader = FixedHeader;
952

953

954
// DataTables creation - check if the FixedHeader option has been defined on the
955
// table and if so, initialise
956
$(document).on( 'init.dt.dtfh', function (e, settings, json) {
957
	if ( e.namespace !== 'dt' ) {
958
		return;
959
	}
960

961
	var init = settings.oInit.fixedHeader;
962
	var defaults = DataTable.defaults.fixedHeader;
963

964
	if ( (init || defaults) && ! settings._fixedHeader ) {
965
		var opts = $.extend( {}, defaults, init );
966

967
		if ( init !== false ) {
968
			new FixedHeader( settings, opts );
969
		}
970
	}
971
} );
972

973
// DataTables API methods
974
DataTable.Api.register( 'fixedHeader()', function () {} );
975

976
DataTable.Api.register( 'fixedHeader.adjust()', function () {
977
	return this.iterator( 'table', function ( ctx ) {
978
		var fh = ctx._fixedHeader;
979

980
		if ( fh ) {
981
			fh.update();
982
		}
983
	} );
984
} );
985

986
DataTable.Api.register( 'fixedHeader.enable()', function ( flag ) {
987
	return this.iterator( 'table', function ( ctx ) {
988
		var fh = ctx._fixedHeader;
989

990
		flag = ( flag !== undefined ? flag : true );
991
		if ( fh && flag !== fh.enabled() ) {
992
			fh.enable( flag );
993
		}
994
	} );
995
} );
996

997
DataTable.Api.register( 'fixedHeader.enabled()', function () {
998
	if ( this.context.length ) {
999
		var fh = this.context[0]._fixedHeader;
1000

1001
		if ( fh ) {
1002
			return fh.enabled();
1003
		}
1004
	}
1005

1006
	return false;
1007
} );
1008

1009
DataTable.Api.register( 'fixedHeader.disable()', function ( ) {
1010
	return this.iterator( 'table', function ( ctx ) {
1011
		var fh = ctx._fixedHeader;
1012

1013
		if ( fh && fh.enabled() ) {
1014
			fh.enable( false );
1015
		}
1016
	} );
1017
} );
1018

1019
$.each( ['header', 'footer'], function ( i, el ) {
1020
	DataTable.Api.register( 'fixedHeader.'+el+'Offset()', function ( offset ) {
1021
		var ctx = this.context;
1022

1023
		if ( offset === undefined ) {
1024
			return ctx.length && ctx[0]._fixedHeader ?
1025
				ctx[0]._fixedHeader[el +'Offset']() :
1026
				undefined;
1027
		}
1028

1029
		return this.iterator( 'table', function ( ctx ) {
1030
			var fh = ctx._fixedHeader;
1031

1032
			if ( fh ) {
1033
				fh[ el +'Offset' ]( offset );
1034
			}
1035
		} );
1036
	} );
1037
} );
1038

1039

1040
return FixedHeader;
1041
}));
1042