mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-27 07:44:04 +02:00
JS: Optimize navigation behavior by using the #menu selector for the onRendered event
refs #10704
This commit is contained in:
parent
0e69ce4544
commit
177d4c770d
@ -12,7 +12,7 @@
|
|||||||
this.on('click', '#menu tr[href]', this.linkClicked, this);
|
this.on('click', '#menu tr[href]', this.linkClicked, this);
|
||||||
this.on('mouseenter', '#menu > nav > ul > li', this.menuTitleHovered, this);
|
this.on('mouseenter', '#menu > nav > ul > li', this.menuTitleHovered, this);
|
||||||
this.on('mouseleave', '#sidebar', this.leaveSidebar, this);
|
this.on('mouseleave', '#sidebar', this.leaveSidebar, this);
|
||||||
this.on('rendered', this.onRendered, this);
|
this.on('rendered', '#menu', this.onRendered, this);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The DOM-Path of the active item
|
* The DOM-Path of the active item
|
||||||
@ -33,9 +33,11 @@
|
|||||||
this.hovered = null;
|
this.hovered = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @type {HTMLElement}
|
* The menu
|
||||||
|
*
|
||||||
|
* @type {jQuery}
|
||||||
*/
|
*/
|
||||||
this.element = null;
|
this.$menu = null;
|
||||||
};
|
};
|
||||||
Navigation.prototype = new Icinga.EventListener();
|
Navigation.prototype = new Icinga.EventListener();
|
||||||
|
|
||||||
@ -47,16 +49,18 @@
|
|||||||
Navigation.prototype.onRendered = function(e) {
|
Navigation.prototype.onRendered = function(e) {
|
||||||
var _this = e.data.self;
|
var _this = e.data.self;
|
||||||
|
|
||||||
this.element = e.target;
|
if (! _this.$menu) {
|
||||||
|
_this.$menu = $(e.target);
|
||||||
|
}
|
||||||
|
|
||||||
if (! _this.active) {
|
if (! _this.active) {
|
||||||
// There is no stored menu item, therefore it is assumed that this is the first rendering
|
// There is no stored menu item, therefore it is assumed that this is the first rendering
|
||||||
// of the navigation after the page has been opened.
|
// of the navigation after the page has been opened.
|
||||||
|
|
||||||
// initialise the menu selected by the backend as active.
|
// initialise the menu selected by the backend as active.
|
||||||
var $menus = $(e.target).find('#menu li.active');
|
var $active = _this.$menu.find('li.active');
|
||||||
if ($menus.length) {
|
if ($active.length) {
|
||||||
$menus.each(function() {
|
$active.each(function() {
|
||||||
_this.setActive($(this));
|
_this.setActive($(this));
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -145,17 +149,17 @@
|
|||||||
Navigation.prototype.setActiveByUrl = function(url) {
|
Navigation.prototype.setActiveByUrl = function(url) {
|
||||||
|
|
||||||
// try to active the first item that has an exact URL match
|
// try to active the first item that has an exact URL match
|
||||||
this.setActive($('#menu [href="' + url + '"]'));
|
this.setActive(this.$menu.find('[href="' + url + '"]'));
|
||||||
|
|
||||||
// the url may point to the search field, which must be activated too
|
// the url may point to the search field, which must be activated too
|
||||||
if (! this.active) {
|
if (! this.active) {
|
||||||
this.setActive($('#menu form[action="' + this.icinga.utils.parseUrl(url).path + '"]'));
|
this.setActive(this.$menu.find('form[action="' + this.icinga.utils.parseUrl(url).path + '"]'));
|
||||||
}
|
}
|
||||||
|
|
||||||
// some urls may have custom filters which won't match any menu item, in that case search
|
// some urls may have custom filters which won't match any menu item, in that case search
|
||||||
// for a menu item that points to the base action without any filters
|
// for a menu item that points to the base action without any filters
|
||||||
if (! this.active) {
|
if (! this.active) {
|
||||||
this.setActive($('#menu [href="' + this.icinga.utils.parseUrl(url).path + '"]').first());
|
this.setActive(this.$menu.find('[href="' + this.icinga.utils.parseUrl(url).path + '"]').first());
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -177,10 +181,10 @@
|
|||||||
*/
|
*/
|
||||||
Navigation.prototype.clear = function() {
|
Navigation.prototype.clear = function() {
|
||||||
// menu items
|
// menu items
|
||||||
$(this.element).find('#menu li.active').removeClass('active');
|
this.$menu.find('li.active').removeClass('active');
|
||||||
|
|
||||||
// search fields
|
// search fields
|
||||||
$(this.element).find('#menu input.active').removeClass('active');
|
this.$menu.find('input.active').removeClass('active');
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
x
Reference in New Issue
Block a user