diff --git a/public/js/icinga/behavior/collapsibleContainer.js b/public/js/icinga/behavior/collapsibleContainer.js
index 2f8df651a..1eb344061 100644
--- a/public/js/icinga/behavior/collapsibleContainer.js
+++ b/public/js/icinga/behavior/collapsibleContainer.js
@@ -4,9 +4,7 @@
'use strict';
- var expandedContainers = {};
- var defaultNumOfRows = 2;
- var defaultHeight = 36;
+ Icinga.Behaviors = Icinga.Behaviors || {};
/**
* Behavior for collapsible containers. Creates collapsible containers from `
…
`
@@ -14,14 +12,17 @@
*
* @param icinga Icinga The current Icinga Object
*/
-
- function CollapsibleContainer(icinga) {
+ var CollapsibleContainer = function (icinga) {
Icinga.EventListener.call(this, icinga);
this.on('rendered', '#col2', this.onRendered, this);
this.on('click', '.collapsible-container .collapsible-control, .collapsible-table-container .collapsible-control', this.onControlClicked, this);
- }
+ this.icinga = icinga;
+ this.expandedContainers = {};
+ this.defaultNumOfRows = 2;
+ this.defaultHeight = 36;
+ };
CollapsibleContainer.prototype = new Icinga.EventListener();
/**
@@ -30,22 +31,24 @@
* @param event Event The `onRender` event triggered by the rendered container
*/
CollapsibleContainer.prototype.onRendered = function(event) {
+ var _this = event.data.self;
+
$(event.target).find('.collapsible-container[data-collapsible-id]').each(function() {
var $this = $(this);
if ($this.find('.collapsible').length > 0) {
$this.addClass('has-collapsible');
- if ($this.find('.collapsible').innerHeight() > ($this.data('height') || defaultHeight)) {
+ 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') || defaultHeight)) {
+ if ($this.innerHeight() > ($this.data('height') || _this.defaultHeight)) {
$this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse');
}
}
- updateCollapsedState($this);
+ _this.updateCollapsedState($this);
});
$(event.target).find('.collapsible-table-container[data-collapsible-id]').each(function() {
@@ -53,17 +56,17 @@
if ($this.find('.collapsible').length > 0) {
$this.addClass('has-collapsible');
- if ($this.find('tr').length > ($this.attr('data-numofrows') || defaultNumOfRows)) {
+ 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') || defaultNumOfRows)) {
+ if ($this.find('li').length > ($this.attr('data-numofrows') || _this.defaultNumOfRows)) {
$this.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse');
}
}
- updateCollapsedState($this);
+ _this.updateCollapsedState($this);
});
};
@@ -73,14 +76,15 @@
* @param event Event The `onClick` event triggered by the clicked collapsible-control element
*/
CollapsibleContainer.prototype.onControlClicked = function(event) {
+ var _this = event.data.self;
var $target = $(event.target);
var $c = $target.closest('.collapsible-container, .collapsible-table-container');
- expandedContainers[$c.data('collapsibleId')] = $c.is('.collapsed');
+ _this.expandedContainers[$c.attr('id')] = $c.is('.collapsed');
- console.log(expandedContainers);
+ console.log(_this.expandedContainers);
- updateCollapsedState($c);
+ _this.updateCollapsedState($c);
};
/**
@@ -89,7 +93,7 @@
*
* @param $container jQuery The given collapsible container element
*/
- function updateCollapsedState($container) {
+ CollapsibleContainer.prototype.updateCollapsedState = function($container) {
var $collapsible;
if ($container.hasClass('has-collapsible')) {
$collapsible = $container.find('.collapsible');
@@ -98,27 +102,25 @@
}
var collapsibleId = $container.data('collapsibleId');
- if (typeof expandedContainers[collapsibleId] === 'undefined') {
- expandedContainers[collapsibleId] = false;
+ if (typeof this.expandedContainers[collapsibleId] === 'undefined') {
+ this.expandedContainers[collapsibleId] = false;
}
- if (expandedContainers[collapsibleId]) {
+ if (this.expandedContainers[collapsibleId]) {
$container.removeClass('collapsed');
$collapsible.css({ maxHeight: 'none' });
} else {
if ($container.hasClass('can-collapse')) {
$container.addClass('collapsed');
if ($container.hasClass('collapsible-container')) {
- $collapsible.css({maxHeight: $container.data('height') || defaultHeight});
+ $collapsible.css({maxHeight: $container.data('height') || this.defaultHeight});
}
if ($container.hasClass('collapsible-table-container')) {
- $collapsible.css({maxHeight: ($container.data('numofrows') || defaultNumOfRows) * $container.find('tr').height()});
+ $collapsible.css({maxHeight: ($container.data('numofrows') || this.defaultNumOfRows) * $container.find('tr').height()});
}
}
}
- }
-
- Icinga.Behaviors = Icinga.Behaviors || {};
+ };
Icinga.Behaviors.collapsibleContainer = CollapsibleContainer;