From 2432bad0cb4e5915c3ef336dd53feee7284e61b2 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 6 Sep 2024 12:56:26 +0200
Subject: [PATCH] merged openCity into openElement
---
src/components/Buttons.tsx | 100 ++++++++++----------------
src/components/HorizontalTimeline.tsx | 6 +-
src/contents/human-practices.tsx | 3 +-
src/sidebars/descS.tsx | 27 -------
src/sidebars/engS.tsx | 34 +--------
src/utils/openElement.ts | 52 ++++++++++++++
src/utils/openThem.ts | 32 +++++++++
7 files changed, 127 insertions(+), 127 deletions(-)
create mode 100644 src/utils/openElement.ts
create mode 100644 src/utils/openThem.ts
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index d55e4b09..486f96d2 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -1,6 +1,7 @@
import { Link } from "react-router-dom";
-import { openCity } from "./HorizontalTimeline";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { openThem } from "../utils/openThem";
+import { openElement } from "../utils/openElement";
interface UrlButtonProps{
href: string,
children: string,
@@ -139,34 +140,13 @@ function expandIt({it}: {it: string}){
return openit;
}
-export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg?: string}) {
- const opencity = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
- var i, tabcontent, tablinks, wegcontent;
- tabcontent = document.getElementsByClassName(cla);
- for (i = 0; i < tabcontent.length; i++) {
- (tabcontent[i] as HTMLElement).style.display = "none";
- }
- tablinks = document.getElementsByClassName("tabbutton");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- if (weg){
- wegcontent = document.getElementsByClassName(weg);
- for (i = 0; i < wegcontent.length; i++) {
- (wegcontent[i] as HTMLElement).style.display = "none";
- }
- }
- document.getElementById(cityName)!.style.display = "block";
- event.currentTarget.className += " active";
- }
- return opencity;
-}
+
export function ButtonThree(){
return(
<div className="boxy-3">
<div className="btn-new btn-three">
- <span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
+ <span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
@@ -176,7 +156,7 @@ export function ButtonTwo(){
return(
<div className="boxy-2">
<div className="btn-new btn-two">
- <span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
+ <span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
@@ -234,21 +214,48 @@ export function ButtonFourRotate(){
-export function openIt({whattoopen, classnamewhattoopen}: {whattoopen: string, classnamewhattoopen: string }){
+export function openIt({whattoopen, classnamewhattoopen, whattoclose}: {whattoopen: string, classnamewhattoopen: string, whattoclose?: string }){
const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
- /* console.log(document.getElementById(it)) */
+ var i, tabcontent, wegcontent;
console.log(document.getElementById(whattoopen)?.className)
- let tabcontent = document.getElementsByClassName(classnamewhattoopen);
- for (let i = 0; i < tabcontent.length; i++) {
+ tabcontent = document.getElementsByClassName(classnamewhattoopen);
+ for (i = 0; i < tabcontent.length; i++) {
(tabcontent[i] as HTMLElement).style.display = "none";
}
/* console.log(document.getElementById(it)!.style.display) */
document.getElementById(whattoopen)!.style.display = "block";
-
+ if (whattoclose){
+ wegcontent = document.getElementsByClassName(whattoclose);
+ for (i = 0; i < wegcontent.length; i++) {
+ (wegcontent[i] as HTMLElement).style.display = "none";
+ }
+ }
event.currentTarget.className += " active";
}
return openit;
}
+export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg?: string}) {
+ const opencity = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+ var i, tabcontent, tablinks, wegcontent;
+ tabcontent = document.getElementsByClassName(cla);
+ for (i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ tablinks = document.getElementsByClassName("tabbutton");
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+ }
+ if (weg){
+ wegcontent = document.getElementsByClassName(weg);
+ for (i = 0; i < wegcontent.length; i++) {
+ (wegcontent[i] as HTMLElement).style.display = "none";
+ }
+ }
+ document.getElementById(cityName)!.style.display = "block";
+ event.currentTarget.className += " active";
+ }
+ return opencity;
+}
/* function openItTwo({it}: {it: string}){
const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
@@ -272,36 +279,3 @@ export function openIt({whattoopen, classnamewhattoopen}: {whattoopen: string, c
-
-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;
-}
\ No newline at end of file
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index cd8f4e8e..94738a32 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -138,10 +138,10 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
)
}
-
+/*
export function openCity({cityName}:{cityName: string}) {
const opencity = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
- var i, tabcontent, tablinks;
+ var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
(tabcontent[i] as HTMLElement).style.display = "none";
@@ -154,7 +154,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
event.currentTarget.className += " active";
}
return opencity;
- }
+ } */
interface ItemProps {
title: string ,
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index a1995fc7..d66e770e 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -50,7 +50,8 @@
*/
import { TimeHori } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
-import { ButtonOne, TabButtonRow, openFromOtherPage, openTab } from "../components/Buttons";
+import { ButtonOne, TabButtonRow, openTab } from "../components/Buttons";
+import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
diff --git a/src/sidebars/descS.tsx b/src/sidebars/descS.tsx
index 203981f3..361e8aa7 100644
--- a/src/sidebars/descS.tsx
+++ b/src/sidebars/descS.tsx
@@ -117,30 +117,3 @@ export function DescSidebar(){
-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
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index d5f4b94b..fb5f4943 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -1,6 +1,6 @@
import { useEffect } from "react";
import { Highlight } from "../components/Highlight";
-
+import { openThem } from "../utils/openThem";
export function EngSide(){
let nums = [ "del1"]
useEffect(() => {
@@ -184,35 +184,3 @@ export function EngSide(){
*/
-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;
- }
\ No newline at end of file
diff --git a/src/utils/openElement.ts b/src/utils/openElement.ts
new file mode 100644
index 00000000..2945c996
--- /dev/null
+++ b/src/utils/openElement.ts
@@ -0,0 +1,52 @@
+export function openElement({
+ elementToOpen,
+ classToHide, /* tabcontent */
+ elementToClose,
+ buttonClass, /* = "tablinks" */
+ eventTargetClass = "active"
+ }: {
+ elementToOpen: string,
+ classToHide: string,
+ classToClose?: string,
+ elementToClose?: string,
+ buttonClass?: string,
+ eventTargetClass?: string
+ }) {
+ const openElement = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+ let i, elementsToHide, elementsToClose, tabLinks;
+
+ // Hide all elements with the classToHide (e.g., "tabcontent")
+ elementsToHide = document.getElementsByClassName(classToHide);
+ for (i = 0; i < elementsToHide.length; i++) {
+ (elementsToHide[i] as HTMLElement).style.display = "none";
+ }
+
+ // If elementToClose is provided, hide these elements too (optional)
+ if (elementToClose) {
+ elementsToClose = document.getElementsByClassName(elementToClose);
+ for (i = 0; i < elementsToClose.length; i++) {
+ (elementsToClose[i] as HTMLElement).style.display = "none";
+ }
+ }
+
+ // Clear the "active" class from elements with the buttonClass (e.g., "tablinks")
+ if (buttonClass) {
+ tabLinks = document.getElementsByClassName(buttonClass);
+ for (i = 0; i < tabLinks.length; i++) {
+ tabLinks[i].className = tabLinks[i].className.replace(` ${eventTargetClass}`, "");
+ }
+ }
+
+ // Display the element to open (elementToOpen, e.g., a city tab or content section)
+ const element = document.getElementById(elementToOpen);
+ if (element) {
+ element.style.display = "block";
+ }
+
+ // Add the "active" class to the clicked element
+ event.currentTarget.className += ` ${eventTargetClass}`;
+ };
+
+ return openElement;
+ }
+
\ No newline at end of file
diff --git a/src/utils/openThem.ts b/src/utils/openThem.ts
new file mode 100644
index 00000000..80ea4f4e
--- /dev/null
+++ b/src/utils/openThem.ts
@@ -0,0 +1,32 @@
+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");
+ 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;
+ }
\ No newline at end of file
--
GitLab