coulomb/timeline-svg
2
0
Fork 0
generated from coulomb/repo-seed
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: initialize file editor and remove broken individual file uploads

Browse Source 
Changes:
- Add fileEditor.init() call in DOMContentLoaded to activate edit buttons
- Remove individual file upload inputs (projectInput, svgInput, cssInput, csvInput)
  that had CORS issues when loading project configurations
- Keep only the folder picker which works reliably
- Update UI to emphasize folder picker as the primary loading method
- Remove corresponding event handlers from engine.js
- Remove tests for individual file upload functionality

The folder picker loads all project files in one operation without CORS
issues, while individual file uploads failed when trying to load
referenced files (CSV, SVG, CSS) from the project.json.

All 56 tests passing.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Bernd Worsch
2026-01-23 23:14:57 +01:00
parent 710794de88
commit a5811040e7
3 changed files with 23 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@@ -330,34 +330,29 @@
<div id="fileManager" style="margin-bottom:16px; padding:16px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:8px;">
<h3 style="margin:0 0 12px 0; font-size:14px; font-weight:600; color:#495057;">Project Files</h3>
<!-- Quick Load: Project Folder -->
<div style="margin-bottom:16px; padding:12px; background:#e7f3ff; border:1px solid #b3d9ff; border-radius:6px;">
<div style="display:flex; align-items:center; gap:12px;">
<label class="upload-btn" style="background:#0066cc; flex-shrink:0;">
<!-- Project Folder Picker -->
<div style="margin-bottom:16px; padding:16px; background:#e7f3ff; border:2px solid #0066cc; border-radius:6px;">
<div style="text-align:center; margin-bottom:8px;">
<label class="upload-btn" style="background:#0066cc; font-size:14px; padding:10px 20px;">
<input type="file" id="folderInput" webkitdirectory directory multiple style="display:none;" />
📂 Load Project Folder
</label>
<span style="font-size:12px; color:#004080;">
Select an entire project folder to load all files automatically
</div>
<div style="text-align:center;">
<span style="font-size:13px; color:#004080; font-weight:500;">
Select your project folder to load all files automatically
</span><br>
<span style="font-size:11px; color:#0066cc;">
(project.json, template-v2.svg, style.css, sample.csv)
</span>
</div>
</div>
<div style="margin:0 0 12px 0; text-align:center; color:#6c757d; font-size:12px;">
— or load files individually —
</div>
<div class="file-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:12px; margin-bottom:16px;">
<div class="file-item">
<div class="file-header">
<span class="file-label">Project Configuration</span>
<div style="display:flex; gap:4px;">
<label class="upload-btn">
<input type="file" id="projectInput" accept=".json" style="display:none;" />
📁 Load
</label>
<button class="edit-btn" id="editProjectBtn" disabled>✏️ Edit</button>
</div>
<button class="edit-btn" id="editProjectBtn" disabled>✏️ Edit</button>
</div>
<div class="file-status">
<span id="projectFile" class="file-name">Not loaded</span>
@@ -367,13 +362,7 @@
<div class="file-item">
<div class="file-header">
<span class="file-label">SVG Template</span>
<div style="display:flex; gap:4px;">
<label class="upload-btn">
<input type="file" id="svgInput" accept=".svg" style="display:none;" />
🖼️ Load
</label>
<button class="edit-btn" id="editSvgBtn" disabled>✏️ Edit</button>
</div>
<button class="edit-btn" id="editSvgBtn" disabled>✏️ Edit</button>
</div>
<div class="file-status">
<span id="svgFile" class="file-name">Not loaded</span>
@@ -383,13 +372,7 @@
<div class="file-item">
<div class="file-header">
<span class="file-label">Stylesheet</span>
<div style="display:flex; gap:4px;">
<label class="upload-btn">
<input type="file" id="cssInput" accept=".css" style="display:none;" />
🎨 Load
</label>
<button class="edit-btn" id="editCssBtn" disabled>✏️ Edit</button>
</div>
<button class="edit-btn" id="editCssBtn" disabled>✏️ Edit</button>
</div>
<div class="file-status">
<span id="cssFile" class="file-name">Not loaded</span>
@@ -399,13 +382,7 @@
<div class="file-item">
<div class="file-header">
<span class="file-label">CSV Data</span>
<div style="display:flex; gap:4px;">
<label class="upload-btn">
<input type="file" id="csvInput" accept=".csv" style="display:none;" />
📊 Load
</label>
<button class="edit-btn" id="editCsvBtn" disabled>✏️ Edit</button>
</div>
<button class="edit-btn" id="editCsvBtn" disabled>✏️ Edit</button>
</div>
<div class="file-status">
<span id="csvFile" class="file-name">Not loaded</span>
@@ -480,6 +457,12 @@
console.log("Event handlers set up");
}
// Initialize file editor
if (window.fileEditor && typeof window.fileEditor.init === 'function') {
window.fileEditor.init();
console.log("File editor initialized");
}
// Initialize zoom functionality
if (window.svgViewer && typeof window.svgViewer.initializeZoom === 'function') {
window.svgViewer.initializeZoom();