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

collapsibleContainer.js: Simplify implementation and make it more flexible

Browse Source 
Handling is ok though the styles are outdated now and not working
This commit is contained in:
Johannes Meyer 2019-06-06 11:58:51 +02:00
parent ffe638ee36
commit 618ca25aec
1 changed files with 59 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
public/js/icinga/behavior/collapsibleContainer.js
View File

@ -7,8 +7,7 @@
Icinga.Behaviors = Icinga.Behaviors || {}; Icinga.Behaviors = Icinga.Behaviors || {};
/** /**
* Behavior for collapsible containers. Creates collapsible containers from `<div class="collapsible-container">…</div>` * Behavior for collapsible containers. Creates collapsibles from `<div class="collapsible">…</div>`
* or <div class="collapsible-container"><div class="collapsible">…</div></div>`
* *
* @param icinga Icinga The current Icinga Object * @param icinga Icinga The current Icinga Object
*/ */
@ -16,7 +15,7 @@
Icinga.EventListener.call(this, icinga); Icinga.EventListener.call(this, icinga);
this.on('rendered', '#col2', this.onRendered, this); this.on('rendered', '#col2', this.onRendered, this);
this.on('click', '.collapsible-container .collapsible-control, .collapsible-table-container .collapsible-control', this.onControlClicked, this); this.on('click', '.collapsible + .collapsible-control', this.onControlClicked, this);
this.icinga = icinga; this.icinga = icinga;
this.expandedContainers = {}; this.expandedContainers = {};
@ -26,109 +25,93 @@
CollapsibleContainer.prototype = new Icinga.EventListener(); CollapsibleContainer.prototype = new Icinga.EventListener();
/** /**
* Initializes all collapsible-container elements. Triggered on rendering of a container. * Initializes all collapsibles. Triggered on rendering of a container.
* *
* @param event Event The `onRender` event triggered by the rendered container * @param event Event The `onRender` event triggered by the rendered container
*/ */
CollapsibleContainer.prototype.onRendered = function(event) { CollapsibleContainer.prototype.onRendered = function(event) {
var _this = event.data.self; var _this = event.data.self;
$(event.target).find('.collapsible-container').each(function() { $('.collapsible', event.currentTarget).each(function() {
var $this = $(this); var $collapsible = $(this);
if (typeof $this.attr('id') === 'undefined') { if (_this.canCollapse($collapsible)) {
_this.icinga.logger.warn('[collapsible] Container has no id: ', this); $collapsible.after($('#collapsible-control-ghost').clone().removeAttr('id'));
return; $collapsible.addClass('can-collapse');
_this.updateCollapsedState($collapsible);
} }
if ($this.find('.collapsible').length > 0) {
$this.addClass('has-collapsible');
if ($this.find('.collapsible').innerHeight() > ($this.data('height') || _this.defaultHeight)) {
$this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse');
}
} else {
if ($this.innerHeight() > ($this.data('height') || _this.defaultHeight)) {
$this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse');
}
}
_this.updateCollapsedState($this);
});
$(event.target).find('.collapsible-table-container').each(function() {
var $this = $(this);
if (typeof $this.attr('id') === 'undefined') {
_this.icinga.logger.warn('[collapsible] Container has no id: ', this);
return;
}
if ($this.find('.collapsible').length > 0) {
$this.addClass('has-collapsible');
if ($this.find('tr').length > ($this.attr('data-numofrows') || _this.defaultNumOfRows)) {
$this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse');
}
if ($this.find('li').length > ($this.attr('data-numofrows') || _this.defaultNumOfRows)) {
$this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse');
}
}
_this.updateCollapsedState($this);
}); });
}; };
/** /**
* Event handler for clocking collapsible control. Toggles the collapsed state of the respective container. * Event handler for toggling collapsibles. Switches the collapsed state of the respective container.
* *
* @param event Event The `onClick` event triggered by the clicked collapsible-control element * @param event Event The `onClick` event triggered by the clicked collapsible-control element
*/ */
CollapsibleContainer.prototype.onControlClicked = function(event) { CollapsibleContainer.prototype.onControlClicked = function(event) {
var _this = event.data.self; var _this = event.data.self;
var $target = $(event.target); var $target = $(event.currentTarget);
var $c = $target.closest('.collapsible-container, .collapsible-table-container'); var $collapsible = $target.prev('.collapsible');
_this.expandedContainers[$c.attr('id')] = $c.is('.collapsed'); if (! $collapsible.length) {
_this.icinga.logger.error('[Collapsible] Collapsible control has no associated .collapsible: ', $target);
console.log(_this.expandedContainers); } else {
_this.updateCollapsedState($collapsible);
_this.updateCollapsedState($c); }
}; };
/** /**
* Renders the collapse state of the given container. Adds or removes class `collapsible` to containers and sets the * Renders the collapse state of the given container. Adds or removes class `collapsible` to containers and sets the
* height. * height.
* *
* @param $container jQuery The given collapsible container element * @param $collapsible jQuery The given collapsible container element
*/ */
CollapsibleContainer.prototype.updateCollapsedState = function($container) { CollapsibleContainer.prototype.updateCollapsedState = function($collapsible) {
var $collapsible; var collapsiblePath = this.icinga.utils.getCSSPath($collapsible);
if ($container.hasClass('has-collapsible')) { if (typeof this.expandedContainers[collapsiblePath] === 'undefined') {
$collapsible = $container.find('.collapsible'); this.expandedContainers[collapsiblePath] = $collapsible.is('.collapsed');
} else {
$collapsible = $container;
} }
var collapsibleId = $container.attr('id'); if (this.expandedContainers[collapsiblePath]) {
if (typeof this.expandedContainers[collapsibleId] === 'undefined') { this.expandedContainers[collapsiblePath] = false;
this.expandedContainers[collapsibleId] = false; $collapsible.removeClass('collapsed');
}
if (this.expandedContainers[collapsibleId]) {
$container.removeClass('collapsed');
$collapsible.css({ maxHeight: 'none' }); $collapsible.css({ maxHeight: 'none' });
} else { } else {
if ($container.hasClass('can-collapse')) { this.expandedContainers[collapsiblePath] = true;
$container.addClass('collapsed'); $collapsible.addClass('collapsed');
if ($container.hasClass('collapsible-container')) {
$collapsible.css({maxHeight: $container.data('height') || this.defaultHeight}); var rowSelector = this.getRowSelector($collapsible);
} if (!! rowSelector) {
if ($container.hasClass('collapsible-table-container')) { var $rows = $(rowSelector, $collapsible).slice(0, $collapsible.data('numofrows') || this.defaultNumOfRows);
$collapsible.css({maxHeight: ($container.data('numofrows') || this.defaultNumOfRows) * $container.find('tr').height()});
var totalHeight = 0;
$rows.outerHeight(function (_, height) {
totalHeight += height;
});
$collapsible.css({maxHeight: totalHeight});
} else {
$collapsible.css({maxHeight: $collapsible.data('height') || this.defaultHeight});
} }
} }
};
CollapsibleContainer.prototype.getRowSelector = function ($collapsible) {
if ($collapsible.is('table')) {
return '> tbody > th, > tbody > tr';
} else if ($collapsible.is('ul, ol')) {
return '> li';
}
return '';
};
CollapsibleContainer.prototype.canCollapse = function ($collapsible) {
var rowSelector = this.getRowSelector($collapsible);
if (!! rowSelector) {
return $(rowSelector, $collapsible).length > ($collapsible.data('numofrows') || this.defaultNumOfRows);
} else {
return $collapsible.innerHeight() > ($collapsible.data('height') || this.defaultHeight);
} }
}; };