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

engineering pushstate

parent 45eccb2a
No related branches found
No related tags found
No related merge requests found
......@@ -31,7 +31,7 @@ export function EngSide(){
<div className="sticky-top">
<nav className="sidebar" id="eng-sidebar">
<div>
<a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
<a onClick={openThem({it: "our-cycle", scrollToId: "Our cycle"})}>
<div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem active-sideitem">
<summary>Our Cycle</summary>
......@@ -43,7 +43,7 @@ export function EngSide(){
</a>
</div>
<div>
<a onClick={openThem({it: "proof-of-concept"})}>
<a onClick={openThem({it: "proof-of-concept", scrollToId: ""})}>
<div className="detail-sideitem">
<div id="parent-proof-of-concept" className="sideitem">
<summary>Proof Of Concept</summary>
......
export function openThem({ it, scrollToId }: { it: string; scrollToId?: string }) {
const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
updateTabs(it, scrollToId);
// Update der URL
const newUrl = `?tab=${it}`;
window.history.pushState({ tab: it }, '', newUrl);
};
const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
updateTabs(it, scrollToId);
return gotoandopen;
}
function updateTabs(it: string, scrollToId?: string) {
let contenttabid = "tab-" + it;
let parent = "parent-" + it;
// Verstecke alle Subtabs und Content-Tabs
const subtabs = document.getElementsByClassName("sidesubtab");
const contenttabs = document.getElementsByClassName("enginneeringtab");
const sideitems = document.getElementsByClassName("sideitem");
for (let i = 0; i < subtabs.length; i++) {
(subtabs[i] as HTMLElement).style.display = "none";
}
for (let i = 0; i < contenttabs.length; i++) {
(contenttabs[i] as HTMLElement).style.display = "none";
}
for (let i = 0; i < sideitems.length; i++) {
(sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
}
// Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
document.getElementById(it)!.style.display = "block";
document.getElementById(parent)!.classList.add("active-sideitem");
document.getElementById(contenttabid)!.style.display = "block";
// Update der URL
const newUrl = `?tab=${it}`;
window.history.pushState({ tab: it }, '', newUrl);
};
// Scrolle zu der angegebenen ID, falls vorhanden
if (scrollToId && document.getElementById(scrollToId)) {
document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
}
return gotoandopen;
}
function updateTabs(it: string, scrollToId?: string) {
let contenttabid = "tab-" + it;
let parent = "parent-" + it;
// Verstecke alle Subtabs und Content-Tabs
const subtabs = document.getElementsByClassName("sidesubtab");
const contenttabs = document.getElementsByClassName("enginneeringtab");
const sideitems = document.getElementsByClassName("sideitem");
for (let i = 0; i < subtabs.length; i++) {
(subtabs[i] as HTMLElement).style.display = "none";
}
// Füge einen Event Listener für `popstate` hinzu
window.addEventListener('popstate', (event) => {
if (event.state) {
const tab = event.state.tab;
updateTabs(tab);
}
});
\ No newline at end of file
for (let i = 0; i < contenttabs.length; i++) {
(contenttabs[i] as HTMLElement).style.display = "none";
}
for (let i = 0; i < sideitems.length; i++) {
(sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
}
// Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
document.getElementById(it)!.style.display = "block";
document.getElementById(parent)!.classList.add("active-sideitem");
document.getElementById(contenttabid)!.style.display = "block";
// Scrolle zu der angegebenen ID, falls vorhanden
if (scrollToId && document.getElementById(scrollToId)) {
document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
}
}
// Füge einen Event Listener für `popstate` hinzu
window.addEventListener('popstate', (event) => {
if (event.state) {
const tab = event.state.tab;
updateTabs(tab);
}
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment