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

finessed Highlight

parent d59a59fe
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App/App.css
+ 11
− 0
View file @ 8bff6435
...@@ -3409,3 +3409,14 @@ a{ ...@@ -3409,3 +3409,14 @@ a{
pointer-events: auto; /* Ensure clickable elements can be interacted with */ pointer-events: auto; /* Ensure clickable elements can be interacted with */
} }
.subtitle-active .sideitem a summary{
color: white !important;
}
.sideitem a summary{
color: var(--text-primary) !important;
}
.active-sideitem a summary{
color: white !important;
}
\ No newline at end of file
src/components/Highlight.ts
+ 24
− 12
View file @ 8bff6435
...@@ -43,21 +43,33 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl ...@@ -43,21 +43,33 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
console.log(el) console.log(el)
console.log(el.getBoundingClientRect()) */ console.log(el.getBoundingClientRect()) */
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){ if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
subtitle.style.color = "blue";
subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)"; if(subtitle.childNodes[0] != undefined){
subtitle.style.borderColor = "#850F78"; console.log("if true: ");
subtitle.style.marginLeft = "10px"; console.log(subtitle.childNodes[0]);
subtitle.style.paddingRight = "10px"; (subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
if(subtitle.childNodes[0].childNodes[1] != undefined){
/* console.log("subtitle: ",subtitle) console.log("test: ")
console.log("style: ", subtitle.style) console.log(subtitle.childNodes[0].childNodes[1]);
console.log("color: ",subtitle.style.color) (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
console.log("backcolor: ",subtitle.style.backgroundColor) */ }
}
} }
else{ else{
subtitle.style.color = "white"; subtitle.style.color = "#850F78";
subtitle.style.marginLeft = "0";
subtitle.style.backgroundColor = ""; subtitle.style.backgroundColor = "";
subtitle.classList.remove("subtitle-active");
if(subtitle.childNodes[0] != undefined){
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]);
(subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "none";
}
}
} }
} }
......
src/contents/safety.tsx
+ 3
− 3
View file @ 8bff6435
...@@ -49,14 +49,14 @@ export function Safety() { ...@@ -49,14 +49,14 @@ export function Safety() {
</section> </section>
</div> </div>
<div className="col"> <div className="col">
<section className="section"> <section id="BiosafetyH" className="section">
<div id="Biosafety"><H2 text="Biosafety"/></div> <div id="Biosafety"><H2 text="Biosafety"/></div>
<div id="BS1"><h3>Mechanism</h3> </div> <div id="BS1"><h3>Mechanism</h3> </div>
<div id="BS2"><h3>Delivery</h3> </div> <div id="BS2"><h3>Delivery</h3> </div>
</section> </section>
</div> </div>
<div className="col"> <div className="col">
<section className="section"> <section id="BiosecurityH" className="section">
<div id="Biosecurity"><H2 text="Biosecurity"/></div> <div id="Biosecurity"><H2 text="Biosecurity"/></div>
<div id="BSec1"><h3>Our Project</h3> </div> <div id="BSec1"><h3>Our Project</h3> </div>
<div id="BSec2"><h3>Risk Assesment</h3> </div> <div id="BSec2"><h3>Risk Assesment</h3> </div>
...@@ -64,7 +64,7 @@ export function Safety() { ...@@ -64,7 +64,7 @@ export function Safety() {
</section> </section>
</div> </div>
<div className="col"> <div className="col">
<section className="section"> <section id="BioethicsH" className="section">
<div id="Bioethics"><H2 text="Bioethics"/></div> <div id="Bioethics"><H2 text="Bioethics"/></div>
<div id="BE1"><h3>Gene Therapy</h3> </div> <div id="BE1"><h3>Gene Therapy</h3> </div>
<div id="BE2"><h3>Primary cells</h3> </div> <div id="BE2"><h3>Primary cells</h3> </div>
......
src/sidebars/safeS.tsx
+ 14
− 150
View file @ 8bff6435
import { useEffect } from "react"; import { useEffect } from "react";
import { NewHighlight, Highlight } from "../components/Highlight"; import { NewHighlight, Highlight } from "../components/Highlight";
import { ScrollLink } from "../components/ScrollLink"; import { ScrollLink } from "../components/ScrollLink";
import { openAndCloseAndScroll, openAndScroll } from "../components/openAndScroll";
export function SafetySidebar(){ export function SafetySidebar(){
let numsBig = ["", ""] let numsBig = ["Role", "Checks", "Lab", "BiosafetyH", "BiosecurityH", "BioethicsH"]
let numsSub = [ "BS1", "BS2"] let numsSub = [ "BS1", "BS2"]
useEffect(() => { useEffect(() => {
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
...@@ -47,8 +47,8 @@ export function SafetySidebar(){ ...@@ -47,8 +47,8 @@ export function SafetySidebar(){
<div className="sticky-top"> <div className="sticky-top">
<nav className="sidebar"> <nav className="sidebar">
<div> <div>
<a onClick={openAndCloseAndScroll({ it: "tab-Role", scrollTarget: "Role" })}> <a onClick={openAndCloseAndScroll({ it: "tab-Role", scrollTarget: "Role", close: ["Bioethics", "Biosafety", "Biosecurity"]})}>
<div className="detail-sideitem"> <div id="subtitle0" className="detail-sideitem">
<div id="parent-Role" className="sideitem"> <div id="parent-Role" className="sideitem">
<summary>Role in iGem</summary> <summary>Role in iGem</summary>
</div> </div>
...@@ -56,8 +56,8 @@ export function SafetySidebar(){ ...@@ -56,8 +56,8 @@ export function SafetySidebar(){
</a> </a>
</div> </div>
<div> <div>
<a onClick={openAndCloseAndScroll({ it: "tab-Checks", scrollTarget: "Checks" })}> <a onClick={openAndCloseAndScroll({ it: "tab-Checks", scrollTarget: "Checks", close: ["Bioethics", "Biosafety", "Biosecurity"] })}>
<div className="detail-sideitem"> <div id="subtitle1" className="detail-sideitem">
<div id="parent-Checks" className="sideitem"> <div id="parent-Checks" className="sideitem">
<summary>Check-Ins</summary> <summary>Check-Ins</summary>
</div> </div>
...@@ -65,8 +65,8 @@ export function SafetySidebar(){ ...@@ -65,8 +65,8 @@ export function SafetySidebar(){
</a> </a>
</div> </div>
<div> <div>
<a onClick={openAndCloseAndScroll({ it: "tab-Lab", scrollTarget: "Lab" })}> <a onClick={openAndCloseAndScroll({ it: "tab-Lab", scrollTarget: "Lab", close: ["Bioethics", "Biosafety", "Biosecurity"] })}>
<div className="detail-sideitem"> <div id="subtitle2" className="detail-sideitem">
<div id="parent-Lab" className="sideitem"> <div id="parent-Lab" className="sideitem">
<summary>Our Lab</summary> <summary>Our Lab</summary>
</div> </div>
...@@ -75,9 +75,9 @@ export function SafetySidebar(){ ...@@ -75,9 +75,9 @@ export function SafetySidebar(){
</div> </div>
<div> <div>
{/* Fznktioniert: <a onClick={openThem({it: "tab-Cystic-Fibrosis"})} > */} {/* Fznktioniert: <a onClick={openThem({it: "tab-Cystic-Fibrosis"})} > */}
<div className="detail-sideitem"> <div className="detail-sideitem" id="subtitle3">
<div id="parent-Biosafety" className="sideitem"> <div id="parent-Biosafety" className="sideitem">
<a onClick={openAndScroll({ it: "tab-Biosafety", scrollTarget: "Biosafety" })}><summary>Biosafety</summary></a> <a onClick={openAndCloseAndScroll({ it: "tab-Biosafety", scrollTarget: "Biosafety", close: ["Bioethics", "Biosecurity"] })}><summary>Biosafety</summary></a>
<span id="tab-Biosafety" className="sidesubtab" style={{display: "none"}}> <span id="tab-Biosafety" className="sidesubtab" style={{display: "none"}}>
<ul> <ul>
<li id="newsubtitle0"><ScrollLink label="Mechanism" targetId="BS1"/></li> <li id="newsubtitle0"><ScrollLink label="Mechanism" targetId="BS1"/></li>
...@@ -89,9 +89,9 @@ export function SafetySidebar(){ ...@@ -89,9 +89,9 @@ export function SafetySidebar(){
</div> </div>
<div> <div>
{/* Fznktioniert: <a onClick={openThem({it: "tab-Cystic-Fibrosis"})} > */} {/* Fznktioniert: <a onClick={openThem({it: "tab-Cystic-Fibrosis"})} > */}
<div className="detail-sideitem"> <div className="detail-sideitem" id="subtitle4">
<div id="parent-Biosecurity" className="sideitem"> <div id="parent-Biosecurity" className="sideitem">
<a onClick={openAndScroll({ it: "tab-Biosecurity", scrollTarget: "Biosecurity" })}><summary>Biosecurity</summary></a> <a onClick={openAndCloseAndScroll({ it: "tab-Biosecurity", scrollTarget: "Biosecurity", close: ["Biosafety", "Bioethics"]})}><summary>Biosecurity</summary></a>
<span id="tab-Biosecurity" className="sidesubtab" style={{display: "none"}}> <span id="tab-Biosecurity" className="sidesubtab" style={{display: "none"}}>
<ul> <ul>
<li><ScrollLink label="Our Project" targetId="BSec1"/></li> <li><ScrollLink label="Our Project" targetId="BSec1"/></li>
...@@ -103,9 +103,9 @@ export function SafetySidebar(){ ...@@ -103,9 +103,9 @@ export function SafetySidebar(){
</div> </div>
</div> </div>
<div> <div>
<div className="detail-sideitem"> <div className="detail-sideitem" id="subtitle5">
<div id="parent-Bioethics" className="sideitem"> <div id="parent-Bioethics" className="sideitem">
<a onClick={openAndScroll({ it: "tab-Bioethics", scrollTarget: "Bioethics" })}><summary>Bioethics</summary></a> <a onClick={openAndCloseAndScroll({ it: "tab-Bioethics", scrollTarget: "Bioethics", close: ["Biosafety", "Biosecurity"]})}><summary>Bioethics</summary></a>
<span id="tab-Bioethics" className="sidesubtab" style={{display: "none"}}> <span id="tab-Bioethics" className="sidesubtab" style={{display: "none"}}>
<ul> <ul>
<li><ScrollLink label="Gene Therapy" targetId="BE1"/></li> <li><ScrollLink label="Gene Therapy" targetId="BE1"/></li>
...@@ -133,141 +133,5 @@ export function SafetySidebar(){ ...@@ -133,141 +133,5 @@ export function SafetySidebar(){
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 (scrollTarget === "Biosafety"){
document.getElementById("tab-Biosecurity")!.style.display = "none";
document.getElementById("parent-Biosecurity")!.classList.remove("active-sideitem");
document.getElementById("tab-Bioethics")!.style.display = "none";
document.getElementById("parent-Bioethics")!.classList.remove("active-sideitem");
}
if (scrollTarget === "Biosecurity"){
document.getElementById("tab-Biosafety")!.style.display = "none";
document.getElementById("parent-Biosafety")!.classList.remove("active-sideitem");
document.getElementById("tab-Bioethics")!.style.display = "none";
document.getElementById("parent-Bioethics")!.classList.remove("active-sideitem");
}
if (scrollTarget === "Bioethics"){
document.getElementById("tab-Biosecurity")!.style.display = "none";
document.getElementById("parent-Biosecurity")!.classList.remove("active-sideitem");
document.getElementById("tab-Biosafety")!.style.display = "none";
document.getElementById("parent-Biosafety")!.classList.remove("active-sideitem");
}
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;
}
function openAndCloseAndScroll({ 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);
document.getElementById("tab-Biosafety")!.style.display = "none";
document.getElementById("parent-Biosafety")!.classList.remove("active-sideitem");
document.getElementById("tab-Biosecurity")!.style.display = "none";
document.getElementById("parent-Biosecurity")!.classList.remove("active-sideitem");
document.getElementById("tab-Bioethics")!.style.display = "none";
document.getElementById("parent-Bioethics")!.classList.remove("active-sideitem");
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;
}
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