mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-26 23:34:08 +02:00
Move navigation events into behavior
This commit is contained in:
Matthias Jentsch
parent
c0908e32ba
commit
cb9c9c78d8
@ -11,7 +11,6 @@
|
|||||||
|
|
||||||
var Navigation = function (icinga) {
|
var Navigation = function (icinga) {
|
||||||
this.icinga = icinga;
|
this.icinga = icinga;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Navigation.prototype.apply = function(el) {
|
Navigation.prototype.apply = function(el) {
|
||||||
@ -37,11 +36,18 @@
|
|||||||
Navigation.prototype.bind = function() {
|
Navigation.prototype.bind = function() {
|
||||||
$(document).on('click', 'a', { self: this }, this.linkClicked);
|
$(document).on('click', 'a', { self: this }, this.linkClicked);
|
||||||
$(document).on('click', 'tr[href]', { self: this }, this.linkClicked);
|
$(document).on('click', 'tr[href]', { self: this }, this.linkClicked);
|
||||||
|
$(document).on('mouseenter', 'li.dropdown', this.dropdownHover);
|
||||||
|
$(document).on('mouseleave', 'li.dropdown', {self: this}, this.dropdownLeave);
|
||||||
|
$(document).on('mouseenter', '#menu > ul > li', { self: this }, this.menuTitleHovered);
|
||||||
|
$(document).on('mouseleave', '#sidebar', { self: this }, this.leaveSidebar);
|
||||||
};
|
};
|
||||||
|
|
||||||
Navigation.prototype.unbind = function() {
|
Navigation.prototype.unbind = function() {
|
||||||
$(document).off('click', 'a', this.linkClicked);
|
$(document).off('click', 'a', this.linkClicked);
|
||||||
$(document).off('click', 'tr[href]', this.linkClicked);
|
$(document).off('click', 'tr[href]', this.linkClicked);
|
||||||
|
$(document).off('mouseenter', 'li.dropdown', this.dropdownHover);
|
||||||
|
$(document).off('mouseleave', 'li.dropdown', this.dropdownLeave);
|
||||||
|
$(document).off('mouseenter', '#menu > ul > li', this.menuTitleHovered);
|
||||||
};
|
};
|
||||||
|
|
||||||
Navigation.prototype.linkClicked = function(event) {
|
Navigation.prototype.linkClicked = function(event) {
|
||||||
@ -52,10 +58,26 @@
|
|||||||
var icinga = event.data.self.icinga;
|
var icinga = event.data.self.icinga;
|
||||||
|
|
||||||
if (href.match(/#/)) {
|
if (href.match(/#/)) {
|
||||||
$li = $a.closest('li');
|
// ...it may be a menu section without a dedicated link.
|
||||||
|
// Switch the active menu item:
|
||||||
if (isMenuLink) {
|
if (isMenuLink) {
|
||||||
|
$li = $a.closest('li');
|
||||||
|
$('#menu .active').removeClass('active');
|
||||||
|
$li.addClass('active');
|
||||||
activeMenuId = $($li).attr('id');
|
activeMenuId = $($li).attr('id');
|
||||||
|
if ($li.hasClass('hover')) {
|
||||||
|
$li.removeClass('hover');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
if (href === '#') {
|
||||||
|
// Allow to access dropdown menu by keyboard
|
||||||
|
if ($a.hasClass('dropdown-toggle')) {
|
||||||
|
$a.closest('li').toggleClass('hover');
|
||||||
|
}
|
||||||
|
// Ignore link, no action
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
if (isMenuLink) {
|
if (isMenuLink) {
|
||||||
activeMenuId = $(event.target).closest('li').attr('id');
|
activeMenuId = $(event.target).closest('li').attr('id');
|
||||||
@ -70,6 +92,85 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Navigation.prototype.menuTitleHovered = function(event) {
|
||||||
|
var $li = $(this),
|
||||||
|
delay = 800,
|
||||||
|
self = event.data.self;
|
||||||
|
|
||||||
|
if ($li.hasClass('active')) {
|
||||||
|
$li.siblings().removeClass('hover');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($li.children('ul').children('li').length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($('#menu').scrollTop() > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($('#layout').hasClass('hoveredmenu')) {
|
||||||
|
delay = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
if (! $li.is('li:hover')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($li.hasClass('active')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$li.siblings().each(function () {
|
||||||
|
var $sibling = $(this);
|
||||||
|
if ($sibling.is('li:hover')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if ($sibling.hasClass('hover')) {
|
||||||
|
$sibling.removeClass('hover');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
self.hoverElement($li);
|
||||||
|
}, delay);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.prototype.leaveSidebar = function (event) {
|
||||||
|
var $sidebar = $(this),
|
||||||
|
$li = $sidebar.find('li.hover'),
|
||||||
|
self = event.data.self;
|
||||||
|
if (! $li.length) {
|
||||||
|
$('#layout').removeClass('hoveredmenu');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
if ($li.is('li:hover') || $sidebar.is('sidebar:hover') ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$li.removeClass('hover');
|
||||||
|
$('#layout').removeClass('hoveredmenu');
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.prototype.hoverElement = function ($li) {
|
||||||
|
$('#layout').addClass('hoveredmenu');
|
||||||
|
$li.addClass('hover');
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.prototype.dropdownHover = function () {
|
||||||
|
$(this).addClass('hover');
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.prototype.dropdownLeave = function (event) {
|
||||||
|
var $li = $(this),
|
||||||
|
self = event.data.self;
|
||||||
|
setTimeout(function () {
|
||||||
|
// TODO: make this behave well together with keyboard navigation
|
||||||
|
if (! $li.is('li:hover') /*&& ! $li.find('a:focus')*/) {
|
||||||
|
$li.removeClass('hover');
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
Icinga.Behaviors.Navigation = Navigation;
|
Icinga.Behaviors.Navigation = Navigation;
|
||||||
|
|
||||||
}) (Icinga, jQuery);
|
}) (Icinga, jQuery);
|
||||||
|
|||||||
@ -126,96 +126,14 @@
|
|||||||
|
|
||||||
$(document).on('keyup', '#menu input.search', {self: this}, this.autoSubmitSearch);
|
$(document).on('keyup', '#menu input.search', {self: this}, this.autoSubmitSearch);
|
||||||
|
|
||||||
$(document).on('mouseenter', 'li.dropdown', this.dropdownHover);
|
|
||||||
$(document).on('mouseleave', 'li.dropdown', {self: this}, this.dropdownLeave);
|
|
||||||
|
|
||||||
$(document).on('mouseenter', '#menu > ul > li', { self: this }, this.menuTitleHovered);
|
|
||||||
$(document).on('mouseleave', '#sidebar', { self: this }, this.leaveSidebar);
|
|
||||||
$(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
|
$(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
|
||||||
|
|
||||||
|
|
||||||
// TBD: a global autocompletion handler
|
// TBD: a global autocompletion handler
|
||||||
// $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
|
// $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
|
||||||
// $(document).on('change', 'form.auto input', this.formChanged);
|
// $(document).on('change', 'form.auto input', this.formChanged);
|
||||||
// $(document).on('change', 'form.auto select', this.submitForm);
|
// $(document).on('change', 'form.auto select', this.submitForm);
|
||||||
},
|
},
|
||||||
|
|
||||||
menuTitleHovered: function (event) {
|
|
||||||
var $li = $(this),
|
|
||||||
delay = 800,
|
|
||||||
self = event.data.self;
|
|
||||||
|
|
||||||
if ($li.hasClass('active')) {
|
|
||||||
$li.siblings().removeClass('hover');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($li.children('ul').children('li').length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($('#menu').scrollTop() > 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($('#layout').hasClass('hoveredmenu')) {
|
|
||||||
delay = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(function () {
|
|
||||||
if (! $li.is('li:hover')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($li.hasClass('active')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
$li.siblings().each(function () {
|
|
||||||
var $sibling = $(this);
|
|
||||||
if ($sibling.is('li:hover')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ($sibling.hasClass('hover')) {
|
|
||||||
$sibling.removeClass('hover');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#layout').addClass('hoveredmenu');
|
|
||||||
$li.addClass('hover');
|
|
||||||
}, delay);
|
|
||||||
},
|
|
||||||
|
|
||||||
leaveSidebar: function (event) {
|
|
||||||
var $sidebar = $(this),
|
|
||||||
$li = $sidebar.find('li.hover'),
|
|
||||||
self = event.data.self;
|
|
||||||
if (! $li.length) {
|
|
||||||
$('#layout').removeClass('hoveredmenu');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(function () {
|
|
||||||
if ($li.is('li:hover') || $sidebar.is('sidebar:hover') ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
$li.removeClass('hover');
|
|
||||||
$('#layout').removeClass('hoveredmenu');
|
|
||||||
}, 500);
|
|
||||||
},
|
|
||||||
|
|
||||||
dropdownHover: function () {
|
|
||||||
$(this).addClass('hover');
|
|
||||||
},
|
|
||||||
|
|
||||||
dropdownLeave: function (event) {
|
|
||||||
var $li = $(this),
|
|
||||||
self = event.data.self;
|
|
||||||
setTimeout(function () {
|
|
||||||
// TODO: make this behave well together with keyboard navigation
|
|
||||||
if (! $li.is('li:hover') /*&& ! $li.find('a:focus')*/) {
|
|
||||||
$li.removeClass('hover');
|
|
||||||
}
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
|
|
||||||
treeNodeToggle: function () {
|
treeNodeToggle: function () {
|
||||||
var $parent = $(this).closest('li');
|
var $parent = $(this).closest('li');
|
||||||
if ($parent.hasClass('collapsed')) {
|
if ($parent.hasClass('collapsed')) {
|
||||||
@ -400,9 +318,7 @@
|
|||||||
var $a = $(this);
|
var $a = $(this);
|
||||||
var href = $a.attr('href');
|
var href = $a.attr('href');
|
||||||
var linkTarget = $a.attr('target');
|
var linkTarget = $a.attr('target');
|
||||||
var $li;
|
|
||||||
var $target;
|
var $target;
|
||||||
var isMenuLink = $a.closest('#menu').length > 0;
|
|
||||||
var formerUrl;
|
var formerUrl;
|
||||||
var remote = /^(?:[a-z]+:)\/\//;
|
var remote = /^(?:[a-z]+:)\/\//;
|
||||||
if (href.match(/^(mailto|javascript):/)) {
|
if (href.match(/^(mailto|javascript):/)) {
|
||||||
@ -453,25 +369,6 @@
|
|||||||
|
|
||||||
// If link has hash tag...
|
// If link has hash tag...
|
||||||
if (href.match(/#/)) {
|
if (href.match(/#/)) {
|
||||||
// ...it may be a menu section without a dedicated link.
|
|
||||||
// Switch the active menu item:
|
|
||||||
if (isMenuLink) {
|
|
||||||
$li = $a.closest('li');
|
|
||||||
$('#menu .active').removeClass('active');
|
|
||||||
$li.addClass('active');
|
|
||||||
if ($li.hasClass('hover')) {
|
|
||||||
$li.removeClass('hover');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (href === '#') {
|
|
||||||
// Allow to access dropdown menu by keyboard
|
|
||||||
if ($a.hasClass('dropdown-toggle')) {
|
|
||||||
$a.closest('li').toggleClass('hover');
|
|
||||||
}
|
|
||||||
// Ignore link, no action
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
$target = self.getLinkTargetFor($a);
|
$target = self.getLinkTargetFor($a);
|
||||||
|
|
||||||
formerUrl = $target.data('icingaUrl');
|
formerUrl = $target.data('icingaUrl');
|
||||||
@ -490,7 +387,7 @@
|
|||||||
// Load link URL
|
// Load link URL
|
||||||
icinga.loader.loadUrl(href, $target);
|
icinga.loader.loadUrl(href, $target);
|
||||||
|
|
||||||
if (isMenuLink) {
|
if ($a.closest('#menu').length > 0) {
|
||||||
// Menu links should remove all but the first layout column
|
// Menu links should remove all but the first layout column
|
||||||
icinga.ui.layout1col();
|
icinga.ui.layout1col();
|
||||||
}
|
}
|
||||||
@ -575,8 +472,6 @@
|
|||||||
$(document).off('submit', 'form', this.submitForm);
|
$(document).off('submit', 'form', this.submitForm);
|
||||||
$(document).off('click', 'button', this.submitForm);
|
$(document).off('click', 'button', this.submitForm);
|
||||||
$(document).off('change', 'form select.autosubmit', this.submitForm);
|
$(document).off('change', 'form select.autosubmit', this.submitForm);
|
||||||
$(document).off('mouseenter', 'li.dropdown', this.dropdownHover);
|
|
||||||
$(document).off('mouseleave', 'li.dropdown', this.dropdownLeave);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
destroy: function() {
|
destroy: function() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user