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

collapsibleContainer.js: Cleanup and streamline behavior implementation

Browse Source
This commit is contained in:
Johannes Meyer 2019-06-06 10:13:34 +02:00
parent 66084d6d94
commit e6e43d07bf
1 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,9 +4,7 @@
'use strict'; 'use strict';
var expandedContainers = {}; Icinga.Behaviors = Icinga.Behaviors || {};
var defaultNumOfRows = 2;
var defaultHeight = 36;
/** /**
* Behavior for collapsible containers. Creates collapsible containers from `<div class="collapsible-container">…</div>` * Behavior for collapsible containers. Creates collapsible containers from `<div class="collapsible-container">…</div>`
@ -14,14 +12,17 @@
* *
* @param icinga Icinga The current Icinga Object * @param icinga Icinga The current Icinga Object
*/ */
var CollapsibleContainer = function (icinga) {
function CollapsibleContainer(icinga) {
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-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(); CollapsibleContainer.prototype = new Icinga.EventListener();
/** /**
@ -30,22 +31,24 @@
* @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;
$(event.target).find('.collapsible-container[data-collapsible-id]').each(function() { $(event.target).find('.collapsible-container[data-collapsible-id]').each(function() {
var $this = $(this); var $this = $(this);
if ($this.find('.collapsible').length > 0) { if ($this.find('.collapsible').length > 0) {
$this.addClass('has-collapsible'); $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.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse'); $this.addClass('can-collapse');
} }
} else { } 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.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse'); $this.addClass('can-collapse');
} }
} }
updateCollapsedState($this); _this.updateCollapsedState($this);
}); });
$(event.target).find('.collapsible-table-container[data-collapsible-id]').each(function() { $(event.target).find('.collapsible-table-container[data-collapsible-id]').each(function() {
@ -53,17 +56,17 @@
if ($this.find('.collapsible').length > 0) { if ($this.find('.collapsible').length > 0) {
$this.addClass('has-collapsible'); $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.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse'); $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.append($('#collapsible-control-ghost').clone().removeAttr('id'));
$this.addClass('can-collapse'); $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 * @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 $target = $(event.target); var $target = $(event.target);
var $c = $target.closest('.collapsible-container, .collapsible-table-container'); 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 * @param $container jQuery The given collapsible container element
*/ */
function updateCollapsedState($container) { CollapsibleContainer.prototype.updateCollapsedState = function($container) {
var $collapsible; var $collapsible;
if ($container.hasClass('has-collapsible')) { if ($container.hasClass('has-collapsible')) {
$collapsible = $container.find('.collapsible'); $collapsible = $container.find('.collapsible');
@ -98,27 +102,25 @@
} }
var collapsibleId = $container.data('collapsibleId'); var collapsibleId = $container.data('collapsibleId');
if (typeof expandedContainers[collapsibleId] === 'undefined') { if (typeof this.expandedContainers[collapsibleId] === 'undefined') {
expandedContainers[collapsibleId] = false; this.expandedContainers[collapsibleId] = false;
} }
if (expandedContainers[collapsibleId]) { if (this.expandedContainers[collapsibleId]) {
$container.removeClass('collapsed'); $container.removeClass('collapsed');
$collapsible.css({ maxHeight: 'none' }); $collapsible.css({ maxHeight: 'none' });
} else { } else {
if ($container.hasClass('can-collapse')) { if ($container.hasClass('can-collapse')) {
$container.addClass('collapsed'); $container.addClass('collapsed');
if ($container.hasClass('collapsible-container')) { 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')) { 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; Icinga.Behaviors.collapsibleContainer = CollapsibleContainer;