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 setup collapsibles in `onLayoutChange`

This commit is contained in:
Johannes Meyer 2021-07-23 15:24:28 +02:00
parent 253fee0054
commit 832a1c88c4
1 changed files with 46 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,38 +44,8 @@
$.each(event.target.querySelectorAll('.collapsible:not(.can-collapse)'), function (_, collapsible) {
// Assumes that any newly rendered elements are expanded
if (_this.canCollapse(collapsible)) {
var toggleSelector = collapsible.dataset.toggleElement;
if (!! toggleSelector) {
var toggle = $(collapsible).children(toggleSelector)[0];
if (! toggle && $(collapsible.nextSibling).is(toggleSelector)) {
toggle = collapsible.nextSibling;
}
if (! toggle) {
_this.icinga.logger.error(
'[Collapsible] Control `' + toggleSelector + '` not found in .collapsible', collapsible);
} else if (! toggle.classList.contains('collapsible-control')) {
toggle.classList.add('collapsible-control');
}
} else {
setTimeout(function () {
var collapsibleControl = document
.getElementById('collapsible-control-ghost')
.cloneNode(true);
collapsibleControl.removeAttribute('id');
collapsible.parentNode.insertBefore(collapsibleControl, collapsible.nextElementSibling);
}, 0);
}
collapsible.classList.add('can-collapse');
if (
typeof collapsible.dataset.noPersistence !== 'undefined'
|| ! _this.state.has(_this.icinga.utils.getCSSPath(collapsible))
) {
toCollapse.push([collapsible, _this.calculateCollapsedHeight(collapsible)]);
}
if (_this.canCollapse(collapsible) && _this.setupCollapsible(collapsible)) {
toCollapse.push([collapsible, _this.calculateCollapsedHeight(collapsible)]);
}
});
@ -99,28 +69,17 @@
$.each(document.querySelectorAll('.collapsible'), function (_, collapsible) {
if ($(collapsible).is('.can-collapse')) {
if (! _this.canCollapse(collapsible)) {
$(collapsible).next('.collapsible-control').remove();
var toggleSelector = collapsible.dataset.toggleElement;
if (! toggleSelector) {
$(collapsible).next('.collapsible-control').remove();
}
collapsible.classList.remove('can-collapse');
_this.expand(collapsible);
}
} else if (_this.canCollapse(collapsible)) {
} else if (_this.canCollapse(collapsible) && _this.setupCollapsible(collapsible)) {
// It's expanded but shouldn't
setTimeout(function () {
var collapsibleControl = document
.getElementById('collapsible-control-ghost')
.cloneNode(true);
collapsibleControl.removeAttribute('id');
collapsible.parentNode.insertBefore(collapsibleControl, collapsible.nextElementSibling);
}, 0);
collapsible.classList.add('can-collapse');
if (
typeof collapsible.dataset.noPersistence !== 'undefined'
|| ! _this.state.has(_this.icinga.utils.getCSSPath(collapsible))
) {
toCollapse.push([collapsible, _this.calculateCollapsedHeight(collapsible)]);
}
toCollapse.push([collapsible, _this.calculateCollapsedHeight(collapsible)]);
}
});
@ -192,6 +151,43 @@
}
};
/**
* Setup the given collapsible
*
* @param collapsible The given collapsible container element
*
* @returns {boolean} Whether it needs to collapse or not
*/
Collapsible.prototype.setupCollapsible = function (collapsible) {
var toggleSelector = collapsible.dataset.toggleElement;
if (!! toggleSelector) {
var toggle = $(collapsible).children(toggleSelector)[0];
if (! toggle && $(collapsible.nextSibling).is(toggleSelector)) {
toggle = collapsible.nextSibling;
}
if (! toggle) {
this.icinga.logger.error(
'[Collapsible] Control `' + toggleSelector + '` not found in .collapsible', collapsible);
} else if (! toggle.classList.contains('collapsible-control')) {
toggle.classList.add('collapsible-control');
}
} else {
setTimeout(function () {
var collapsibleControl = document
.getElementById('collapsible-control-ghost')
.cloneNode(true);
collapsibleControl.removeAttribute('id');
collapsible.parentNode.insertBefore(collapsibleControl, collapsible.nextElementSibling);
}, 0);
}
collapsible.classList.add('can-collapse');
return typeof collapsible.dataset.noPersistence !== 'undefined'
|| ! this.state.has(this.icinga.utils.getCSSPath(collapsible));
};
/**
* Return an appropriate row element selector
*