Replaced German by English comments

app/static/js/custom_scrollbar.js

@@ -15,25 +15,24 @@ function adjustScrollContainerHeight() {
     }
   });
   
-  // Berechne die verfügbare Höhe für den Scrollbereich
+  // Calculate the available height for the scroll area
   const availableHeight = window.innerHeight - siblingsHeight;
   scrollContainer.style.maxHeight = availableHeight + 'px';
   scrollContainer.style.overflowY = 'auto';
   scrollContainer.style.overflowX = 'hidden';
 
-  // Hole die aktuelle Position und Höhe des Scrollbereichs
+  // Get the current position and height of the scroll container
   const scrollContainerRect = scrollContainer.getBoundingClientRect();
 
-  // Setze die Position (top) und die Höhe des benutzerdefinierten Scrollbar-Tracks
+  // Set the position (top) and height of the custom scrollbar track
   scrollbarContainer.style.top = scrollContainerRect.top + 'px';
   scrollbarContainer.style.height = scrollContainerRect.height + 'px';
 }
 
-
 window.addEventListener('load', adjustScrollContainerHeight);
 window.addEventListener('resize', adjustScrollContainerHeight);
 
-// 2. Aktualisiert den Thumb (Größe und Position) der benutzerdefinierten Scrollbar
+// 2. Updates the thumb (size and position) of the custom scrollbar
 function updateCustomScrollbar() {
   const scrollContainer = document.querySelector('.scroll-container');
   const thumb = document.getElementById('scroll-thumb');
@@ -44,22 +43,22 @@ function updateCustomScrollbar() {
   const containerHeight = scrollContainer.clientHeight;
   const scrollTop = scrollContainer.scrollTop;
   
-  // Berechne die Thumb-Höhe (mindestens 20px)
+  // Calculate the thumb height (minimum 20px)
   let thumbHeight = (containerHeight / contentHeight) * containerHeight;
   thumbHeight = Math.max(thumbHeight, 20);
   thumb.style.height = thumbHeight + 'px';
   
-  // Berechne die Position des Thumbs
+  // Calculate the thumb position
   const maxScrollTop = contentHeight - containerHeight;
   const maxThumbTop = containerHeight - thumbHeight;
   const thumbTop = maxScrollTop ? (scrollTop / maxScrollTop) * maxThumbTop : 0;
   thumb.style.top = thumbTop + 'px';
   
-  // Zeige die Scrollbar, falls der Inhalt überläuft, sonst ggf. ausblenden
+  // Show the scrollbar if content overflows, otherwise hide it
   customScrollbar.style.opacity = contentHeight > containerHeight ? '1' : '0';
 }
 
-// Aktualisiere den Thumb bei Scrollen des Containers
+// Update the thumb when the container is scrolled
 const scrollContainer = document.querySelector('.scroll-container');
 if (scrollContainer) {
   scrollContainer.addEventListener('scroll', updateCustomScrollbar);
@@ -67,7 +66,7 @@ if (scrollContainer) {
 window.addEventListener('resize', updateCustomScrollbar);
 window.addEventListener('load', updateCustomScrollbar);
 
-// 3. Interaktivität: Ermögliche Drag & Drop des Scroll-Thumbs
+// 3. Interactivity: Enable drag & drop for the scroll thumb
 let isDragging = false;
 let dragStartY = 0;
 let scrollStartY = 0;
@@ -93,11 +92,11 @@ document.addEventListener('mousemove', function(e) {
   const maxThumbTop = containerHeight - thumbHeight;
   
   const deltaY = e.clientY - dragStartY;
-  // Berechne neuen Thumb-Top-Wert
+  // Calculate the new thumb top position
   let newThumbTop = (scrollStartY / maxScrollTop) * maxThumbTop + deltaY;
   newThumbTop = Math.max(0, Math.min(newThumbTop, maxThumbTop));
   
-  // Berechne den neuen Scrollwert anhand der Thumb-Position
+  // Calculate the new scroll position based on the thumb position
   const newScrollTop = (newThumbTop / maxThumbTop) * maxScrollTop;
   scrollContainer.scrollTop = newScrollTop;
 });

app/static/js/navigation.js

@@ -17,15 +17,15 @@ document.addEventListener('DOMContentLoaded', () => {
         }, 500);
       }
 
-      // Öffnen beim Hovern
+      // Open on hover
       item.addEventListener('mouseenter', onMouseEnter);
 
-      // Verzögertes Schließen beim Verlassen
+      // Delayed close on mouse leave
       item.addEventListener('mouseleave', onMouseLeave);
 
-      // Öffnen und Position anpassen beim Klicken
+      // Open and adjust position on click
       item.addEventListener('click', (e) => {
-        e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
+        e.stopPropagation(); // Prevents menus from closing when clicking inside
         if (item.classList.contains('open')) {
           closeMenu(item);
         } else {
@@ -44,7 +44,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   addAllMenuEventListeners();
 
-  // Globale Klick-Listener, um Menüs zu schließen, wenn außerhalb geklickt wird
+  // Global click listener to close menus when clicking outside
   document.addEventListener('click', () => {
     [...menuItems, ...subMenuItems].forEach(item => closeMenu(item));
   });
@@ -70,11 +70,11 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-function isSmallScreen() {
-  return window.innerWidth < 992; // Bootstrap-Breakpoint für 'lg'
-}
+  function isSmallScreen() {
+    return window.innerWidth < 992; // Bootstrap breakpoint for 'lg'
+  }
     
-function adjustMenuPosition(submenu, parent, isTopLevel) {
+  function adjustMenuPosition(submenu, parent, isTopLevel) {
     const rect = submenu.getBoundingClientRect();
     const parentRect = parent.getBoundingClientRect();
 
@@ -89,33 +89,33 @@ function adjustMenuPosition(submenu, parent, isTopLevel) {
     submenu.style.right = '';
 
     if (isTopLevel) {
-      if (isSmallScreen && spaceBelow < spaceAbove) {
-        // Für kleine Bildschirme: Menü direkt über dem Eltern-Element öffnen
+      if (isSmallScreen() && spaceBelow < spaceAbove) {
+        // For small screens: Open menu directly above the parent element
         submenu.style.top = 'auto';
-        submenu.style.bottom = `${parentRect.height}px`; // Direkt über dem Eltern-Element
+        submenu.style.bottom = `${parentRect.height}px`; // Directly above the parent element
       } 
-        // Top-Level-Menü
-        else if (spaceBelow < spaceAbove) {
-            submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
-            submenu.style.top = 'auto';
-        } else {
-            submenu.style.top = `${parentRect.height}px`;
-            submenu.style.bottom = 'auto';
-        }
+      // Top-level menu
+      else if (spaceBelow < spaceAbove) {
+        submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
+        submenu.style.top = 'auto';
+      } else {
+        submenu.style.top = `${parentRect.height}px`;
+        submenu.style.bottom = 'auto';
+      }
     } else {
-        // Submenü
-        const prefersRight = spaceRight >= spaceLeft;
-        submenu.style.left = prefersRight ? '100%' : 'auto';
-        submenu.style.right = prefersRight ? 'auto' : '100%';
+      // Submenu
+      const prefersRight = spaceRight >= spaceLeft;
+      submenu.style.left = prefersRight ? '100%' : 'auto';
+      submenu.style.right = prefersRight ? 'auto' : '100%';
 
-        // Nach oben öffnen, wenn unten kein Platz ist
-        if (spaceBelow < spaceAbove) {
-            submenu.style.bottom = `0`;
-            submenu.style.top = `auto`;
-        } else {
-            submenu.style.top = `0`;
-            submenu.style.bottom = '${parentRect.height}px';
-        }
+      // Open upwards if there's no space below
+      if (spaceBelow < spaceAbove) {
+        submenu.style.bottom = `0`;
+        submenu.style.top = `auto`;
+      } else {
+        submenu.style.top = `0`;
+        submenu.style.bottom = `${parentRect.height}px`;
+      }
     }
-}
+  }
 });

app/static/js/tooltip.js

@@ -1,7 +1,7 @@
-// Initialisiert alle Tooltips auf der Seite
+// Initializes all tooltips on the page
 document.addEventListener('DOMContentLoaded', function () {
     var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
     tooltipTriggerList.forEach(function (tooltipTriggerEl) {
         new bootstrap.Tooltip(tooltipTriggerEl);
     });
-});
+});