diff --git a/src/utils/TabNavigation.tsx b/src/utils/TabNavigation.tsx index d1f1c190f3a9038a252e0e98ae1f7503d2e76eb5..9a4a13690bc0cea65bb7cb0dce712696ca7e6c86 100644 --- a/src/utils/TabNavigation.tsx +++ b/src/utils/TabNavigation.tsx @@ -1,9 +1,9 @@ import { useEffect, useState } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; -import { openFromOtherPage } from './openFromOtherpAge'; import { useLoading } from './LoadingContext'; +import { openFromOtherPage } from './openFromOtherpAge'; -// Funktion, um den Haupttab zu öffnen +// function to open main tab export const openTab = (tabId: string, tabClass: string) => { console.log((document.getElementById(tabId) as HTMLElement).classList[1]) console.log(`tabclass is ${tabClass}`) @@ -12,7 +12,6 @@ export const openTab = (tabId: string, tabClass: string) => { (tabs[index] as HTMLElement).style.display = 'none'; } - const selectedTab = document.getElementById(tabId); if (selectedTab) { selectedTab.style.display = 'block'; diff --git a/src/utils/openFromOtherpAge.ts b/src/utils/openFromOtherpAge.ts new file mode 100644 index 0000000000000000000000000000000000000000..383443f368ab3b1c8d647e7fdbbff0364c90275c --- /dev/null +++ b/src/utils/openFromOtherpAge.ts @@ -0,0 +1,44 @@ +export function openFromOtherPage(it: string, openclass?: string) { + var opcla: string; + if (openclass){ + opcla = openclass; + } + else{ + opcla = "cycletab"; + } + return (event: React.MouseEvent<HTMLElement> | { currentTarget: HTMLElement }) => { + // Get all elements with class "cycletab" 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) { + tabToOpen.style.display = "block"; + + // Scroll the tab content into view + const elementTop = tabToOpen.getBoundingClientRect().top + window.pageYOffset; + const offset = window.innerHeight / 2 - tabToOpen.offsetHeight / 2; + const scrollPosition = elementTop - offset; + + window.scrollTo({ + top: scrollPosition, + behavior: 'smooth', + }); + } + // Optionally, add an "active" class to the clicked button (if needed) + const tabs = document.querySelectorAll('.btn-new'); + tabs.forEach(tab => tab.classList.remove('active')); + + if (event.currentTarget) { + event.currentTarget.classList.add('active'); + } + + } +} \ No newline at end of file