From c7ffb41b021f748c7bb07ff18b8894ae0d064799 Mon Sep 17 00:00:00 2001
From: "Alexander A. Klimov" <alexander.klimov@icinga.com>
Date: Tue, 21 Nov 2017 14:05:12 +0100
Subject: [PATCH] Implement togglable flyover

refs #3024
---
 library/Icinga/Web/JavaScript.php    |  1 +
 public/css/icinga/widgets.less       | 30 ++++++++++++++++
 public/js/icinga/behavior/flyover.js | 51 ++++++++++++++++++++++++++++
 3 files changed, 82 insertions(+)
 create mode 100644 public/js/icinga/behavior/flyover.js

diff --git a/library/Icinga/Web/JavaScript.php b/library/Icinga/Web/JavaScript.php
index 75dd783d3..a6cce61ec 100644
--- a/library/Icinga/Web/JavaScript.php
+++ b/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'
     );
 
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
index f3e34c38c..d841667d3 100644
--- a/public/css/icinga/widgets.less
+++ b/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;
+  }
+}
diff --git a/public/js/icinga/behavior/flyover.js b/public/js/icinga/behavior/flyover.js
new file mode 100644
index 000000000..9771c646d
--- /dev/null
+++ b/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);