From b32756932bde97fe9f982b5ad25bfd6cc98884cb Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 14:17:39 +0800
Subject: [PATCH] feat: initialize example images manager on app startup and
 streamline event listener setup

---
 static/js/core.js                          |  3 ++
 static/js/managers/ExampleImagesManager.js | 32 +++++++++++++++-------
 templates/components/progress_panel.html   | 27 +-----------------
 3 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/static/js/core.js b/static/js/core.js
index 2fdf4e35..337674d9 100644
--- a/static/js/core.js
+++ b/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;
         
diff --git a/static/js/managers/ExampleImagesManager.js b/static/js/managers/ExampleImagesManager.js
index 19ca8795..59b21ae1 100644
--- a/static/js/managers/ExampleImagesManager.js
+++ b/static/js/managers/ExampleImagesManager.js
@@ -10,20 +10,32 @@ class ExampleImagesManager {
         this.startTime = null;
         this.progressPanel = null;
         
-        // Wait for DOM before initializing event listeners
-        document.addEventListener('DOMContentLoaded', () => {
-            this.initEventListeners();
-            // Initialize progress panel reference
-            this.progressPanel = document.getElementById('exampleImagesProgress');
-        });
-        
-        // Initialize download path field
+        // Initialize download path field and check download status
         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');
diff --git a/templates/components/progress_panel.html b/templates/components/progress_panel.html
index 78553814..74b57e21 100644
--- a/templates/components/progress_panel.html
+++ b/templates/components/progress_panel.html
@@ -45,29 +45,4 @@
             <div id="downloadErrors" class="error-list"></div>
         </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>
\ No newline at end of file
+</div>
\ No newline at end of file