wir haben unterkategorien
This commit is contained in:
@@ -1757,6 +1757,88 @@ editingStyles.textContent = `
|
||||
`;
|
||||
document.head.appendChild(editingStyles);
|
||||
|
||||
// CSS-Styles für die Unterkategorien-Seite
|
||||
(function() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.mindmap-page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mindmap-page .mindmap-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
z-index: 10;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.mindmap-page .back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.mindmap-page .back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mindmap-page .back-button svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mindmap-page .mindmap-title {
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
background: linear-gradient(90deg, #60a5fa, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.mindmap-view {
|
||||
width: 100%;
|
||||
height: calc(100% - 64px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Fix für den Cytoscape Container */
|
||||
.mindmap-view > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
|
||||
// Funktion zum Laden der Subthemen
|
||||
async function loadSubthemes(node) {
|
||||
try {
|
||||
@@ -1765,7 +1847,15 @@ async function loadSubthemes(node) {
|
||||
|
||||
showUINotification('Lade Subthemen...', 'info');
|
||||
|
||||
// Finde den Container
|
||||
const mindmapContainer = document.querySelector('.mindmap-container');
|
||||
if (!mindmapContainer) {
|
||||
console.error('Mindmap-Container nicht gefunden');
|
||||
showUINotification('Fehler: Mindmap-Container nicht gefunden', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Erstelle eine neue Seite für die Unterkategorien
|
||||
const newPage = document.createElement('div');
|
||||
newPage.className = 'mindmap-page';
|
||||
newPage.style.display = 'none';
|
||||
@@ -1773,7 +1863,7 @@ async function loadSubthemes(node) {
|
||||
const header = document.createElement('div');
|
||||
header.className = 'mindmap-header';
|
||||
header.innerHTML = `
|
||||
<button class="back-button" onclick="goBack()">
|
||||
<button class="back-button" onclick="window.goBack()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
@@ -1785,17 +1875,30 @@ async function loadSubthemes(node) {
|
||||
newContainer.id = `cy-${node.id()}`;
|
||||
newContainer.className = 'mindmap-view';
|
||||
|
||||
// Füge die Elemente zur DOM-Struktur hinzu
|
||||
newPage.appendChild(header);
|
||||
newPage.appendChild(newContainer);
|
||||
mindmapContainer.appendChild(newPage);
|
||||
|
||||
// Warte, bis der DOM aktualisiert ist
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
|
||||
// Speichere die Cytoscape-Instanz für eventuelle Referenzen
|
||||
if (!window.subthemeCyInstances) {
|
||||
window.subthemeCyInstances = {};
|
||||
}
|
||||
|
||||
// Überprüfe, ob der Container jetzt im DOM existiert
|
||||
const containerElement = document.getElementById(`cy-${node.id()}`);
|
||||
if (!containerElement) {
|
||||
console.error(`Container #cy-${node.id()} nicht gefunden`);
|
||||
showUINotification(`Fehler: Container #cy-${node.id()} nicht gefunden`, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Erstelle die Cytoscape-Instanz
|
||||
const newCy = cytoscape({
|
||||
container: newContainer,
|
||||
container: containerElement,
|
||||
elements: [
|
||||
...mindmapData.nodes.map(node => ({
|
||||
data: {
|
||||
@@ -1844,67 +1947,41 @@ async function loadSubthemes(node) {
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Subthemen:', error);
|
||||
showUINotification('Fehler beim Laden der Subthemen', 'error');
|
||||
showUINotification('Fehler beim Laden der Subthemen: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Funktion zum Zurücknavigieren
|
||||
function goBack() {
|
||||
const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])');
|
||||
if (currentPage) {
|
||||
currentPage.style.display = 'none';
|
||||
cy.container().style.display = 'block';
|
||||
try {
|
||||
console.log('goBack Funktion aufgerufen');
|
||||
const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])');
|
||||
if (currentPage) {
|
||||
console.log('Aktuelle Seite gefunden:', currentPage);
|
||||
currentPage.style.display = 'none';
|
||||
|
||||
// Stelle sicher, dass die Haupt-Cytoscape-Instanz existiert
|
||||
if (window.cy && window.cy.container()) {
|
||||
console.log('Zeige Haupt-Cytoscape-Container an');
|
||||
window.cy.container().style.display = 'block';
|
||||
|
||||
// Aktualisiere das Layout
|
||||
setTimeout(() => {
|
||||
window.cy.resize();
|
||||
window.cy.fit();
|
||||
}, 100);
|
||||
} else {
|
||||
console.error('Haupt-Cytoscape-Instanz oder Container nicht gefunden');
|
||||
showUINotification('Fehler: Hauptmindmap konnte nicht angezeigt werden', 'error');
|
||||
}
|
||||
} else {
|
||||
console.warn('Keine aktuelle Unterseite gefunden');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler in goBack Funktion:', error);
|
||||
showUINotification('Fehler beim Zurücknavigieren: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// CSS-Styles für die Unterkategorien-Seite
|
||||
(function() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.mindmap-page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-color, #1a1a1a);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mindmap-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mindmap-title {
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mindmap-view {
|
||||
width: 100%;
|
||||
height: calc(100% - 4rem);
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
// Funktion global verfügbar machen
|
||||
window.goBack = goBack;
|
||||
Reference in New Issue
Block a user