import { useEffect } from "react";
export function EngSide(){
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">
<br/>
<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>
<div>
<a onClick={openThem({it: "proof-of-concept"})}>
<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"}}>
<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>
<div>
<a onClick={openThem({it: "pe-systems"})}>
<div className="detail-sideitem">
<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>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "nikase"})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
<summary>Nikase</summary>
<span id="nikase" 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>
<div>
<a onClick={openThem({it: "pegrna"})}>
<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>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "delivery"})}>
<div className="detail-sideitem">
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#del1">
<span id="subtitle0" className='sideitem'>Iteration 1</span>
</a></li>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "references"})}>
<div className="detail-sideitem">
<div id="parent-references" className="sideitem">
<summary>References</summary>
<span id="references" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#subtitle1">
<span id="" className='sideitem'>Iteration 1</span>
</a></li>
<a href="#"><li>Iteration 2</li></a>
<a href="#"><li>Iteration 3</li></a>
</ul>
</span>
</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 = "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;
}