diff --git a/src/utils/TabNavigation.ts b/src/utils/TabNavigation.ts index 4a437752c268c4284b51f6198303834431e672cd..dc99d679e0b3f754771702a176345acfb470a95b 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 e6ddc00cac6ca29550708b3745e8ed9f03005645..2402cb15dfcb9d3bf97ee08081ef32d69a0b42b5 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 0000000000000000000000000000000000000000..8b4a5aeb2f3809555cd7ec276493fb8e73416e15 --- /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', + }); + } +};