Merge pull request #3100 from Icinga/feature/expandable-content

Implement persistent "Show more" spoilers

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'
     );
 

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;
+  }
+}

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);