v0.5: Mobile-Toggle-Pattern statt Bottom-Panel
Drei Probleme mit v0.4 Mobile-Layout: 1. 140px Bottom-Panel frisst vertikalen Platz auf Phone 2. User muss zur 3D-Graph scrollen, die nicht interaktiv nutzbar ist 3. Resize zwischen Mobile/Tablet/Desktop an fixen Breakpoints ist holprig Fix v0.5: Graph wird als Full-Screen-Modal über Toggle-Button gezeigt. Neues Layout-System: - Desktop >=1025px: obv default 3-panel, keine Toggles sichtbar - Compact 601-1024px: 2-panel (Tree + Content), Graph als Toggle-Modal, Toggle-Buttons für Tree UND Graph sichtbar im Header - Mobile <=600px: 1-panel (nur Content), Tree als Hamburger (auto-hide nach File-Selection), Graph als Toggle-Modal Plus Mobile-Overflow-Fix: - word-wrap + overflow-wrap auf Markdown-Content - pre/code: white-space: pre-wrap + word-break: break-word - table: display:block + overflow-x: auto - img: max-width: 100% Graph-Modal: - Full-Screen overlay mit Backdrop - Title-Bar + Close-Button (×) - Three.js re-rendered in modal-canvas (für isolierte Performance) - Click-to-Navigate vom Modal zurück in die Page - ESC-Taste schließt Modal 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
+281
-127
@@ -1,48 +1,287 @@
|
||||
/* HermesCustom — Lukas' additions to obsidian-web-viewer
|
||||
*
|
||||
* Loaded by vault.html via <script> tag (one-line patch). Initializes
|
||||
* automatically via HermesCustom.init() at the bottom of this file.
|
||||
* Loaded by vault.html via <script> tag (one-line patch).
|
||||
*
|
||||
* Features:
|
||||
* 1. Current-page highlighting in 3D Graph
|
||||
* 2. Click-to-navigate on 3D Graph nodes (Three.js raycasting)
|
||||
* 3. Responsive layout (graph collapses below 1024px, tree below 768px)
|
||||
* 4. URL-based navigation (?file=<path>)
|
||||
* v0.5 — Mobile/Responsive overhaul:
|
||||
* - Graph is NEVER a permanent bottom panel (waste of vertical space on phones)
|
||||
* - Graph shown via full-screen modal toggle on Mobile + Tablet
|
||||
* - Tree as hamburger on Mobile, full sidebar on Tablet
|
||||
* - Desktop unchanged
|
||||
*
|
||||
* Companion file: hermes-custom.css (loaded externally via <link>)
|
||||
* Companion: hermes-custom.css
|
||||
*
|
||||
* Design notes: see docs/ARCHITECTURE.md
|
||||
* Layout decisions per viewport:
|
||||
* Desktop (>=1025px): 3-panel, obv default, both toggles hidden
|
||||
* Compact (601-1024px): 2-panel (tree+content), graph hidden by default,
|
||||
* "Show Graph" button visible, "Tree" toggle visible
|
||||
* Mobile (<=600px): 1-panel (content only), tree hamburger, graph modal
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.HermesCustom = window.HermesCustom || {};
|
||||
|
||||
const HermesCustom = window.HermesCustom;
|
||||
|
||||
// ============================================================
|
||||
// Configuration
|
||||
// Config
|
||||
// ============================================================
|
||||
|
||||
const BREAKPOINTS = {
|
||||
mobile: 768, // <768px
|
||||
tablet: 1024, // 768-1023px
|
||||
mobile: 600,
|
||||
compact: 1024,
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 1. CSS injection — now no-op since CSS is loaded externally
|
||||
// 1. UI elements (injected into header)
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* CSS lives in hermes-custom.css (loaded via <link> in vault.html).
|
||||
* This method remains as a no-op for backward-compat / fallback.
|
||||
* Inject toggle buttons into header.
|
||||
* - Tree toggle: only visible when tree is hidden (Compact mode hides tree by default)
|
||||
* - Graph toggle: only visible when graph is hidden (Compact + Mobile)
|
||||
* - Search input is already in obv's header; we don't duplicate
|
||||
*/
|
||||
HermesCustom.injectResponsiveCSS = function() {
|
||||
// No-op: CSS loaded externally via <link rel="stylesheet"> in vault.html
|
||||
HermesCustom.injectUI = function() {
|
||||
const header = document.querySelector('.vault-header');
|
||||
if (!header) {
|
||||
setTimeout(HermesCustom.injectUI, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
// Graph toggle button (top-right of header, before search)
|
||||
if (!document.querySelector('.hermes-graph-toggle')) {
|
||||
const graphBtn = document.createElement('button');
|
||||
graphBtn.className = 'hermes-graph-toggle hermes-ui-btn';
|
||||
graphBtn.setAttribute('aria-label', 'Toggle 3D graph');
|
||||
graphBtn.innerHTML = '⊕ Graph';
|
||||
graphBtn.onclick = () => HermesCustom.toggleGraphModal();
|
||||
header.insertBefore(graphBtn, header.querySelector('.search-box') || header.lastChild);
|
||||
}
|
||||
|
||||
// Tree toggle button (left-most in header)
|
||||
if (!document.querySelector('.hermes-tree-toggle')) {
|
||||
const treeBtn = document.createElement('button');
|
||||
treeBtn.className = 'hermes-tree-toggle hermes-ui-btn';
|
||||
treeBtn.setAttribute('aria-label', 'Toggle file tree');
|
||||
treeBtn.innerHTML = '☰';
|
||||
treeBtn.onclick = () => HermesCustom.toggleTreeSidebar();
|
||||
header.insertBefore(treeBtn, header.firstChild);
|
||||
}
|
||||
|
||||
// Backdrop for tree sidebar
|
||||
if (!document.querySelector('.hermes-sidebar-backdrop')) {
|
||||
const bd = document.createElement('div');
|
||||
bd.className = 'hermes-sidebar-backdrop';
|
||||
bd.onclick = () => HermesCustom.closeTreeSidebar();
|
||||
document.body.appendChild(bd);
|
||||
}
|
||||
|
||||
// Graph modal (hidden by default)
|
||||
if (!document.querySelector('.hermes-graph-modal')) {
|
||||
HermesCustom.buildGraphModal();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Build the graph modal: full-screen overlay that re-uses the
|
||||
* existing canvas from obv. Strategy: clone the canvas into our modal,
|
||||
* or move the existing canvas in/out. Simpler approach: create a NEW
|
||||
* canvas inside the modal, and re-run the graph render there.
|
||||
*/
|
||||
HermesCustom.buildGraphModal = function() {
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'hermes-graph-modal';
|
||||
|
||||
const modalHeader = document.createElement('div');
|
||||
modalHeader.className = 'hermes-graph-modal-header';
|
||||
modalHeader.innerHTML = `
|
||||
<span class="hermes-graph-modal-title">GRAPH VIEW · Tap a node to navigate</span>
|
||||
<button class="hermes-graph-modal-close">× Close</button>
|
||||
`;
|
||||
modal.appendChild(modalHeader);
|
||||
|
||||
const canvasContainer = document.createElement('div');
|
||||
canvasContainer.className = 'hermes-graph-modal-canvas';
|
||||
canvasContainer.id = 'hermes-graph-modal-canvas';
|
||||
modal.appendChild(canvasContainer);
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
modal.querySelector('.hermes-graph-modal-close').onclick = () => {
|
||||
HermesCustom.closeGraphModal();
|
||||
};
|
||||
// ESC to close
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && modal.classList.contains('hermes-modal-open')) {
|
||||
HermesCustom.closeGraphModal();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 2. Layout application
|
||||
// 2. Graph modal open/close
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.toggleGraphModal = function() {
|
||||
const modal = document.querySelector('.hermes-graph-modal');
|
||||
if (!modal) return;
|
||||
if (modal.classList.contains('hermes-modal-open')) {
|
||||
HermesCustom.closeGraphModal();
|
||||
} else {
|
||||
HermesCustom.openGraphModal();
|
||||
}
|
||||
};
|
||||
|
||||
HermesCustom.openGraphModal = function() {
|
||||
const modal = document.querySelector('.hermes-graph-modal');
|
||||
const canvasContainer = document.getElementById('hermes-graph-modal-canvas');
|
||||
if (!modal || !canvasContainer) return;
|
||||
|
||||
// Move the existing obv canvas into our modal
|
||||
const existingCanvas = document.querySelector('.vault-graph canvas');
|
||||
if (existingCanvas && existingCanvas.parentElement !== canvasContainer) {
|
||||
// Clone the canvas instead of moving it (keeps obv's state intact)
|
||||
canvasContainer.innerHTML = '';
|
||||
const clonedCanvas = document.createElement('canvas');
|
||||
clonedCanvas.width = window.innerWidth;
|
||||
clonedCanvas.height = window.innerHeight - 48 - 44; // viewport minus header+modal-header
|
||||
canvasContainer.appendChild(clonedCanvas);
|
||||
|
||||
// Re-render the graph into our cloned canvas by re-running loadGraph logic
|
||||
HermesCustom.renderGraphIntoCanvas(clonedCanvas);
|
||||
}
|
||||
|
||||
modal.classList.add('hermes-modal-open');
|
||||
document.body.style.overflow = 'hidden'; // prevent background scroll
|
||||
console.log('[HermesCustom] Graph modal opened');
|
||||
};
|
||||
|
||||
HermesCustom.closeGraphModal = function() {
|
||||
const modal = document.querySelector('.hermes-graph-modal');
|
||||
if (!modal) return;
|
||||
modal.classList.remove('hermes-modal-open');
|
||||
document.body.style.overflow = '';
|
||||
console.log('[HermesCustom] Graph modal closed');
|
||||
};
|
||||
|
||||
/**
|
||||
* Re-render obv's graph into a different canvas.
|
||||
* This is a hack: we re-fetch graph data and re-create a Three.js scene
|
||||
* because obv's `loadGraph()` creates the scene with a specific canvas.
|
||||
*
|
||||
* Note: this duplicates Three.js scene. For mobile-only graph viewing,
|
||||
* this is acceptable (small perf cost, but isolated to user action).
|
||||
*/
|
||||
HermesCustom.renderGraphIntoCanvas = function(canvas) {
|
||||
if (!window.THREE || !HermesCustom._graphData) {
|
||||
console.warn('[HermesCustom] Three.js or graph data not ready');
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = {
|
||||
scene: new THREE.Scene(),
|
||||
camera: null,
|
||||
renderer: null,
|
||||
nodeObjects: new Map(),
|
||||
};
|
||||
|
||||
const w = canvas.clientWidth || canvas.width;
|
||||
const h = canvas.clientHeight || canvas.height;
|
||||
ctx.camera = new THREE.PerspectiveCamera(60, w / h, 1, 5000);
|
||||
ctx.camera.position.set(0, 0, 800);
|
||||
|
||||
ctx.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
|
||||
ctx.renderer.setSize(w, h);
|
||||
ctx.renderer.setPixelRatio(window.devicePixelRatio || 1);
|
||||
|
||||
// Build nodes
|
||||
const nodes = HermesCustom._graphData.nodes;
|
||||
const nodeGeometry = new THREE.SphereGeometry(4, 16, 16);
|
||||
const edges = HermesCustom._graphData.edges;
|
||||
|
||||
nodes.forEach(node => {
|
||||
const mat = new THREE.MeshBasicMaterial({ color: 0x6c7086 });
|
||||
const mesh = new THREE.Mesh(nodeGeometry, mat);
|
||||
mesh.userData.nodeId = node.id;
|
||||
// Random-ish positions (deterministic based on label hash)
|
||||
const hash = node.label.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
|
||||
mesh.position.set(
|
||||
(hash % 100) * 6 - 300,
|
||||
((hash * 7) % 100) * 4 - 200,
|
||||
((hash * 13) % 100) * 4 - 200
|
||||
);
|
||||
ctx.scene.add(mesh);
|
||||
ctx.nodeObjects.set(node.id, mesh);
|
||||
});
|
||||
|
||||
// Build edges
|
||||
edges.forEach(edge => {
|
||||
const src = ctx.nodeObjects.get(edge.source);
|
||||
const tgt = ctx.nodeObjects.get(edge.target);
|
||||
if (!src || !tgt) return;
|
||||
const lineGeo = new THREE.BufferGeometry().setFromPoints([
|
||||
src.position, tgt.position
|
||||
]);
|
||||
const line = new THREE.Line(lineGeo, new THREE.LineBasicMaterial({
|
||||
color: 0x45475a, transparent: true, opacity: 0.6
|
||||
}));
|
||||
ctx.scene.add(line);
|
||||
});
|
||||
|
||||
// Slow rotation
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.scene.rotation.y += 0.001;
|
||||
ctx.renderer.render(ctx.scene, ctx.camera);
|
||||
}
|
||||
animate();
|
||||
|
||||
// Click handler — re-use the same navigation logic
|
||||
HermesCustom.setupClickForCanvas(canvas, ctx.camera, ctx.nodeObjects);
|
||||
};
|
||||
|
||||
HermesCustom.setupClickForCanvas = function(canvas, camera, nodeMap) {
|
||||
const raycaster = new THREE.Raycaster();
|
||||
const mouse = new THREE.Vector2();
|
||||
canvas.addEventListener('click', (event) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(Array.from(nodeMap.values()));
|
||||
if (intersects.length > 0) {
|
||||
const nodeId = intersects[0].object.userData.nodeId;
|
||||
if (typeof window.loadFile === 'function') {
|
||||
HermesCustom.closeGraphModal();
|
||||
window.loadFile(nodeId);
|
||||
window.history.pushState({}, '', '?file=' + encodeURIComponent(nodeId));
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 3. Tree sidebar toggle
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.toggleTreeSidebar = function() {
|
||||
const sidebar = document.querySelector('.vault-sidebar');
|
||||
const backdrop = document.querySelector('.hermes-sidebar-backdrop');
|
||||
if (!sidebar) return;
|
||||
const opening = !sidebar.classList.contains('hermes-sidebar-open');
|
||||
sidebar.classList.toggle('hermes-sidebar-open', opening);
|
||||
if (backdrop) backdrop.classList.toggle('hermes-backdrop-visible', opening);
|
||||
};
|
||||
|
||||
HermesCustom.closeTreeSidebar = function() {
|
||||
const sidebar = document.querySelector('.vault-sidebar');
|
||||
const backdrop = document.querySelector('.hermes-sidebar-backdrop');
|
||||
if (sidebar) sidebar.classList.remove('hermes-sidebar-open');
|
||||
if (backdrop) backdrop.classList.remove('hermes-backdrop-visible');
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 4. Layout decision
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.applyLayout = function() {
|
||||
@@ -52,65 +291,28 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Add marker class (specificity booster)
|
||||
// Marker class
|
||||
if (!app.classList.contains('hermes-rc')) {
|
||||
app.classList.add('hermes-rc');
|
||||
}
|
||||
|
||||
const width = window.innerWidth;
|
||||
app.classList.remove('hermes-mobile', 'hermes-tablet', 'hermes-desktop');
|
||||
const sidebar = document.querySelector('.vault-sidebar');
|
||||
if (sidebar) sidebar.classList.remove('hermes-sidebar-open');
|
||||
const backdrop = document.querySelector('.hermes-sidebar-backdrop');
|
||||
if (backdrop) backdrop.classList.remove('hermes-backdrop-visible');
|
||||
app.classList.remove('hermes-mobile', 'hermes-compact', 'hermes-desktop');
|
||||
|
||||
if (width < BREAKPOINTS.mobile) {
|
||||
if (width <= BREAKPOINTS.mobile) {
|
||||
app.classList.add('hermes-mobile');
|
||||
} else if (width < BREAKPOINTS.tablet) {
|
||||
app.classList.add('hermes-tablet');
|
||||
} else if (width <= BREAKPOINTS.compact) {
|
||||
app.classList.add('hermes-compact');
|
||||
} else {
|
||||
app.classList.add('hermes-desktop');
|
||||
}
|
||||
|
||||
if (width < BREAKPOINTS.mobile) {
|
||||
HermesCustom.ensureHamburgerButton();
|
||||
// Auto-close sidebar on resize to desktop
|
||||
if (width >= BREAKPOINTS.compact) {
|
||||
HermesCustom.closeTreeSidebar();
|
||||
}
|
||||
};
|
||||
|
||||
HermesCustom.ensureHamburgerButton = function() {
|
||||
if (document.querySelector('.hermes-mobile-toggle')) return;
|
||||
const header = document.querySelector('.vault-header');
|
||||
if (!header) return;
|
||||
|
||||
// Backdrop (click-outside-to-close)
|
||||
if (!document.querySelector('.hermes-sidebar-backdrop')) {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'hermes-sidebar-backdrop';
|
||||
backdrop.onclick = () => {
|
||||
const sidebar = document.querySelector('.vault-sidebar');
|
||||
if (sidebar) sidebar.classList.remove('hermes-sidebar-open');
|
||||
backdrop.classList.remove('hermes-backdrop-visible');
|
||||
};
|
||||
document.body.appendChild(backdrop);
|
||||
}
|
||||
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'hermes-mobile-toggle';
|
||||
btn.textContent = '☰';
|
||||
btn.setAttribute('aria-label', 'Toggle file tree');
|
||||
btn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
const sidebar = document.querySelector('.vault-sidebar');
|
||||
const backdrop = document.querySelector('.hermes-sidebar-backdrop');
|
||||
if (sidebar) {
|
||||
sidebar.classList.toggle('hermes-sidebar-open');
|
||||
if (backdrop) backdrop.classList.toggle('hermes-backdrop-visible',
|
||||
sidebar.classList.contains('hermes-sidebar-open'));
|
||||
}
|
||||
};
|
||||
header.insertBefore(btn, header.firstChild);
|
||||
};
|
||||
|
||||
HermesCustom.setupResizeHandler = function() {
|
||||
let resizeTimer;
|
||||
let lastWidth = window.innerWidth;
|
||||
@@ -126,17 +328,13 @@
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 3. Current-page highlighting
|
||||
// 5. Current-page highlighting (desktop)
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.getCurrentFile = function() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const fileParam = params.get('file');
|
||||
if (fileParam) return fileParam;
|
||||
if (window.location.hash) {
|
||||
const hashMatch = window.location.hash.match(/file=([^&]+)/);
|
||||
if (hashMatch) return decodeURIComponent(hashMatch[1]);
|
||||
}
|
||||
return HermesCustom._lastLoadedFile || null;
|
||||
};
|
||||
|
||||
@@ -144,9 +342,7 @@
|
||||
if (!currentFile) return [];
|
||||
const graphData = HermesCustom._graphData;
|
||||
if (!graphData) return [];
|
||||
return graphData.edges
|
||||
.filter(e => e.source === currentFile)
|
||||
.map(e => e.target);
|
||||
return graphData.edges.filter(e => e.source === currentFile).map(e => e.target);
|
||||
};
|
||||
|
||||
HermesCustom.highlightCurrentNode = function() {
|
||||
@@ -169,69 +365,33 @@
|
||||
mesh.material.emissive.setHex(0xFFD700);
|
||||
mesh.material.emissiveIntensity = 0.6;
|
||||
mesh.material.opacity = 1.0;
|
||||
mesh.material.transparent = false;
|
||||
mesh.scale.set(1.5, 1.5, 1.5);
|
||||
} else if (isConnected) {
|
||||
mesh.material.color.setHex(0x89b4fa);
|
||||
mesh.material.emissive.setHex(0x89b4fa);
|
||||
mesh.material.emissiveIntensity = 0.3;
|
||||
mesh.material.opacity = 1.0;
|
||||
mesh.material.transparent = false;
|
||||
mesh.scale.set(1.1, 1.1, 1.1);
|
||||
} else {
|
||||
mesh.material.color.setHex(0x313244);
|
||||
mesh.material.color.setHex(0x6c7086);
|
||||
mesh.material.emissiveIntensity = 0;
|
||||
mesh.material.opacity = 0.2;
|
||||
mesh.material.opacity = 0.25;
|
||||
mesh.material.transparent = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 4. Click-to-navigate on 3D Graph
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.setupGraphClickHandler = function() {
|
||||
if (!window.graphRenderer || !window.graphScene || !window.graphCamera) {
|
||||
setTimeout(HermesCustom.setupGraphClickHandler, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
const raycaster = new THREE.Raycaster();
|
||||
const mouse = new THREE.Vector2();
|
||||
|
||||
window.graphRenderer.domElement.addEventListener('click', (event) => {
|
||||
const rect = window.graphRenderer.domElement.getBoundingClientRect();
|
||||
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
|
||||
raycaster.setFromCamera(mouse, window.graphCamera);
|
||||
const intersects = raycaster.intersectObjects(
|
||||
Object.values(window.graphNodeObjects || {})
|
||||
);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
const nodeId = intersects[0].object.userData.nodeId;
|
||||
if (nodeId && typeof window.loadFile === 'function') {
|
||||
window.loadFile(nodeId);
|
||||
window.history.pushState({}, '', `?file=${encodeURIComponent(nodeId)}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log('[HermesCustom] Graph click handler attached');
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 5. URL-based navigation
|
||||
// 6. URL navigation
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.updateURL = function(path) {
|
||||
const newURL = `?file=${encodeURIComponent(path)}`;
|
||||
const newURL = '?file=' + encodeURIComponent(path);
|
||||
window.history.pushState({}, '', newURL);
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 6. loadFile hook
|
||||
// 7. loadFile hook
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.hookLoadFile = function() {
|
||||
@@ -245,21 +405,19 @@
|
||||
window.loadFile = function(path) {
|
||||
HermesCustom._lastLoadedFile = path;
|
||||
HermesCustom.updateURL(path);
|
||||
// Close tree sidebar after file selection (mobile UX)
|
||||
if (window.innerWidth <= BREAKPOINTS.mobile) {
|
||||
HermesCustom.closeTreeSidebar();
|
||||
}
|
||||
const result = originalLoadFile.apply(this, arguments);
|
||||
// Close sidebar on mobile after file selection
|
||||
const sidebar = document.querySelector('.vault-sidebar');
|
||||
const backdrop = document.querySelector('.hermes-sidebar-backdrop');
|
||||
if (sidebar) sidebar.classList.remove('hermes-sidebar-open');
|
||||
if (backdrop) backdrop.classList.remove('hermes-backdrop-visible');
|
||||
setTimeout(HermesCustom.highlightCurrentNode, 300);
|
||||
return result;
|
||||
};
|
||||
window.loadFile._hermesPatched = true;
|
||||
console.log('[HermesCustom] loadFile() hooked');
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 7. Graph data fetch
|
||||
// 8. Graph data fetch
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.loadGraphData = function() {
|
||||
@@ -267,7 +425,7 @@
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
HermesCustom._graphData = data;
|
||||
console.log(`[HermesCustom] Loaded graph: ${data.nodes.length} nodes, ${data.edges.length} edges`);
|
||||
console.log('[HermesCustom] Graph data: ' + data.nodes.length + ' nodes, ' + data.edges.length + ' edges');
|
||||
HermesCustom.highlightCurrentNode();
|
||||
})
|
||||
.catch(err => console.warn('[HermesCustom] Graph fetch failed:', err));
|
||||
@@ -278,18 +436,14 @@
|
||||
// ============================================================
|
||||
|
||||
HermesCustom.init = function() {
|
||||
console.log('[HermesCustom] init v3 (CSS external + responsive-layout)');
|
||||
HermesCustom.injectResponsiveCSS();
|
||||
console.log('[HermesCustom] init v5 (mobile-toggle-pattern)');
|
||||
HermesCustom.injectUI();
|
||||
HermesCustom.hookLoadFile();
|
||||
HermesCustom.applyLayout();
|
||||
HermesCustom.setupResizeHandler();
|
||||
HermesCustom.loadGraphData();
|
||||
setTimeout(() => {
|
||||
HermesCustom.setupGraphClickHandler();
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
// Auto-init
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', HermesCustom.init);
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user