tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

collapsible.js: Properly track a collapsible's state across navigation

This commit is contained in:
Johannes Meyer 2019-06-06 15:30:56 +02:00
parent 0ed030410f
commit 3122af2838
1 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@
this.on('click', '.collapsible + .collapsible-control', this.onControlClicked, this); this.on('click', '.collapsible + .collapsible-control', this.onControlClicked, this);
this.icinga = icinga; this.icinga = icinga;
this.expandedContainers = {}; this.collapsibleStates = {};
this.defaultNumOfRows = 2; this.defaultNumOfRows = 2;
this.defaultHeight = 36; this.defaultHeight = 36;
}; };
@ -34,11 +34,22 @@
$('.collapsible', event.currentTarget).each(function() { $('.collapsible', event.currentTarget).each(function() {
var $collapsible = $(this); var $collapsible = $(this);
var collapsiblePath = _this.icinga.utils.getCSSPath($collapsible);
// Assumes that any newly rendered elements are expanded
if (_this.canCollapse($collapsible)) { if (_this.canCollapse($collapsible)) {
$collapsible.after($('#collapsible-control-ghost').clone().removeAttr('id')); $collapsible.after($('#collapsible-control-ghost').clone().removeAttr('id'));
$collapsible.addClass('can-collapse'); $collapsible.addClass('can-collapse');
_this.updateCollapsedState($collapsible);
if (typeof _this.collapsibleStates[collapsiblePath] === 'undefined') {
_this.collapsibleStates[collapsiblePath] = true;
_this.collapse($collapsible);
} else if (_this.collapsibleStates[collapsiblePath]) {
_this.collapse($collapsible);
}
} else {
// This collapsible is not large enough (anymore)
delete _this.collapsibleStates[collapsiblePath];
} }
}); });
}; };
@ -56,42 +67,13 @@
if (! $collapsible.length) { if (! $collapsible.length) {
_this.icinga.logger.error('[Collapsible] Collapsible control has no associated .collapsible: ', $target); _this.icinga.logger.error('[Collapsible] Collapsible control has no associated .collapsible: ', $target);
} else { } else {
_this.updateCollapsedState($collapsible); var collapsiblePath = _this.icinga.utils.getCSSPath($collapsible);
} if (_this.collapsibleStates[collapsiblePath]) {
}; _this.collapsibleStates[collapsiblePath] = false;
_this.expand($collapsible);
/**
* Applies the collapse state of the given container. Adds or removes class `collapsed` to containers and sets the
* height.
*
* @param $collapsible jQuery The given collapsible container element
*/
Collapsible.prototype.updateCollapsedState = function($collapsible) {
var collapsiblePath = this.icinga.utils.getCSSPath($collapsible);
if (typeof this.expandedContainers[collapsiblePath] === 'undefined') {
this.expandedContainers[collapsiblePath] = $collapsible.is('.collapsed');
}
if (this.expandedContainers[collapsiblePath]) {
this.expandedContainers[collapsiblePath] = false;
$collapsible.removeClass('collapsed');
$collapsible.css({display: '', height: ''});
} else { } else {
this.expandedContainers[collapsiblePath] = true; _this.collapsibleStates[collapsiblePath] = true;
$collapsible.addClass('collapsed'); _this.collapse($collapsible);
var rowSelector = this.getRowSelector($collapsible);
if (!! rowSelector) {
var $rows = $(rowSelector, $collapsible).slice(0, $collapsible.data('numofrows') || this.defaultNumOfRows);
var totalHeight = $rows.offset().top - $collapsible.offset().top;
$rows.outerHeight(function (_, height) {
totalHeight += height;
});
$collapsible.css({display: 'block', height: totalHeight});
} else {
$collapsible.css({display: 'block', height: $collapsible.data('height') || this.defaultHeight});
} }
} }
}; };
@ -129,6 +111,39 @@
} }
}; };
/**
* Collapse the given collapsible
*
* @param $collapsible jQuery The given collapsible container element
*/
Collapsible.prototype.collapse = function ($collapsible) {
$collapsible.addClass('collapsed');
var rowSelector = this.getRowSelector($collapsible);
if (!! rowSelector) {
var $rows = $(rowSelector, $collapsible).slice(0, $collapsible.data('numofrows') || this.defaultNumOfRows);
var totalHeight = $rows.offset().top - $collapsible.offset().top;
$rows.outerHeight(function (_, height) {
totalHeight += height;
});
$collapsible.css({display: 'block', height: totalHeight});
} else {
$collapsible.css({display: 'block', height: $collapsible.data('height') || this.defaultHeight});
}
};
/**
* Expand the given collapsible
*
* @param $collapsible jQuery The given collapsible container element
*/
Collapsible.prototype.expand = function ($collapsible) {
$collapsible.removeClass('collapsed');
$collapsible.css({display: '', height: ''});
};
Icinga.Behaviors.Collapsible = Collapsible; Icinga.Behaviors.Collapsible = Collapsible;
})(Icinga, jQuery); })(Icinga, jQuery);