From be59eef9f3cb6741e08f3c006edfef2e986d2322 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <lsanfilippo@techfak.uni-bielefeld.de>
Date: Sat, 23 Nov 2024 14:08:42 +0100
Subject: [PATCH] =?UTF-8?q?aufr=C3=A4umen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../{TabNavigation.tsx => TabNavigation.ts} | 65 +++----------------
src/utils/handleScroll.ts | 14 ++++
src/utils/openFromOtherpAge.ts | 8 +--
src/utils/openNestedTab.ts | 16 +++++
src/utils/openTab.ts | 14 ++++
5 files changed, 56 insertions(+), 61 deletions(-)
rename src/utils/{TabNavigation.tsx => TabNavigation.ts} (55%)
create mode 100644 src/utils/handleScroll.ts
create mode 100644 src/utils/openNestedTab.ts
create mode 100644 src/utils/openTab.ts
diff --git a/src/utils/TabNavigation.tsx b/src/utils/TabNavigation.ts
similarity index 55%
rename from src/utils/TabNavigation.tsx
rename to src/utils/TabNavigation.ts
index 9a4a1369..4a437752 100644
--- a/src/utils/TabNavigation.tsx
+++ b/src/utils/TabNavigation.ts
@@ -1,68 +1,24 @@
import { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
-import { useLoading } from './LoadingContext';
import { openFromOtherPage } from './openFromOtherpAge';
+import { handleScroll } from './handleScroll';
+import { openNestedTab } from './openNestedTab';
+import { openTab } from './openTab';
-// function to open main tab
-export const openTab = (tabId: string, tabClass: string) => {
- console.log((document.getElementById(tabId) as HTMLElement).classList[1])
- console.log(`tabclass is ${tabClass}`)
- const tabs = document.getElementsByClassName(tabClass);
- for (let index = 0; index < tabs.length; index++) {
- (tabs[index] as HTMLElement).style.display = 'none';
-
- }
- const selectedTab = document.getElementById(tabId);
- if (selectedTab) {
- selectedTab.style.display = 'block';
- }
-};
-
-// Funktion, um verschachtelte Tabs zu öffnen
-export const openNestedTab = (parentTabId: string, childTabId: string, parentClass: string, childClass: string) => {
- openTab(parentTabId, parentClass);
-
- const nestedTabs = document.querySelectorAll(`#${parentTabId} ${childClass}`);
- nestedTabs.forEach((tab) => {
- (tab as HTMLElement).style.display = 'none';
- });
-
- const selectedNestedTab = document.getElementById(childTabId);
- if (selectedNestedTab) {
- selectedNestedTab.style.display = 'block';
- }
-};
-
-// Funktion, um zu einem bestimmten Bereich (z.B. Collapse) zu scrollen
-export const handleScrollToCollapse = (collapseId: string) => {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
-};
-
-// Custom Hook zur zentralen Tab-Navigation
+// Custom Hook for central tab navigation
export const useTabNavigation = () => {
- const { setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
const navigate = useNavigate();
const location = useLocation();
const [activeTab, setActiveTab] = useState<string | null>(null);
const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
- // Tab-Wechsel und URL-Update
+ // tab change and url update
const handleTabChange = (tabId: string, subTabId?: string) => {
setActiveTab(tabId);
setActiveSubTab(subTabId || null);
- // URL entsprechend aktualisieren
+ // updatung the url
let newUrl = `${location.pathname}?tab=${tabId}`;
if (subTabId) {
newUrl += `&subTab=${subTabId}`;
@@ -79,7 +35,7 @@ export const useTabNavigation = () => {
const scrollToId = params.get('scrollTo');
const changeTo = params.get('changeTo');
- // Öffne Haupt- und ggf. verschachtelten Tab
+ // opens main and (if necessary) subtab
if (tabId) {
let tab = document.getElementById(tabId);
let tabClass = tab!.className;
@@ -92,12 +48,12 @@ export const useTabNavigation = () => {
}
}
- // Scrollen zu einem bestimmten Collapsible-Element
+ // scrolls to a specific collapsible element
if (collapseId) {
- handleScrollToCollapse(collapseId);
+ handleScroll(collapseId);
}
- // Tab von einer anderen Seite öffnen (falls definiert)
+ // opens tab on another page
if (tabId) {
openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
}
@@ -113,7 +69,6 @@ export const useTabNavigation = () => {
}
if (changeTo) {
const element = document.getElementById(changeTo);
- setIsLoading(true);
if (element) {
const viewportHeight = window.innerHeight;
const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
diff --git a/src/utils/handleScroll.ts b/src/utils/handleScroll.ts
new file mode 100644
index 00000000..e6ddc00c
--- /dev/null
+++ b/src/utils/handleScroll.ts
@@ -0,0 +1,14 @@
+// scrolling to a specific element
+export const handleScroll = (scrollId: string) => {
+ const scrollElement = document.getElementById(scrollId);
+ if (scrollElement) {
+ const elementTop = scrollElement.getBoundingClientRect().top + window.pageYOffset;
+ const offset = window.innerHeight / 2 - scrollElement.offsetHeight / 2;
+ const scrollPosition = elementTop - offset;
+
+ window.scrollTo({
+ top: scrollPosition,
+ behavior: 'smooth',
+ });
+ }
+ };
\ No newline at end of file
diff --git a/src/utils/openFromOtherpAge.ts b/src/utils/openFromOtherpAge.ts
index 383443f3..e78a4542 100644
--- a/src/utils/openFromOtherpAge.ts
+++ b/src/utils/openFromOtherpAge.ts
@@ -3,20 +3,16 @@ export function openFromOtherPage(it: string, openclass?: string) {
if (openclass){
opcla = openclass;
}
+ // if no tab specified use default class
else{
opcla = "cycletab";
}
return (event: React.MouseEvent<HTMLElement> | { currentTarget: HTMLElement }) => {
- // Get all elements with class "cycletab" and hide them
+ // Get all elements with the specified class and hide them
let tabcontent = document.getElementsByClassName(opcla);
- /* let subtabcontent = document.getElementsByClassName("subcycletab"); */
for (let i = 0; i < tabcontent.length; i++) {
(tabcontent[i] as HTMLElement).style.display = "none";
}
- /* for (let i = 0; i < subtabcontent.length; i++) {
- (subtabcontent[i] as HTMLElement).style.display = "none";
- } */
-
// Show the specific tab content based on the "it" parameter
const tabToOpen = document.getElementById(it);
if (tabToOpen) {
diff --git a/src/utils/openNestedTab.ts b/src/utils/openNestedTab.ts
new file mode 100644
index 00000000..ced7c6c8
--- /dev/null
+++ b/src/utils/openNestedTab.ts
@@ -0,0 +1,16 @@
+import { openTab } from "./openTab";
+
+// Funktion, um verschachtelte Tabs zu öffnen
+export const openNestedTab = (parentTabId: string, childTabId: string, parentClass: string, childClass: string) => {
+ openTab(parentTabId, parentClass);
+
+ const nestedTabs = document.querySelectorAll(`#${parentTabId} ${childClass}`);
+ nestedTabs.forEach((tab) => {
+ (tab as HTMLElement).style.display = 'none';
+ });
+
+ const selectedNestedTab = document.getElementById(childTabId);
+ if (selectedNestedTab) {
+ selectedNestedTab.style.display = 'block';
+ }
+ };
\ No newline at end of file
diff --git a/src/utils/openTab.ts b/src/utils/openTab.ts
new file mode 100644
index 00000000..95e81eb3
--- /dev/null
+++ b/src/utils/openTab.ts
@@ -0,0 +1,14 @@
+// function to open a main tab
+export const openTab = (tabId: string, tabClass: string) => {
+ console.log((document.getElementById(tabId) as HTMLElement).classList[1])
+ console.log(`tabclass is ${tabClass}`)
+ const tabs = document.getElementsByClassName(tabClass);
+ for (let index = 0; index < tabs.length; index++) {
+ (tabs[index] as HTMLElement).style.display = 'none';
+
+ }
+ const selectedTab = document.getElementById(tabId);
+ if (selectedTab) {
+ selectedTab.style.display = 'block';
+ }
+ };
\ No newline at end of file
--
GitLab