aufräumen

src/utils/TabNavigation.tsx → src/utils/TabNavigation.ts

 import { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { useLoading } from './LoadingContext';
 import { openFromOtherPage } from './openFromOtherpAge';
+import { handleScroll } from './handleScroll';
+import { openNestedTab } from './openNestedTab';
+import { openTab } from './openTab';
 
-// function to open main tab
-export const openTab = (tabId: string, tabClass: string) => {
-  console.log((document.getElementById(tabId) as HTMLElement).classList[1])
-  console.log(`tabclass is ${tabClass}`)
-  const tabs = document.getElementsByClassName(tabClass);
-  for (let index = 0; index < tabs.length; index++) {
-    (tabs[index] as HTMLElement).style.display = 'none';
-    
-  }
-  const selectedTab = document.getElementById(tabId);
-  if (selectedTab) {
-    selectedTab.style.display = 'block';
-  }
-};
-
-// Funktion, um verschachtelte Tabs zu öffnen
-export const openNestedTab = (parentTabId: string, childTabId: string, parentClass: string, childClass: string) => {
-  openTab(parentTabId, parentClass);
-
-  const nestedTabs = document.querySelectorAll(`#${parentTabId} ${childClass}`);
-  nestedTabs.forEach((tab) => {
-    (tab as HTMLElement).style.display = 'none';
-  });
-
-  const selectedNestedTab = document.getElementById(childTabId);
-  if (selectedNestedTab) {
-    selectedNestedTab.style.display = 'block';
-  }
-};
-
-// Funktion, um zu einem bestimmten Bereich (z.B. Collapse) zu scrollen
-export const handleScrollToCollapse = (collapseId: string) => {
-  const collapseElement = document.getElementById(collapseId);
-  if (collapseElement) {
-    const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
-    const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
-    const scrollPosition = elementTop - offset;
-
-    window.scrollTo({
-      top: scrollPosition,
-      behavior: 'smooth',
-    });
-  }
-};
-
-// Custom Hook zur zentralen Tab-Navigation
+// Custom Hook for central tab navigation
 export const useTabNavigation = () => {
-  const { setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden 
   const navigate = useNavigate();
   const location = useLocation();
   const [activeTab, setActiveTab] = useState<string | null>(null);
   const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
   
 
-  // Tab-Wechsel und URL-Update
+  // tab change and url update
   const handleTabChange = (tabId: string, subTabId?: string) => {
     setActiveTab(tabId);
     setActiveSubTab(subTabId || null);
 
-    // URL entsprechend aktualisieren
+    // updatung the url 
     let newUrl = `${location.pathname}?tab=${tabId}`;
     if (subTabId) {
       newUrl += `&subTab=${subTabId}`;
@@ -79,7 +35,7 @@ export const useTabNavigation = () => {
     const scrollToId = params.get('scrollTo'); 
     const changeTo = params.get('changeTo');
     
-    // Öffne Haupt- und ggf. verschachtelten Tab
+    // opens main and (if necessary) subtab
     if (tabId) {
       let tab = document.getElementById(tabId);
       let tabClass = tab!.className; 
@@ -92,12 +48,12 @@ export const useTabNavigation = () => {
       }
     }
 
-    // Scrollen zu einem bestimmten Collapsible-Element
+    // scrolls to a specific collapsible element
     if (collapseId) {
-      handleScrollToCollapse(collapseId);
+      handleScroll(collapseId);
     }
 
-    // Tab von einer anderen Seite öffnen (falls definiert)
+    // opens tab on another page
     if (tabId) {
       openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
     }
@@ -113,7 +69,6 @@ export const useTabNavigation = () => {
   }
   if (changeTo) {
     const element = document.getElementById(changeTo);
-    setIsLoading(true);
     if (element) {
         const viewportHeight = window.innerHeight;
         const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;

src/utils/handleScroll.ts

+// scrolling to a specific element
+export const handleScroll = (scrollId: string) => {
+    const scrollElement = document.getElementById(scrollId);
+    if (scrollElement) {
+      const elementTop = scrollElement.getBoundingClientRect().top + window.pageYOffset;
+      const offset = window.innerHeight / 2 - scrollElement.offsetHeight / 2;
+      const scrollPosition = elementTop - offset;
+  
+      window.scrollTo({
+        top: scrollPosition,
+        behavior: 'smooth',
+      });
+    }
+  };
\ No newline at end of file

src/utils/openFromOtherpAge.ts

@@ -3,20 +3,16 @@ export function openFromOtherPage(it: string, openclass?: string) {
     if (openclass){
         opcla = openclass;
     }
+    // if no tab specified use default class
     else{
         opcla = "cycletab"; 
     }
     return (event: React.MouseEvent<HTMLElement> | { currentTarget: HTMLElement }) => {
-      // Get all elements with class "cycletab" and hide them
+      // Get all elements with the specified class and hide them
       let tabcontent = document.getElementsByClassName(opcla);
-      /* let subtabcontent = document.getElementsByClassName("subcycletab"); */
       for (let i = 0; i < tabcontent.length; i++) {
           (tabcontent[i] as HTMLElement).style.display = "none";
       }
-      /* for (let i = 0; i < subtabcontent.length; i++) {
-        (subtabcontent[i] as HTMLElement).style.display = "none";
-    } */
-      
       // Show the specific tab content based on the "it" parameter
       const tabToOpen = document.getElementById(it);
       if (tabToOpen) {

src/utils/openNestedTab.ts

+import { openTab } from "./openTab";
+
+// Funktion, um verschachtelte Tabs zu öffnen
+export const openNestedTab = (parentTabId: string, childTabId: string, parentClass: string, childClass: string) => {
+    openTab(parentTabId, parentClass);
+  
+    const nestedTabs = document.querySelectorAll(`#${parentTabId} ${childClass}`);
+    nestedTabs.forEach((tab) => {
+      (tab as HTMLElement).style.display = 'none';
+    });
+  
+    const selectedNestedTab = document.getElementById(childTabId);
+    if (selectedNestedTab) {
+      selectedNestedTab.style.display = 'block';
+    }
+  };
\ No newline at end of file

src/utils/openTab.ts

+// function to open a main tab
+export const openTab = (tabId: string, tabClass: string) => {
+    console.log((document.getElementById(tabId) as HTMLElement).classList[1])
+    console.log(`tabclass is ${tabClass}`)
+    const tabs = document.getElementsByClassName(tabClass);
+    for (let index = 0; index < tabs.length; index++) {
+      (tabs[index] as HTMLElement).style.display = 'none';
+      
+    }
+    const selectedTab = document.getElementById(tabId);
+    if (selectedTab) {
+      selectedTab.style.display = 'block';
+    }
+  };
\ No newline at end of file