vrr/ntopng
2
0
Fork 0
mirror of https://github.com/ntop/ntopng.git synced 2026-04-30 16:09:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added Vite to frontend builds

Browse source
This commit is contained in:
Matteo Biscosi 2025-05-22 13:09:49 +02:00
parent daf007c161
commit 2b5d2d7949
118 changed files with 10172 additions and 34001 deletions
Download patch file Download diff file Expand all files Collapse all files

172
http_src/components/sidebar/sidebar.js
View file

@ -1,114 +1,100 @@
const fixSubMenuPosition = ($submenu, $hoverButton) => {
const MIN_SPACE = 20;
const MIN_HEIGHT = 150;
const MIN_SPACE = 20;
const MIN_HEIGHT = 150;
let distFromAbove = $hoverButton.position().top;
const submenuHeight = $submenu.height();
const documentHeight = $(window).height();
// if the submenu is too high to be shown then set
// the overflow on y axis
if (submenuHeight + distFromAbove >= documentHeight) {
const currentSubmenuHeight = documentHeight - distFromAbove;
if (currentSubmenuHeight <= MIN_HEIGHT) {
distFromAbove = distFromAbove - submenuHeight + $hoverButton.outerHeight();
}
else {
$submenu.css({'max-height': currentSubmenuHeight - MIN_SPACE, 'overflow-y': 'auto'})
}
let distFromAbove = $hoverButton.position().top;
const submenuHeight = $submenu.height();
const documentHeight = $(window).height();
// if the submenu is too high to be shown then set
// the overflow on y axis
if (submenuHeight + distFromAbove >= documentHeight) {
const currentSubmenuHeight = documentHeight - distFromAbove;
if (currentSubmenuHeight <= MIN_HEIGHT) {
distFromAbove = distFromAbove - submenuHeight + $hoverButton.outerHeight();
} else {
$submenu.css({'max-height': currentSubmenuHeight - MIN_SPACE, 'overflow-y': 'auto'});
}
}
// set the submenu height
$submenu.css('top', `${distFromAbove}px`);
// set the submenu height
$submenu.css('top', `${distFromAbove}px`);
};
$(window).on('scroll', function(){
const UPPER_LIMIT = 32;
const windowScrollTop = $(this).scrollTop();
if (windowScrollTop >= UPPER_LIMIT) {
$(`#n-navbar`).addClass("scrolled bg-light");
}
else {
$(`#n-navbar`).removeClass("scrolled bg-light");
}
$(window).on('scroll', function() {
const UPPER_LIMIT = 32;
const windowScrollTop = $(this).scrollTop();
if (windowScrollTop >= UPPER_LIMIT) {
$(`#n-navbar`).addClass('scrolled bg-light');
} else {
$(`#n-navbar`).removeClass('scrolled bg-light');
}
});
$(() => {
const toggleSidebar = () => {
// if the layer doesn't exists then create it
if ($(`.sidebar-close-layer`).length == 0) {
const $layer = $(`<div class='sidebar-close-layer' style='display:none'></div>`);
// when the user clicks on the layer
$layer.on('click', function() {
// remove active class from sidebar
$(`#n-sidebar`).removeClass('active');
// hide the layer and remove it from the DOM
$layer.fadeOut(function() {
$(this).remove();
});
});
const toggleSidebar = () => {
// if the layer doesn't exists then create it
if ($(`.sidebar-close-layer`).length == 0) {
const $layer = $(`<div class='sidebar-close-layer' style='display:none'></div>`);
// when the user clicks on the layer
$layer.on('click', function(){
// remove active class from sidebar
$(`#n-sidebar`).removeClass('active');
// hide the layer and remove it from the DOM
$layer.fadeOut(function() {
$(this).remove();
});
});
// append the layer to the wrapper
$(`#wrapper`).append($layer);
// show the layer inside the page
$layer.fadeIn();
}
else {
// hide the existing layer and destroy it
$(`.sidebar-close-layer`).fadeOut(function() {
$(this).remove();
});
}
// show/hide the sidebar
$(`#n-sidebar`).toggleClass('active');
// append the layer to the wrapper
$(`#wrapper`).append($layer);
// show the layer inside the page
$layer.fadeIn();
} else {
// hide the existing layer and destroy it
$(`.sidebar-close-layer`).fadeOut(function() {
$(this).remove();
});
}
$('#n-sidebar a.submenu').bind({
mouseenter: function() {
let submenu = $(this).parent().find(`div[id$='submenu']`);
fixSubMenuPosition(submenu, $(this));
submenu.show()
},
mouseleave: function() {
let submenu = $(this).parent().find(`div[id$='submenu']`);
submenu.hide();
}
});
// show/hide the sidebar
$(`#n-sidebar`).toggleClass('active');
};
$(`div[id$='submenu']`).bind({
mouseenter: function() {
$(this).show()
},
mouseleave: function() {
$(this).hide();
}
});
$('#n-sidebar a.submenu').bind({
mouseenter: function() {
const submenu = $(this).parent().find(`div[id$='submenu']`);
fixSubMenuPosition(submenu, $(this));
submenu.show();
},
mouseleave: function() {
const submenu = $(this).parent().find(`div[id$='submenu']`);
submenu.hide();
},
});
/* toggle sidebar display */
$(`button[data-bs-toggle='sidebar']`).on('click', function() {
toggleSidebar();
});
$(`div[id$='submenu']`).bind({
mouseenter: function() {
$(this).show();
},
mouseleave: function() {
$(this).hide();
},
});
/* toggle sidebar display */
$(`button[data-bs-toggle='sidebar']`).on('click', function() {
toggleSidebar();
});
});
$(window).on('resize', function() {
// re-calc submenu height
const $currentSubmenu = $('#n-sidebar').find(`div.show[id$='submenu']`);
// re-calc submenu height
const $currentSubmenu = $('#n-sidebar').find(`div.show[id$='submenu']`);
if ($currentSubmenu.length > 0) {
const $hoverButton = $currentSubmenu.parent().find(`a[data-bs-toggle='collapse']`);
fixSubMenuPosition($currentSubmenu, $hoverButton);
}
if ($currentSubmenu.length > 0) {
const $hoverButton = $currentSubmenu.parent().find(`a[data-bs-toggle='collapse']`);
fixSubMenuPosition($currentSubmenu, $hoverButton);
}
});