navigation.js: Adjust for `.config-menu`

This commit is contained in:
Florian Strohmaier 2022-03-16 12:52:03 +01:00
parent c536ddb5d8
commit c9c5823d6a
1 changed files with 62 additions and 4 deletions

View File

@ -11,10 +11,16 @@
this.on('click', '#menu a', this.linkClicked, this);
this.on('click', '#menu tr[href]', this.linkClicked, this);
this.on('rendered', '#menu', this.onRendered, this);
this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.showFlyoutMenu, this);
this.on('mouseleave', '#menu', this.hideFlyoutMenu, this);
this.on('mouseenter', '#menu .primary-nav .nav-level-1 > .nav-item', this.showFlyoutMenu, this);
this.on('mouseleave', '#menu .primary-nav', this.hideFlyoutMenu, this);
this.on('click', '#toggle-sidebar', this.toggleSidebar, this);
this.on('click', '#menu .config-nav-item button', this.toggleConfigFlyout, this);
this.on('mouseenter', '#menu .config-menu .config-nav-item', this.showConfigFlyout, this);
this.on('mouseleave', '#menu .config-menu .config-nav-item', this.hideConfigFlyout, this);
this.on('keydown', '#menu .config-menu .config-nav-item', this.onKeyDown, this);
/**
* The DOM-Path of the active item
*
@ -121,6 +127,7 @@
} else {
_this.setActiveAndSelected($(event.target));
}
// update target url of the menu container to the clicked link
var $menu = $('#menu');
var menuDataUrl = icinga.utils.parseUrl($menu.data('icinga-url'));
@ -322,7 +329,8 @@
*/
Navigation.prototype.hideFlyoutMenu = function(e) {
var $layout = $('#layout');
var $hovered = $('#menu').find('.nav-level-1 > .nav-item.hover');
var $nav = $(e.currentTarget);
var $hovered = $nav.find('.nav-level-1 > .nav-item.hover');
if (! $hovered.length) {
$layout.removeClass('menu-hovered');
@ -332,7 +340,7 @@
setTimeout(function() {
try {
if ($hovered.is(':hover') || $('#menu').is(':hover')) {
if ($hovered.is(':hover') || $nav.is(':hover')) {
return;
}
} catch(e) { /* Bypass because if IE8 */ };
@ -354,6 +362,56 @@
$(window).trigger('resize');
};
/**
* Toggle config flyout visibility
*
* @param {Object} e Event
*/
Navigation.prototype.toggleConfigFlyout = function(e) {
var _this = e.data.self;
if ($('#layout').is('.config-flyout-open')) {
_this.hideConfigFlyout(e);
} else {
_this.showConfigFlyout(e);
}
}
/**
* Hide config flyout
*
* @param {Object} e Event
*/
Navigation.prototype.hideConfigFlyout = function(e) {
console.log('hide config flyout');
$('#layout').removeClass('config-flyout-open');
if (e.target) {
delete $(e.target).closest('.container')[0].dataset.suspendAutorefresh;
}
}
/**
* Show config flyout
*
* @param {Object} e Event
*/
Navigation.prototype.showConfigFlyout = function(e) {
$('#layout').addClass('config-flyout-open');
$(e.target).closest('.container')[0].dataset.suspendAutorefresh = '';
}
/**
* Hide, config flyout when "Enter" key is pressed to follow `.flyout` nav item link
*
* @param {Object} e Event
*/
Navigation.prototype.onKeyDown = function(e) {
var _this = e.data.self;
if (e.code == 'Enter' && $(':focus').is('.flyout a')) {
_this.hideConfigFlyout(e);
}
}
/**
* Called when the history changes
*