feat: initialize example images manager on app startup and streamline event listener setup

static/js/core.js

@@ -35,6 +35,9 @@ export class AppCore {
         initTheme();
         initBackToTop();
         
+        // Initialize the example images manager
+        exampleImagesManager.initialize();
+        
         // Mark as initialized
         this.initialized = true;
         

static/js/managers/ExampleImagesManager.js

@@ -10,20 +10,32 @@ class ExampleImagesManager {
         this.startTime = null;
         this.progressPanel = null;
         
-        // Wait for DOM before initializing event listeners
+        // Initialize download path field and check download status
-        document.addEventListener('DOMContentLoaded', () => {
-            this.initEventListeners();
-            // Initialize progress panel reference
-            this.progressPanel = document.getElementById('exampleImagesProgress');
-        });
-        
-        // Initialize download path field
         this.initializePathOptions();
-        
-        // Check download status on page load
         this.checkDownloadStatus();
     }
     
+    // Initialize the manager
+    initialize() {
+        // Initialize event listeners
+        this.initEventListeners();
+        
+        // Initialize progress panel reference
+        this.progressPanel = document.getElementById('exampleImagesProgress');
+        
+        // Initialize progress panel button handlers
+        const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
+        const collapseBtn = document.getElementById('collapseProgressBtn');
+        
+        if (pauseBtn) {
+            pauseBtn.onclick = () => this.pauseDownload();
+        }
+        
+        if (collapseBtn) {
+            collapseBtn.onclick = () => this.toggleProgressPanel();
+        }
+    }
+    
     // Initialize event listeners for buttons
     initEventListeners() {
         const downloadBtn = document.getElementById('exampleImagesDownloadBtn');

templates/components/progress_panel.html

@@ -46,28 +46,3 @@
         </div>
     </div>
 </div>
-
-<script>
-    // Initialize button onclick handlers when DOM is fully loaded
-    document.addEventListener('DOMContentLoaded', function() {
-        const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
-        const collapseBtn = document.getElementById('collapseProgressBtn');
-        
-        // Make window.exampleImagesManager globally available
-        if (window.exampleImagesManager === undefined && typeof exampleImagesManager !== 'undefined') {
-            window.exampleImagesManager = exampleImagesManager;
-        }
-        
-        if (pauseBtn && window.exampleImagesManager) {
-            pauseBtn.onclick = () => window.exampleImagesManager.pauseDownload();
-        }
-        
-        if (collapseBtn && window.exampleImagesManager) {
-            collapseBtn.onclick = () => {
-                if (window.exampleImagesManager.toggleProgressPanel) {
-                    window.exampleImagesManager.toggleProgressPanel();
-                }
-            };
-        }
-    });
-</script>