Skip to content
Snippets Groups Projects
Commit 03fa2242 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

Automatic Sidebar + Section types

parent 18871a98
No related branches found
No related tags found
No related merge requests found
Pipeline #429750 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/ScrollLink.tsx
+ 1
− 0
View file @ 03fa2242
......@@ -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.`);
}
......
src/contents/safety.tsx
+ 41
− 49
View file @ 03fa2242
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>
</>
);
}
src/contents/sections.tsx 0 → 100644
+ 26
− 0
View file @ 03fa2242
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
src/sidebars/safeS.tsx
+ 2
− 6
View file @ 03fa2242
......@@ -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
src/utils/Highlight-functions.ts
+ 42
− 12
View file @ 03fa2242
......@@ -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);
}
}
src/utils/createSidebar.tsx
+ 28
− 9
View file @ 03fa2242
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment