src/sources/vorlage-source.tsx

@@ -11,4 +11,7 @@ export default function VorlageSources(){
 
 const bibtexSources = [
 
+  `
+  `
+
 ]
\ No newline at end of file

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

 import { useEffect, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { openFromOtherPage } from './openFromOtherpAge';
-import { useLoading } from './LoadingContext';
-
-// Funktion, um den Haupttab zu öffnen
-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',
-    });
-  }
-};
+import { handleScroll } from './handleScroll';
+import { openNestedTab } from './openNestedTab';
+import { openTab } from './openTab';
+import { openTabInCollapsible } from './opentabincollapsible';
 
-// 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 navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<string | null>(null);
   const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
-  
+  const [, setActiveCollapsible] = useState<string | null>(null);
+
+  // Tab Visibility Handler
+  const updateTabVisibility = (tabId: string | null, subTabId?: string | null) => {
+    document.querySelectorAll('.enginneeringtab').forEach((tab) => {
+    (tab as HTMLElement).style.display = 'none'; // All tabs hidden
+    });
 
-  // Tab-Wechsel und URL-Update
+    if (tabId) {
+      const tabElement = document.getElementById(`tab-${tabId}`);
+      if (tabElement) {
+        tabElement.style.display = 'block'; // Show the current tab
+      }
+
+      // Handle nested subtabs
+      if (subTabId) {
+        const subTabElement = document.getElementById(subTabId);
+        if (subTabElement) {
+          subTabElement.style.display = 'block'; // Show subtab
+        }
+      }
+    }
+  };
+
+  // Tab Change and URL Update
   const handleTabChange = (tabId: string, subTabId?: string) => {
     setActiveTab(tabId);
     setActiveSubTab(subTabId || null);
 
-    // URL entsprechend aktualisieren
+    // Update URL
     let newUrl = `${location.pathname}?tab=${tabId}`;
     if (subTabId) {
       newUrl += `&subTab=${subTabId}`;
     }
     navigate(newUrl, { replace: true });
+
+    // Immediately update tab visibility
+    updateTabVisibility(tabId, subTabId);
   };
 
+  // On Location Change
   useEffect(() => {
-    console.log("Use Effect")
     const params = new URLSearchParams(location.search);
     const tabId = params.get('tab');
     const subTabId = params.get('subTab');
+
+    // Restore visibility
+    updateTabVisibility(tabId, subTabId);
+
+    // Handle scroll or collapsibles
     const collapseId = params.get('collapseId');
-    const scrollToId = params.get('scrollTo'); 
+    const scrollToId = params.get('scrollTo');
     const changeTo = params.get('changeTo');
+    const colTab = params.get('colTab');
+  //  const navigate = useNavigate();
     
-    // Öffne Haupt- und ggf. verschachtelten Tab
+     
+
+
+     // scrolls to a specific collapsible element
+    if (collapseId) {
+      setActiveCollapsible(collapseId);
+      handleScroll(collapseId);
+    }
+    if (colTab && collapseId) {
+      setActiveCollapsible(collapseId);
+      openTabInCollapsible(colTab, collapseId); // Öffne den Tab innerhalb des Collapsibles
+ 
+    }
+
+    // opens main and (if necessary) subtab
     if (tabId) {
       let tab = document.getElementById(tabId);
       let tabClass = tab!.className; 
@@ -93,35 +95,31 @@ export const useTabNavigation = () => {
       }
     }
 
-    // Scrollen zu einem bestimmten Collapsible-Element
-    if (collapseId) {
-      handleScrollToCollapse(collapseId);
-    }
+   
 
-    // Tab von einer anderen Seite öffnen (falls definiert)
+    // opens tab on another page
     if (tabId) {
       openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
     }
 
     if (scrollToId) {
       const element = document.getElementById(scrollToId);
+      if (element) {
+        const viewportHeight = window.innerHeight;
+        const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+        const scrollToPosition = targetPosition - viewportHeight / 5 + element.clientHeight / 2;
+        window.scrollTo({ top: scrollToPosition, behavior: 'smooth' });
+      }
+    }
+    if (changeTo) {
+      const element = document.getElementById(changeTo);
       if (element) {
           const viewportHeight = window.innerHeight;
           const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
-          const scrollToPosition = targetPosition - viewportHeight / 5 + element.clientHeight / 2;
+          const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
           window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
       }
   }
-  if (changeTo) {
-    const element = document.getElementById(changeTo);
-    setIsLoading(true);
-    if (element) {
-        const viewportHeight = window.innerHeight;
-        const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
-        const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
-        window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
-    }
-}
 
     setActiveTab(tabId);
     setActiveSubTab(subTabId || null);
@@ -129,5 +127,3 @@ export const useTabNavigation = () => {
 
   return { activeTab, activeSubTab, handleTabChange };
 };
-
-

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(`Trying to find tab with ID ${tabId}`);
+  const selectedTab = document.querySelector(`#${tabId}`);
+  if (selectedTab) {
+    //console.log('Tab found!');
+    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';
+      selectedTab.style.visibility = 'visible';
+      selectedTab.style.position = 'relative';  // In case there's a positioning issue
+      selectedTab.style.zIndex = '10';  // Ensure the tab is above other elements
+    }
+  } else {
+    console.error(`Tab with ID ${tabId} not found.`);
+  }
+};

src/utils/opentabincollapsible.ts

