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

View File

@ -11,10 +11,16 @@
this.on('click', '#menu a', this.linkClicked, this); this.on('click', '#menu a', this.linkClicked, this);
this.on('click', '#menu tr[href]', this.linkClicked, this); this.on('click', '#menu tr[href]', this.linkClicked, this);
this.on('rendered', '#menu', this.onRendered, this); this.on('rendered', '#menu', this.onRendered, this);
this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.showFlyoutMenu, this); this.on('mouseenter', '#menu .primary-nav .nav-level-1 > .nav-item', this.showFlyoutMenu, this);
this.on('mouseleave', '#menu', this.hideFlyoutMenu, this); this.on('mouseleave', '#menu .primary-nav', this.hideFlyoutMenu, this);
this.on('click', '#toggle-sidebar', this.toggleSidebar, 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 * The DOM-Path of the active item
* *
@ -121,6 +127,7 @@
} else { } else {
_this.setActiveAndSelected($(event.target)); _this.setActiveAndSelected($(event.target));
} }
// update target url of the menu container to the clicked link // update target url of the menu container to the clicked link
var $menu = $('#menu'); var $menu = $('#menu');
var menuDataUrl = icinga.utils.parseUrl($menu.data('icinga-url')); var menuDataUrl = icinga.utils.parseUrl($menu.data('icinga-url'));
@ -322,7 +329,8 @@
*/ */
Navigation.prototype.hideFlyoutMenu = function(e) { Navigation.prototype.hideFlyoutMenu = function(e) {
var $layout = $('#layout'); 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) { if (! $hovered.length) {
$layout.removeClass('menu-hovered'); $layout.removeClass('menu-hovered');
@ -332,7 +340,7 @@
setTimeout(function() { setTimeout(function() {
try { try {
if ($hovered.is(':hover') || $('#menu').is(':hover')) { if ($hovered.is(':hover') || $nav.is(':hover')) {
return; return;
} }
} catch(e) { /* Bypass because if IE8 */ }; } catch(e) { /* Bypass because if IE8 */ };
@ -354,6 +362,56 @@
$(window).trigger('resize'); $(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 * Called when the history changes
* *