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

collapsible.js: Properly setup collapsibles in onLayoutChange

Browse Source
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

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

@ -44,39 +44,9 @@
$.each(event.target.querySelectorAll('.collapsible:not(.can-collapse)'), function (_, collapsible) { $.each(event.target.querySelectorAll('.collapsible:not(.can-collapse)'), function (_, 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) && _this.setupCollapsible(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)]); toCollapse.push([collapsible, _this.calculateCollapsedHeight(collapsible)]);
} }
}
}); });
// Elements are all collapsed in a row now, after height calculations are done. // Elements are all collapsed in a row now, after height calculations are done.
@ -99,29 +69,18 @@
$.each(document.querySelectorAll('.collapsible'), function (_, collapsible) { $.each(document.querySelectorAll('.collapsible'), function (_, collapsible) {
if ($(collapsible).is('.can-collapse')) { if ($(collapsible).is('.can-collapse')) {
if (! _this.canCollapse(collapsible)) { if (! _this.canCollapse(collapsible)) {
var toggleSelector = collapsible.dataset.toggleElement;
if (! toggleSelector) {
$(collapsible).next('.collapsible-control').remove(); $(collapsible).next('.collapsible-control').remove();
}
collapsible.classList.remove('can-collapse'); collapsible.classList.remove('can-collapse');
_this.expand(collapsible); _this.expand(collapsible);
} }
} else if (_this.canCollapse(collapsible)) { } else if (_this.canCollapse(collapsible) && _this.setupCollapsible(collapsible)) {
// It's expanded but shouldn't // 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)]);
} }
}
}); });
setTimeout(function () { setTimeout(function () {
@ -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 * Return an appropriate row element selector
* *