From 03fa224207db882736c336bacdc469cf2878b8b0 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 20 Sep 2024 16:19:48 +0200
Subject: [PATCH] Automatic Sidebar + Section types
---
src/components/ScrollLink.tsx | 1 +
src/contents/safety.tsx | 90 +++++++++++++++-----------------
src/contents/sections.tsx | 26 +++++++++
src/sidebars/safeS.tsx | 8 +--
src/utils/Highlight-functions.ts | 54 ++++++++++++++-----
src/utils/createSidebar.tsx | 37 +++++++++----
6 files changed, 140 insertions(+), 76 deletions(-)
create mode 100644 src/contents/sections.tsx
diff --git a/src/components/ScrollLink.tsx b/src/components/ScrollLink.tsx
index 8fe0b42a..30855b7a 100644
--- a/src/components/ScrollLink.tsx
+++ b/src/components/ScrollLink.tsx
@@ -29,6 +29,7 @@ export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
top: scrollOffset,
behavior: "smooth"
});
+ console.log(`Scrolled to ${targetId}`)
} else {
console.error(`Element with ID ${targetId} not found.`);
}
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index 2950a1cb..948a6a6b 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -1,8 +1,9 @@
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";
+import { LoremMedium } from "../components/Loremipsum";
+import { Section, Subesction } from "./sections";
export function Safety() {
const location = useLocation();
@@ -36,54 +37,45 @@ export function Safety() {
return (
<>
- <div className="col">
- <section id="RoleH" className="section">
- <div id="Role"><H2 text="Role in iGem"/></div>
- </section>
- </div>
- <div className="col">
- <section id="ChecksH" className="section">
- <div id="Check-Ins"><H2 text="Check-Ins"/></div>
- </section>
- </div>
- <div className="col">
- <section id="LabH" className="section">
- <div id="Our Lab"><H2 text="Our Lab"/></div>
- </section>
- </div>
- <div className="col">
- <section id="BiosafetyH" className="section">
- <div id="Biosafety"><H2 text="Biosafety"/></div>
- <section id="Biosafety1">
- <div id="Biosafety1H"><h3>Mechanism</h3> </div>
- </section>
- <section id="Biosafety2">
- <div id="Biosafety2H"><h3>Delivery</h3> </div>
- </section>
- </section>
- </div>
- <div className="col">
- <section id="BiosecurityH" className="section">
- <div id="Biosecurity"><H2 text="Biosecurity"/></div>
- <section id="Biosecurity1">
- <div id="Biosecurity1H"><h3>Our Project</h3> </div>
- </section>
- <section id="Biosecurity2">
- <div id="Biosecurity2H"><h3>Risk Assesment</h3> </div>
- </section>
- <section id="Biosecurity3">
- <div id="Biosecurity3H"><h3>Managing Risks</h3> </div>
- </section>
- </section>
- </div>
- <div className="col">
- <section id="BioethicsH" className="section">
- <div id="Bioethics"><H2 text="Bioethics"/></div>
- <div id="BE1"><h3>Gene Therapy</h3> </div>
- <div id="BE2"><h3>Primary cells</h3> </div>
- <div id="BE3"><h3>Consent and Guidelines</h3> </div>
- </section>
- </div>
+ <Section title="Role in iGem" id="Role">
+ <LoremMedium/>
+ </Section>
+ <Section title="Check-Ins" id="Check-Ins">
+ <LoremMedium/>
+ </Section>
+ <Section title="Our Lab" id="Our Lab">
+ <LoremMedium/>
+ </Section>
+ <Section title="Biosafety" id="Biosafety">
+ <Subesction title="Mechanism" id="Biosafety1">
+ <LoremMedium/>
+ </Subesction>
+ <Subesction title="Delivery" id="Biosafety2">
+ <LoremMedium/>
+ </Subesction>
+ </Section>
+ <Section title="Biosecurity" id="Biosecurity">
+ <Subesction title="Our Project" id="Biosecurity1">
+ <LoremMedium/>
+ </Subesction>
+ <Subesction title="Risk Assesment" id="Biosecurity2">
+ <LoremMedium/>
+ </Subesction>
+ <Subesction title="Managing Risks" id="Biosecurity3">
+ <LoremMedium/>
+ </Subesction>
+ </Section>
+ <Section title="Bioethics" id="Bioethics">
+ <Subesction title="Gene Therapy" id="Bioethics1">
+ <LoremMedium/>
+ </Subesction>
+ <Subesction title="Primary Cells" id="Bioethics2">
+ <LoremMedium/>
+ </Subesction>
+ <Subesction title="Consent and Guidelines" id="Bioethics3">
+ <LoremMedium/>
+ </Subesction>
+ </Section>
</>
);
}
diff --git a/src/contents/sections.tsx b/src/contents/sections.tsx
new file mode 100644
index 00000000..72027fdc
--- /dev/null
+++ b/src/contents/sections.tsx
@@ -0,0 +1,26 @@
+import { H2 } from "../components/Headings"
+
+
+export function Section({id, title, children}: {id: string, title: string, children: React.ReactNode}){
+ let sec_id = `${id}H`
+ let header_id = id
+ return(
+ <div className="col">
+ <section id={sec_id} className="section">
+ <div id={header_id}><H2 text={title}/></div>
+ {children}
+ </section>
+ </div>
+ )
+
+}
+
+export function Subesction({id, title, children}: {id: string, title: string, children: React.ReactNode}){
+
+ return(
+ <section id={id}>
+ <div id={id + "H"}><h3>{title}</h3> </div>
+ {children}
+ </section>
+ )
+}
\ No newline at end of file
diff --git a/src/sidebars/safeS.tsx b/src/sidebars/safeS.tsx
index 69308c7a..a1c0d69c 100644
--- a/src/sidebars/safeS.tsx
+++ b/src/sidebars/safeS.tsx
@@ -3,21 +3,17 @@ import { createSidebar } from "../utils/createSidebar";
export function SafetySidebar(){
-
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
- )
-}
-
-
+ )}
const tabs = [
{ tab: "Role" },
{ tab: "Check-Ins"},
{ tab: "Our Lab" },
- // { tab: "Biosafety", subtabs: ["Mechanism", "Delivery"] },
+ { tab: "Biosafety", subtabs: ["Mechanism", "Delivery"] },
{ tab: "Biosecurity", subtabs: ["Our Project", "Risk Assessment", "Managing Risks"] },
{ tab: "Bioethics", subtabs: ["Gene Therapy", "Primary Cells", "Consent and Guidelines"] },
];
\ No newline at end of file
diff --git a/src/utils/Highlight-functions.ts b/src/utils/Highlight-functions.ts
index 05822480..65215a5f 100644
--- a/src/utils/Highlight-functions.ts
+++ b/src/utils/Highlight-functions.ts
@@ -6,9 +6,9 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
console.log("here comes subtitle...")
console.log(subtitle) */
if (el != null && subtitle != null){
-/* console.log("here comes el...")
- console.log(el)
- console.log(el.getBoundingClientRect()) */
+ //console.log("here comes el...")
+ //console.log(el)
+ // console.log(el.getBoundingClientRect())
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
subtitle.style.color = "#F57D22";
subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
@@ -26,12 +26,13 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
subtitle.style.color = "white";
subtitle.style.marginLeft = "0";
subtitle.style.backgroundColor = "";
+ subtitle.style.fontWeight = "500";
}
}
}
- export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+/* export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
let TopDistance = 150;
if (el != null && subtitle != null){
@@ -39,13 +40,15 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
if(subtitle.childNodes[0] != undefined){
- /* console.log("if true: ");
- console.log(subtitle.childNodes[0]); */
+ console.log("if true: ");
+ console.log(subtitle.childNodes[0]);
(subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
if(subtitle.childNodes[0].childNodes[1] != undefined){
- /* console.log("test: ")
- console.log(subtitle.childNodes[0].childNodes[1]); */
+ console.log("test: ")
+ console.log(subtitle.childNodes[0].childNodes[1]);
(subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
+ console.log(`subtitle.childNodes[0].textContent ${subtitle.childNodes[0].textContent}`)
+ console.log(`subtitle.childNodes[0].childNodes[1].nodeName: ${subtitle.childNodes[0].childNodes[1].nodeName}`)
}
}
}
@@ -54,12 +57,12 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
subtitle.style.backgroundColor = "";
subtitle.classList.remove("subtitle-active");
if(subtitle.childNodes[0] != undefined){
- /* console.log("if true: ");
- console.log(subtitle.childNodes[0]); */
+ // console.log("if true: ");
+ console.log(subtitle.childNodes[0]);
(subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
if(subtitle.childNodes[0].childNodes[1] != undefined){
- /* console.log("test: ")
- console.log(subtitle.childNodes[0].childNodes[1]); */
+ console.log("test: ")
+ console.log(subtitle.childNodes[0].childNodes[1]);
(subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "none";
}
}
@@ -68,3 +71,30 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
}
}
+ */
+
+ export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+ let TopDistance = 150;
+ if (el != null && subtitle != null){
+ //console.log("Highlighting Element: ", el, "Subtitle: ", subtitle);
+ //console.log(`Element position: top=${el.getBoundingClientRect().top}, bottom=${el.getBoundingClientRect().bottom}`);
+ if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
+ (subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
+ if(subtitle.childNodes[0].childNodes[1] != undefined){
+ (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
+ // console.log(`subtitle.childNodes[0].textContent ${subtitle.childNodes[0].textContent}`)
+ // console.log(`subtitle.childNodes[0].childNodes[1].nodeName: ${subtitle.childNodes[0].childNodes[1].nodeName}`)
+ }
+ } else {
+ (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+ if(subtitle.childNodes[0] != undefined){
+ (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+ if(subtitle.childNodes[0].childNodes[1] != undefined){
+ (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "none";
+ }
+ }
+ }
+ } else {
+ console.error("Element oder Subtitle nicht gefunden:", el, subtitle);
+ }
+}
diff --git a/src/utils/createSidebar.tsx b/src/utils/createSidebar.tsx
index f57c857f..39e21171 100644
--- a/src/utils/createSidebar.tsx
+++ b/src/utils/createSidebar.tsx
@@ -6,7 +6,7 @@ import { stringToSlug } from "./stringToSlug";
// Funktion zur Erstellung der Sidebar
export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
const { numsBig, numsSub } = deriveTabsData(tabs);
-
+ console.log({ numsBig, numsSub })
const [openTab, setOpenTab] = useState<string | null>(null);
@@ -62,12 +62,13 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
const toggleTab = (tab: string) => {
setOpenTab(openTab === tab ? null : tab);
// console.log(`Status of tab ${tab} is ${openTab}`)
+ scrolling(tab)
};
const toggleTabAndScroll = (tab: string) => {
setOpenTab(openTab === tab ? null : tab);
// onsole.log(`Status of tab ${tab} is ${openTab}`)
- scrolling(tab)
+
};
let subtitlenumber = 0;
return (
@@ -114,11 +115,11 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
const subTabId = `newsubtitle${subtitlenumber}`;
/* console.log(`Old subtitlenumber is ${subtitlenumber}`) */
subtitlenumber = subtitlenumber + 1;
- /* console.log(`New subtitlenumber is ${subtitlenumber}`)
- console.log(`Made subtab newsubtitle${subtitlenumber} that will link to ${tab.tab}${subIndex + 1}H`) */
+ // console.log(`New subtitlenumber is ${subtitlenumber}`)
+ // console.log(`Made subtab newsubtitle${subtitlenumber} that will link to ${tab.tab}${subIndex +1 }H`)
return (
<li key={subtitlenumber} id={subTabId}>
- <ScrollLink label={subtab} targetId={`${tab.tab}${subIndex + 1}H`} />
+ <ScrollLink label={subtab} targetId={`${tab.tab}${subIndex +1 }H`} />
</li>
);
})}
@@ -146,9 +147,24 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
}
+ function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
+ const numsBig: string[] = [];
+ const numsSub: string[] = [];
+
+ tabs.forEach(tab => {
+ numsBig.push(`${tab.tab}H`); // z.B. RoleH, ChecksH
+ if (tab.subtabs) {
+ tab.subtabs.forEach((subtab, index) => {
+ numsSub.push(`${tab.tab}${index + 1}`); // z.B. Role1H, Role2H
+ });
+ }
+ });
+
+ return { numsBig, numsSub };
+}
-function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
+/* function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
let numsBig: string[] = [];
let numsSub: string[] = [];
@@ -156,8 +172,11 @@ function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
let bigslugname = stringToSlug(tab.tab);
numsBig.push(bigslugname);
if (tab.subtabs) {
- tab.subtabs.forEach(( subIndex) => {
- let tabname = `${tab.tab}${subIndex + 1}`;
+ let subtabid = 0;
+ tab.subtabs.forEach((_index) => {
+ subtabid = subtabid +1;
+ // console.log(subtabid)
+ let tabname = `${tab.tab}${subtabid}`;
let slugname = stringToSlug(tabname);
numsSub.push(slugname);
});
@@ -168,7 +187,7 @@ function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
}
-
+ */
\ No newline at end of file
--
GitLab