From 39a96cc018654fea646d31213de6d12a048d5ac4 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 23 Sep 2024 02:50:37 +0200
Subject: [PATCH] useTabNavigation statt useNavigateTabs
---
src/components/Buttons.tsx | 7 +++--
src/contents/Home.tsx | 4 +--
.../Human Practices/human-practices.tsx | 4 +--
src/contents/contribution.tsx | 4 +--
src/contents/description.tsx | 5 +--
src/contents/engineering.tsx | 4 +--
src/contents/example.tsx | 2 +-
src/contents/experiments.tsx | 4 +--
src/contents/igem-bielefeld.tsx | 4 +--
src/contents/impressum.tsx | 4 +--
src/contents/judging.tsx | 4 +--
src/contents/methods.tsx | 4 +--
src/contents/notebook.tsx | 4 +--
src/contents/partners.tsx | 4 +--
src/contents/parts.tsx | 4 +--
src/contents/project-documentation.tsx | 4 +--
src/contents/results.tsx | 4 +--
src/contents/safety.tsx | 4 +--
src/contents/supplementary-material.tsx | 4 +--
src/contents/team.tsx | 5 +--
src/utils/TabNavigation.tsx | 31 ++++++++++++-------
src/utils/navigation.ts | 3 +-
22 files changed, 66 insertions(+), 51 deletions(-)
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 5a0db616..09fb191d 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { openThem } from "../utils/openThem";
import { openElement } from "../utils/openElement";
+import { useNavigation } from "../utils/useNavigation";
interface UrlButtonProps{
href: string,
children: string,
@@ -163,13 +164,15 @@ export function ButtonTwo(){
}
export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
+ const { goToPagesAndOpenTab } = useNavigation();
if (openclass) {
return(
<div className="boxy-1">
- <span typeof="button" onClick={openFromOtherPage(open, openclass)}>
+ <a onClick={() => goToPagesAndOpenTab(open, "")}>
<div className="btn-new btn-one">
{text}
- </div></span>
+ </div>
+ </a>
</div>
)
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 59564d1a..e9aa9a94 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,10 +1,10 @@
import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
import { Problems } from "../components/Problems";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Home() {
- useNavigateTabs();
+ useTabNavigation();
return (
<div className="row mt-4">
<div className="col">
diff --git a/src/contents/Human Practices/human-practices.tsx b/src/contents/Human Practices/human-practices.tsx
index 92a92bcb..fc002599 100644
--- a/src/contents/Human Practices/human-practices.tsx
+++ b/src/contents/Human Practices/human-practices.tsx
@@ -49,15 +49,15 @@
<p></p>
*/
import { openElement } from "../../utils/openElement";
-import { useNavigateTabs } from "../../utils/navigation";
import { HPOverview } from "./Overwiev";
import { HPIntroduction } from "./Introduction";
import { HPIntegrated } from "./IHP";
import { HPFurtherEngagement } from "./Further Engagement/FurtherEngagement";
import { HPSupplement } from "./Further Engagement/SupMaterial";
+import { useTabNavigation } from "../../utils/TabNavigation";
export function HumanPractices() {
- useNavigateTabs();
+ useTabNavigation();
openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", });
diff --git a/src/contents/contribution.tsx b/src/contents/contribution.tsx
index 1af1e168..7a1b5f3d 100644
--- a/src/contents/contribution.tsx
+++ b/src/contents/contribution.tsx
@@ -4,14 +4,14 @@ import BFHpdf, { GuidePDF } from "../components/Pdfs";
import { H2, H3, H4} from "../components/Headings";
import { OLDBFHStyleTabs } from "../components/Tabs";
import { BlockQuoteB } from "../components/Quotes";
-import { useNavigateTabs } from "../utils/navigation";
import { Certificate, PosterRow } from "../components/poster";
import { Section } from "../components/sections";
import { useNavigation } from "../utils";
+import { useTabNavigation } from "../utils/TabNavigation";
export function Contribution() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<Section title="BFH European MeetUp" id="bfh">
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 50725846..f8a27b2f 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -9,14 +9,15 @@ import { Complex } from "../components/Svgs";
import { ButtonRowTabs } from "../components/Tabs";
import PieChart from "../components/Graph";
import PreCyse from "../components/precyse";
-import { useNavigateTabs } from "../utils/navigation";
+
import { Section, Subesction } from "../components/sections";
import { stringToSlug } from "../utils";
import { symptomdata, SymptomDatensatz } from "../data/symptom-data";
import { drugdata, DrugDatensatz } from "../data/drug-data";
+import { useTabNavigation } from "../utils/TabNavigation";
export function Description() {
- useNavigateTabs();
+ useTabNavigation();
return (
<div className="row mt-4">
<div className="col">
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 01e17ae3..de22f1c6 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -3,12 +3,12 @@ import { ButtonOneEngineering } from "../components/Buttons";
import { LoremShort } from "../components/Loremipsum";
import { openElement } from "../utils/openElement";
import { H3 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Engineering() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row mt-4">
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index 9a603727..b88a3b64 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -24,7 +24,7 @@ ChartJS.register(
);
export function Example() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="container">
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
index 05bb3f89..ea3880f5 100644
--- a/src/contents/experiments.tsx
+++ b/src/contents/experiments.tsx
@@ -1,8 +1,8 @@
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Experiments() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<H2 id="heading" text="Heading" ></H2>
diff --git a/src/contents/igem-bielefeld.tsx b/src/contents/igem-bielefeld.tsx
index ce2a81c1..f21f5303 100644
--- a/src/contents/igem-bielefeld.tsx
+++ b/src/contents/igem-bielefeld.tsx
@@ -1,7 +1,7 @@
-import { useNavigateTabs } from "../utils/navigation";
+
export function igemBielefeld() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row mt-4">
diff --git a/src/contents/impressum.tsx b/src/contents/impressum.tsx
index dcfe7f92..ef1af895 100644
--- a/src/contents/impressum.tsx
+++ b/src/contents/impressum.tsx
@@ -1,8 +1,8 @@
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Impressum() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row">
diff --git a/src/contents/judging.tsx b/src/contents/judging.tsx
index 65979d64..471697b8 100644
--- a/src/contents/judging.tsx
+++ b/src/contents/judging.tsx
@@ -1,7 +1,7 @@
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Judging() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<H2 text="Overview" id="overview"/>
diff --git a/src/contents/methods.tsx b/src/contents/methods.tsx
index 389d255b..fc29ab35 100644
--- a/src/contents/methods.tsx
+++ b/src/contents/methods.tsx
@@ -1,6 +1,6 @@
-import { useNavigateTabs } from "../utils/navigation";
+
export function Methods() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row">
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
index a123cd9b..2b33aa2c 100644
--- a/src/contents/notebook.tsx
+++ b/src/contents/notebook.tsx
@@ -1,8 +1,8 @@
import H1 from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Notebook() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row mt-4">
diff --git a/src/contents/partners.tsx b/src/contents/partners.tsx
index d2f0fbc5..f20473b1 100644
--- a/src/contents/partners.tsx
+++ b/src/contents/partners.tsx
@@ -1,8 +1,8 @@
import H1, { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Partners() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div id="sidebarbox" className="col-1 d-none d-lg-block"> </div>
diff --git a/src/contents/parts.tsx b/src/contents/parts.tsx
index 5878de1f..cbab38ab 100644
--- a/src/contents/parts.tsx
+++ b/src/contents/parts.tsx
@@ -1,8 +1,8 @@
import { LoremMedium } from "../components/Loremipsum";
import { Section, Subesction } from "../components/sections";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Parts() {
- useNavigateTabs();
+ useTabNavigation();
return (
<div className="col">
<Section title="Introduction" id="Introduction">
diff --git a/src/contents/project-documentation.tsx b/src/contents/project-documentation.tsx
index cfa32d5f..c949bf74 100644
--- a/src/contents/project-documentation.tsx
+++ b/src/contents/project-documentation.tsx
@@ -1,7 +1,7 @@
-import { useNavigateTabs } from "../utils/navigation";
+
export function ProDesc() {
- useNavigateTabs();
+ useTabNavigation();
return (
<></>
);
diff --git a/src/contents/results.tsx b/src/contents/results.tsx
index 02f75532..afb88c60 100644
--- a/src/contents/results.tsx
+++ b/src/contents/results.tsx
@@ -1,8 +1,8 @@
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+
export function Results() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index 94c8849a..7c6414cc 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -1,10 +1,10 @@
import { LoremMedium } from "../components/Loremipsum";
import { Section, Subesction } from "../components/sections";
-import { useNavigateTabs } from "../utils/navigation";
+
export const Safety: React.FC = () =>{
- useNavigateTabs();
+ useTabNavigation();
return (
<>
diff --git a/src/contents/supplementary-material.tsx b/src/contents/supplementary-material.tsx
index 84303c34..5d1db7b1 100644
--- a/src/contents/supplementary-material.tsx
+++ b/src/contents/supplementary-material.tsx
@@ -1,6 +1,6 @@
-import { useNavigateTabs } from "../utils/navigation";
+
export function Supplementary() {
- useNavigateTabs();
+ useTabNavigation();
return (
<>
<div className="row">
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index b8bf75ad..f656cff9 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -1,9 +1,10 @@
import { advisors, instructor, pis, SteckbriefInterface, teammembers } from "../data/steckbriefe";
import { H2 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
+import { useTabNavigation } from "../utils/TabNavigation";
+
export function Team() {
- useNavigateTabs();
+ useTabNavigation();
let teambriefe = createSteckbriefe(teammembers);
let advisorbriefe = createSteckbriefe(advisors);
let sinan = createSteckbriefe(instructor);
diff --git a/src/utils/TabNavigation.tsx b/src/utils/TabNavigation.tsx
index 23bb5504..8c8cec68 100644
--- a/src/utils/TabNavigation.tsx
+++ b/src/utils/TabNavigation.tsx
@@ -3,11 +3,14 @@ import { useNavigate, useLocation } from 'react-router-dom';
import { openFromOtherPage } from './openFromOtherpAge';
// Funktion, um den Haupttab zu öffnen
-export const openTab = (tabId: string) => {
- const tabs = document.querySelectorAll('.tabcontent');
- tabs.forEach((tab) => {
- (tab as HTMLElement).style.display = 'none';
- });
+export const openTab = (tabId: string, tabClass: string) => {
+ console.log((document.getElementById(tabId) as HTMLElement).classList[1])
+ console.log(`tabclass is ${tabClass}`)
+ const tabs = document.getElementsByClassName(tabClass);
+ for (let index = 0; index < tabs.length; index++) {
+ (tabs[index] as HTMLElement).style.display = 'none';
+
+ }
const selectedTab = document.getElementById(tabId);
if (selectedTab) {
@@ -16,10 +19,10 @@ export const openTab = (tabId: string) => {
};
// Funktion, um verschachtelte Tabs zu öffnen
-export const openNestedTab = (parentTabId: string, childTabId: string) => {
- openTab(parentTabId);
+export const openNestedTab = (parentTabId: string, childTabId: string, parentClass: string, childClass: string) => {
+ openTab(parentTabId, parentClass);
- const nestedTabs = document.querySelectorAll(`#${parentTabId} .nested-tabcontent`);
+ const nestedTabs = document.querySelectorAll(`#${parentTabId} ${childClass}`);
nestedTabs.forEach((tab) => {
(tab as HTMLElement).style.display = 'none';
});
@@ -66,17 +69,23 @@ export const useTabNavigation = () => {
};
useEffect(() => {
+ console.log("Use Effect")
const params = new URLSearchParams(location.search);
const tabId = params.get('tab');
const subTabId = params.get('subTab');
const collapseId = params.get('collapseId');
-
+
+
// Öffne Haupt- und ggf. verschachtelten Tab
if (tabId) {
+ let tab = document.getElementById(tabId);
+ let tabClass = tab!.className;
if (subTabId) {
- openNestedTab(tabId, subTabId);
+ let subTab = document.getElementById(subTabId);
+ let parentClass = (subTab as HTMLElement).classList[1];
+ openNestedTab(tabId, subTabId, parentClass, tabClass);
} else {
- openTab(tabId);
+ openTab(tabId, tabClass);
}
}
diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
index 5b7414b7..b31d337b 100644
--- a/src/utils/navigation.ts
+++ b/src/utils/navigation.ts
@@ -1,4 +1,4 @@
-// navigation.ts
+/* // navigation.ts
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
@@ -41,3 +41,4 @@ export const useNavigateTabs = (): void => {
}
}, [location.search]);
};
+ */
\ No newline at end of file
--
GitLab