From 339041e73df8b42ac678414a880c362ad5418ee5 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <lsanfilippo@techfak.uni-bielefeld.de>
Date: Sat, 23 Nov 2024 16:00:16 +0100
Subject: [PATCH] so funktoionier es gerade

---
 src/utils/TabNavigation.ts        | 31 ++++++++++++---------------
 src/utils/handleScroll.ts         |  2 +-
 src/utils/opentabincollapsible.ts | 35 +++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/opentabincollapsible.ts

diff --git a/src/utils/TabNavigation.ts b/src/utils/TabNavigation.ts
index 4a43775..dc99d67 100644
--- a/src/utils/TabNavigation.ts
+++ b/src/utils/TabNavigation.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { openFromOtherPage } from './openFromOtherpAge';
 import { handleScroll } from './handleScroll';
 import { openNestedTab } from './openNestedTab';
@@ -7,24 +7,13 @@ import { openTab } from './openTab';
 
 // Custom Hook for central 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 change and url update
-  const handleTabChange = (tabId: string, subTabId?: string) => {
-    setActiveTab(tabId);
-    setActiveSubTab(subTabId || null);
-
-    // updatung the url 
-    let newUrl = `${location.pathname}?tab=${tabId}`;
-    if (subTabId) {
-      newUrl += `&subTab=${subTabId}`;
-    }
-    navigate(newUrl, { replace: true });
-  };
+  
 
   useEffect(() => {
     console.log("Use Effect")
@@ -35,6 +24,15 @@ export const useTabNavigation = () => {
     const scrollToId = params.get('scrollTo'); 
     const changeTo = params.get('changeTo');
     
+     // scrolls to a specific collapsible element
+     if (collapseId) {
+      const collapsible = document.getElementById(collapseId);
+      if (collapsible && collapsible.classList.contains('collapsed')) {
+        collapsible.classList.remove('collapsed'); // Open the collapsible
+      }
+      handleScroll(collapseId); // This triggers the scroll action
+    }
+
     // opens main and (if necessary) subtab
     if (tabId) {
       let tab = document.getElementById(tabId);
@@ -48,10 +46,7 @@ export const useTabNavigation = () => {
       }
     }
 
-    // scrolls to a specific collapsible element
-    if (collapseId) {
-      handleScroll(collapseId);
-    }
+   
 
     // opens tab on another page
     if (tabId) {
@@ -81,7 +76,7 @@ export const useTabNavigation = () => {
     setActiveSubTab(subTabId || null);
   }, [location.search]);
 
-  return { activeTab, activeSubTab, handleTabChange };
+  return { activeTab, activeSubTab };
 };
 
 
diff --git a/src/utils/handleScroll.ts b/src/utils/handleScroll.ts
index e6ddc00..2402cb1 100644
--- a/src/utils/handleScroll.ts
+++ b/src/utils/handleScroll.ts
@@ -5,7 +5,7 @@ export const handleScroll = (scrollId: string) => {
       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',
diff --git a/src/utils/opentabincollapsible.ts b/src/utils/opentabincollapsible.ts
new file mode 100644
index 0000000..8b4a5ae
--- /dev/null
+++ b/src/utils/opentabincollapsible.ts
@@ -0,0 +1,35 @@
+import { openTab } from "./openTab";
+import { handleScroll } from "./handleScroll";
+
+// Funktion, um einen Tab in einem Collapsible zu öffnen
+export const openTabInCollapsible = (
+  collapsibleId: string,     // ID des Collapsibles
+  tabId: string,             // ID des zu öffnenden Tabs
+  collapsibleClass: string,  // Klasse des Collapsibles (z. B. für das Styling)
+  tabClass: string           // Klasse des Tabs (z. B. für das Styling)
+) => {
+  // Öffne das Collapsible (falls es geschlossen ist)
+  const collapsible = document.getElementById(collapsibleId);
+  if (collapsible && collapsible.classList.contains('collapsed')) {
+    collapsible.classList.remove('collapsed'); // Öffne das Collapsible
+  }
+
+  // Stelle sicher, dass wir zu diesem Collapsible scrollen
+  handleScroll(collapsibleId);
+
+  // Öffne den entsprechenden Tab innerhalb des Collapsibles
+  openTab(tabId, tabClass);
+
+  // Optional: Wir können auch zu diesem Tab scrollen, wenn nötig
+  const selectedTab = document.getElementById(tabId);
+  if (selectedTab) {
+    const elementTop = selectedTab.getBoundingClientRect().top + window.pageYOffset;
+    const offset = window.innerHeight / 2 - selectedTab.offsetHeight / 2;
+    const scrollPosition = elementTop - offset;
+
+    window.scrollTo({
+      top: scrollPosition,
+      behavior: 'smooth',
+    });
+  }
+};
-- 
GitLab