Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 684 additions and 891 deletions
src/headers/safe-h.tsx
View file @ 3fd292fd
export function SAFEH() {
return (
<HeaderBox title="Safety">
<HeaderBox title="Biosafety" id="safehead">
</HeaderBox>
);
}
import HeaderBox from "../components/header-box";
\ No newline at end of file
import HeaderBox from "../components/HeaderBox";
\ No newline at end of file
src/headers/spons-h.tsx
View file @ 3fd292fd
export function SPONH() {
return (
<HeaderBox title="Sponsors and Partners">
<HeaderBox title="Sponsors" title2="& Partners" id="sphead">
</HeaderBox>
);
}
import HeaderBox from "../components/header-box";
\ No newline at end of file
import HeaderBox from "../components/HeaderBox";
\ No newline at end of file
src/headers/sup-h.tsx
View file @ 3fd292fd
export function SUPH() {
return (
<HeaderBox title="Supplementary Data">
<HeaderBox title="Supplementary" title2="Material" id="suphead">
</HeaderBox>
);
}
import HeaderBox from "../components/header-box";
\ No newline at end of file
import HeaderBox from "../components/HeaderBox";
\ No newline at end of file
src/headers/sur-h.tsx deleted 100644 → 0
View file @ d97e86e3
export function SURH() {
return (
<HeaderBox title="Survey">
</HeaderBox>
);
}
import HeaderBox from "../components/header-box";
\ No newline at end of file
src/headers/team-h.tsx
View file @ 3fd292fd
export function TEAMH() {
return (
<HeaderBox title="Our Team">
<HeaderBox title="Our Team" id="teamhead">
</HeaderBox>
);
}
import HeaderBox from "../components/header-box";
\ No newline at end of file
import HeaderBox from "../components/HeaderBox";
\ No newline at end of file
src/headers/wiki-h.tsx deleted 100644 → 0
View file @ d97e86e3
export function WIKIH() {
return (
<HeaderBox title="Wiki Documentation">
</HeaderBox>
);
}
import HeaderBox from "../components/header-box";
\ No newline at end of file
src/main.tsx
View file @ 3fd292fd
......@@ -2,12 +2,15 @@ import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App/App";
import { BrowserRouter } from "react-router-dom";
import { LoadingProvider } from "./utils/LoadingContext";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<LoadingProvider>
<BrowserRouter basename={import.meta.env.BASE_URL}>
<App />
</BrowserRouter>
</LoadingProvider>
</React.StrictMode>,
);
src/pages.ts
View file @ 3fd292fd
......@@ -2,35 +2,33 @@
Contribution,
Description,
Engineering,
Experiments,
Home,
Bfh,
Drylab,
Attributions,
HumanPractices,
Ethics,
Supplementary,
Parts,
Proof,
Design,
Judging,
ProDesc,
Partners,
Ints,
Measurement,
Notebook,
Results,
Safety,
Team,
Education,
Wiki,
Impressum,
Example,
Survey,
Collaborations
igemBielefeld,
HpSidebar,
SafetySidebar
} from "./contents";
import { DescSidebar, EthicsSidebar, NoSidebar, EngSide } from "./contents";
import { BFHH, SURH, COLLH, EDUH, ETHH, JUDGEH, DESH, PROOFH, SUPH, PARTH, MESH, ENGH, DRYH, HOMEH, HPH, INTSH, SPONH, RESH, ATTH, CONTH, DESCH, EXPH, IMPH, NOTEH, SAFEH, TEAMH, WIKIH } from "./contents";
import { DescSidebar, NoSidebar, EngSide } from "./contents";
import { IBIE, JUDGEH, PRODESC, PARTH, ENGH, HOMEH, HPH, SPONH, RESH, ATTH, CONTH, DESCH, IMPH, NOTEH, SAFEH, TEAMH } from "./contents";
import { Methods } from "./contents/methods";
import { METHH } from "./headers/meth-h";
import { ConSidebar } from "./sidebars/conS";
import { iGemBielefeldSidebar } from "./sidebars/igbS";
import { JudSidebar } from "./sidebars/jugS";
import { MethSidebar } from "./sidebars/methS";
import { PartSidebar } from "./sidebars/prtS";
import { ResultSidebar } from "./sidebars/resS";
interface Base {
name: string | undefined;
......@@ -38,7 +36,7 @@ interface Base {
class Folder implements Base {
name: string | undefined;
folder: Page[] | undefined;
folder: Page[] | PageRef[] | undefined;
}
class Page implements Base {
......@@ -50,6 +48,15 @@ class Page implements Base {
navlist!: React.FC;
}
class PageRef implements Base{
name: string | undefined;
title: string | undefined;
path: string | undefined;
component?: React.FC | undefined;
header?: React.FC;
navlist?: React.FC;
}
const Pages: (Page | Folder)[] = [
{
name: "Attributions",
......@@ -59,29 +66,13 @@ const Pages: (Page | Folder)[] = [
header: ATTH,
navlist: NoSidebar,
},
{
name: "MeetUp",
title: "BFH European MeetUp",
path: "/bfh",
component: Bfh,
header: BFHH,
navlist: NoSidebar,
},
{
name: "Collaborations",
title: "Collaborations",
path: "/collaborations",
component: Collaborations,
header: COLLH,
navlist: NoSidebar,
},
{
name: "Contribution",
title: "Contribution",
path: "/contribution",
component: Contribution,
header: CONTH,
navlist: NoSidebar,
navlist: ConSidebar,
},
{
name: "Description",
......@@ -92,45 +83,13 @@ const Pages: (Page | Folder)[] = [
navlist: DescSidebar
},
{
name: "Design",
title: "Design",
path: "/design",
component: Design,
header: DESH,
navlist: NoSidebar,
},
{
name: "Dry Lab",
title: "Dry Lab",
path: "/dry-lab",
component: Drylab,
header: DRYH,
navlist: NoSidebar,
},
{
name: "Education",
title: "Education",
path: "/education",
component: Education,
header: EDUH,
navlist: NoSidebar,
},
{
name: "Engineering Success",
name: "Engineering",
title: "Engineering",
path: "/engineering",
component: Engineering,
header: ENGH,
navlist: EngSide,
},
{
name: "Ethics",
title: "Ethics",
path: "/ethics",
component: Ethics,
header: ETHH,
navlist: EthicsSidebar,
},
{
name: "Example",
title: "Example",
......@@ -139,40 +98,47 @@ const Pages: (Page | Folder)[] = [
header: HOMEH,
navlist: NoSidebar,
},
{
name: "Experiments",
title: "Experiments",
path: "/experiments",
component: Experiments,
header: EXPH,
navlist: NoSidebar,
},
{
name: "Human Practices",
title: "Human Practices",
path: "/human-practices",
component: HumanPractices,
header: HPH,
navlist: NoSidebar
navlist: HpSidebar
},
{
name: "Home",
title: "Bielefeld CeBiTec",
path: "/home",
component: Home,
header: HOMEH,
navlist: NoSidebar
},
{
name: "Home",
title: "Bielefeld CeBiTec",
path: "/",
component: Description,
header: DESCH,
navlist: DescSidebar
component: Home,
header: HOMEH,
navlist: NoSidebar
},
{
name: "Home",
title: "Bielefeld CeBiTec",
path: "/index.html",
component: Description,
header: DESCH,
navlist: DescSidebar
component: Home,
header: HOMEH,
navlist: NoSidebar
},
{
name: "iGEM Bielefeld",
title: "iGEM Bielefeld",
path: "/igem-bielefeld",
component: igemBielefeld,
header: IBIE,
navlist: iGemBielefeldSidebar,
},
{
name: "Impressum",
title: undefined,
......@@ -181,29 +147,21 @@ const Pages: (Page | Folder)[] = [
header: IMPH,
navlist: NoSidebar,
},
{
name: "Interviews",
title: "Interviews",
path: "/interviews",
component: Ints,
header: INTSH,
navlist: NoSidebar,
},
{
name: "Judging",
title: "Judging",
path: "/judging",
component: Judging,
header: JUDGEH,
navlist: NoSidebar,
navlist: JudSidebar,
},
{
name: "Measurement",
title: "Measurement",
path: "/measurement",
component: Measurement,
header: MESH,
navlist: NoSidebar,
name: "Materials & Methods",
title: "Materials & Methods",
path: "/materials-methods",
component: Methods,
header: METHH,
navlist: MethSidebar,
},
{
name: "Notebook",
......@@ -214,8 +172,8 @@ const Pages: (Page | Folder)[] = [
navlist: NoSidebar,
},
{
name: "Partners and Sponsors",
title: "Partners and Sponsors",
name: "Sponsors & Partners",
title: "Sponsors & Partners",
path: "/partners",
component: Partners,
header: SPONH,
......@@ -227,15 +185,15 @@ const Pages: (Page | Folder)[] = [
path: "/parts",
component: Parts,
header: PARTH,
navlist: NoSidebar,
navlist: PartSidebar,
},
{
name: "Proof of Concept",
title: "Proof of Concept",
path: "/proof-of-concept",
component: Proof,
header: PROOFH,
navlist: NoSidebar,
name: "Project Documentation",
title: "Project Documentation",
path: "/project-documentation",
component: ProDesc,
header: PRODESC,
navlist: NoSidebar
},
{
name: "Results",
......@@ -243,93 +201,90 @@ const Pages: (Page | Folder)[] = [
path: "/results",
component: Results,
header: RESH,
navlist: NoSidebar,
navlist: ResultSidebar,
},
{
name: "Safety",
title: "Safety",
name: "Biosafety",
title: "Biosafety",
path: "/safety",
component: Safety,
header: SAFEH,
navlist: NoSidebar,
},
{
name: "Supplementary",
title: "Supplementary",
path: "/supplementary",
component: Supplementary,
header: SUPH,
navlist: NoSidebar,
navlist: SafetySidebar,
},
{
name: "Survey",
title: "Survey",
path: "/survey",
component: Survey,
header: SURH,
navlist: NoSidebar,
},
{
name: "Team",
title: "Team",
name: "Roster",
title: "Roster",
path: "/team",
component: Team,
header: TEAMH,
navlist: NoSidebar,
},
{
name: "Wiki",
title: "wiki",
path: "/wiki",
component: Wiki,
header: WIKIH,
navlist: NoSidebar,
},
];
export const NavPages: (Page | Folder)[] = [
export const NavPages: (Page | PageRef | Folder)[] = [
{
name: "Home",
title: "Bielefeld CeBiTec",
path: "/",
component: Home,
header: HOMEH,
navlist: NoSidebar,
path: "/home?=scrollTo=lpbild",
},
{
name: "Highlights",
folder: [
{
name: "Project Description",
title: "Project Description",
path: "/description?scrollTo=Abstract"
},
{
name: "Engineering",
title: "Engineering",
path: "/engineering?tab=tab-our-cycle&scrollTo=ourcycle"
},
{
name: "Materials & Methods",
title: "Materials & Methods",
path: "/materials-methods?scrollTo=introduction"
},
{
name: "Results",
title: "Results",
path: "/results?scrollTo=abstract"
},
{
name: "Parts",
title: "Parts",
path: "/parts?scrollTo=parts-collection"
},
{
name: "Judging",
title: "Judging",
path: "/judging?scrollTo=OverviewH"
},
]
},
{
name: "Team",
folder: [
{
name: "Team",
title: "Team",
name: "Roster",
title: "Roster",
path: "/team",
component: Team,
header: TEAMH,
navlist: NoSidebar,
},
{
name: "Attributions",
title: "Attributions",
path: "/attributions",
component: Attributions,
header: ATTH,
navlist: NoSidebar,
},
{
name: "Partners and Sponsors",
title: "Partners and Sponsors",
path: "/partners",
component: Partners,
header: SPONH,
navlist: NoSidebar,
name: "Sponsors & Partners",
title: "Sponsors & Partners",
path: "/partners?scrollTo=gold",
},
{
name: "Collaborations",
title: "Collaborations",
path: "/collaborations",
component: Collaborations,
header: COLLH,
navlist: NoSidebar,
name: "iGEM Bielefeld",
title: "iGEM Bielefeld",
path: "/igem-bielefeld?scrollTo=bielefeld-university",
},
],
},
......@@ -339,141 +294,118 @@ export const NavPages: (Page | Folder)[] = [
{
name: "Description",
title: "Project Description",
path: "/description",
component: Description,
header: DESCH,
navlist: DescSidebar
path: "/description?scrollTo=Abstract",
},
{
name: "Judging",
title: "Judging",
path: "/judging",
component: Judging,
header: JUDGEH,
navlist: NoSidebar,
name: "Engineering",
title: "Engineering",
path: "/engineering?tab=tab-our-cycle&scrollTo=ourcycle",
},
{
name: "Biosafety",
title: "Biosafety",
path: "/safety?scrollTo=role-in-igem",
},
{
name: "Project Documentation",
title: "Project Documentation",
path: "/project-documentation?scrollTo=our-meeting-protocols",
}
],
},
{
name: "Lab",
folder: [
{
name: "Materials & Methods",
title: "Materials & Methods",
path: "/materials-methods?scrollTo=introduction",
},
{
name: "Results",
title: "Results",
path: "/results",
component: Results,
header: RESH,
navlist: NoSidebar,
path: "/results?scrollTo=abstract",
},
{
name: "Parts",
title: "Parts",
path: "/parts",
component: Parts,
header: PARTH,
navlist: NoSidebar,
path: "/parts?scrollTo=Description1H",
},
{
name: "Proof of Concept",
title: "Proof of Concept",
path: "/proof-of-concept",
component: Proof,
header: PROOFH,
navlist: NoSidebar,
name: "Notebook",
title: "Notebook",
path: "/notebook?scrollTo=notebookH",
},
]
},
{
name: "Human Practices",
folder: [
{
name: "Engineering Success",
title: "Engineering",
path: "/engineering",
component: Engineering,
header: ENGH,
navlist: EngSide ,
name: "Introduction",
title: "Introduction",
path: "/human-practices?scrollTo=Introduction"
},
{
name: "Design",
title: "Design",
path: "/design",
component: Design,
header: DESH,
navlist: NoSidebar,
name: "Integrated Human Practices",
title: "Integrated Human Practices",
path: "/human-practices?scrollTo=overview-stakeholders",
},
{
name: "Measurement",
title: "Measurement",
path: "/measurement",
component: Measurement,
header: MESH,
navlist: NoSidebar,
name: "Feedback & Implementation",
title: "Feedback & Implementation",
path: "/human-practices?scrollTo=Integrated Human Practices2"
},
{
name: "Supplementary",
title: "Supplementary",
path: "/supplementary",
component: Supplementary,
header: SUPH,
navlist: NoSidebar,
name: "Education",
title: "Education & Outreach",
path: "/human-practices?scrollTo=Further Engagement1H"
},
{
name: "Notebook",
title: "Notebook",
path: "/notebook",
component: Notebook,
header: NOTEH,
navlist: NoSidebar,
name: "Public Engagement",
title: "Education & Outreach",
path: "/human-practices?scrollTo=Further Engagement2H"
},
{
name: "Collaboration",
title: "Collaboration",
path: "/human-practices?scrollTo=Further Engagement4H"
},
{
name: "Partnerships",
title: "Partnerships",
path: "/human-practices?scrollTo=Further Engagement5H"
},
]
},
{
name: "Safety",
title: "Safety",
path: "/safety",
component: Safety,
header: SAFEH,
navlist: NoSidebar,
},
{
name: "Human Practices",
name: "Judging",
folder: [
{
name: "Integrated Human Practices",
title: "Integrated Human Practices",
path: "/human-practices",
component: HumanPractices,
header: HPH,
navlist: NoSidebar
name: "Overview",
title: "Judging",
path: "/judging?scrollTo=Overview",
},
{
name: "Ethics",
title: "Ethics",
path: "/ethics",
component: Ethics,
header: ETHH,
navlist: EthicsSidebar,
name: "Best Integrated Human Practice",
title: "Judging",
path: "/judging?scrollTo=best-integrated-human-practice",
},
{
name: "Interviews",
title: "Interviews",
path: "/interviews",
component: Ints,
header: INTSH,
navlist: NoSidebar,
name: "Safety & Security",
title: "Judging",
path: "/judging?scrollTo=safety-security",
},
{
name: "Education and Outreach",
title: "Education",
path: "/education",
component: Education,
header: EDUH,
navlist: NoSidebar,
},
name: "Best New Basic Part",
title: "Judging",
path: "/judging?scrollTo=best-new-basic-part",
},
{
name: "Survey",
title: "Survey",
path: "/survey",
component: Survey,
header: SURH,
navlist: NoSidebar,
},
name: "Judging Session",
title: "Judging",
path: "/judging?scrollTo=judging-session",
},
]
},
{
......@@ -482,27 +414,23 @@ export const NavPages: (Page | Folder)[] = [
{
name: "Contribution",
title: "Contribution",
path: "/contribution",
component: Contribution,
header: CONTH,
navlist: NoSidebar,
path: "/contribution?scrollTo=abstract",
},
{
name: "BFH European MeetUp",
title: "MeetUp",
path: "contribution/?scrollTo=bfh-european-meetup"
},
{
name: "Our Contributions",
title: "Our Contributions",
path: "contribution/?scrollTo=our-contributions"
},
{
name: "Collaborations",
title: "Collaborations",
path: "contribution/?scrollTo=our-collaborations"
},
{
name: "MeetUp",
title: "BFH European MeetUp",
path: "/bfh",
component: Bfh,
header: BFHH,
navlist: NoSidebar,
},
{
name: "Wiki",
title: "wiki",
path: "/wiki",
component: Wiki,
header: WIKIH,
navlist: NoSidebar,
},
]
},
];
......
src/sidebars/conS.tsx 0 → 100644
View file @ 3fd292fd
import { createSidebar } from "../utils/createSidebar";
export function ConSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
}
const tabs = [
{tab: "Abstract"},
{ tab: "BFH European MeetUp", subtabs: ["Aftervideo", "Timeline", "About", "Posters", "Gallery", "Downloads"]},
{tab: "Our Collaborations", subtabs: ["MeetUp Guideline", "LNP Handbook"]},
{tab: "Our Contributions", subtabs: ["Biosafety & Security", "Wiki Developement"]},
{tab: "Conclusion"}
];
src/sidebars/descS.tsx
View file @ 3fd292fd
import { useEffect } from "react";
interface ScrollLinkProps {
targetId: string;
label: string;
}
export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
event.preventDefault(); // Prevent default anchor behavior
const targetElement = document.getElementById(targetId);
if (targetElement) {
const elementRect = targetElement.getBoundingClientRect();
const elementTop = elementRect.top + window.scrollY;
const viewportHeight = window.innerHeight;
const scrollOffset = elementTop - (viewportHeight / 2 - targetElement.offsetHeight / 2);
console.log(`Element Top: ${elementTop}`);
console.log(`Viewport Height: ${viewportHeight}`);
console.log(`Scroll Offset: ${scrollOffset}`);
window.scrollTo({
top: scrollOffset,
behavior: "smooth"
});
} else {
console.error(`Element with ID ${targetId} not found.`);
}
};
return (
<a href={`#${targetId}`} onClick={handleClick}>
{label}
</a>
);
};
import { createSidebar } from "../utils/createSidebar";
export function DescSidebar(){
let nums = [ "del1"]
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleScroll = () => {
for(let idx in nums){
/* console.log("We are looking at 'item' = " + nums[idx]) */
const item = nums[idx];
let ind = nums.findIndex((e) => e == item)
/* console.log("ind is: " + ind) */
let subdi = "subtitle" + ind
/* console.log("subdi is: " + subdi)
console.log("we use " + document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id) */
Highlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
}
/* */
}
/* console.log(nums) */
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
<br/>
<div className="sticky-top">
<nav className="sidebar">
<div>
<a onClick={openAndScroll({ it: "tab-Abstract", scrollTarget: "Abstract" })}>
<div className="detail-sideitem">
<div id="parent-Abstract" className="sideitem">
<summary>Abstract</summary>
</div>
</div>
</a>
</div>
<div>
{/* Fznktioniert: <a onClick={openThem({it: "tab-Cystic-Fibrosis"})} > */}
<div className="detail-sideitem">
<div id="parent-Cystic-Fibrosis" className="sideitem">
<a onClick={openAndScroll({ it: "tab-Cystic-Fibrosis", scrollTarget: "Cystic-Fibrosis" })}><summary>Cystic Fibrosis</summary></a>
<span id="tab-Cystic-Fibrosis" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><ScrollLink label="General" targetId="CF1"/></li>
<li><ScrollLink label="CFTR" targetId="CF2"/></li>
<li><ScrollLink label="ΔF508" targetId="CF3"/></li>
<li><ScrollLink label="Symptoms" targetId="CF4"/></li>
<li><ScrollLink label="Diagnosis" targetId="CF5"/></li>
<li><ScrollLink label="Treatment" targetId="CF6"/></li>
</ul>
</span>
</div>
</div>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-motivation"})}>
<div className="detail-sideitem">
<div id="parent-pe-systems" className="sideitem">
<summary>Our Motivation</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Approach"})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
<summary>Approach</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Delivery"})}>
<div className="detail-sideitem">
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
</div>
</div>
</a>
</div> {/* */}
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-vision"})}>
<div className="detail-sideitem">
<div id="parent-pegrna" className="sideitem">
<summary>Our vision</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "References"})}>
<div className="detail-sideitem">
<div id="parent-references" className="sideitem">
<summary>References</summary>
</div>
</div>
</a>
</div>
</nav>
<br/>
<div className="col" style={{display: "flex", alignItems: "right"}}>
<a href='#' className="backtotop">
Back to Top &#8593;
</a>
</div>
</div>
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
}
/* function SideItemEng({hesh, num}:{hesh: string; num: number}){
let subdi = "subtitle" + num
let openmore = stringToSlug(hesh)
console.log("openmore: " + openmore)
return(
<div>
<a onClick={openThem({it: openmore})}>
<div className="detail-sideitem">
<div id={subdi} className="sideitem">
<summary>{hesh}</summary>
<span id={openmore} className="sidesubtab" style={{display: "none"}}>
<ul>
<li>Other</li>
</ul>
</span>
</div>
</div>
</a>
</div>
)
}
*/
function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
let TopDistance = 150;
/* console.log("Starting highlight check...")
console.log("here come el...")
console.log(el)
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()) */
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
subtitle.style.color = "blue";
subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
subtitle.style.borderColor = "#850F78";
subtitle.style.marginLeft = "10px";
subtitle.style.paddingRight = "10px";
/* console.log("subtitle: ",subtitle)
console.log("style: ", subtitle.style)
console.log("color: ",subtitle.style.color)
console.log("backcolor: ",subtitle.style.backgroundColor) */
}
else{
subtitle.style.color = "white";
subtitle.style.marginLeft = "0";
subtitle.style.backgroundColor = "";
}
}
}
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) */
let contenttabid = "tab-" + it;
let parent = "parent-" + it;
/* console.log("we want to open " + it + " and " + contenttabid) */
let sideitems = document.getElementsByClassName("sideitem");
let subtabs = document.getElementsByClassName("sidesubtab");
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 < sideitems.length; i++) {
(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;
}
export function openAndScroll({ it, scrollTarget }: { it: string, scrollTarget?: string }) {
const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
_event.preventDefault(); // Prevent default anchor behavior
console.log(`openAndScroll called with it: ${it} and scrollTarget: ${scrollTarget}`);
// Attempt to find the elements
const subtabElement = document.getElementById(it);
const parentElementId = "parent-" + it.replace("tab-", "");
const parentElement = document.getElementById(parentElementId);
console.log(`subtabElement with ID ${it}: `, subtabElement);
console.log(`parentElement with ID ${parentElementId}: `, parentElement);
if (subtabElement && parentElement) {
console.log("Found subtabElement and parentElement.");
// Show the selected tab in the sidebar and add active class
subtabElement.style.display = "block";
parentElement.classList.add("active-sideitem");
} else {
console.error(`Subtab element or parent element not found for ID: ${it}`);
}
// If a scroll target is provided, scroll to that element on the page
if (scrollTarget) {
const targetElement = document.getElementById(scrollTarget);
if (targetElement) {
console.log(`Scrolling to element with ID: ${scrollTarget}`);
// Get the position of the element relative to the document
const elementRect = targetElement.getBoundingClientRect();
const elementTop = elementRect.top + window.scrollY;
// Calculate the middle of the viewport
const viewportHeight = window.innerHeight;
const scrollOffset = elementTop - (viewportHeight / 2 - targetElement.offsetHeight / 2);
/*
console.log(`Element Top: ${elementTop}`);
console.log(`Viewport Height: ${viewportHeight}`);
console.log(`Scroll Offset: ${scrollOffset}`); */
window.scrollTo({
top: scrollOffset,
behavior: "smooth"
});
} else {
console.error(`Scroll target element not found for ID: ${scrollTarget}`);
}
}
}
return gotoandopen;
}
export function openAndScroll2({ it, scrollTarget }: { it: string, scrollTarget?: string }) {
const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
/* console.log(`openAndScroll called with it: ${it} and scrollTarget: ${scrollTarget}`); */
// Attempt to find the elements
const subtabElement = document.getElementById(it);
const parentElementId = "parent-" + it.replace("tab-", "");
const parentElement = document.getElementById(parentElementId);
/*
console.log(`subtabElement with ID ${it}: `, subtabElement);
console.log(`parentElement with ID ${parentElementId}: `, parentElement);
*/
if (subtabElement && parentElement) {
console.log("Found subtabElement and parentElement.");
// Show the selected tab in the sidebar and add active class
subtabElement.style.display = "block";
parentElement.classList.add("active-sideitem");
} else {
console.error(`Subtab element or parent element not found for ID: ${it}`);
}
// If a scroll target is provided, scroll to that element on the page
if (scrollTarget) {
const targetElement = document.getElementById(scrollTarget);
if (targetElement) {
console.log(`Scrolling to element with ID: ${scrollTarget}`);
// Get the position of the element relative to the document
const elementRect = targetElement.getBoundingClientRect();
const elementTop = elementRect.top + window.scrollY;
// Calculate the middle of the viewport
const viewportHeight = window.innerHeight;
const scrollOffset = elementTop - (viewportHeight / 2 - targetElement.offsetHeight / 2);
window.scrollTo({
top: scrollOffset,
behavior: "smooth"
});
} else {
console.error(`Scroll target element not found for ID: ${scrollTarget}`);
}
}
}
return gotoandopen;
}
const tabs = [
{ tab: "Abstract" },
{tab: "Our Motivation"},
{ tab: "Cystic Fibrosis", subtabs: ["Overview", "The CFTR Protein", "F508del", "Symptoms", "Diagnosis", "Treatment"]},
{tab: "Approach", subtabs: ["Mechanism", "Delivery"]},
{tab: "Our Vision"},
{tab: "References"}
];
src/sidebars/engS.tsx
View file @ 3fd292fd
import { useEffect } from "react";
import { NewHighlight } from "../utils/Highlight-functions";
import { openThem } from "../utils/openThem";
import { BackUp } from "../components/Buttons";
import { useNavigation } from "../utils";
export function EngSide(){
let nums = [ "del1"]
let nums = ["rep1", "rep2", "rep3", "rep4", "rep5", "rep6", "trf1", "trf2", "trf3", "trf4", "pe1", "pe2", "pe3", "peg1", "peg2", "peg3", "peg4", "peg5",
"nic1", "nic2", "nic3", "nic4", "nic5", "nic6","del1", "del2", "del3", "del4", "del5"]
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, [nums]);
// Restore active tab on reload
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const tabId = params.get("tab");
const subTabId = params.get("subTab");
if (tabId) {
// Find the parent element and mark it as active
const parentTab = document.querySelector(`#parent-${tabId}`);
if (parentTab) {
document.querySelectorAll(".active-sideitem").forEach((el) => el.classList.remove("active-sideitem"));
parentTab.classList.add("active-sideitem");
}
// Optionally expand the subtab if available
if (subTabId) {
const subTab = document.querySelector(`#${subTabId}`);
if (subTab) {
subTab.classList.add("highlight-subitem"); // Add a custom class for highlighting subtabs if needed
}
}
}
}, []);
const handleScroll = () => {
for(let idx in nums){
console.log("We are looking at 'item' = " + nums[idx])
/* console.log("We are looking at 'item' = " + nums[idx]) */
const item = nums[idx];
let ind = nums.findIndex((e) => e == item)
console.log("ind is: " + ind)
/* console.log("ind is: " + ind) */
let subdi = "subtitle" + ind
console.log("subdi is: " + subdi)
console.log("we use " + document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id)
Highlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
/* console.log("subdi is: " + subdi)
console.log("we use " + document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id) */
NewHighlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
}
console.log("function HighlightCheck")
}
console.log(nums)
const {goToPageWithTabAndScroll} = useNavigation();
return(
<div className="col-2 d-none d-lg-block">
<div className="col-2 d-lg-block" >
<br/>
<div className="sticky-top">
<nav className="sidebar">
<nav className="sidebar" id="eng-sidebar">
<div>
<a onClick={openThem({it: "our-cycle"})}>
<div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem">
<summary>Our Cycle</summary>
<span id="our-cycle" className="sidesubtab" style={{display: "none"}}>
<ul>
<a href="#"><li>Iteration 1</li></a>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
</ul>
<a onClick={openThem({it: "our-cycle", scrollToId: "our-cycle-header"})}>
<div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem active-sideitem">
<summary>Our Cycles</summary>
<span id="our-cycle" className="sidesubtab" style={{display: "block"}}>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "proof-of-concept"})}>
<a onClick={openThem({it: "reporter", scrollToId: "reporter-header"})}>
<div className="detail-sideitem">
<div id="parent-proof-of-concept" className="sideitem">
<summary>Proof Of Concept</summary>
<span id="proof-of-concept" className="sidesubtab" style={{display: "none"}}>
<div id="parent-reporter" className="sideitem">
<summary>Reporter System</summary>
<span id="reporter" className="sidesubtab" style={{display: "none"}}>
<ul>
<a href="#"><li>Iteration 1</li></a>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep1head"})}>
<span id="subtitle0" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep2head"})}>
<span id="subtitle1" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep3head"})}>
<span id="subtitle2" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep4head"})}>
<span id="subtitle3" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep5head"})}>
<span id="subtitle4" className='sideitem'>Iteration 5</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-reporter", scrollToId: "rep6head"})}>
<span id="subtitle5" className='sideitem'>Outlook</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "pe-systems"})}>
<a onClick={openThem({it: "transfection", scrollToId: "transfection-header"})}>
<div className="detail-sideitem">
<div id="parent-pe-systems" className="sideitem">
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<div id="parent-transfection" className="sideitem">
<summary>Transfection</summary>
<span id="transfection" className="sidesubtab" style={{display: "none"}}>
<ul>
<a href="#"><li>Iteration 1</li></a>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-transfection", scrollToId: "trf1head"})}>
<span id="subtitle6" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-transfection", scrollToId: "trf2head"})}>
<span id="subtitle7" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-transfection", scrollToId: "trf3head"})}>
<span id="subtitle8" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-transfection", scrollToId: "trf4head"})}>
<span id="subtitle9" className='sideitem'>Iteration 4</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</a>
</div>
<div>
<a onClick={openThem({it: "nikase"})}>
<a onClick={openThem({it: "pe-systems", scrollToId: "pe-systems-header"})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
<summary>Nikase</summary>
<span id="nikase" className="sidesubtab" style={{display: "none"}}>
<div id="parent-pe-systems" className="sideitem">
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<ul>
<a href="#"><li>Iteration 1</li></a>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pe-systems", scrollToId: "pe1head"})}>
<span id="subtitle10" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pe-systems", scrollToId: "pe2head"})}>
<span id="subtitle11" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pe-systems", scrollToId: "pe3head"})}>
<span id="subtitle12" className='sideitem'>Outlook</span>
</a></li>
</ul>
</span>
</div>
......@@ -92,15 +147,27 @@ export function EngSide(){
</a>
</div>
<div>
<a onClick={openThem({it: "pegrna"})}>
<a onClick={openThem({it: "pegrna", scrollToId: "pegrna-header"})}>
<div className="detail-sideitem">
<div id="parent-pegrna" className="sideitem">
<summary>pegRNA</summary>
<span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
<a href="#"><li>Iteration 1</li></a>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg1head"})}>
<span id="subtitle13" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg2head"})}>
<span id="subtitle14" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg3head"})}>
<span id="subtitle15" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg4head"})}>
<span id="subtitle16" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-pegrna", scrollToId: "peg5head"})}>
<span id="subtitle17" className='sideitem'>Iteration 5</span>
</a></li>
</ul>
</span>
</div>
......@@ -108,48 +175,66 @@ export function EngSide(){
</a>
</div>
<div>
<a onClick={openThem({it: "delivery"})}>
<a onClick={openThem({it: "nickase", scrollToId: "nickase-header"})}>
<div className="detail-sideitem">
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<div id="parent-nickase" className="sideitem">
<summary>Nickase</summary>
<span id="nickase" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#del1">
<span id="subtitle0" className='sideitem'>Iteration 1</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic1head"})}>
<span id="subtitle18" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic2head"})}>
<span id="subtitle19" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic3head"})}>
<span id="subtitle20" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic4head"})}>
<span id="subtitle21" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic5head"})}>
<span id="subtitle22" className='sideitem'>Iteration 5</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-nickase", scrollToId: "nic6head"})}>
<span id="subtitle23" className='sideitem'>Iteration 6</span>
</a></li>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
</ul>
</span>
</div>
</div>
</a>
</div>
</div>
<div>
<a onClick={openThem({it: "references"})}>
<a onClick={openThem({it: "delivery", scrollToId: "delivery-header"})}>
<div className="detail-sideitem">
<div id="parent-references" className="sideitem">
<summary>References</summary>
<span id="references" className="sidesubtab" style={{display: "none"}}>
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#subtitle1">
<span id="" className='sideitem'>Iteration 1</span>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del1head"})}>
<span id="subtitle24" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del2head"})}>
<span id="subtitle25" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del3head"})}>
<span id="subtitle26" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del4head"})}>
<span id="subtitle27" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "tab-delivery", scrollToId: "del5head"})}>
<span id="subtitle28" className='sideitem'>Outlook</span>
</a></li>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
</ul>
</span>
</div>
</div>
</a>
</div>
</div>
</nav>
<br/>
<div className="col" style={{display: "flex", alignItems: "right"}}>
<a href='#' className="backtotop">
Back to Top &#8593;
</a>
</div>
<BackUp></BackUp>
</div>
</div>
......@@ -159,6 +244,7 @@ export function EngSide(){
/* function SideItemEng({hesh, num}:{hesh: string; num: number}){
let subdi = "subtitle" + num
let openmore = stringToSlug(hesh)
......@@ -181,68 +267,5 @@ export function EngSide(){
)
}
*/
function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
let TopDistance = 150;
console.log("Starting highlight check...")
console.log("here come el...")
console.log(el)
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()) */
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
subtitle.style.color = "white";
subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
subtitle.style.borderColor = "#850F78";
subtitle.style.marginLeft = "10px";
subtitle.style.paddingRight = "10px";;
subtitle.style.fontWeight = "900";
/* console.log("subtitle: ",subtitle)
console.log("style: ", subtitle.style)
console.log("color: ",subtitle.style.color)
console.log("backcolor: ",subtitle.style.backgroundColor) */
}
else{
subtitle.style.color = "white";
subtitle.style.marginLeft = "0";
subtitle.style.backgroundColor = "";
}
}
}
function openThem({it}: {it: 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)
let sideitems = document.getElementsByClassName("sideitem");
let subtabs = document.getElementsByClassName("sidesubtab");
let contenttabs = document.getElementsByClassName("enginneeringtab");
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...")
}
for (let i = 0; i < sideitems.length; i++) {
(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
src/sidebars/ethS.tsx deleted 100644 → 0
View file @ d97e86e3
import { useEffect } from "react";
export function EthicsSidebar(){
let nums = [ "del1"]
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleScroll = () => {
for(let idx in nums){
console.log("We are looking at 'item' = " + nums[idx])
const item = nums[idx];
let ind = nums.findIndex((e) => e == item)
console.log("ind is: " + ind)
let subdi = "subtitle" + ind
console.log("subdi is: " + subdi)
console.log("we use " + document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id)
Highlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
}
console.log("function HighlightCheck")
}
console.log(nums)
return(
<div className="col-2 d-none d-lg-block">
<div className="sticky-top">
<nav className="sidebar">
<div>
<a onClick={openThem({it: "our-cycle"})}>
<div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem">
<summary>Our Cycle</summary>
<span id="our-cycle" className="sidesubtab" style={{display: "none"}}>
<ul>
<a href="#"><li>Iteration 1</li></a>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
</ul>
</span>
</div>
</div>
</a>
</div>
</nav>
</div>
</div>
)
}
function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
let TopDistance = 150;
console.log("Starting highlight check...")
console.log("here come el...")
console.log(el)
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()) */
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
subtitle.style.color = "white";
subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
subtitle.style.borderColor = "#850F78";
subtitle.style.marginLeft = "10px";
subtitle.style.paddingRight = "10px";;
subtitle.style.fontWeight = "900";
/* console.log("subtitle: ",subtitle)
console.log("style: ", subtitle.style)
console.log("color: ",subtitle.style.color)
console.log("backcolor: ",subtitle.style.backgroundColor) */
}
else{
subtitle.style.color = "white";
subtitle.style.marginLeft = "0";
subtitle.style.backgroundColor = "";
}
}
}
function openThem({it}: {it: 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)
let sideitems = document.getElementsByClassName("sideitem");
let subtabs = document.getElementsByClassName("sidesubtab");
let contenttabs = document.getElementsByClassName("enginneeringtab");
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...")
}
for (let i = 0; i < sideitems.length; i++) {
(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
src/sidebars/hpS.tsx
View file @ 3fd292fd
import Sidebar from "../components/Sidebar";
import { createSidebar } from "../utils/createSidebar";
export function HpSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
<div className="sticky-top">
<Sidebar nums={["Overview", "Timeline", "Inspiration", "Methods", "Analysis", "Reflection", "Implementation"]}></Sidebar>
</div>
{sidebar}
</div>
)
}
\ No newline at end of file
}
const tabs = [
{tab: "Abstract"},
{ tab: "Overview" },
{tab: "Introduction"},
{tab: "Integrated Human Practices", subtabs: ["Framework", "Timeline", "Feedback & Implementation", "Conclusion"]},
{tab: "Further Engagement", subtabs: [ "Education", "Public Engagement", "Entrepreneurship", "Collaborations", "Partnerships"]},
{tab: "Supplementary Material"},
// {tab: ""},
];
\ No newline at end of file
src/sidebars/igbS.tsx 0 → 100644
View file @ 3fd292fd
import { createSidebar } from "../utils/createSidebar";
export function iGemBielefeldSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
}
const tabs = [
{tab: "Bielefeld University"},
{ tab: "History"},
{ tab: "Steering Committee"}
];
\ No newline at end of file
src/sidebars/intS.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect } from "react";
import { Highlight } from "../utils/Highlight-functions";
export function IntSidebar(){
let nums = [ "maxH", "olariuH", "joshuaH", "juliaH", "nicoleH", "mattijsH", "westhoffH", "berensH", "wischmeyerH"]
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleScroll = () => {
for(let idx in nums){
/* console.log("We are looking at 'item' = " + nums[idx]) */
const item = nums[idx];
let ind = nums.findIndex((e) => e == item)
/* console.log("ind is: " + ind) */
let subdi = "subtitle" + ind
/* console.log("subdi is: " + subdi)
console.log("we use " + document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id) */
Highlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
}
/* */
}
/* console.log(nums) */
return(
<div className="col-2 d-none d-lg-block">
<br/>
<div className="sticky-top">
<nav className="sidebar">
<div>
<a onClick={openAndScroll({ it: "tab-max", scrollTarget: "max" })}>
<div id="subtitle0" className="detail-sideitem">
<div id="parent-max" className="sideitem">
<summary>Max</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-olariu", scrollTarget: "olariu" })}>
<div id="subtitle1" className="detail-sideitem">
<div id="parent-olariu" className="sideitem">
<summary>Olariu</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-joshua", scrollTarget: "joshua" })}>
<div id="subtitle2" className="detail-sideitem">
<div id="parent-joshua" className="sideitem">
<summary>Joshua</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-julia", scrollTarget: "julia" })}>
<div id="subtitle3" className="detail-sideitem">
<div id="parent-julia" className="sideitem">
<summary>Julia</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-nicole", scrollTarget: "nicole" })}>
<div id="subtitle4" className="detail-sideitem">
<div id="parent-nicole" className="sideitem">
<summary > Nicole </summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-mattijs", scrollTarget: "mattijs" })}>
<div id="subtitle5" className="detail-sideitem">
<div id="parent-mattijs" className="sideitem">
<summary>mattijs</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-westhoff", scrollTarget: "westhoff" })}>
<div id="subtitle6" className="detail-sideitem">
<div id="parent-westhoff" className="sideitem">
<summary>Katrin</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-berens", scrollTarget: "berens" })}>
<div id="subtitle7" className="detail-sideitem">
<div id="parent-berens" className="sideitem">
<summary>Berens</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-wischmeyer", scrollTarget: "wischmeyer" })}>
<div id="subtitle8" className="detail-sideitem">
<div id="parent-wischmeyer" className="sideitem">
<summary>Wischmeyer</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({ it: "tab-olariu", scrollTarget: "olariu" })}>
<div id="subtitle9" className="detail-sideitem">
<div id="parent-olariu" className="sideitem">
<summary>Olariu</summary>
</div>
</div>
</a>
</div>
</nav>
</div>
</div>
)
}
export function openAndScroll({ it, scrollTarget }: { it: string, scrollTarget?: string }) {
const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
_event.preventDefault(); // Prevent default anchor behavior
console.log(`openAndScroll called with it: ${it} and scrollTarget: ${scrollTarget}`);
// Attempt to find the elements
const subtabElement = document.getElementById(it);
const parentElementId = "parent-" + it.replace("tab-", "");
const parentElement = document.getElementById(parentElementId);
console.log(`subtabElement with ID ${it}: `, subtabElement);
console.log(`parentElement with ID ${parentElementId}: `, parentElement);
if (subtabElement && parentElement) {
console.log("Found subtabElement and parentElement.");
// Show the selected tab in the sidebar and add active class
subtabElement.style.display = "block";
parentElement.classList.add("active-sideitem");
} else {
console.error(`Subtab element or parent element not found for ID: ${it}`);
}
// If a scroll target is provided, scroll to that element on the page
if (scrollTarget) {
const targetElement = document.getElementById(scrollTarget);
if (targetElement) {
console.log(`Scrolling to element with ID: ${scrollTarget}`);
// Get the position of the element relative to the document
const elementRect = targetElement.getBoundingClientRect();
const elementTop = elementRect.top + window.scrollY;
// Calculate the middle of the viewport
const viewportHeight = window.innerHeight;
const scrollOffset = elementTop - (viewportHeight / 5 - targetElement.offsetHeight / 2);
/*
console.log(`Element Top: ${elementTop}`);
console.log(`Viewport Height: ${viewportHeight}`);
console.log(`Scroll Offset: ${scrollOffset}`); */
window.scrollTo({
top: scrollOffset,
behavior: "smooth"
});
} else {
console.error(`Scroll target element not found for ID: ${scrollTarget}`);
}
}
}
return gotoandopen;
}
src/sidebars/jugS.tsx 0 → 100644
View file @ 3fd292fd
import { createSidebar } from "../utils/createSidebar";
export function JudSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
}
const tabs = [
{tab: "Best Therapeutic Project"},
{tab: "Best Integrated Human Practice"},
{tab: "Safety & Security"},
{tab: "Best New Basic Part"},
{tab: "Conclusion"},
{tab: "Judging Session"}
];
src/sidebars/methS.tsx 0 → 100644
View file @ 3fd292fd
import { createSidebar } from "../utils/createSidebar";
export function MethSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
}
const tabs = [
{ tab: "Introduction"},
{ tab: "Patch Clamp", subtabs: ["Background", "Principles", "Application"]},
{tab: "Cell Culture", subtabs: ["HEK Cells", "CFBE41o-", "hNECs"]},
{tab: "LNPs"}
];
src/sidebars/none-smal.tsx 0 → 100644
View file @ 3fd292fd
export function NoSidebarSmal(){
return(
<div className="col-1 d-none d-lg-block">
</div>
)
}
\ No newline at end of file
src/sidebars/none.tsx
View file @ 3fd292fd
export function NoSidebar(){
return(
<div className="col-1 d-none d-lg-block">
<div className="col-2 d-none d-lg-block">
</div>
)
}
\ No newline at end of file
src/sidebars/prtS.tsx 0 → 100644
View file @ 3fd292fd
import { createSidebar } from "../utils/createSidebar";
export function PartSidebar(){
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
{sidebar}
</div>
)
}
const tabs = [
{ tab: "Description", subtabs: ["Introduction", "Prime Editor & pegRNA", "Conclusion"]},
{ tab: "Characterization", subtabs: ["Design & Functionality", "Adaptions"]},
{tab: "Experiments", subtabs: ["Cloning", "pegRNA Screening", "Nickase Assay"]},
{tab: "Parts Collection", subtabs: ["Basic Parts"]},
];