diff --git a/library/Icinga/Web/JavaScript.php b/library/Icinga/Web/JavaScript.php index 0513dea03..802eac6e8 100644 --- a/library/Icinga/Web/JavaScript.php +++ b/library/Icinga/Web/JavaScript.php @@ -33,6 +33,7 @@ class JavaScript 'js/icinga/behavior/form.js', 'js/icinga/behavior/actiontable.js', 'js/icinga/behavior/flyover.js', + 'js/icinga/behavior/expandable.js', 'js/icinga/behavior/selectable.js' ); diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index cf014c8cd..fa232dffb 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -459,3 +459,48 @@ ul.tree li a.error:hover { cursor: pointer; } } + +input[type="checkbox"].expandable-toggle { + display: none; + + & + label { + float: right; + margin-right: 1em; + + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + } + + & ~ .expandable-content { + clear: right; // Because the label is floating right + } + + &:checked ~ .expandable-content { + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + -o-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; + } + + &:not(:checked) ~ .expandable-content { + height: 0; + opacity: 0; + visibility: hidden; + + -webkit-transition: opacity 0.2s linear, visibility 0.2s; + -moz-transition: opacity 0.2s linear, visibility 0.2s; + -o-transition: opacity 0.2s linear, visibility 0.2s; + transition: opacity 0.2s linear, visibility 0.2s; + } + + &:checked ~ label .expandable-expand-label { + display: none; + } + + &:not(:checked) ~ label .expandable-collapse-label { + display: none; + } +} diff --git a/public/js/icinga/behavior/expandable.js b/public/js/icinga/behavior/expandable.js new file mode 100644 index 000000000..c7156e96a --- /dev/null +++ b/public/js/icinga/behavior/expandable.js @@ -0,0 +1,47 @@ +/* Icinga Web 2 | (c) 2017 Icinga Development Team | GPLv2+ */ + +/** + * Icinga.Behavior.Expandable + * + * Initially collapsed, but expandable content + */ +(function(Icinga, $) { + + 'use strict'; + + var expandedExpandables = {}; + + function Expandable(icinga) { + Icinga.EventListener.call(this, icinga); + + this.on('rendered', this.onRendered, this); + this.on('click', this.onClick, this); + } + + Expandable.prototype = new Icinga.EventListener(); + + Expandable.prototype.onRendered = function(event) { + $(event.target).find('.expandable-toggle').each(function() { + var $this = $(this); + + if (typeof expandedExpandables['#' + $this.attr('id')] !== 'undefined') { + $this.prop('checked', true); + } + }); + }; + + Expandable.prototype.onClick = function(event) { + var $expandableToggle = $(event.target); + + if ($expandableToggle.prop('checked')) { + expandedExpandables['#' + $expandableToggle.attr('id')] = null; + } else { + delete expandedExpandables['#' + $expandableToggle.attr('id')]; + } + }; + + Icinga.Behaviors = Icinga.Behaviors || {}; + + Icinga.Behaviors.Expandable = Expandable; + +}) (Icinga, jQuery);