+export const openTabInCollapsible = (tabId: string, collapsibleId: string) => {
+    // Warten Sie, bis das DOM vollständig geladen wurde
+    setTimeout(() => {
+        // Holen Sie sich das Collapsible
+        const collapsible = document.getElementById(collapsibleId);
+        if (!collapsible) {
+            console.error(`Collapsible mit ID ${collapsibleId} nicht gefunden!`);
+            return;
+        }
+
+        // Loggen Sie das, um sicherzustellen, dass das Collapsible korrekt gefunden wird
+        console.log(`Collapsible mit ID ${collapsibleId} gefunden`);
+
+        // Überprüfen Sie, ob der Tab mit der gegebenen ID existiert
+        const tab = collapsible.querySelector(`#${tabId}`);
+        if (!tab) {
+            console.error(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wurde nicht gefunden!`);
+            return;
+        }
+        let tabClass = tab!.className; 
+        const tabs = document.getElementsByClassName(tabClass);
+        for (let index = 0; index < tabs.length; index++) {
+            (tabs[index] as HTMLElement).style.display = 'none';
+          }
+        // Wenn der Tab gefunden wurde, stellen Sie sicher, dass der Tab sichtbar gemacht wird
+        console.log(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wird jetzt geöffnet.`);
+        (tab as HTMLElement).style.display = 'block';
+        (tab as HTMLElement).style.visibility = 'visible';
+        (tab as HTMLElement).style.position = 'relative';  // Falls es ein Positionierungsproblem gibt
+        (tab as HTMLElement).style.zIndex = '10';  // Stelle sicher, dass der Tab über anderen Elementen liegt
+
+
+        // Loggen Sie den Stil des Tabs, um zu überprüfen, ob er tatsächlich auf 'block' gesetzt wurde
+        console.log(`Tab-Display-Stil für ${tabId}: ${(tab as HTMLElement).style.display}`);
+
+    }, 100); // 100 ms Verzögerung für DOM-Ladezeit
+};

src/utils/useNavigation.ts

 import { useNavigate } from "react-router-dom";
-import { useLoading } from "./LoadingContext";
 
 export const useNavigation = () => {
     const navigate = useNavigate();
 
-    const { setIsLoading, isLoading } = useLoading(); // 2. Ladezustand hier verwenden
-
-
-
     const goToPagesAndOpenTab = (tabId: string, path: string) => {
     
         
@@ -16,7 +11,6 @@ export const useNavigation = () => {
     };
     const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
         
-        
         navigate(`${path}?collapseId=${collapseId}`);
     };
     const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
@@ -56,30 +50,69 @@ export const useNavigation = () => {
         navigate(`${path}?scrollTo=${scrollToId}`);
     };
 
-    const changePageWithLoadingScreen = () => ({ path, scrollToId }: { path: string, scrollToId: string }) => {
-        setIsLoading(true);
-        let url = `${path}?changeTo=${scrollToId}`;
-        navigate(url);
+  
 
-        setTimeout(() => {
-            const element = document.getElementById(scrollToId);
-            if (element) {
-              const viewportHeight = window.innerHeight;
-              const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
-              const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
-              window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
-      
-              // Ladezustand nach Abschluss des Scrollens beenden
-              setTimeout(() => {
-                setIsLoading(false);
-              }, 1000); // Scrollzeit als Beispiel
-            } else {
-              // Falls das Element nicht gefunden wird, Ladezustand beenden
-              setIsLoading(false);
+    const goToPlace = ({
+        path,
+        scrollToId,
+        tabId,
+        subTabId,
+        collapseId,
+        tabincolId
+    }: { 
+        path: string;
+        scrollToId?: string;
+        tabId?: string;
+        subTabId?: string;
+        collapseId?: string;
+        tabincolId?: string;
+    }) => {
+    // Den vollständigen Pfad erstellen, indem wir den basePath und path kombinieren
+    let url = `/${path.startsWith("/") ? path.slice(1) : path}`;
+
+
+        
+        let paramsAdded = false; 
+        console.log("Found path: " + path)
+        // 1. Tab-Logik (tabId und subTabId)
+        if (tabId) {
+            console.log("Found tabID: " + tabId)
+            url += `?tab=${tabId}`;
+            paramsAdded = true;
+            if (subTabId) {
+                console.log("Found subTabId: " + subTabId)
+                url += `&subTab=${subTabId}`;
             }
-          }, 500); 
+        }
+
+        // 2. Collapse-Logik (collapseId und tabincolId)
+        if (collapseId) {
+            console.log("Found collapseId: " + collapseId)
+            if (!tabId) {
+                // Wenn kein tabId gesetzt ist, fügen wir collapseId hinzu
+                url += url.includes('?') ? `&collapseId=${collapseId}` : `?collapseId=${collapseId}`;
+                paramsAdded = true;
+            }
+            if (tabincolId) {
+                console.log("Found tabincolId: " + tabincolId)
+                url += `&colTab=${tabincolId}`;
+            }
+        }
+
+        // 3. Scroll-Logik (scrollToId)
+        if (scrollToId) {
+            console.log("Found scrollToId: " + scrollToId)
+            // Wenn bereits Parameter existieren, fügen wir & hinzu, ansonsten ?
+            const separator = paramsAdded ? '&' : '?';
+            paramsAdded = true;
+            url += `${separator}scrollTo=${scrollToId}`;
+        }
+        console.log("Final URL:", url);
+
+        // Navigiere zur URL
+        navigate(url);
     };
 
     
-    return { isLoading, changePageWithLoadingScreen,  goToPageAndScroll, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
+    return { goToPlace,  goToPageAndScroll, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
 };