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

collapsible.js: Use a data-attr to identify collapsible collapsibles

This commit is contained in:
Johannes Meyer 2022-07-25 11:18:16 +02:00
parent 181b18cfec
commit 17bd3ce14f
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/monitoring/public/css/module.less
View File

@ -760,7 +760,7 @@ form.instance-features span.description, form.object-features span.description {
} }
} }
&.can-collapse thead th > span { &[data-can-collapse] thead th > span {
:nth-child(1) { :nth-child(1) {
display: none; display: none;
} }

4
public/css/icinga/main.less
View File

@ -334,8 +334,8 @@ a:hover > .icon-cancel {
} }
} }
.collapsible.can-collapse:not(.collapsed) + .collapsible-control button, .collapsible[data-can-collapse]:not(.collapsed) + .collapsible-control button,
.collapsible.can-collapse:not(.collapsed) > .collapsible-control, .collapsible[data-can-collapse]:not(.collapsed) > .collapsible-control,
details.collapsible[open] + .collapsible-control button, details.collapsible[open] + .collapsible-control button,
details.collapsible[open] > .collapsible-control { details.collapsible[open] > .collapsible-control {
i.expand-icon { i.expand-icon {

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

@ -43,9 +43,9 @@
toCollapse = [], toCollapse = [],
toExpand = []; toExpand = [];
$.each(event.target.querySelectorAll('.collapsible:not(.can-collapse)'), function (_, collapsible) { event.target.querySelectorAll('.collapsible').forEach(collapsible => {
// Assumes that any newly rendered elements are expanded // Assumes that any newly rendered elements are expanded
if (_this.canCollapse(collapsible)) { if (! ('canCollapse' in collapsible.dataset) && _this.canCollapse(collapsible)) {
if (_this.setupCollapsible(collapsible)) { if (_this.setupCollapsible(collapsible)) {
toCollapse.push([collapsible, _this.calculateCollapsedHeight(collapsible)]); toCollapse.push([collapsible, _this.calculateCollapsedHeight(collapsible)]);
} else if (_this.isDetails(collapsible)) { } else if (_this.isDetails(collapsible)) {
@ -77,14 +77,14 @@
var toCollapse = []; var toCollapse = [];
$.each(document.querySelectorAll('.collapsible'), function (_, collapsible) { $.each(document.querySelectorAll('.collapsible'), function (_, collapsible) {
if (collapsible.matches('.can-collapse')) { if ('canCollapse' in collapsible.dataset) {
if (! _this.canCollapse(collapsible)) { if (! _this.canCollapse(collapsible)) {
var toggleSelector = collapsible.dataset.toggleElement; var toggleSelector = collapsible.dataset.toggleElement;
if (! toggleSelector && ! this.isDetails(collapsible)) { if (! toggleSelector && ! this.isDetails(collapsible)) {
$(collapsible).next('.collapsible-control').remove(); $(collapsible).next('.collapsible-control').remove();
} }
collapsible.classList.remove('can-collapse'); delete collapsible.dataset.canCollapse;
_this.expand(collapsible); _this.expand(collapsible);
} }
} else if (_this.canCollapse(collapsible) && _this.setupCollapsible(collapsible)) { } else if (_this.canCollapse(collapsible) && _this.setupCollapsible(collapsible)) {
@ -108,7 +108,7 @@
Collapsible.prototype.onExpand = function(collapsiblePath) { Collapsible.prototype.onExpand = function(collapsiblePath) {
var collapsible = $(collapsiblePath)[0]; var collapsible = $(collapsiblePath)[0];
if (collapsible && collapsible.matches('.can-collapse')) { if (collapsible && 'canCollapse' in collapsible.dataset) {
if ('stateCollapses' in collapsible.dataset) { if ('stateCollapses' in collapsible.dataset) {
this.collapse(collapsible, this.calculateCollapsedHeight(collapsible)); this.collapse(collapsible, this.calculateCollapsedHeight(collapsible));
} else { } else {
@ -228,7 +228,7 @@
}, 0); }, 0);
} }
collapsible.classList.add('can-collapse'); collapsible.dataset.canCollapse = '';
if ('noPersistence' in collapsible.dataset) { if ('noPersistence' in collapsible.dataset) {
return ! ('stateCollapses' in collapsible.dataset); return ! ('stateCollapses' in collapsible.dataset);