From 990901ff565933a7e9632f137d59439b9a9bab57 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 23 Sep 2024 20:35:36 +0200
Subject: [PATCH] push state fixed

---
 src/utils/openThem.ts | 107 ++++++++++++++++++++++++++++--------------
 1 file changed, 72 insertions(+), 35 deletions(-)

diff --git a/src/utils/openThem.ts b/src/utils/openThem.ts
index e1ebd03b..fb00b721 100644
--- a/src/utils/openThem.ts
+++ b/src/utils/openThem.ts
@@ -1,44 +1,81 @@
-export function openThem({it, scrollToId}: {it: string, scrollToId?: string}) {
+export function openThem({ it, scrollToId }: { it: string; scrollToId?: string }) {
     const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        console.log("it classname: " + document.getElementById(it)?.className);
-        console.log("it: " + it);
+      if (typeof window !== 'undefined') {
+        console.log(`Opening tab: ${it}`);
+        updateTabs(it, scrollToId);
         
-        let contenttabid = "tab-" + it; 
-        let parent = "parent-" + it; 
-        console.log("we want to open " + it + " and " + contenttabid);
-        let sideitems = document.getElementsByClassName("sideitem"); 
-        let subtabs = document.getElementsByClassName("sidesubtab");
-        let contenttabs = document.getElementsByClassName("enginneeringtab");
-        
-        // Verstecke alle Subtabs und Content-Tabs
-        for (let i = 0; i < subtabs.length; i++) {
-            (subtabs[i] as HTMLElement).style.display = "none";
-            console.log("Hiding sidebar subtab...");
-        }
-        for (let i = 0; i < contenttabs.length; i++) {
-            (contenttabs[i] as HTMLElement).style.display = "none";
-            console.log("Hiding content tab...");
-        }
-        for (let i = 0; i < sideitems.length; i++) {
-            (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
-            console.log("Hiding sidebar subtab...");
-        }
-        
-        // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
-        document.getElementById(it)!.style.display = "block";
-        document.getElementById(parent)!.classList.add("active-sideitem");
-        document.getElementById(contenttabid)!.style.display = "block";
-  
         // Update der URL
         const newUrl = `?tab=${it}`;
+        console.log(`Updating URL to: ${newUrl}`);
         window.history.pushState({ tab: it }, '', newUrl);
-  
-        // Scrolle zu der angegebenen ID, falls vorhanden
-        if (scrollToId && document.getElementById(scrollToId)) {
-            console.log("Scrolling to: " + scrollToId);
-            document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
-        }
+        
+        // Scrollen nach oben
+        console.log("Scrolling to top...");
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }
     };
+  
     return gotoandopen;
   }
+  
+  function updateTabs(it: string, scrollToId?: string) {
+    if (typeof window === 'undefined') return;
+  
+    let contenttabid = "tab-" + it;
+    let parent = "parent-" + it;
+  
+    console.log(`Updating tabs for: ${it}`);
+    
+    // Verstecke alle Subtabs und Content-Tabs
+    const subtabs = document.getElementsByClassName("sidesubtab");
+    const contenttabs = document.getElementsByClassName("enginneeringtab");
+    const sideitems = document.getElementsByClassName("sideitem");
+  
+    for (let i = 0; i < subtabs.length; i++) {
+      (subtabs[i] as HTMLElement).style.display = "none";
+      console.log(`Hiding subtab: ${subtabs[i].id}`);
+    }
+    for (let i = 0; i < contenttabs.length; i++) {
+      (contenttabs[i] as HTMLElement).style.display = "none";
+      console.log(`Hiding content tab: ${contenttabs[i].id}`);
+    }
+    for (let i = 0; i < sideitems.length; i++) {
+      (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
+      console.log(`Removing active class from side item: ${sideitems[i].id}`);
+    }
+  
+    // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
+    document.getElementById(it)!.style.display = "block";
+    console.log(`Showing tab: ${it}`);
+    document.getElementById(parent)!.classList.add("active-sideitem");
+    console.log(`Activating side item: ${parent}`);
+    document.getElementById(contenttabid)!.style.display = "block";
+    console.log(`Showing content tab: ${contenttabid}`);
+  
+    // Scrolle zu der angegebenen ID, falls vorhanden
+    if (scrollToId && document.getElementById(scrollToId)) {
+      console.log(`Scrolling to ID: ${scrollToId}`);
+      document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
+    } else {
+      console.log(`No scrollToId provided or ID not found: ${scrollToId}`);
+    }
+  }
+  
+  // Füge einen Event Listener für `popstate` hinzu
+  if (typeof window !== 'undefined') {
+    window.addEventListener('popstate', (event) => {
+      console.log('Popstate event triggered');
+      if (event.state) {
+        const tab = event.state.tab;
+        console.log(`Restoring tab: ${tab}`);
+        updateTabs(tab);
+        
+        // Scrollen nach oben beim Zurücknavigieren
+        console.log("Scrolling to top on popstate...");
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      } else {
+        console.log("No state found in popstate event.");
+      }
+    });
+  }
   
\ No newline at end of file
-- 
GitLab