From 00ce60ed9305b0e7e0cc53a910d3edaec9b6a1f8 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 23 Aug 2024 20:35:34 +0200
Subject: [PATCH] scroll and open tabs etc
---
src/components/Buttons.tsx | 41 ++++++++++++++++++++++++--
src/components/goto.tsx | 9 ++++++
src/contents/description.tsx | 2 +-
src/contents/education.tsx | 8 ++----
src/contents/human-practices.tsx | 10 ++++++-
src/contents/partners.tsx | 49 +++++++++++++++++++-------------
6 files changed, 90 insertions(+), 29 deletions(-)
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index cea387c4..75c789f7 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -185,7 +185,7 @@ export function ButtonTwo(){
export function ButtonOne({text, open}: {text:string, open:string}){
return(
<div className="boxy-1">
- <span typeof="button" onClick={openIt({it: open})}>
+ <span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one">
{text}
</div></span>
@@ -254,4 +254,41 @@ export function openItTwo({it}: {it: string}){
event.currentTarget.className += " active";
}
return openit;
-}
\ No newline at end of file
+}
+
+
+
+
+export function openFromOtherPage(it: string) {
+ return (event: React.MouseEvent<HTMLElement> | { currentTarget: HTMLElement }) => {
+ // Get all elements with class "cycletab" and hide them
+ let tabcontent = document.getElementsByClassName("cycletab");
+ for (let i = 0; i < tabcontent.length; i++) {
+ (tabcontent[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');
+ }
+}
+}
diff --git a/src/components/goto.tsx b/src/components/goto.tsx
index 76a2a45e..b7ea687c 100644
--- a/src/components/goto.tsx
+++ b/src/components/goto.tsx
@@ -1,3 +1,5 @@
+import { useNavigate } from "react-router-dom";
+
export const goTo = (el: HTMLElement): void => {
const elementTop = el.getBoundingClientRect().top;
const elementPosition = elementTop + window.pageYOffset;
@@ -47,4 +49,11 @@ export const SupScrollLink : React.FC<SupScrollLinkProps> = ({label }) => {
</a>
</sup>
);
+};
+const navigate = useNavigate();
+export const goToTextsAndOpenCollapsible = (collapseId: string) => {
+ navigate(collapseId);
+};
+export const goToPagesAndOpenTab = (tabId: string) => {
+navigate(tabId);
};
\ No newline at end of file
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 86d08b7c..d91d6d11 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
import { InfoBox } from "../components/Boxes";
import { TabButtonRow } from "../components/Buttons";
import Collapsible from "../components/Collapsible";
diff --git a/src/contents/education.tsx b/src/contents/education.tsx
index b2ae9107..e3278bc3 100644
--- a/src/contents/education.tsx
+++ b/src/contents/education.tsx
@@ -1,14 +1,10 @@
-import { useNavigate } from "react-router-dom";
import { ButtonOne} from "../components/Buttons";
+import { goToPagesAndOpenTab, goToTextsAndOpenCollapsible } from "../components/goto";
export function Education() {
-const navigate = useNavigate();
-const goToTextsAndOpenCollapsible = (collapseId: string) => {
- navigate(collapseId);
- };
return (
<>
<div>
@@ -72,7 +68,7 @@ const goToTextsAndOpenCollapsible = (collapseId: string) => {
<h3>Why and in which ways were we invested in MUKOmove? </h3>
<p>We did not stop at our participation itself – we wanted to make other people from our university and city
aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team.
- Our survey about cystic fibrosis awareness and our discussions with <a href=" /bielefeld-cebitec/interviews#westhoff">Kathrin Westhoff</a>, the head of a
+ Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('/human-practices?tab=InvWesthoff')}>Kathrin Westhoff</a>, the head of a
practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known
this illness still is. Especially the interview with the physiotherapist made us realize how important
exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 5cfea0a2..d557833f 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -50,7 +50,7 @@
*/
import { TimeHori } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
-import { ButtonOne, TabButtonRow, openTab } from "../components/Buttons";
+import { ButtonOne, TabButtonRow, openFromOtherPage, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
@@ -735,6 +735,14 @@ export function HumanPractices() {
}
}
}, [location.search]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<div className="row mt-4">
diff --git a/src/contents/partners.tsx b/src/contents/partners.tsx
index 0cfa33eb..104d7d43 100644
--- a/src/contents/partners.tsx
+++ b/src/contents/partners.tsx
@@ -1,27 +1,38 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Partners() {
- const location = useLocation();
- useEffect(() => {
- // Scroll to the section specified by the collapseId in the URL
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
-
- if (collapseId) {
- const element = document.getElementById(collapseId);
- if (element) {
- const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - element.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
+
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
- }, [location.search]);
+ const location = useLocation();
+ useEffect(() => {
+ // Scroll to the section specified by the collapseId in the URL
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+
+ if (collapseId) {
+ const element = document.getElementById(collapseId);
+ if (element) {
+ const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
+ const offset = window.innerHeight / 2 - element.offsetHeight / 2;
+ const scrollPosition = elementTop - offset;
+
+ window.scrollTo({
+ top: scrollPosition,
+ behavior: 'smooth',
+ });
+ }
+ }
+ }, [location.search]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div id="sidebarbox" className="col-1 d-none d-lg-block"> </div>
--
GitLab