tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-31 01:34:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

collapsible.js: Update collapsible states when the layout changes

Browse Source
This commit is contained in:
Johannes Meyer 2019-06-28 15:52:41 +02:00
parent 0140fdf485
commit beae5b5921
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@
var Collapsible = function(icinga) { var Collapsible = function(icinga) {
Icinga.EventListener.call(this, icinga); Icinga.EventListener.call(this, icinga);
this.on('layout-change', this.onLayoutChange, this);
this.on('rendered', '.container', this.onRendered, this); this.on('rendered', '.container', this.onRendered, this);
this.on('click', '.collapsible + .collapsible-control', this.onControlClicked, this); this.on('click', '.collapsible + .collapsible-control', this.onControlClicked, this);
@ -34,13 +35,42 @@
$('.collapsible:not(.can-collapse)', event.currentTarget).each(function() { $('.collapsible:not(.can-collapse)', 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 // 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');
if (! _this.state.isExpanded(_this.icinga.utils.getCSSPath($collapsible))) {
_this.collapse($collapsible);
}
}
});
};
/**
* Updates all collapsibles.
*
* @param event Event The `layout-change` event triggered by window resizing or column changes
*/
Collapsible.prototype.onLayoutChange = function(event) {
var _this = event.data.self;
$('.collapsible').each(function() {
var $collapsible = $(this);
var collapsiblePath = _this.icinga.utils.getCSSPath($collapsible);
if ($collapsible.is('.can-collapse')) {
if (! _this.canCollapse($collapsible)) {
$collapsible.next('.collapsible-control').remove();
$collapsible.removeClass('can-collapse');
_this.expand($collapsible);
}
} else if (_this.canCollapse($collapsible)) {
// It's expanded but shouldn't
$collapsible.after($('#collapsible-control-ghost').clone().removeAttr('id'));
$collapsible.addClass('can-collapse');
if (! _this.state.isExpanded(collapsiblePath)) { if (! _this.state.isExpanded(collapsiblePath)) {
_this.collapse($collapsible); _this.collapse($collapsible);
} }