Merge pull request #3097 from Icinga/feature/toggleable-flyover-3024

Implement togglable flyover

library/Icinga/Web/JavaScript.php

@@ -31,6 +31,7 @@ class JavaScript
         'js/icinga/behavior/navigation.js',
         'js/icinga/behavior/form.js',
         'js/icinga/behavior/actiontable.js',
+        'js/icinga/behavior/flyover.js',
         'js/icinga/behavior/selectable.js'
     );
 

public/css/icinga/widgets.less

@@ -251,3 +251,33 @@ ul.tree li a.error:hover {
     animation-delay: .4s;
   }
 }
+
+.flyover:not(.flyover-expanded) .flyover-content {
+  display: none;
+}
+
+.flyover {
+  position: relative;
+
+  .flyover-content {
+    background-color: @body-bg-color;
+    border: 1px solid @gray-lighter;
+    box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
+    position: absolute;
+  }
+
+  &.flyover-arrow-top .flyover-content:before {
+    background: @body-bg-color;
+    border-left: 1px solid @gray-lighter;
+    border-top: 1px solid @gray-lighter;
+    content: "";
+    height: 1em;
+    -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+    width: 1em;
+
+    position: absolute;
+    left: 4px;
+    top: -7px;
+  }
+}

public/js/icinga/behavior/flyover.js

@@ -0,0 +1,51 @@
+/* Icinga Web 2 | (c) 2017 Icinga Development Team | GPLv2+ */
+
+/**
+ * Icinga.Behavior.Flyover
+ *
+ * A toggleable flyover
+ */
+(function(Icinga, $) {
+
+    'use strict';
+
+    var expandedFlyovers = {};
+
+    function Flyover(icinga) {
+        Icinga.EventListener.call(this, icinga);
+
+        this.on('rendered', this.onRendered, this);
+        this.on('click', '.flyover-toggle', this.onClick, this);
+    }
+
+    Flyover.prototype = new Icinga.EventListener();
+
+    Flyover.prototype.onRendered = function(event) {
+        // Re-expand expanded containers after an auto-refresh
+
+        $(event.target).find('.flyover').each(function() {
+            var $this = $(this);
+
+            if (typeof expandedFlyovers['#' + $this.attr('id')] !== 'undefined') {
+                $this.toggleClass('flyover-expanded');
+            }
+        });
+    };
+
+    Flyover.prototype.onClick = function(event) {
+        var $flyover = $(event.target).closest('.flyover');
+
+        $flyover.toggleClass('flyover-expanded');
+
+        if ($flyover.hasClass('flyover-expanded')) {
+            expandedFlyovers['#' + $flyover.attr('id')] = null;
+        } else {
+            delete expandedFlyovers['#' + $flyover.attr('id')];
+        }
+    };
+
+    Icinga.Behaviors = Icinga.Behaviors || {};
+
+    Icinga.Behaviors.Flyover = Flyover;
+
+})(Icinga, jQuery);