Kylian Schmidt
dbd67f6039
- Fix template rendering by storing rendered HTML in variable before writing This resolves subdirectories not appearing in navigation despite being correctly detected and included in template variables - Add missing template variables (paths.work_dir) to gallery config - Add CGI refresh handler for web-based gallery regeneration - Improve PDF export functionality with better error handling - Add ESC key shortcut documentation for exiting selection mode - Enhanced export manager with proper dependency checking Fixes issue where new subdirectories were detected but not displayed in browser navigation due to incomplete template rendering.
205 lines
6.8 KiB
HTML
205 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>{{ title }}</title>
|
||
<link rel="stylesheet" href="{{ assets_path }}/css/main.css">
|
||
</head>
|
||
<body>
|
||
<!-- Main Content -->
|
||
<h1>{{ title }}</h1>
|
||
|
||
<!-- Search Bar -->
|
||
<div class="search-container">
|
||
<input type="text" class="search-box" id="searchBox" placeholder="Search plots..." />
|
||
<span class="search-icon">🔍</span>
|
||
<div class="search-results" id="searchResults"></div>
|
||
</div>
|
||
|
||
<!-- Breadcrumb Navigation -->
|
||
<div class="breadcrumb" id="breadcrumb"></div>
|
||
|
||
<!-- Navigation Buttons -->
|
||
<div class="navigation">
|
||
<button class="nav-btn" onclick="window.history.back()">
|
||
← Back
|
||
</button>
|
||
{% if relpath != "." %}
|
||
<a href="../index.html" class="nav-btn">
|
||
↑ Parent Directory
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Folder Tree -->
|
||
<div class="folder-tree" id="folderTree"></div>
|
||
|
||
<!-- Plot Grid -->
|
||
<div class="grid">
|
||
{% for item in items %}
|
||
<div class="grid-item">
|
||
<a href="{{ item.pdf_href }}">
|
||
<img src="{{ item.png_href }}" alt="{{ item.name }}">
|
||
</a>
|
||
<button class="metadata-btn" onclick="event.stopPropagation(); showMetadataPopup(this, '{{ item.name|e }}', {{ (item.metadata or {})|tojson }})" title="View metadata">
|
||
⋯
|
||
</button>
|
||
<div class="plot-name" title="{{ item.name }}">{{ item.name }}</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- Subdirectories -->
|
||
{% if subdirs %}
|
||
<h2>Subdirectories</h2>
|
||
<ul>
|
||
{% for sub in subdirs %}
|
||
<li><a href="{{ sub }}/index.html">📁 {{ sub }}</a></li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
|
||
<!-- Recent Plots Sidebar -->
|
||
<div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
|
||
<div class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<h3 class="sidebar-title">Recent Plots</h3>
|
||
<button class="sidebar-close" onclick="toggleSidebar()">×</button>
|
||
</div>
|
||
<div class="sidebar-content" id="sidebarContent">
|
||
<div style="text-align: center; color: var(--breadcrumb-color); margin: 2rem 0;">
|
||
No recent plots yet
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Action Buttons -->
|
||
<div class="floating-buttons">
|
||
<button class="floating-btn sidebar-toggle" onclick="toggleSidebar()" id="sidebarToggle" title="Recent Plots (Ctrl+R)">
|
||
📋
|
||
</button>
|
||
<button class="floating-btn compare-toggle" onclick="app.toggleCompareMode()" id="compareToggle" title="Compare Plots (Ctrl+C)">
|
||
⚖️
|
||
</button>
|
||
<button class="floating-btn theme-toggle" onclick="toggleTheme()" id="themeToggle" title="Toggle Theme (Ctrl+T)">
|
||
☀️
|
||
</button>
|
||
<button class="floating-btn refresh-btn" onclick="refreshGallery()" id="refreshBtn" title="Regenerate Gallery (F5)">
|
||
🔄
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Keyboard Shortcuts Help -->
|
||
<div class="shortcuts-help" id="shortcutsHelp">
|
||
<h4>Keyboard Shortcuts</h4>
|
||
<div class="shortcut-item">
|
||
<span>Search</span>
|
||
<span class="shortcut-key">Ctrl+K</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Recent plots</span>
|
||
<span class="shortcut-key">Ctrl+R</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Compare plots</span>
|
||
<span class="shortcut-key">Ctrl+C</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Export plots</span>
|
||
<span class="shortcut-key">Ctrl+E</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Exit selection mode</span>
|
||
<span class="shortcut-key">Esc</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Refresh</span>
|
||
<span class="shortcut-key">F5</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Toggle theme</span>
|
||
<span class="shortcut-key">Ctrl+T</span>
|
||
</div>
|
||
<div class="shortcut-item">
|
||
<span>Help</span>
|
||
<span class="shortcut-key">?</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gallery Statistics -->
|
||
<div class="gallery-stats" id="galleryStats">
|
||
<div class="stats-item">
|
||
<span class="stats-label">📊 Files:</span>
|
||
<span class="stats-value" id="fileCount">0</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">📁 Folders:</span>
|
||
<span class="stats-value" id="folderCount">0</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">💾 Size:</span>
|
||
<span class="stats-value" id="totalSize">0 KB</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">🕒 Updated:</span>
|
||
<span class="stats-value" id="lastUpdated">Now</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Plot Comparison Overlay -->
|
||
<div class="comparison-overlay" id="comparisonOverlay">
|
||
<div class="comparison-container">
|
||
<div class="comparison-header">
|
||
<h2 class="comparison-title">Plot Comparison</h2>
|
||
<button class="comparison-close" onclick="app.closeComparison()" title="Close Comparison (Esc)">×</button>
|
||
</div>
|
||
<div class="comparison-content">
|
||
<div class="comparison-panel">
|
||
<div class="comparison-panel-header">
|
||
<span class="comparison-panel-title" id="leftPlotTitle">Plot A</span>
|
||
<button class="comparison-replace-btn" onclick="app.replacePlot('left')" id="leftReplaceBtn">Replace</button>
|
||
</div>
|
||
<div class="comparison-panel-content">
|
||
<div class="comparison-plot-container" id="leftPlotContainer">
|
||
<div class="comparison-placeholder" onclick="app.selectPlotForComparison('left')">
|
||
📊 Click to select first plot
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comparison-panel">
|
||
<div class="comparison-panel-header">
|
||
<span class="comparison-panel-title" id="rightPlotTitle">Plot B</span>
|
||
<button class="comparison-replace-btn" onclick="app.replacePlot('right')" id="rightReplaceBtn">Replace</button>
|
||
</div>
|
||
<div class="comparison-panel-content">
|
||
<div class="comparison-plot-container" id="rightPlotContainer">
|
||
<div class="comparison-placeholder" onclick="app.selectPlotForComparison('right')">
|
||
📊 Click to select second plot
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Configuration for JavaScript -->
|
||
<script>
|
||
// Configuration object for the gallery app
|
||
window.galleryConfig = {
|
||
searchDebounceMs: {{ ui.search_debounce_ms|default(300) }},
|
||
maxRecentPlots: {{ ui.max_recent_plots|default(20) }},
|
||
workDir: "{{ paths.work_dir }}",
|
||
stats: {% if stats %}{{ stats|tojson }}{% else %}null{% endif %}
|
||
};
|
||
</script>
|
||
|
||
<!-- Metadata Popup Script -->
|
||
<script src="{{ assets_path }}/js/metadata-popup.js"></script>
|
||
|
||
<!-- Main JavaScript Application -->
|
||
<script type="module" src="{{ assets_path }}/js/main.js"></script>
|
||
</body>
|
||
</html>
|