lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(plugins): update plugin dist files

Browse Source
This commit is contained in:
REJack
2021-11-25 00:12:36 +01:00
parent 832395ffa7
commit 4cf2de7fac
757 changed files with 54341 additions and 37461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
plugins/datatables-fixedheader/js/dataTables.fixedHeader.js
View File

@@ -1,4 +1,4 @@
/*! FixedHeader 3.1.9
/*! FixedHeader 3.2.0
* ©2009-2021 SpryMedia Ltd - datatables.net/license
*/
@@ -6,7 +6,7 @@
* @summary FixedHeader
* @description Fix a table's header or footer, so it is always visible while
* scrolling
* @version 3.1.9
* @version 3.2.0
* @file dataTables.fixedHeader.js
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
@@ -102,11 +102,13 @@ var FixedHeader = function ( dt, config ) {
header: {
host: null,
floating: null,
floatingParent: $('<div class="dtfh-floatingparent">'),
placeholder: null
},
footer: {
host: null,
floating: null,
floatingParent: $('<div class="dtfh-floatingparent">'),
placeholder: null
}
};
@@ -208,7 +210,7 @@ $.extend( FixedHeader.prototype, {
/**
* Recalculate the position of the fixed elements and force them into place
*/
update: function ()
update: function (force)
{
var table = this.s.dt.table().node();
@@ -219,8 +221,14 @@ $.extend( FixedHeader.prototype, {
this.enable( false, false );
}
// Don't update if header is not in the document atm (due to
// async events)
if ($(table).children('thead').length === 0) {
return;
}
this._positions();
this._scroll( true );
this._scroll( force !== undefined ? force : true );
},
@@ -258,15 +266,21 @@ $.extend( FixedHeader.prototype, {
this.c.footerOffset = autoFooter.outerHeight();
}
dt.on( 'column-reorder.dt.dtfc column-visibility.dt.dtfc draw.dt.dtfc column-sizing.dt.dtfc responsive-display.dt.dtfc', function () {
that.update();
} );
dt
.on( 'column-reorder.dt.dtfc column-visibility.dt.dtfc column-sizing.dt.dtfc responsive-display.dt.dtfc', function (e, ctx) {
that.update();
} )
.on( 'draw.dt.dtfc', function (e, ctx) {
// For updates from our own table, don't reclone, but for all others, do
that.update(ctx === dt.settings()[0] ? false : true);
} );
dt.on( 'destroy.dtfc', function () {
that.destroy();
} );
this._positions();
$('div.dataTables_scrollHeadInner').height(this.s.position.theadHeight);
this._scroll();
},
@@ -293,25 +307,74 @@ $.extend( FixedHeader.prototype, {
this.dom.thead :
this.dom.tfoot;
// If footer and scrolling is enabled then we don't clone
// Instead the table's height is decreased accordingly - see `_scroll()`
if (item === 'footer' && this._scrollEnabled()) {
return;
}
if ( ! force && itemDom.floating ) {
// existing floating element - reuse it
itemDom.floating.removeClass( 'fixedHeader-floating fixedHeader-locked' );
}
else {
if ( itemDom.floating ) {
itemDom.placeholder.remove();
if(itemDom.placeholder !== null) {
itemDom.placeholder.remove();
}
this._unsize( item );
itemDom.floating.children().detach();
itemDom.floating.remove();
}
var tableNode = $(dt.table().node());
var scrollBody = $(tableNode.parent());
var scrollEnabled = this._scrollEnabled();
itemDom.floating = $( dt.table().node().cloneNode( false ) )
.css( 'table-layout', 'fixed' )
.attr( 'aria-hidden', 'true' )
.css({
'table-layout': 'fixed',
top: 0,
left: 0
})
.removeAttr( 'id' )
.append( itemElement )
.append( itemElement );
itemDom.floatingParent
.css({
width: scrollBody.width(),
overflow: 'hidden',
height: 'fit-content',
position: 'fixed',
left: scrollEnabled ? tableNode.offset().left + scrollBody.scrollLeft() : 0
})
.css(
item === 'header' ?
{
top: this.c.headerOffset,
bottom: ''
} :
{
top: '',
bottom: this.c.footerOffset
}
)
.addClass(item === 'footer' ? 'dtfh-floatingparentfoot' : 'dtfh-floatingparenthead')
.append(itemDom.floating)
.appendTo( 'body' );
this._stickyPosition(itemDom.floating, '-');
var scrollLeftUpdate = () => {
var scrollLeft = scrollBody.scrollLeft()
this.s.scrollLeft = {footer: scrollLeft, header: scrollLeft};
itemDom.floatingParent.scrollLeft(this.s.scrollLeft.header);
}
scrollLeftUpdate();
scrollBody.scroll(scrollLeftUpdate)
// Insert a fake thead/tfoot into the DataTable to stop it jumping around
itemDom.placeholder = itemElement.clone( false );
itemDom.placeholder
@@ -325,6 +388,35 @@ $.extend( FixedHeader.prototype, {
}
},
/**
* This method sets the sticky position of the header elements to match fixed columns
* @param {JQuery<HTMLElement>} el
* @param {string} sign
*/
_stickyPosition(el, sign) {
if (this._scrollEnabled()) {
var that = this
var rtl = $(that.s.dt.table().node()).css('direction') === 'rtl';
el.find('th').each(function() {
// Find out if fixed header has previously set this column
if ($(this).css('position') === 'sticky') {
var right = $(this).css('right');
var left = $(this).css('left');
if (right !== 'auto' && !rtl) {
// New position either adds or dismisses the barWidth
var potential = +right.replace(/px/g, '') + (sign === '-' ? -1 : 1) * that.s.dt.settings()[0].oBrowser.barWidth;
$(this).css('right', potential > 0 ? potential : 0);
}
else if(left !== 'auto' && rtl) {
var potential = +left.replace(/px/g, '') + (sign === '-' ? -1 : 1) * that.s.dt.settings()[0].oBrowser.barWidth;
$(this).css('left', potential > 0 ? potential : 0);
}
}
});
}
},
/**
* 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
@@ -398,7 +490,12 @@ $.extend( FixedHeader.prototype, {
var lastScrollLeft = this.s.scrollLeft;
if ( itemDom.floating && lastScrollLeft[ item ] !== scrollLeft ) {
itemDom.floating.css( 'left', position.left - scrollLeft );
// If scrolling is enabled we need to match the floating header to the body
if (this._scrollEnabled()) {
var newScrollLeft = $($(this.s.dt.table().node()).parent()).scrollLeft()
itemDom.floating.scrollLeft(newScrollLeft);
itemDom.floatingParent.scrollLeft(newScrollLeft);
}
lastScrollLeft[ item ] = scrollLeft;
}
@@ -425,11 +522,27 @@ $.extend( FixedHeader.prototype, {
var itemDom = this.dom[ item ];
var position = this.s.position;
// Just determine if scroll is enabled once
var scrollEnabled = this._scrollEnabled();
// If footer and scrolling is enabled then we don't clone
// Instead the table's height is decreased accordingly - see `_scroll()`
if (item === 'footer' && scrollEnabled) {
return;
}
// It isn't trivial to add a !important css attribute...
var importantWidth = function (w) {
itemDom.floating.attr('style', function(i,s) {
return (s || '') + 'width: '+w+'px !important;';
});
// If not scrolling also have to update the floatingParent
if (!scrollEnabled) {
itemDom.floatingParent.attr('style', function(i,s) {
return (s || '') + 'width: '+w+'px !important;';
});
}
};
// Record focus. Browser's will cause input elements to loose focus if
@@ -438,10 +551,7 @@ $.extend( FixedHeader.prototype, {
var focus = $.contains( tablePart[0], document.activeElement ) ?
document.activeElement :
null;
if ( focus ) {
focus.blur();
}
var scrollBody = $($(this.s.dt.table().node()).parent());
if ( mode === 'in-place' ) {
// Insert the header back into the table's real header
@@ -462,17 +572,53 @@ $.extend( FixedHeader.prototype, {
if ( itemDom.floating ) {
itemDom.floating.remove();
itemDom.floating = null;
this._stickyPosition(itemDom.host, '+');
}
if ( itemDom.floatingParent ) {
itemDom.floatingParent.remove();
}
$($(itemDom.host.parent()).parent()).scrollLeft(scrollBody.scrollLeft())
}
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' );
// Get useful position values
var scrollOffset = scrollBody.offset();
var windowTop = $(document).scrollTop();
var windowHeight = $(window).height();
var windowBottom = windowTop + windowHeight;
var bodyTop = scrollEnabled ? scrollOffset.top : position.tbodyTop;
var bodyBottom = scrollEnabled ? scrollOffset.top + scrollBody.outerHeight() : position.tfootTop
// Calculate the amount that the footer or header needs to be shuffled
var shuffle = item === 'footer' ?
// footer and top of body isn't on screen
bodyTop > windowBottom ?
// Yes - push the footer below
position.tfootHeight :
// No - bottom set to the gap between the top of the body and the bottom of the window
bodyTop + position.tfootHeight - windowBottom :
// Otherwise must be a header so get the difference from the bottom of the
// desired floating header and the bottom of the table body
windowTop + this.c.headerOffset + position.theadHeight - bodyBottom
// Set the top or bottom based off of the offset and the shuffle value
var prop = item === 'header' ? 'top' : 'bottom';
var val = this.c[item+'Offset'] - (shuffle > 0 ? shuffle : 0);
itemDom.floating.addClass( 'fixedHeader-floating' );
itemDom.floatingParent
.css(prop, val)
.css( {
'left': position.left,
'height': item === 'header' ? position.theadHeight : position.tfootHeight,
'z-index': 2
})
.append(itemDom.floating);
importantWidth(position.width);
@@ -484,10 +630,12 @@ $.extend( FixedHeader.prototype, {
// 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' );
itemDom.floating.addClass( 'fixedHeader-locked' );
itemDom.floatingParent.css({
position: 'absolute',
top: position.tfootTop - position.theadHeight,
left: position.left+'px'
});
importantWidth(position.width);
}
@@ -495,10 +643,12 @@ $.extend( FixedHeader.prototype, {
// 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' );
itemDom.floating.addClass( 'fixedHeader-locked' );
itemDom.floatingParent.css({
position: 'absolute',
top: position.tbodyTop,
left: position.left+'px'
});
importantWidth(position.width);
}
@@ -528,26 +678,29 @@ $.extend( FixedHeader.prototype, {
var position = this.s.position;
var dom = this.dom;
var tableNode = $(table.node());
var scrollEnabled = this._scrollEnabled();
// 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 thead = $(dt.table().header());
var tfoot = $(dt.table().footer());
var tbody = dom.tbody;
var scrollBody = tableNode.parent();
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.tbodyHeight = tbody.outerHeight();
position.theadHeight = position.tbodyTop - position.theadTop;
position.tbodyTop = scrollEnabled ? scrollBody.offset().top : tbody.offset().top;
position.tbodyHeight = scrollEnabled ? scrollBody.outerHeight() : tbody.outerHeight();
position.theadHeight = thead.outerHeight();
position.theadBottom = position.theadTop + position.theadHeight;
if ( tfoot.length ) {
position.tfootTop = tfoot.offset().top;
position.tfootTop = position.tbodyTop + position.tbodyHeight; //tfoot.offset().top;
position.tfootBottom = position.tfootTop + tfoot.outerHeight();
position.tfootHeight = position.tfootBottom - position.tfootTop;
position.tfootHeight = tfoot.outerHeight();
}
else {
position.tfootTop = position.tbodyTop + tbody.outerHeight();
@@ -567,21 +720,64 @@ $.extend( FixedHeader.prototype, {
*/
_scroll: function ( forceChange )
{
var windowTop = $(document).scrollTop();
// ScrollBody details
var scrollEnabled = this._scrollEnabled();
var scrollBody = $(this.s.dt.table().node()).parent();
var scrollOffset = scrollBody.offset();
var scrollHeight = scrollBody.outerHeight();
// Window details
var windowLeft = $(document).scrollLeft();
var windowTop = $(document).scrollTop();
var windowHeight = $(window).height();
var windowBottom = windowHeight + windowTop
var position = this.s.position;
var headerMode, footerMode;
// Body Details
var bodyTop = (scrollEnabled ? scrollOffset.top : position.tbodyTop);
var bodyLeft = (scrollEnabled ? scrollOffset.left : position.left);
var bodyBottom = (scrollEnabled ? scrollOffset.top + scrollHeight : position.tfootTop);
var bodyWidth = (scrollEnabled ? scrollBody.outerWidth() : position.tbodyWidth);
var windowBottom = windowTop + windowHeight;
if ( this.c.header ) {
if ( ! this.s.enable ) {
headerMode = 'in-place';
}
else if ( ! position.visible || windowTop <= position.theadTop - this.c.headerOffset ) {
// The header is in it's normal place if the body top is lower than
// the scroll of the window plus the headerOffset and the height of the header
else if ( ! position.visible || windowTop + this.c.headerOffset + position.theadHeight <= bodyTop) {
headerMode = 'in-place';
}
else if ( windowTop <= position.tfootTop - position.theadHeight - this.c.headerOffset ) {
// The header should be floated if
else if (
// The scrolling plus the header offset plus the height of the header is lower than the top of the body
windowTop + this.c.headerOffset + position.theadHeight > bodyTop &&
// And the scrolling at the top plus the header offset is above the bottom of the body
windowTop + this.c.headerOffset < bodyBottom
) {
headerMode = 'in';
var scrollBody = $($(this.s.dt.table().node()).parent());
// Further to the above, If the scrolling plus the header offset plus the header height is lower
// than the bottom of the table a shuffle is required so have to force the calculation
if(windowTop + this.c.headerOffset + position.theadHeight > bodyBottom || this.dom.header.floatingParent === undefined){
forceChange = true;
}
else {
this.dom.header.floatingParent
.css({
'top': this.c.headerOffset,
'position': 'fixed'
})
.append(this.dom.header.floating);
}
}
// Anything else and the view is below the table
else {
headerMode = 'below';
}
@@ -593,26 +789,136 @@ $.extend( FixedHeader.prototype, {
this._horizontal( 'header', windowLeft );
}
var header = {
offset: {top: 0, left: 0},
height: 0
}
var footer = {
offset: {top: 0, left: 0},
height: 0
}
if ( this.c.footer && this.dom.tfoot.length ) {
if ( ! this.s.enable ) {
footerMode = 'in-place';
}
else if ( ! position.visible || windowTop + position.windowHeight >= position.tfootBottom + this.c.footerOffset ) {
else if ( ! position.visible || position.tfootBottom + this.c.footerOffset <= windowBottom ) {
footerMode = 'in-place';
}
else if ( position.windowHeight + windowTop > position.tbodyTop + position.tfootHeight + this.c.footerOffset ) {
else if (
bodyBottom + position.tfootHeight + this.c.footerOffset > windowBottom &&
bodyTop + this.c.footerOffset < windowBottom
) {
footerMode = 'in';
forceChange = true;
}
else {
footerMode = 'above';
}
if ( forceChange || footerMode !== this.s.footerMode ) {
this._modeChange( footerMode, 'footer', forceChange );
}
this._horizontal( 'footer', windowLeft );
var getOffsetHeight = (el) => {
return {
offset: el.offset(),
height: el.outerHeight()
}
}
header = this.dom.header.floating ? getOffsetHeight(this.dom.header.floating) : getOffsetHeight(this.dom.thead);
footer = this.dom.footer.floating ? getOffsetHeight(this.dom.footer.floating) : getOffsetHeight(this.dom.tfoot);
// If scrolling is enabled and the footer is off the screen
if (scrollEnabled && footer.offset.top > windowTop){// && footer.offset.top >= windowBottom) {
// Calculate the gap between the top of the scrollBody and the top of the window
var overlap = windowTop - scrollOffset.top;
// The new height is the bottom of the window
var newHeight = windowBottom +
// If the gap between the top of the scrollbody and the window is more than
// the height of the header then the top of the table is still visible so add that gap
// Doing this has effectively calculated the height from the top of the table to the bottom of the current page
(overlap > -header.height ? overlap : 0) -
// Take from that
(
// The top of the header plus
header.offset.top +
// The header height if the standard header is present
(overlap < -header.height ? header.height : 0) +
// And the height of the footer
footer.height
)
// Don't want a negative height
if (newHeight < 0) {
newHeight = 0;
}
// At the end of the above calculation the space between the header (top of the page if floating)
// and the point just above the footer should be the new value for the height of the table.
scrollBody.outerHeight(newHeight);
// Need some rounding here as sometimes very small decimal places are encountered
// If the actual height is bigger or equal to the height we just applied then the footer is "Floating"
if(Math.round(scrollBody.outerHeight()) >= Math.round(newHeight)) {
$(this.dom.tfoot.parent()).addClass("fixedHeader-floating");
}
// Otherwise max-width has kicked in so it is not floating
else {
$(this.dom.tfoot.parent()).removeClass("fixedHeader-floating");
}
}
}
if(this.dom.header.floating){
this.dom.header.floatingParent.css('left', bodyLeft-windowLeft);
}
if(this.dom.footer.floating){
this.dom.footer.floatingParent.css('left', bodyLeft-windowLeft);
}
// If fixed columns is being used on this table then the blockers need to be copied across
// Cloning these is cleaner than creating as our own as it will keep consistency with fixedColumns automatically
// ASSUMING that the class remains the same
if (this.s.dt.settings()[0]._fixedColumns !== undefined) {
var adjustBlocker = (side, end, el) => {
if (el === undefined) {
let blocker = $('div.dtfc-'+side+'-'+end+'-blocker');
el = blocker.length === 0 ?
null :
blocker.clone().appendTo('body').css('z-index', 1);
}
if(el !== null) {
el.css({
top: end === 'top' ? header.offset.top : footer.offset.top,
left: side === 'right' ? bodyLeft + bodyWidth - el.width() : bodyLeft
});
}
return el;
}
// Adjust all blockers
this.dom.header.rightBlocker = adjustBlocker('right', 'top', this.dom.header.rightBlocker);
this.dom.header.leftBlocker = adjustBlocker('left', 'top', this.dom.header.leftBlocker);
this.dom.footer.rightBlocker = adjustBlocker('right', 'bottom', this.dom.footer.rightBlocker);
this.dom.footer.leftBlocker = adjustBlocker('left', 'bottom', this.dom.footer.leftBlocker);
}
},
/**
* Function to check if scrolling is enabled on the table or not
* @returns Boolean value indicating if scrolling on the table is enabled or not
*/
_scrollEnabled: function() {
var oScroll = this.s.dt.settings()[0].oScroll;
if(oScroll.sY !== "" || oScroll.sX !== "") {
return true;
}
return false
}
} );
@@ -622,7 +928,7 @@ $.extend( FixedHeader.prototype, {
* @type {String}
* @static
*/
FixedHeader.version = "3.1.9";
FixedHeader.version = "3.2.0";
/**
* Defaults