67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
/*! Icinga Web 2 | (c) 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);
|
|
// Timeout is required to wait for the next element in the DOM to receive focus
|
|
setTimeout(function() {
|
|
if (! $.contains($dropdown[0], document.activeElement)) {
|
|
$dropdown.removeClass('active');
|
|
}
|
|
}, 10);
|
|
}
|
|
|
|
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);
|