openElement

src/App/App.tsx

@@ -22,15 +22,18 @@ import { Villbuttonrow } from "../components/Buttons.tsx";
 import "../utils/Highlight-functions.js";
 import "./LoadingScreen.css";
 import { useScroll, motion } from "framer-motion";
+import { useNavigation } from "../utils/useNavigation.ts";
 
 const App = () => {
+  const { isLoading, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll } = useNavigation();
+  
   const { scrollYProgress } = useScroll({
     offset: ["start start", "end end"],
   });
 
   window.scrollTo(0, 0);
 
-  const [isLoading, setIsLoading] = useState(true);
+
 
   const pathMapping = getPathMapping();
   const currentPath =

src/utils/TabNavigation.tsx

-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { openFromOtherPage } from './openFromOtherpAge';
 
+// Funktion, um den Haupttab zu öffnen
 export const openTab = (tabId: string) => {
-  // Hide all tabs
   const tabs = document.querySelectorAll('.tabcontent');
   tabs.forEach((tab) => {
     (tab as HTMLElement).style.display = 'none';
   });
 
-  // Show the selected tab
   const selectedTab = document.getElementById(tabId);
   if (selectedTab) {
     selectedTab.style.display = 'block';
   }
 };
 
+// Funktion, um verschachtelte Tabs zu öffnen
 export const openNestedTab = (parentTabId: string, childTabId: string) => {
-  // Open parent tab
   openTab(parentTabId);
 
-  // Open child tab inside parent tab
   const nestedTabs = document.querySelectorAll(`#${parentTabId} .nested-tabcontent`);
   nestedTabs.forEach((tab) => {
     (tab as HTMLElement).style.display = 'none';
@@ -32,6 +30,7 @@ export const openNestedTab = (parentTabId: string, childTabId: string) => {
   }
 };
 
+// Funktion, um zu einem bestimmten Bereich (z.B. Collapse) zu scrollen
 export const handleScrollToCollapse = (collapseId: string) => {
   const collapseElement = document.getElementById(collapseId);
   if (collapseElement) {
@@ -46,38 +45,56 @@ export const handleScrollToCollapse = (collapseId: string) => {
   }
 };
 
-export const TabNavigation = () => {
+// Custom Hook zur zentralen Tab-Navigation
+export const useTabNavigation = () => {
+  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
+  const handleTabChange = (tabId: string, subTabId?: string) => {
+    setActiveTab(tabId);
+    setActiveSubTab(subTabId || null);
+
+    // URL entsprechend aktualisieren
+    let newUrl = `${location.pathname}?tab=${tabId}`;
+    if (subTabId) {
+      newUrl += `&subTab=${subTabId}`;
+    }
+    navigate(newUrl, { replace: true });
+  };
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
-    const collapseId = params.get('collapseId');
     const tabId = params.get('tab');
-    const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
+    const subTabId = params.get('subTab');
+    const collapseId = params.get('collapseId');
 
-    // Open the tab specified by tabId (and subTab if nested)
+    // Öffne Haupt- und ggf. verschachtelten Tab
     if (tabId) {
       if (subTabId) {
-        // If subTab is provided, open the nested tab
         openNestedTab(tabId, subTabId);
       } else {
-        // Otherwise, just open the main tab
         openTab(tabId);
       }
     }
 
-    // Scroll to the section specified by collapseId after opening the tab
+    // Scrollen zu einem bestimmten Collapsible-Element
     if (collapseId) {
       handleScrollToCollapse(collapseId);
     }
 
-    // Open the tab from another page
+    // Tab von einer anderen Seite öffnen (falls definiert)
     if (tabId) {
       openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
     }
+
+    setActiveTab(tabId);
+    setActiveSubTab(subTabId || null);
   }, [location.search]);
 
-  return 
+  return { activeTab, activeSubTab, handleTabChange };
 };
 
-export default TabNavigation;
+

src/utils/openElement.ts

 export function openElement({
-    elementToOpen, 
-    classToHide,  /* tabcontent */
-    elementToClose,   
-    buttonClass, /* = "tablinks" */ 
-    eventTargetClass = "active"
-  }: {
-    elementToOpen: string,
-    classToHide: string, 
-    classToClose?: string, 
-    elementToClose?: string, 
-    buttonClass?: string, 
-    eventTargetClass?: string
-  }) {
-    const openElement = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-      let i, elementsToHide, elementsToClose, tabLinks;
-  
-      // Hide all elements with the classToHide (e.g., "tabcontent")
-      elementsToHide = document.getElementsByClassName(classToHide);
-      for (i = 0; i < elementsToHide.length; i++) {
-        (elementsToHide[i] as HTMLElement).style.display = "none";
+  elementToOpen, 
+  classToHide,  /* tabcontent */
+  elementToClose,   
+  buttonClass, /* = "tablinks" */ 
+  eventTargetClass = "active",
+  handleTabChange  /* Hier handleTabChange als Parameter einfügen */
+}: {
+  elementToOpen: string,
+  classToHide: string, 
+  classToClose?: string, 
+  elementToClose?: string, 
+  buttonClass?: string, 
+  eventTargetClass?: string,
+  handleTabChange: (tabId: string, subTabId?: string) => void  /* Neuer Parameter für die Tab-Änderungslogik */
+}) {
+  const openElement = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    let i, elementsToHide, elementsToClose, tabLinks;
+
+    // Hide all elements with the classToHide (e.g., "tabcontent")
+    elementsToHide = document.getElementsByClassName(classToHide);
+    for (i = 0; i < elementsToHide.length; i++) {
+      (elementsToHide[i] as HTMLElement).style.display = "none";
+    }
+
+    // If elementToClose is provided, hide these elements too (optional)
+    if (elementToClose) {
+      elementsToClose = document.getElementsByClassName(elementToClose);
+      for (i = 0; i < elementsToClose.length; i++) {
+        (elementsToClose[i] as HTMLElement).style.display = "none";
       }
-  
-      // If elementToClose is provided, hide these elements too (optional)
-      if (elementToClose) {
-        elementsToClose = document.getElementsByClassName(elementToClose);
-        for (i = 0; i < elementsToClose.length; i++) {
-          (elementsToClose[i] as HTMLElement).style.display = "none";
-        }
+    }
+
+    // Clear the "active" class from elements with the buttonClass (e.g., "tablinks")
+    if (buttonClass) {
+      tabLinks = document.getElementsByClassName(buttonClass);
+      for (i = 0; i < tabLinks.length; i++) {
+        tabLinks[i].className = tabLinks[i].className.replace(` ${eventTargetClass}`, "");
       }
-  
-      // Clear the "active" class from elements with the buttonClass (e.g., "tablinks")
-      if (buttonClass) {
-        tabLinks = document.getElementsByClassName(buttonClass);
-        for (i = 0; i < tabLinks.length; i++) {
-          tabLinks[i].className = tabLinks[i].className.replace(` ${eventTargetClass}`, "");
-        }
-      }
-  
-      // Display the element to open (elementToOpen, e.g., a city tab or content section)
-      const element = document.getElementById(elementToOpen);
-      if (element) {
-        element.style.display = "block";
-      }
-  
-      // Add the "active" class to the clicked element
-      event.currentTarget.className += ` ${eventTargetClass}`;
-    };
-  
-    return openElement;
-  }
-  
\ No newline at end of file
+    }
+
+    // Display the element to open (elementToOpen, e.g., a city tab or content section)
+    const element = document.getElementById(elementToOpen);
+    if (element) {
+      element.style.display = "block";
+    }
+
+    // Add the "active" class to the clicked element
+    event.currentTarget.className += ` ${eventTargetClass}`;
+
+    // Rufe handleTabChange auf, um die URL entsprechend anzupassen
+    handleTabChange(elementToOpen);  // Hier wird die Tab-Änderung und URL-Update durchgeführt
+  };
+
+  return openElement;
+}

src/utils/useNavigation.ts

-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useState, useEffect, useRef } from "react";
 
 export const useNavigation = () => {
     const navigate = useNavigate();
+    const location = useLocation();
+    const previousPath = useRef(location.pathname);
+    const [isLoading, setIsLoading] = useState(false);
+    
 
     const goToPagesAndOpenTab = (tabId: string, path: string) => {
-        navigate(`${path}?tab=${tabId}`);
-    };
-
-    const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
-        navigate(`${path}?collapseId=${collapseId}`);
-    };
-
-    const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
-        let url = `${path}?tab=${tabId}`;
-        if (collapseId) {
-            url += `&collapseId=${collapseId}`;
+        if (previousPath.current !== path) {
+            setIsLoading(true);
         }
-        navigate(url);
-    };
-
-    const goToPageWithNestedTabs = ({ path, tabId, subTabId, collapseId }: { path: string, tabId: string, subTabId?: string, collapseId?: string }) => {
-        let url = `${path}?tab=${tabId}`;
-        if (subTabId) {
-            url += `&subTab=${subTabId}`;
-        }
-        if (collapseId) {
-            url += `&collapseId=${collapseId}`;
-        }
-        navigate(url);
+        navigate(`${path}?tab=${tabId}`);
+        setTimeout(() => setIsLoading(false), 500);
     };
 
-    // Erweiterte Funktion, die auch zu einer bestimmten ID innerhalb eines Tabs scrollen kann
     const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId?: string }) => {
+        if (previousPath.current !== path) {
+            setIsLoading(true);
+        }
         let url = `${path}?tab=${tabId}`;
         if (scrollToId) {
             url += `&scrollTo=${scrollToId}`;
         }
         navigate(url);
-
-        // Führe nach der Navigation das Scrollen aus
         setTimeout(() => {
+            setIsLoading(false);
             if (scrollToId) {
                 const element = document.getElementById(scrollToId);
                 if (element) {
-                    // Berechne die Scroll-Position, um das Element in der Mitte zu setzen
                     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" });
                 }
             }
-        }, 500); // Verzögere das Scrollen, um sicherzustellen, dass der Tab geladen ist
+        }, 500);
     };
 
-    return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible, goToPageWithTabAndCollapsible, goToPageWithNestedTabs, goToPageWithTabAndScroll };
+
+    useEffect(() => {
+        previousPath.current = location.pathname;
+    }, [location.pathname]);
+
+    return { isLoading, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll };
 };