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>
);
};
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) */
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={openThem({it: "pegrna"})}>
<div className="detail-sideitem">
<div id="parent-pegrna" className="sideitem">
<summary>Our vision</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "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 ↑
</a>
</div>
</div>
</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;
}