From 49d53cc1dceb60adf6a72fa56ba76a20fabdc44b Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Wed, 18 Sep 2024 18:18:34 +0200
Subject: [PATCH] =?UTF-8?q?Wenn=20ich=20bei=20einer=20Seite=20runterscroll?=
=?UTF-8?q?e=20und=20dann=20auf=20eine=20andere=20Seite=20klicke,=20spring?=
=?UTF-8?q?e=20ich=20nicht=20zum=20Seitenanfang=20der=20neuen=20Seite,=20s?=
=?UTF-8?q?ondern=20auf=20die=20selbe=20H=C3=B6he=20auf=20der=20ich=20davo?=
=?UTF-8?q?r=20war.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App/App.css | 2 +-
src/components/Buttons.tsx | 14 +++----
src/contents/description.tsx | 66 +++++++++++++++-----------------
src/contents/engineering.tsx | 61 +++++++++++++----------------
src/contents/experiments.tsx | 2 +
src/contents/human-practices.tsx | 4 +-
src/contents/results.tsx | 2 +
src/contents/safety.tsx | 53 +++++++++++++------------
src/sidebars/engS.tsx | 4 +-
src/utils/openThem.ts | 52 ++++++++++++++-----------
src/utils/useNavigation.ts | 55 ++++++++++++++++++--------
11 files changed, 169 insertions(+), 146 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 325049cb..6a4bf405 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -131,7 +131,7 @@ hr{
body {
/* padding-top: 56px; */
background-color: var(--ourbeige);
- color: #493843;
+ color: var(--offblack);
}
body.dark-mode {
background-color: var(--offblack);
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index f734761a..5a0db616 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -28,13 +28,13 @@ export function Villagebutton({ title, source, page }: { title: string; source:
export function Villbuttonrow(){
return(
<div className="small-row align-items-center bottom-buttons">
- <Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
- <Villagebutton page="/team" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
- <Villagebutton page="/experiments" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
- <Villagebutton page="/description" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
- <Villagebutton page="/engineering" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
- <Villagebutton page="/safety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
- <Villagebutton page="/results" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
+ <Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
+ <Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
+ <Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
+ <Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
+ <Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
+ <Villagebutton page="/safety?tab=obeninsafety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
+ <Villagebutton page="/results?tab=resultheading" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
</div>
)
}
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 70c16044..a4af8721 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -11,45 +11,39 @@ import { ButtonRowTabs } from "../components/Tabs";
import { useEffect } from "react";
import PieChart from "../components/Graph";
import PreCyse from "../components/precyse";
+import { handleScrollToCollapse, openNestedTab, openTab } from "../utils/TabNavigation";
+import { openFromOtherPage } from "../utils/openFromOtherpAge";
export function Description() {
const location = useLocation();
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Open the tab specified by tabId
- if (tabId) {
- // Hide all tabs
- const tabs = document.querySelectorAll('.enginneeringtab');
- tabs.forEach((tab) => {
- (tab as HTMLElement).style.display = 'none';
- });
-
- // Show the selected tab
- const selectedTab = document.getElementById(tabId);
- if (selectedTab) {
- selectedTab.style.display = 'block';
- }
- }
-
- // Scroll to the section specified by collapseId after opening the tab
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
- }, [location.search]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+ const tabId = params.get('tab');
+ const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
+
+ // Open the tab specified by tabId (and subTab if nested)
+ if (tabId) {
+ if (subTabId) {
+ // If subTab is provided, open the nested tab
+ openNestedTab(tabId, subTabId);
+ } else {
+ // Otherwise, just open the main tab
+ openTab(tabId);
+ }
+ }
+
+ // Scroll to the section specified by collapseId after opening the tab
+ if (collapseId) {
+ handleScrollToCollapse(collapseId);
+ }
+
+ // Open the tab from another page
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<div className="row mt-4">
@@ -58,7 +52,7 @@ export function Description() {
<section className="section">
<H2 id="Abstract" text="Abstract"/>
- <p>We are proud to introduce our next-generation prime editing technology <PreCyse/> . We aim to develop an innovative gene therapy against cystic fibrosis, tackling the most common mutation ΔF508 of the Cystic Fibrosis Transmembrane Conductance Regulator (CFTR) gene. We optimize lipid nanoparticles (LNPs) for the efficient and cell-specific delivery of our therapeutic mRNA. Current treatment strategies are limited in terms of speed, precision and effectiveness, often failing to achieve long-lasting improvements. In addition, high costs and limited accessibility of pharmaceuticals contribute to adverse prognosis of many patients. We want to develop a monthly applied which represents a cure that is more advanced and user-friendly compared to other medications due to its longer lasting time, lowering the frequency of use. </p>
+ <p id="obenindescription" >We are proud to introduce our next-generation prime editing technology <PreCyse/> . We aim to develop an innovative gene therapy against cystic fibrosis, tackling the most common mutation ΔF508 of the Cystic Fibrosis Transmembrane Conductance Regulator (CFTR) gene. We optimize lipid nanoparticles (LNPs) for the efficient and cell-specific delivery of our therapeutic mRNA. Current treatment strategies are limited in terms of speed, precision and effectiveness, often failing to achieve long-lasting improvements. In addition, high costs and limited accessibility of pharmaceuticals contribute to adverse prognosis of many patients. We want to develop a monthly applied which represents a cure that is more advanced and user-friendly compared to other medications due to its longer lasting time, lowering the frequency of use. </p>
</section>
</div>
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 020f722b..d14906ab 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -5,58 +5,51 @@ import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openElement } from "../utils/openElement";
import { H3 } from "../components/Headings";
+import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
export function Engineering() {
const location = useLocation();
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+ const tabId = params.get('tab');
+ const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
- // Open the tab specified by tabId
- if (tabId) {
- // Hide all tabs
- const tabs = document.querySelectorAll('.enginneeringtab');
- tabs.forEach((tab) => {
- (tab as HTMLElement).style.display = 'none';
- });
-
- // Show the selected tab
- const selectedTab = document.getElementById(tabId);
- if (selectedTab) {
- selectedTab.style.display = 'block';
- }
+ // Open the tab specified by tabId (and subTab if nested)
+ if (tabId) {
+ if (subTabId) {
+ // If subTab is provided, open the nested tab
+ openNestedTab(tabId, subTabId);
+ } else {
+ // Otherwise, just open the main tab
+ openTab(tabId);
}
-
+ }
- // Scroll to the section specified by collapseId after opening the tab
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
+ // Scroll to the section specified by collapseId after opening the tab
+ if (collapseId) {
+ handleScrollToCollapse(collapseId);
+ }
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
+ // Open the tab from another page
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
}, [location.search]);
return (
<>
<div className="row mt-4">
<div className="col">
- <br/> <br/> <br/>
+ <br/> <br/> <br/>
<div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
- <section >
+ <section > <br id="obenengineering"/>
<div className="bg-lb box" >
- <H3 text="Our cycle" id="Our Cycle"></H3>
+ <H3 text="Our cycle" id="ourcycle"></H3>
<p>Hallo Prime Editing diesdas</p>
</div>
<div className="box" >
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
index eb24e092..a87e7aeb 100644
--- a/src/contents/experiments.tsx
+++ b/src/contents/experiments.tsx
@@ -2,6 +2,7 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { H2 } from "../components/Headings";
export function Experiments() {
const location = useLocation();
@@ -33,6 +34,7 @@ export function Experiments() {
return (
<>
+ <H2 id="heading" text="Heading" ></H2>
<div className="row mt-4">
<div className="col-lg-8">
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 4280b394..ed92c095 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -93,10 +93,10 @@ export function HumanPractices() {
return (
<div className="row mt-4">
- <BlockQuoteB
+ <span id="hp-quote"><BlockQuoteB
text="Human Practices is the study of how your work affects the world, and how the world affects your work."
cite="- Peter Carr, Director of Judging"
- />
+ /> </span>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.6mRPyWPFEIQzo-HP4kEukgHaEK%26pid%3DApi&f=1&ipt=ad1e62d3df6a343c1c163a8246d424a7b61015ac43a0cbe279976cf544be7aa7&ipo=images" alt="placeholder"></img>
<H2 text="Introduction" id="intro"/>
diff --git a/src/contents/results.tsx b/src/contents/results.tsx
index 6cb36fba..5fef62c3 100644
--- a/src/contents/results.tsx
+++ b/src/contents/results.tsx
@@ -1,6 +1,7 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { H2 } from "../components/Headings";
export function Results() {
const location = useLocation();
@@ -34,6 +35,7 @@ export function Results() {
return (
<>
+ <H2 id="resultheading" text="Heading" ></H2>
<div className="row mt-4">
<div className="col-lg-5">
<p>test hallo welt</p>
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index 22d46e76..27cd59af 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -2,39 +2,42 @@ import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { H2 } from "../components/Headings";
+import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
export function Safety() {
- const location = useLocation();
+ const location = useLocation();
useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+ const tabId = params.get('tab');
+ const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
+
+ // Open the tab specified by tabId (and subTab if nested)
+ if (tabId) {
+ if (subTabId) {
+ // If subTab is provided, open the nested tab
+ openNestedTab(tabId, subTabId);
+ } else {
+ // Otherwise, just open the main tab
+ openTab(tabId);
}
+ }
+
+ // Scroll to the section specified by collapseId after opening the tab
+ if (collapseId) {
+ handleScrollToCollapse(collapseId);
+ }
+
+ // Open the tab from another page
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
}, [location.search]);
-
+
return (
<>
<div className="col">
- <section className="section">
+ <section id="obeninsafety" className="section">
<div id="Role"><H2 text="Role in iGem"/></div>
</section>
</div>
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index aed950cf..8ddb6ed9 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -30,8 +30,8 @@ export function EngSide(){
<div className="sticky-top">
<nav className="sidebar">
<div>
- <a onClick={openThem({it: "our-cycle"})}>
- <div className="detail-sideitem">
+ <a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
+ <div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem active-sideitem">
<summary>Our Cycle</summary>
<span id="our-cycle" className="sidesubtab" style={{display: "block"}}>
diff --git a/src/utils/openThem.ts b/src/utils/openThem.ts
index 80ea4f4e..b515635e 100644
--- a/src/utils/openThem.ts
+++ b/src/utils/openThem.ts
@@ -1,32 +1,40 @@
-export function openThem({it}: {it: string}){
- const gotoandopen = (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-
- console.log("it classname: " + document.getElementById(it)?.className)
- console.log("it: " + it)
+export function openThem({it, scrollToId}: {it: string, scrollToId?: string}) {
+ const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+ console.log("it classname: " + document.getElementById(it)?.className);
+ console.log("it: " + it);
+
let contenttabid = "tab-" + it;
let parent = "parent-" + it;
- console.log("we want to open " + it + " and " + contenttabid)
+ console.log("we want to open " + it + " and " + contenttabid);
+
let sideitems = document.getElementsByClassName("sideitem");
let subtabs = document.getElementsByClassName("sidesubtab");
let contenttabs = document.getElementsByClassName("enginneeringtab");
+
+ // Verstecke alle Subtabs und Content-Tabs
for (let i = 0; i < subtabs.length; i++) {
- (subtabs[i] as HTMLElement).style.display = "none";
- console.log("Hiding sidebar subtab...")
- }
- for (let i = 0; i < contenttabs.length; i++) {
- (contenttabs[i] as HTMLElement).style.display = "none";
- console.log("Hiding content tab...")
+ (subtabs[i] as HTMLElement).style.display = "none";
+ console.log("Hiding sidebar subtab...");
+ }
+ for (let i = 0; i < contenttabs.length; i++) {
+ (contenttabs[i] as HTMLElement).style.display = "none";
+ console.log("Hiding content tab...");
}
for (let i = 0; i < sideitems.length; i++) {
- (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
- console.log("Hiding sidebar subtab...")
+ (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
+ console.log("Hiding sidebar subtab...");
}
- document.getElementById(it)!.style.display = "block";
- document.getElementById(parent)!.classList.add("active-sideitem");
- document.getElementById(contenttabid)!.style.display = "block";
-
-
- }
- return gotoandopen;
- }
\ No newline at end of file
+ // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
+ document.getElementById(it)!.style.display = "block";
+ document.getElementById(parent)!.classList.add("active-sideitem");
+ document.getElementById(contenttabid)!.style.display = "block";
+
+ // Scrolle zu der angegebenen ID, falls vorhanden
+ if (scrollToId && document.getElementById(scrollToId)) {
+ console.log("Scrolling to: " + scrollToId);
+ document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
+ }
+ };
+ return gotoandopen;
+}
diff --git a/src/utils/useNavigation.ts b/src/utils/useNavigation.ts
index af11dcd4..d3796381 100644
--- a/src/utils/useNavigation.ts
+++ b/src/utils/useNavigation.ts
@@ -4,34 +4,55 @@ export const useNavigation = () => {
const navigate = useNavigate();
const goToPagesAndOpenTab = (tabId: string, path: string) => {
- navigate(`${path}${tabId}`);
+ navigate(`${path}?tab=${tabId}`);
};
const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
- navigate(`${path}${collapseId}`);
+ navigate(`${path}?collapseId=${collapseId}`);
};
+
const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
- const navigate = useNavigate();
- navigate(`${path}?tab=${tabId}${collapseId ? `&collapseId=${collapseId}` : ''}`);
+ let url = `${path}?tab=${tabId}`;
+ if (collapseId) {
+ url += `&collapseId=${collapseId}`;
+ }
+ navigate(url);
};
const goToPageWithNestedTabs = ({ path, tabId, subTabId, collapseId }: { path: string, tabId: string, subTabId?: string, collapseId?: string }) => {
- const navigate = useNavigate();
let url = `${path}?tab=${tabId}`;
if (subTabId) {
- url += `&subTab=${subTabId}`;
+ url += `&subTab=${subTabId}`;
}
if (collapseId) {
- url += `&collapseId=${collapseId}`;
+ url += `&collapseId=${collapseId}`;
+ }
+ navigate(url);
+ };
+
+ // Erweiterte Funktion, die auch zu einer bestimmten ID innerhalb eines Tabs scrollen kann
+ const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId?: string }) => {
+ let url = `${path}?tab=${tabId}`;
+ if (scrollToId) {
+ url += `&scrollTo=${scrollToId}`;
}
navigate(url);
- };
-/* <a onClick={() => goToPageWithTabAndCollapsible({
- path: "/human-practices",
- tabId: "InvWesthoff",
- collapseId: "collapse-1" // ID of the collapsible to open
-})}>
- Go to Human Practices and Open Collapsible 1
-</a> */
- return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible, goToPageWithTabAndCollapsible, goToPageWithNestedTabs };
-};
\ No newline at end of file
+
+ // Führe nach der Navigation das Scrollen aus
+ setTimeout(() => {
+ if (scrollToId) {
+ const element = document.getElementById(scrollToId);
+ if (element) {
+ // Berechne die Scroll-Position, um das Element in der Mitte zu setzen
+ const viewportHeight = window.innerHeight;
+ const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+ const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
+
+ window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
+ }
+ }
+ }, 500); // Verzögere das Scrollen, um sicherzustellen, dass der Tab geladen ist
+ };
+
+ return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible, goToPageWithTabAndCollapsible, goToPageWithNestedTabs, goToPageWithTabAndScroll };
+};
--
GitLab