Add behavior for dropdown navigation items

Dropdown navigation is not yet accessible. The added behavior listens for activity on dropdown-navigation-item for toggling the CSS class active.

library/Icinga/Web/JavaScript.php

@@ -26,6 +26,7 @@ class JavaScript
         'js/icinga/behavior/tooltip.js',
         'js/icinga/behavior/sparkline.js',
         'js/icinga/behavior/tristate.js',
+        'js/icinga/behavior/dropdown.js',
         'js/icinga/behavior/navigation.js',
         'js/icinga/behavior/form.js',
         'js/icinga/behavior/actiontable.js',

public/js/icinga/behavior/dropdown.js

@@ -0,0 +1,63 @@
+/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
+
+;(function(Icinga, $) {
+
+    "use strict";
+
+    /**
+     * Toggle the CSS class active of the dropdown navigation item
+     *
+     * Called when the dropdown toggle has been activated via mouse or keyobard. This will expand/collpase the dropdown
+     * menu according to CSS.
+     *
+     * @param {object} e Event
+     */
+    function setActive(e) {
+        $(this).parent().toggleClass('active');
+    }
+
+    /**
+     * Clear active state of the dropdown navigation item when the mouse leaves the navigation item
+     *
+     * @param {object} e Event
+     */
+    function clearActive(e) {
+        $(this).removeClass('active');
+    }
+
+    /**
+     * Clear active state of the dropdown navigation item when the navigation items loses focus
+     *
+     * @param {object} e Event
+     */
+    function clearFocus(e) {
+        var $dropdown = $(this);
+        if ($(e.target).is($dropdown.find('a').last())) {
+            $dropdown.removeClass('active');
+        }
+    }
+
+    Icinga.Behaviors = Icinga.Behaviors || {};
+
+    /**
+     * Behavior for dropdown navigation items
+     *
+     * The dropdown behavior listens for activity on dropdown navigation items for toggling the CSS class
+     * active on them. CSS is responsible for the expanded and collapsed state.
+     *
+     * @param {Icinga} icinga
+     *
+     * @constructor
+     */
+    var Dropdown = function (icinga) {
+        Icinga.EventListener.call(this, icinga);
+        this.on('click', '.dropdown-nav-item > a', setActive, this);
+        this.on('mouseleave', '.dropdown-nav-item', clearActive, this);
+        this.on('focusout', '.dropdown-nav-item', clearFocus, this);
+    };
+
+    Dropdown.prototype = new Icinga.EventListener();
+
+    Icinga.Behaviors.Dropdown = Dropdown;
+
+})(Icinga, jQuery);