From 8a7b999f0c6c6754a2d2f422eb0a2292653ed3d1 Mon Sep 17 00:00:00 2001 From: liliana <liliana.sanfilippo@uni-bielefeld.de> Date: Fri, 6 Sep 2024 12:32:59 +0200 Subject: [PATCH] =?UTF-8?q?kann=20ich=20openit=20two=20l=C3=B6schen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Buttons.tsx | 30 +++++++++++++-------------- src/components/HorizontalTimeline.tsx | 2 +- src/contents/engineering.tsx | 12 +++++------ 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx index 2c707971..feff031f 100644 --- a/src/components/Buttons.tsx +++ b/src/components/Buttons.tsx @@ -5,7 +5,15 @@ interface UrlButtonProps{ href: string, children: string, }; - + interface TabButtonProps{ + classy?: string, + closing: string, + opentype: string + /* children?: React.ReactNode, */ + /* onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void, */ + name: string, + type: string + } export function Villagebutton({ title, source, page }: { title: string; source: string; page:string}) { return ( @@ -90,15 +98,7 @@ export function TabButtonRow({data, classy, opentype, closing}: {data: Array<Tab -interface TabButtonProps{ - classy?: string, - closing: string, - opentype: string - /* children?: React.ReactNode, */ - /* onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void, */ - name: string, - type: string -} + // neuer export function TabButton({classy, name, closing, opentype, type}:TabButtonProps){ if (!classy){ @@ -234,23 +234,23 @@ export function ButtonFourRotate(){ -export function openIt({it}: {it: string}){ +export function openIt({whattoopen, classnamewhattoopen}: {whattoopen: string, classnamewhattoopen: string }){ const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => { /* console.log(document.getElementById(it)) */ - console.log(document.getElementById(it)?.className) - let tabcontent = document.getElementsByClassName("cycletab"); + console.log(document.getElementById(whattoopen)?.className) + let tabcontent = document.getElementsByClassName(classnamewhattoopen); for (let i = 0; i < tabcontent.length; i++) { (tabcontent[i] as HTMLElement).style.display = "none"; } /* console.log(document.getElementById(it)!.style.display) */ - document.getElementById(it)!.style.display = "block"; + document.getElementById(whattoopen)!.style.display = "block"; event.currentTarget.className += " active"; } return openit; } -export function openItTwo({it}: {it: string}){ +function openItTwo({it}: {it: string}){ const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => { /* console.log(document.getElementById(it)) */ console.log(document.getElementById(it)?.className) diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx index 604b87b0..cd8f4e8e 100644 --- a/src/components/HorizontalTimeline.tsx +++ b/src/components/HorizontalTimeline.tsx @@ -131,7 +131,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ <div> {children} </div> - <button onClick={Open({person})} >Close</button> + <button onClick={Open({person})}>Close</button> </span> </div> diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx index ab694a48..1ae61da5 100644 --- a/src/contents/engineering.tsx +++ b/src/contents/engineering.tsx @@ -203,7 +203,7 @@ export function EngineeringCycleTab(){ <g id="g25" transform="translate(7.500978,3.0504898)"> - <a typeof="button" className="svg-button" onClick={openIt({it: "designing"})}> + <a typeof="button" className="svg-button" onClick={openIt({whattoopen: "designing", classnamewhattoopen: "cycletab"})}> <path className="cls-7" d="m 42.05,115.59 c 27.77,9.19 57.83,-4.79 69.76,-32.23" @@ -221,7 +221,7 @@ export function EngineeringCycleTab(){ id="polygon25" style={{fill:"#850f78",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}} transform="matrix(2.9806259,0,0,2.9806259,-225.43722,-156.45123)" /> - <a typeof="button" className="svg-button" onClick={openIt({it: "learning"})}> + <a typeof="button" className="svg-button" onClick={openIt({whattoopen: "learning", classnamewhattoopen: "cycletab"})}> <path className="cls-12" d="M 114,78.55 C 123.45,50.86 110,20.75 82.66,8.6" @@ -248,7 +248,7 @@ export function EngineeringCycleTab(){ style={{fill:"#a0a7f3",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}} inkscape:transform-center-x="3.6173751" inkscape:transform-center-y="5.1978852" /> - <a typeof="button" className="svg-button" onClick={openIt({it: "testing"})}> + <a typeof="button" className="svg-button" onClick={openIt({whattoopen: "testing", classnamewhattoopen: "cycletab"})}> <path className="cls-9" d="M 78.599111,7.5468264 C 43.820346,-2.6177588 13.956746,14.286046 4.2106281,46.368749" @@ -273,7 +273,7 @@ export function EngineeringCycleTab(){ id="polygon25-6" style={{fill:"#f57d22",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}} transform="matrix(-2.9650314,0.30449893,-0.30449893,-2.9650314,364.84067,249.28249)" /> - <a typeof="button" className="svg-button" onClick={openIt({it: "building"})}> + <a typeof="button" className="svg-button" onClick={openIt({whattoopen: "building", classnamewhattoopen: "cycletab"})}> <path className="cls-11" d="M 2.6659753,50.953505 C -2.0956694,72.727915 10.936866,102.94273 36.656234,113.62834" @@ -294,7 +294,7 @@ export function EngineeringCycleTab(){ id="polygon22" style={{strokeWidth:"6",strokeDasharray:"none",fill:"#f4cc1e",fillOpacity:"1"}} transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" /> - <a typeof="button" className="svg-button" onClick={openIt({it: "designing"})}> + <a typeof="button" className="svg-button" onClick={openIt({whattoopen: "designing", classnamewhattoopen: "cycletab"})}> <text style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}} @@ -305,7 +305,7 @@ export function EngineeringCycleTab(){ id="tspan29" /></textPath></text> </a> </g> </g> - <a typeof="button" className="svg-button" onClick={openIt({it: "overview"})}> + <a typeof="button" className="svg-button" onClick={openIt({whattoopen: "overview", classnamewhattoopen: "cycletab"})}> <circle style={{opacity:"0.85",fill:"#e2dad7",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",paintOrder:"fill markers stroke"}} id="path1" -- GitLab