Newer
Older
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>
);
};
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) */
<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">
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Approach"})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Delivery"})}>
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-vision"})}>
<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 ↑
</a>
</div>
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
)
}
/* 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>
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
}
*/
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>) => {
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
_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>) => {
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
/* 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;
}