Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Showing
with 500 additions and 50 deletions
......@@ -3,7 +3,7 @@ import BibtexParser from "../components/makeSources";
export default function EngPegsources(){
return (
<div>
<BibtexParser bibtexSources={bibtexSources} />
<BibtexParser bibtexSources={bibtexSources} start={18} />
</div>
);
}
......@@ -44,6 +44,15 @@ const bibtexSources = [
abstractnote = {Most genetic variants that contribute to disease1 are challenging to correct efficiently and without excess byproducts2–5. Here we describe prime editing, a versatile and precise genome editing method that directly writes new genetic information into a specified DNA site using a catalytically impaired Cas9 endonuclease fused to an engineered reverse transcriptase, programmed with a prime editing guide RNA (pegRNA) that both specifies the target site and encodes the desired edit. We performed more than 175 edits in human cells, including targeted insertions, deletions, and all 12 types of point mutation, without requiring double-strand breaks or donor DNA templates. We used prime editing in human cells to correct, efficiently and with few byproducts, the primary genetic causes of sickle cell disease (requiring a transversion in HBB) and Tay–Sachs disease (requiring a deletion in HEXA); to install a protective transversion in PRNP; and to insert various tags and epitopes precisely into target loci. Four human cell lines and primary post-mitotic mouse cortical neurons support prime editing with varying efficiencies. Prime editing shows higher or similar efficiency and fewer byproducts than homology-directed repair, has complementary strengths and weaknesses compared to base editing, and induces much lower off-target editing than Cas9 nuclease at known Cas9 off-target sites. Prime editing substantially expands the scope and capabilities of genome editing, and in principle could correct up to 89% of known genetic variants associated with human diseases.},
language = {en}
}
`,`
@misc{Doman2024,
title = {Prime Editing Webinar},
author = {Jordan Doman},
year = 2024,
url = {https://www.youtube.com/watch?v=0Z_ztvkvKUA},
note = {Accessed: May 2024},
howpublished = {YouTube}
}
`,`
@article{Galietta_Haggie_Verkman_2001,
title = {Green fluorescent protein-based halide indicators with improved chloride and iodide affinities},
......@@ -56,12 +65,12 @@ const bibtexSources = [
doi = {10.1016/S0014-5793(01)02561-3},
issn = {1873-3468},
rights = {FEBS Letters 499 (2001) 1873-3468 © 2015 Federation of European Biochemical Societies},
abstractnote = {The green fluorescent protein YFP-H148Q is sensitive to halides by a mechanism involving halide binding and a shift in pK a. However, a limitation of YFP-H148Q is its low halide sensitivity, with K d>100 mM for Cl−. Indicators with improved sensitivities are needed for cell transport studies, particularly in drug discovery by high-throughput screening, and for measurement of Cl− concentration in subcellular organelles. YFP-H148Q libraries were generated in which pairs of residues in the vicinity of the halide binding site were randomly mutated. An automated procedure was developed to screen bacterial colonies for improved halide sensitivity. Analysis of 1536 clones revealed improved anion sensitivities with K d down to 2 mM for I− (I152L), 40 mM for Cl− (V163S), and 10 mM for NO3 − (I152L). The anion-sensitive mechanism of these indicators was established and their utility in cells was demonstrated using transfected cells expressing the cystic fibrosis transmembrane conductance regulator chloride channel.},
abstractnote = {The green fluorescent protein YFP-H148Q is sensitive to halides by a mechanism involving halide binding and a shift in pK a. However, a limitation of YFP-H148Q is its low halide sensitivity, with K d>100 mM for Cl−. Indicators with improved sensitivities are needed for cell transport studies, particularly in drug discovery by high-throughput screening, and for measurement of Cl− concentration in subcellular organelles. YFP-H148Q libraries were generated in which pairs of residues in the vicinity of the halide binding site were randomly mutated. An automated procedure was developed to screen bacterial colonies for improved halide sensitivity. Analysis of 1536 clones revealed improved anion sensitivities with K d down to 2 mM for I− (I152L), 40 mM for Cl− (V163S), and 10 mM for NO3 − (I152L). The anion-sensitive mechanism of these indicators was established and their utility in cells was demonstrated using transfected cells expressing the Cystic Fibrosis transmembrane conductance regulator chloride channel.},
language = {en}
}
`,`
@article{Bulcaen_Kortleven_Liu_Maule_Dreano_Kelly_Ensinck_Thierie_Smits_Ciciani_2024,
title = {Prime editing functionally corrects cystic fibrosis-causing CFTR mutations in human organoids and airway epithelial cells},
title = {Prime editing functionally corrects Cystic Fibrosis-causing CFTR mutations in human organoids and airway epithelial cells},
author = {Bulcaen, Mattijs and Kortleven, Phéline and Liu, Ronald B. and Maule, Giulia and Dreano, Elise and Kelly, Mairead and Ensinck, Marjolein M. and Thierie, Sam and Smits, Maxime and Ciciani, Matteo and Hatton, Aurelie and Chevalier, Benoit and Ramalho, Anabela S. and Casadevall i Solvas, Xavier and Debyser, Zeger and Vermeulen, François and Gijsbers, Rik and Sermet-Gaudelus, Isabelle and Cereseto, Anna and Carlon, Marianne S.},
year = 2024,
month = may,
......@@ -69,7 +78,7 @@ const bibtexSources = [
pages = 101544,
doi = {10.1016/j.xcrm.2024.101544},
issn = {2666-3791},
abstractnote = {Prime editing is a recent, CRISPR-derived genome editing technology capable of introducing precise nucleotide substitutions, insertions, and deletions. Here, we present prime editing approaches to correct L227R- and N1303K-CFTR, two mutations that cause cystic fibrosis and are not eligible for current market-approved modulator therapies. We show that, upon DNA correction of the CFTR gene, the complex glycosylation, localization, and, most importantly, function of the CFTR protein are restored in HEK293T and 16HBE cell lines. These findings were subsequently validated in patient-derived rectal organoids and human nasal epithelial cells. Through analysis of predicted and experimentally identified candidate off-target sites in primary stem cells, we confirm previous reports on the high prime editor (PE) specificity and its potential for a curative CF gene editing therapy. To facilitate future screening of genetic strategies in a translational CF model, a machine learning algorithm was developed for dynamic quantification of CFTR function in organoids (DETECTOR: “detection of targeted editing of CFTR in organoids”).}
abstractnote = {Prime editing is a recent, CRISPR-derived genome editing technology capable of introducing precise nucleotide substitutions, insertions, and deletions. Here, we present prime editing approaches to correct L227R- and N1303K-CFTR, two mutations that cause Cystic Fibrosis and are not eligible for current market-approved modulator therapies. We show that, upon DNA correction of the CFTR gene, the complex glycosylation, localization, and, most importantly, function of the CFTR protein are restored in HEK293T and 16HBE cell lines. These findings were subsequently validated in patient-derived rectal organoids and human nasal epithelial cells. Through analysis of predicted and experimentally identified candidate off-target sites in primary stem cells, we confirm previous reports on the high prime editor (PE) specificity and its potential for a curative CF gene editing therapy. To facilitate future screening of genetic strategies in a translational CF model, a machine learning algorithm was developed for dynamic quantification of CFTR function in organoids (DETECTOR: “detection of targeted editing of CFTR in organoids”).}
}
`,`
@article{Renz_Valdivia-Francia_Sendoel_2020,
......
......@@ -3,7 +3,7 @@ import BibtexParser from "../components/makeSources";
export default function EngTrfsources(){
return (
<div>
<BibtexParser bibtexSources={bibtexSources} />
<BibtexParser bibtexSources={bibtexSources} start={3} />
</div>
);
}
......
import BibtexParser from "../components/makeSources";
export default function EntrepreneurSources(){
return (
<div>
<BibtexParser bibtexSources={bibtexSources} special="ent"/>
</div>
);
}
const bibtexSources = [
`
@article{GMI2021CysticFibrosis,
title = {Cystic Fibrosis Therapeutics Market Size - By Treatment Method (Medications [Drug Class {CFTR Modulators, Mucolytics, Bronchodilators, Pancreatic Enzyme Supplements}, Route of Administration], Devices), Distribution Channel & Forecast, 2021 - 2027},
author = {Faizullabhoy, Mariam and Wani, Gauri},
journal = {GMI Insights},
year = {2021},
month = {Sep},
url = {https://www.gminsights.com/industry-analysis/cystic-fibrosis-therapeutics-market},
note = {Report ID: GMI5118}
}
`,
`
@article{Fajac2021,
title={Therapeutic Approaches for Patients with Cystic Fibrosis Not Eligible for Current CFTR Modulators},
author={Fajac, Isabelle and Sermet, Isabelle},
journal={Cells},
volume={10},
number={10},
year={2021},
month={Oct},
doi={10.3390/cells10102793},
url={https://pubmed.ncbi.nlm.nih.gov/34685773/},
}
`,
`
@misc{ExpertMarketResearch2023,
title = {Cystic Fibrosis Treatment Market Report and Forecast 2024-2032},
author = {Rahul Gotadki},
year = {2023},
month = {Feb},
url = {https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market},
note = {ID: MRFR/Pharma/1293-CR}
}
`,
`
@misc{DeWeerdt2016,
author = {Sarah DeWeerdt},
title = {Developing gene therapy to treat cystic fibrosis: challenges and successes},
journal = {The Pharmaceutical Journal},
year = {2016},
month = {Jun},
url = {https://pharmaceutical-journal.com/article/feature/developing-gene-therapy-to-treat-cystic-fibrosis-challenges-and-successes},
note = {Accessed: 30 Sep 2024}
}
`
]
\ No newline at end of file
......@@ -14,7 +14,7 @@ const bibtexSources = [
@article{eins,
title = {Prime editing functionally corrects cystic fibrosis-causing CFTR mutations in human organoids and airway epithelial cells},
title = {Prime editing functionally corrects Cystic Fibrosis-causing CFTR mutations in human organoids and airway epithelial cells},
journal = {Cell Reports Medicine},
......@@ -45,7 +45,7 @@ month = {11},
pages = {1756-61},
title = {Cystic fibrosis in three northeast Thai infants is CF really a rare disease in the Thai population?},
title = {Cystic Fibrosis in three northeast Thai infants is CF really a rare disease in the Thai population?},
volume = {89},
......@@ -63,7 +63,7 @@ month = {01},
pages = {8},
title = {Cystic fibrosis in asia},
title = {Cystic Fibrosis in asia},
volume = {4},
......
......@@ -64,7 +64,7 @@ title = {Systematic optimization of prime editing for the efficient functional c
rights = {2024 The Author(s)},
ISSN = {2157-846X},
DOI = {10.1038/s41551-024-01233-3},
abstractNote = {Prime editing (PE) enables precise and versatile genome editing without requiring double-stranded DNA breaks. Here we describe the systematic optimization of PE systems to efficiently correct human cystic fibrosis (CF) transmembrane conductance regulator (CFTR) F508del, a three-nucleotide deletion that is the predominant cause of CF. By combining six efficiency optimizations for PE—engineered PE guide RNAs, the PEmax architecture, the transient expression of a dominant-negative mismatch repair protein, strategic silent edits, PE6 variants and proximal ‘dead’ single-guide RNAs—we increased correction efficiencies for CFTR F508del from less than 0.5% in HEK293T cells to 58% in immortalized bronchial epithelial cells (a 140-fold improvement) and to 25% in patient-derived airway epithelial cells. The optimizations also resulted in minimal off-target editing, in edit-to-indel ratios 3.5-fold greater than those achieved by nuclease-mediated homology-directed repair, and in the functional restoration of CFTR ion channels to over 50% of wild-type levels (similar to those achieved via combination treatment with elexacaftor, tezacaftor and ivacaftor) in primary airway cells. Our findings support the feasibility of a durable one-time treatment for CF.},
abstractNote = {Prime editing (PE) enables precise and versatile genome editing without requiring double-stranded DNA breaks. Here we describe the systematic optimization of PE systems to efficiently correct human Cystic Fibrosis (CF) transmembrane conductance regulator (CFTR) F508del, a three-nucleotide deletion that is the predominant cause of CF. By combining six efficiency optimizations for PE—engineered PE guide RNAs, the PEmax architecture, the transient expression of a dominant-negative mismatch repair protein, strategic silent edits, PE6 variants and proximal ‘dead’ single-guide RNAs—we increased correction efficiencies for CFTR F508del from less than 0.5% in HEK293T cells to 58% in immortalized bronchial epithelial cells (a 140-fold improvement) and to 25% in patient-derived airway epithelial cells. The optimizations also resulted in minimal off-target editing, in edit-to-indel ratios 3.5-fold greater than those achieved by nuclease-mediated homology-directed repair, and in the functional restoration of CFTR ion channels to over 50% of wild-type levels (similar to those achieved via combination treatment with elexacaftor, tezacaftor and ivacaftor) in primary airway cells. Our findings support the feasibility of a durable one-time treatment for CF.},
journal = {Nature Biomedical Engineering},
publisher = {Nature Publishing Group},
author = {Sousa, Alexander A. and Hemez, Colin and Lei, Lei and Traore, Soumba and Kulhankova, Katarina and Newby, Gregory A. and Doman, Jordan L. and Oye, Keyede and Pandey, Smriti and Karp, Philip H. and McCray, Paul B. and Liu, David R.},
......
......@@ -13,7 +13,7 @@ const bibtexSources = [
`
@article{Bulcaen_Kortleven_Liu_Maule_Dreano_Kelly_Ensinck_Thierie_Smits_Ciciani_et,
title = {
Prime editing functionally corrects cystic fibrosis-causing CFTR mutations in
Prime editing functionally corrects Cystic Fibrosis-causing CFTR mutations in
human organoids and airway epithelial cells
},
author = {
......@@ -34,7 +34,7 @@ const bibtexSources = [
Prime editing is a recent, CRISPR-derived genome editing technology capable
of introducing precise nucleotide substitutions, insertions, and deletions.
Here, we present prime editing approaches to correct L227R- and N1303K-CFTR,
two mutations that cause cystic fibrosis and are not eligible for current
two mutations that cause Cystic Fibrosis and are not eligible for current
market-approved modulator therapies. We show that, upon DNA correction of the
CFTR gene, the complex glycosylation, localization, and, most importantly,
function of the CFTR protein are restored in HEK293T and 16HBE cell lines.
......
......@@ -171,7 +171,7 @@ const bibtexSources = [
`,
`
@article{BULCAEN2024101544,
title = {Prime editing functionally corrects cystic fibrosis-causing CFTR mutations in human organoids and airway epithelial cells},
title = {Prime editing functionally corrects Cystic Fibrosis-causing CFTR mutations in human organoids and airway epithelial cells},
journal = {Cell Reports Medicine},
volume = {5},
number = {5},
......@@ -181,9 +181,9 @@ issn = {2666-3791},
doi = {https://doi.org/10.1016/j.xcrm.2024.101544},
url = {https://www.sciencedirect.com/science/article/pii/S2666379124002349},
author = {Mattijs Bulcaen and Phéline Kortleven and Ronald B. Liu and Giulia Maule and Elise Dreano and Mairead Kelly and Marjolein M. Ensinck and Sam Thierie and Maxime Smits and Matteo Ciciani and Aurelie Hatton and Benoit Chevalier and Anabela S. Ramalho and Xavier {Casadevall i Solvas} and Zeger Debyser and François Vermeulen and Rik Gijsbers and Isabelle Sermet-Gaudelus and Anna Cereseto and Marianne S. Carlon},
keywords = {cystic fibrosis, prime editing, patient-derived organoids, human nasal epithelial cells, gene editing, machine learning, DETEOR, CRISPR},
keywords = { Cystic Fibrosis, prime editing, patient-derived organoids, human nasal epithelial cells, gene editing, machine learning, DETEOR, CRISPR},
abstract = {Summary
Prime editing is a recent, CRISPR-derived genome editing technology capable of introducing precise nucleotide substitutions, insertions, and deletions. Here, we present prime editing approaches to correct L227R- and N1303K-CFTR, two mutations that cause cystic fibrosis and are not eligible for current market-approved modulator therapies. We show that, upon DNA correction of the CFTR gene, the complex glycosylation, localization, and, most importantly, function of the CFTR protein are restored in HEK293T and 16HBE cell lines. These findings were subsequently validated in patient-derived rectal organoids and human nasal epithelial cells. Through analysis of predicted and experimentally identified candidate off-target sites in primary stem cells, we confirm previous reports on the high prime editor (PE) specificity and its potential for a curative CF gene editing therapy. To facilitate future screening of genetic strategies in a translational CF model, a machine learning algorithm was developed for dynamic quantification of CFTR function in organoids (DETECTOR: “detection of targeted editing of CFTR in organoids”).}
Prime editing is a recent, CRISPR-derived genome editing technology capable of introducing precise nucleotide substitutions, insertions, and deletions. Here, we present prime editing approaches to correct L227R- and N1303K-CFTR, two mutations that cause Cystic Fibrosis and are not eligible for current market-approved modulator therapies. We show that, upon DNA correction of the CFTR gene, the complex glycosylation, localization, and, most importantly, function of the CFTR protein are restored in HEK293T and 16HBE cell lines. These findings were subsequently validated in patient-derived rectal organoids and human nasal epithelial cells. Through analysis of predicted and experimentally identified candidate off-target sites in primary stem cells, we confirm previous reports on the high prime editor (PE) specificity and its potential for a curative CF gene editing therapy. To facilitate future screening of genetic strategies in a translational CF model, a machine learning algorithm was developed for dynamic quantification of CFTR function in organoids (DETECTOR: “detection of targeted editing of CFTR in organoids”).}
}
new8.
@article{Ensinck_Deeersmaecker_Heylen_Ramalho_Gijsbers_Far,
......@@ -238,8 +238,8 @@ new8.
`,
`@article{ehrhardt_towards_2006,
title = {Towards an in vitro model of cystic fibrosis small airway epithelium: characterisation of the human bronchial epithelial cell line {CFBE41o}-},
shorttitle = {Towards an in vitro model of cystic fibrosis small airway epithelium},
title = {Towards an in vitro model of Cystic Fibrosis small airway epithelium: characterisation of the human bronchial epithelial cell line {CFBE41o}-},
shorttitle = {Towards an in vitro model of Cystic Fibrosis small airway epithelium},
author = {Ehrhardt, Carsten and Collnot, Eva-Maria and Baldes, Christiane and Becker, Ulrich and Laue, Michael and Kim, Kwang-Jin and Lehr, Claus-Michael},
year = 2006,
month = mar,
......@@ -253,7 +253,7 @@ new8.
urldate = {2024-09-09},
copyright = {http://www.springer.com/tdm},
language = {en},
file = {Ehrhardt et al. - 2006 - Towards an in vitro model of cystic fibrosis small.pdf:C\:\\Users\\Isabell\\Zotero\\storage\\RXLMCE3V\\Ehrhardt et al. - 2006 - Towards an in vitro model of cystic fibrosis small.pdf:application/pdf}
file = {Ehrhardt et al. - 2006 - Towards an in vitro model of Cystic Fibrosis small.pdf:C\:\\Users\\Isabell\\Zotero\\storage\\RXLMCE3V\\Ehrhardt et al. - 2006 - Towards an in vitro model of Cystic Fibrosis small.pdf:application/pdf}
}
`
,
......
import BibtexParser from "../components/makeSources";
export default function PartSources(){
return (
<div>
<BibtexParser bibtexSources={bibtexSources} />
</div>
);
}
const bibtexSources = [
`
@article {10.7554/eLife.69504,
article_type = {journal},
title = {PEAR, a flexible fluorescent reporter for the identification and enrichment of successfully prime edited cells},
author = {Simon, Dorottya Anna and Tálas, András and Kulcsár, Péter István and Biczók, Zsuzsanna and Krausz, Sarah Laura and Várady, György and Welker, Ervin},
editor = {Lapinaite, Audrone and Stainier, Didier YR and Hamilton, Jennifer R},
volume = 11,
year = 2022,
month = {feb},
pub_date = {2022-02-23},
pages = {e69504},
citation = {eLife 2022;11:e69504},
doi = {10.7554/eLife.69504},
url = {https://doi.org/10.7554/eLife.69504},
abstract = {Prime editing is a recently developed CRISPR/Cas9 based gene engineering tool that allows the introduction of short insertions, deletions, and substitutions into the genome. However, the efficiency of prime editing, which typically achieves editing rates of around 10\%–30\%, has not matched its versatility. Here, we introduce the prime editor activity reporter (PEAR), a sensitive fluorescent tool for identifying single cells with prime editing activity. PEAR has no background fluorescence and specifically indicates prime editing events. Its design provides apparently unlimited flexibility for sequence variation along the entire length of the spacer sequence, making it uniquely suited for systematic investigation of sequence features that influence prime editing activity. The use of PEAR as an enrichment marker for prime editing can increase the edited population by up to 84\%, thus significantly improving the applicability of prime editing for basic research and biotechnological applications.},
keywords = {CRISPR, Cas9, prime editing, fluorescent, fluorescent reporter, reporter, enrichment, genome engineering},
journal = {eLife},
issn = {2050-084X},
publisher = {eLife Sciences Publications, Ltd},
}
`,
`
@misc{nickaseassay2024internet,
author = {Kim et al.},
title = { Utilization of nicking properties of CRISPR-Cas12a effector for genome editing},
year = {2024},
url = { https://doi.org/10.1038/s41598-024-53648-2},
note = {Zugriff am 16. August 2024}
}
`
]
\ No newline at end of file
import BibtexParser from "../components/makeSources";
export default function ResultSources(){
return (
<div>
<BibtexParser bibtexSources={bibtexSources} />
</div>
);
}
const bibtexSources = [
`
@article{wang2023sortlnps,
author = {Wang, X. and Liu, S. and Sun, Y. and others},
title = {Preparation of selective organ-targeting (SORT) lipid nanoparticles (LNPs) using multiple technical methods for tissue-specific mRNA delivery},
journal = {Nature Protocols},
volume = {18},
pages = {265--291},
year = {2023},
doi = {10.1038/s41596-022-00755-},
url = {https://doi.org/10.1038/s41596-022-00755-}
}
`,
`@article{sousa2024primeediting,
author = {Sousa, A. A. and Hemez, C. and Lei, L. and others},
title = {Systematic optimization of prime editing for the efficient functional correction of CFTR F508del in human airway epithelial cells},
journal = {Nature Biomedical Engineering},
year = {2024},
doi = {10.1038/s41551-024-01233-3},
url = {https://doi.org/10.1038/s41551-024-01233-3}
}
`
]
\ No newline at end of file
......@@ -11,4 +11,7 @@ export default function VorlageSources(){
const bibtexSources = [
`
`
]
\ No newline at end of file
import { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router-dom';
import { openFromOtherPage } from './openFromOtherpAge';
import { useLoading } from './LoadingContext';
// Funktion, um den Haupttab zu öffnen
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',
});
}
};
import { handleScroll } from './handleScroll';
import { openNestedTab } from './openNestedTab';
import { openTab } from './openTab';
import { openTabInCollapsible } from './opentabincollapsible';
// 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 navigate = useNavigate();
const [activeTab, setActiveTab] = useState<string | null>(null);
const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
const [, setActiveCollapsible] = useState<string | null>(null);
// Tab Visibility Handler
const updateTabVisibility = (tabId: string | null, subTabId?: string | null) => {
document.querySelectorAll('.enginneeringtab').forEach((tab) => {
(tab as HTMLElement).style.display = 'none'; // All tabs hidden
});
// Tab-Wechsel und URL-Update
if (tabId) {
const tabElement = document.getElementById(`tab-${tabId}`);
if (tabElement) {
tabElement.style.display = 'block'; // Show the current tab
}
// Handle nested subtabs
if (subTabId) {
const subTabElement = document.getElementById(subTabId);
if (subTabElement) {
subTabElement.style.display = 'block'; // Show subtab
}
}
}
};
// Tab Change and URL Update
const handleTabChange = (tabId: string, subTabId?: string) => {
setActiveTab(tabId);
setActiveSubTab(subTabId || null);
// URL entsprechend aktualisieren
// Update URL
let newUrl = `${location.pathname}?tab=${tabId}`;
if (subTabId) {
newUrl += `&subTab=${subTabId}`;
}
navigate(newUrl, { replace: true });
// Immediately update tab visibility
updateTabVisibility(tabId, subTabId);
};
// On Location Change
useEffect(() => {
console.log("Use Effect")
const params = new URLSearchParams(location.search);
const tabId = params.get('tab');
const subTabId = params.get('subTab');
// Restore visibility
updateTabVisibility(tabId, subTabId);
// Handle scroll or collapsibles
const collapseId = params.get('collapseId');
const scrollToId = params.get('scrollTo');
const scrollToId = params.get('scrollTo');
const changeTo = params.get('changeTo');
const colTab = params.get('colTab');
// const navigate = useNavigate();
// Öffne Haupt- und ggf. verschachtelten Tab
// scrolls to a specific collapsible element
if (collapseId) {
setActiveCollapsible(collapseId);
handleScroll(collapseId);
}
if (colTab && collapseId) {
setActiveCollapsible(collapseId);
openTabInCollapsible(colTab, collapseId); // Öffne den Tab innerhalb des Collapsibles
}
// opens main and (if necessary) subtab
if (tabId) {
let tab = document.getElementById(tabId);
let tabClass = tab!.className;
......@@ -93,35 +95,31 @@ export const useTabNavigation = () => {
}
}
// Scrollen zu einem bestimmten Collapsible-Element
if (collapseId) {
handleScrollToCollapse(collapseId);
}
// Tab von einer anderen Seite öffnen (falls definiert)
// opens tab on another page
if (tabId) {
openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
}
if (scrollToId) {
const element = document.getElementById(scrollToId);
if (element) {
const viewportHeight = window.innerHeight;
const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
const scrollToPosition = targetPosition - viewportHeight / 5 + element.clientHeight / 2;
window.scrollTo({ top: scrollToPosition, behavior: 'smooth' });
}
}
if (changeTo) {
const element = document.getElementById(changeTo);
if (element) {
const viewportHeight = window.innerHeight;
const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
const scrollToPosition = targetPosition - viewportHeight / 5 + element.clientHeight / 2;
const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
}
}
if (changeTo) {
const element = document.getElementById(changeTo);
setIsLoading(true);
if (element) {
const viewportHeight = window.innerHeight;
const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
}
}
setActiveTab(tabId);
setActiveSubTab(subTabId || null);
......@@ -129,5 +127,3 @@ export const useTabNavigation = () => {
return { activeTab, activeSubTab, handleTabChange };
};
// 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
......@@ -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) {
......
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
// Function to open a main tab
export const openTab = (tabId: string, tabClass: string) => {
// console.log(`Trying to find tab with ID ${tabId}`);
const selectedTab = document.querySelector(`#${tabId}`);
if (selectedTab) {
//console.log('Tab found!');
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';
selectedTab.style.visibility = 'visible';
selectedTab.style.position = 'relative'; // In case there's a positioning issue
selectedTab.style.zIndex = '10'; // Ensure the tab is above other elements
}
} else {
console.error(`Tab with ID ${tabId} not found.`);
}
};
export const openTabInCollapsible = (tabId: string, collapsibleId: string) => {
// Warten Sie, bis das DOM vollständig geladen wurde
setTimeout(() => {
// Holen Sie sich das Collapsible
const collapsible = document.getElementById(collapsibleId);
if (!collapsible) {
console.error(`Collapsible mit ID ${collapsibleId} nicht gefunden!`);
return;
}
// Loggen Sie das, um sicherzustellen, dass das Collapsible korrekt gefunden wird
console.log(`Collapsible mit ID ${collapsibleId} gefunden`);
// Überprüfen Sie, ob der Tab mit der gegebenen ID existiert
const tab = collapsible.querySelector(`#${tabId}`);
if (!tab) {
console.error(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wurde nicht gefunden!`);
return;
}
let tabClass = tab!.className;
const tabs = document.getElementsByClassName(tabClass);
for (let index = 0; index < tabs.length; index++) {
(tabs[index] as HTMLElement).style.display = 'none';
}
// Wenn der Tab gefunden wurde, stellen Sie sicher, dass der Tab sichtbar gemacht wird
console.log(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wird jetzt geöffnet.`);
(tab as HTMLElement).style.display = 'block';
(tab as HTMLElement).style.visibility = 'visible';
(tab as HTMLElement).style.position = 'relative'; // Falls es ein Positionierungsproblem gibt
(tab as HTMLElement).style.zIndex = '10'; // Stelle sicher, dass der Tab über anderen Elementen liegt
// Loggen Sie den Stil des Tabs, um zu überprüfen, ob er tatsächlich auf 'block' gesetzt wurde
console.log(`Tab-Display-Stil für ${tabId}: ${(tab as HTMLElement).style.display}`);
}, 100); // 100 ms Verzögerung für DOM-Ladezeit
};
import { useNavigate } from "react-router-dom";
import { useLoading } from "./LoadingContext";
export const useNavigation = () => {
const navigate = useNavigate();
const { setIsLoading, isLoading } = useLoading(); // 2. Ladezustand hier verwenden
const goToPagesAndOpenTab = (tabId: string, path: string) => {
......@@ -16,7 +11,6 @@ export const useNavigation = () => {
};
const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
navigate(`${path}?collapseId=${collapseId}`);
};
const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
......@@ -56,30 +50,69 @@ export const useNavigation = () => {
navigate(`${path}?scrollTo=${scrollToId}`);
};
const changePageWithLoadingScreen = () => ({ path, scrollToId }: { path: string, scrollToId: string }) => {
setIsLoading(true);
let url = `${path}?changeTo=${scrollToId}`;
navigate(url);
setTimeout(() => {
const element = document.getElementById(scrollToId);
if (element) {
const viewportHeight = window.innerHeight;
const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
// Ladezustand nach Abschluss des Scrollens beenden
setTimeout(() => {
setIsLoading(false);
}, 1000); // Scrollzeit als Beispiel
} else {
// Falls das Element nicht gefunden wird, Ladezustand beenden
setIsLoading(false);
const goToPlace = ({
path,
scrollToId,
tabId,
subTabId,
collapseId,
tabincolId
}: {
path: string;
scrollToId?: string;
tabId?: string;
subTabId?: string;
collapseId?: string;
tabincolId?: string;
}) => {
// Den vollständigen Pfad erstellen, indem wir den basePath und path kombinieren
let url = `/${path.startsWith("/") ? path.slice(1) : path}`;
let paramsAdded = false;
console.log("Found path: " + path)
// 1. Tab-Logik (tabId und subTabId)
if (tabId) {
console.log("Found tabID: " + tabId)
url += `?tab=${tabId}`;
paramsAdded = true;
if (subTabId) {
console.log("Found subTabId: " + subTabId)
url += `&subTab=${subTabId}`;
}
}, 500);
}
// 2. Collapse-Logik (collapseId und tabincolId)
if (collapseId) {
console.log("Found collapseId: " + collapseId)
if (!tabId) {
// Wenn kein tabId gesetzt ist, fügen wir collapseId hinzu
url += url.includes('?') ? `&collapseId=${collapseId}` : `?collapseId=${collapseId}`;
paramsAdded = true;
}
if (tabincolId) {
console.log("Found tabincolId: " + tabincolId)
url += `&colTab=${tabincolId}`;
}
}
// 3. Scroll-Logik (scrollToId)
if (scrollToId) {
console.log("Found scrollToId: " + scrollToId)
// Wenn bereits Parameter existieren, fügen wir & hinzu, ansonsten ?
const separator = paramsAdded ? '&' : '?';
paramsAdded = true;
url += `${separator}scrollTo=${scrollToId}`;
}
console.log("Final URL:", url);
// Navigiere zur URL
navigate(url);
};
return { isLoading, changePageWithLoadingScreen, goToPageAndScroll, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
return { goToPlace, goToPageAndScroll, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
};