tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-25 14:54:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

collapsible.js: Enhance height calculations

Browse Source 
`data-visible-height` now only covers the actual content height
This commit is contained in:
Johannes Meyer 2019-07-29 15:59:48 +02:00
parent 27cd34dd2d
commit eb0d808aec
1 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
public/js/icinga/behavior/collapsible.js
View File

@ -167,7 +167,7 @@
if ($collapsible.is('table')) { if ($collapsible.is('table')) {
return '> tbody > tr'; return '> tbody > tr';
} else if ($collapsible.is('ul, ol')) { } else if ($collapsible.is('ul, ol')) {
return '> li'; return '> li:not(.collapsible-control)';
} }
return ''; return '';
@ -183,12 +183,12 @@
Collapsible.prototype.canCollapse = function($collapsible) { Collapsible.prototype.canCollapse = function($collapsible) {
var rowSelector = this.getRowSelector($collapsible); var rowSelector = this.getRowSelector($collapsible);
if (!! rowSelector) { if (!! rowSelector) {
var visibleRows = $collapsible.data('visibleRows') || this.defaultVisibleRows; var visibleRows = $collapsible.getData('visibleRows', this.defaultVisibleRows);
return $(rowSelector, $collapsible).length > visibleRows * 2; return $(rowSelector, $collapsible).length > visibleRows * 2;
} else { } else {
var actualHeight = $collapsible[0].scrollHeight; var actualHeight = $collapsible[0].scrollHeight - parseFloat($collapsible.css('padding-top'));
var maxHeight = $collapsible.data('visibleHeight') || this.defaultVisibleHeight; var maxHeight = $collapsible.getData('visibleHeight', this.defaultVisibleHeight);
return actualHeight >= maxHeight * 2; return actualHeight >= maxHeight * 2;
} }
@ -200,21 +200,40 @@
* @param $collapsible jQuery The given collapsible container element * @param $collapsible jQuery The given collapsible container element
*/ */
Collapsible.prototype.collapse = function($collapsible) { Collapsible.prototype.collapse = function($collapsible) {
$collapsible.addClass('collapsed'); var height;
var rowSelector = this.getRowSelector($collapsible); var rowSelector = this.getRowSelector($collapsible);
if (!! rowSelector) { if (!! rowSelector) {
var $rows = $(rowSelector, $collapsible).slice(0, $collapsible.data('visibleRows') || this.defaultVisibleRows); height = $collapsible[0].scrollHeight;
height -= parseFloat($collapsible.css('padding-bottom'));
var totalHeight = $rows.offset().top - $collapsible.offset().top; var $rows = $(rowSelector, $collapsible).slice(
$rows.outerHeight(function(_, height) { $collapsible.getData('visibleRows', this.defaultVisibleRows)
totalHeight += height; );
$rows.outerHeight(function (i, contentHeight) {
var $el = $(this);
var $prev = $el.prev();
if (i === 0 && ! $prev.length) { // very first element
height -= parseFloat($el.css('margin-top')) + contentHeight;
} else if (i < $rows.length - 1) { // every element but the last one
var prevBottomOffset = $prev.offset().top + $prev.outerHeight();
height -= ($el.offset().top - prevBottomOffset) + contentHeight;
} else { // the last element
height -= $el.outerHeight(true);
}
}); });
$collapsible.css({display: 'block', height: totalHeight});
} else { } else {
$collapsible.css({display: 'block', height: $collapsible.data('visibleHeight') || this.defaultVisibleHeight}); height = $collapsible.getData('visibleHeight', this.defaultVisibleHeight);
height += parseFloat($collapsible.css('padding-top'));
if (!! $collapsible.data('toggleElement')) {
height += $collapsible.children($collapsible.data('toggleElement')).first().outerHeight(true);
}
} }
$collapsible.css({display: 'block', height: height, paddingBottom: 0});
$collapsible.addClass('collapsed');
}; };
/** /**
@ -224,7 +243,7 @@
*/ */
Collapsible.prototype.expand = function($collapsible) { Collapsible.prototype.expand = function($collapsible) {
$collapsible.removeClass('collapsed'); $collapsible.removeClass('collapsed');
$collapsible.css({display: '', height: ''}); $collapsible.css({display: '', height: '', paddingBottom: ''});
}; };
Icinga.Behaviors.Collapsible = Collapsible; Icinga.Behaviors.Collapsible = Collapsible;