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

sidebar safety

parent 9ae9b330
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App/App.css
+ 1
− 0
View file @ 629d14c7
......@@ -3271,6 +3271,7 @@ a{
padding-right: 10px;
padding-left: 10px;
}
.img-sponsor-a{
margin: 20px;
......
src/contents/index.tsx
+ 1
− 0
View file @ 629d14c7
......@@ -68,6 +68,7 @@ export * from "./education.tsx";
export * from "../headers/edu-h.tsx"
export * from "../sidebars/engS.tsx"
export * from "../sidebars/safeS.tsx"
export * from "../sidebars/none.tsx"
export * from "../sidebars/ethS.tsx"
......
src/contents/safety.tsx
+ 33
− 15
View file @ 629d14c7
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../components/Buttons";
import { H2 } from "../components/headings";
export function Safety() {
const location = useLocation();
......@@ -32,27 +33,44 @@ export function Safety() {
return (
<>
<div className="row mt-4">
<div className="col">
<section className="section">
<div id="Role"><H2 text="Role in iGem"/></div>
</section>
</div>
<div className="col">
<section className="section">
<div id="Checks"><H2 text="Check-Ins"/></div>
</section>
</div>
</div>
<div className="row mt-4">
<div className="col">
<section className="section">
<div id="Lab"><H2 text="Our Lab"/></div>
</section>
</div>
</div>
<div className="row mt-4">
<div className="col-lg-8">
<div className="col">
<section className="section">
<div id="Biosafety"><H2 text="Biosafety"/></div>
<div id="BS1"><h3>Mechanism</h3> </div>
<div id="BS2"><h3>Delivery</h3> </div>
</section>
</div>
<div className="col">
<section className="section">
<div id="Biosecurity"><H2 text="Biosecurity"/></div>
<div id="BSec1"><h3>Our Project</h3> </div>
<div id="BSec2"><h3>Risk Assesment</h3> </div>
<div id="BSec3"><h3>Managing Risks</h3> </div>
</section>
</div>
<div className="col-lg-4">
<div className="col">
<section 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>
</div>
</>
);
}
src/pages.ts
+ 3
− 3
View file @ 629d14c7
......@@ -29,7 +29,7 @@
Collaborations
} from "./contents";
import { DescSidebar, EthicsSidebar, NoSidebar, EngSide } from "./contents";
import { DescSidebar, EthicsSidebar, SafetySidebar, 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";
interface Base {
......@@ -251,7 +251,7 @@ const Pages: (Page | Folder)[] = [
path: "/safety",
component: Safety,
header: SAFEH,
navlist: NoSidebar,
navlist: SafetySidebar,
},
{
name: "Supplementary",
......@@ -429,7 +429,7 @@ export const NavPages: (Page | Folder)[] = [
path: "/safety",
component: Safety,
header: SAFEH,
navlist: NoSidebar,
navlist: SafetySidebar,
},
{
name: "Human Practices",
......
src/sidebars/descS.tsx
+ 55
− 41
View file @ 629d14c7
......@@ -63,7 +63,7 @@ export function DescSidebar(){
<div className="sticky-top">
<nav className="sidebar">
<div>
<a onClick={openAndScroll({ it: "tab-Abstract", scrollTarget: "Abstract" })}>
<a onClick={openAndCloseAndScroll({ it: "tab-Abstract", scrollTarget: "Abstract" })}>
<div className="detail-sideitem">
<div id="parent-Abstract" className="sideitem">
<summary>Abstract</summary>
......@@ -90,7 +90,7 @@ export function DescSidebar(){
</div>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-motivation"})}>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-motivation"})}>
<div className="detail-sideitem">
<div id="parent-pe-systems" className="sideitem">
<summary>Our Motivation</summary>
......@@ -99,7 +99,7 @@ export function DescSidebar(){
</a>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Approach"})}>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Approach"})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
<summary>Approach</summary>
......@@ -108,7 +108,7 @@ export function DescSidebar(){
</a>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Delivery"})}>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Delivery"})}>
<div className="detail-sideitem">
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
......@@ -117,7 +117,7 @@ export function DescSidebar(){
</a>
</div> {/* */}
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-vision"})}>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-vision"})}>
<div className="detail-sideitem">
<div id="parent-pegrna" className="sideitem">
<summary>Our vision</summary>
......@@ -126,7 +126,7 @@ export function DescSidebar(){
</a>
</div>
<div>
<a onClick={openAndScroll({it: "tab-Our-motivation", scrollTarget: "References"})}>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "References"})}>
<div className="detail-sideitem">
<div id="parent-references" className="sideitem">
<summary>References</summary>
......@@ -204,33 +204,7 @@ function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLEle
}
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>) => {
......@@ -285,19 +259,27 @@ function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLEle
return gotoandopen;
}
export function openAndScroll2({ it, scrollTarget }: { it: string, scrollTarget?: string }) {
export function openAndCloseAndScroll({ it, scrollTarget }: { it: string, scrollTarget?: string }) {
const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
/* console.log(`openAndScroll called with it: ${it} and scrollTarget: ${scrollTarget}`); */
_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);
/*
if (document.getElementById("tab-Cystic-Fibrosis")) {
document.getElementById("tab-Cystic-Fibrosis")!.style.display = "none";
document.getElementById("parent-Cystic-Fibrosis")!.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
......@@ -312,15 +294,19 @@ function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLEle
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"
......@@ -332,3 +318,31 @@ function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLEle
}
return gotoandopen;
}
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;
}
\ No newline at end of file
src/sidebars/safeS.tsx 0 → 100644
+ 319
− 0
View file @ 629d14c7
import { useEffect } from "react";
interface ScrollLinkProps {
targetId: string;
label: string;
}
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 SafetySidebar(){
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={openAndCloseAndScroll({ it: "tab-Role", scrollTarget: "Role" })}>
<div className="detail-sideitem">
<div id="parent-Role" className="sideitem">
<summary>Role in iGem</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndCloseAndScroll({ it: "tab-Checks", scrollTarget: "Checks" })}>
<div className="detail-sideitem">
<div id="parent-Checks" className="sideitem">
<summary>Check-Ins</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndCloseAndScroll({ it: "tab-Lab", scrollTarget: "Lab" })}>
<div className="detail-sideitem">
<div id="parent-Lab" className="sideitem">
<summary>Our Lab</summary>
</div>
</div>
</a>
</div>
<div>
{/* Fznktioniert: <a onClick={openThem({it: "tab-Cystic-Fibrosis"})} > */}
<div className="detail-sideitem">
<div id="parent-Biosafety" className="sideitem">
<a onClick={openAndScroll({ it: "tab-Biosafety", scrollTarget: "Biosafety" })}><summary>Biosafety</summary></a>
<span id="tab-Biosafety" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><ScrollLink label="Mechanism" targetId="BS1"/></li>
<li><ScrollLink label="Delivery" targetId="BS2"/></li>
</ul>
</span>
</div>
</div>
</div>
<div>
{/* Fznktioniert: <a onClick={openThem({it: "tab-Cystic-Fibrosis"})} > */}
<div className="detail-sideitem">
<div id="parent-Biosecurity" className="sideitem">
<a onClick={openAndScroll({ it: "tab-Biosecurity", scrollTarget: "Biosecurity" })}><summary>Biosecurity</summary></a>
<span id="tab-Biosecurity" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><ScrollLink label="Our Project" targetId="BSec1"/></li>
<li><ScrollLink label="Risk Assesment" targetId="BSec2"/></li>
<li><ScrollLink label="Managing Risks" targetId="BSec3"/></li>
</ul>
</span>
</div>
</div>
</div>
<div>
<div className="detail-sideitem">
<div id="parent-Bioethics" className="sideitem">
<a onClick={openAndScroll({ it: "tab-Bioethics", scrollTarget: "Bioethics" })}><summary>Bioethics</summary></a>
<span id="tab-Bioethics" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><ScrollLink label="Gene Therapy" targetId="BE1"/></li>
<li><ScrollLink label="Primary Cells" targetId="BE2"/></li>
<li><ScrollLink label="Consent and Guidelines" targetId="BE3"/></li>
</ul>
</span>
</div>
</div>
</div>
</nav>
<br/>
<div className="col" style={{display: "flex", alignItems: "right"}}>
<a href='#' className="backtotop">
Back to Top &#8593;
</a>
</div>
</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 = "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 = "";
}
}
}
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 / 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;
}
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 / 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;
}
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