From 98bbee18ff66ea819971ca05ba8be1d0446fe242 Mon Sep 17 00:00:00 2001
From: Tomas Dvorak <contact.dvorak@gmail.com>
Date: Wed, 28 May 2025 13:41:57 +0200
Subject: [PATCH] s

---
 admin-dashboard.html | 70 ++++++++++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 28 deletions(-)

diff --git a/admin-dashboard.html b/admin-dashboard.html
index 36223b4..603463d 100644
--- a/admin-dashboard.html
+++ b/admin-dashboard.html
@@ -742,49 +742,63 @@ window.fetch = async function(resource, init = {}) {
 };
 
 // Image handling - Drag and Drop functionality
-const dragDropArea = document.getElementById('dragDropArea');
-const uploadImageBtn = document.getElementById('uploadImageBtn');
-const bannerImage = document.getElementById('bannerImage');
-
-// Click on drag area to select file
-dragDropArea.addEventListener('click', function() {
-    bannerImage.click();
-});
-
-// Click on upload button to select file
-uploadImageBtn.addEventListener('click', function() {
-    bannerImage.click();
-});
+let dragDropArea, uploadImageBtn, bannerImage;
 
 // Prevent default behavior for drag events
-['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-    dragDropArea.addEventListener(eventName, preventDefaults, false);
-});
-
 function preventDefaults(e) {
     e.preventDefault();
     e.stopPropagation();
 }
 
 // Visual feedback when dragging over the area
-['dragenter', 'dragover'].forEach(eventName => {
-    dragDropArea.addEventListener(eventName, highlight, false);
-});
-
-['dragleave', 'drop'].forEach(eventName => {
-    dragDropArea.addEventListener(eventName, unhighlight, false);
-});
-
 function highlight() {
-    dragDropArea.classList.add('dragover');
+    if (dragDropArea) dragDropArea.classList.add('dragover');
 }
 
 function unhighlight() {
-    dragDropArea.classList.remove('dragover');
+    if (dragDropArea) dragDropArea.classList.remove('dragover');
 }
 
+// Initialize drag and drop functionality
+function initDragAndDrop() {
+    dragDropArea = document.getElementById('dragDropArea');
+    uploadImageBtn = document.getElementById('uploadImageBtn');
+    bannerImage = document.getElementById('bannerImage');
+
+    if (!dragDropArea || !uploadImageBtn || !bannerImage) return;
+
+    // Click on drag area to select file
+    dragDropArea.addEventListener('click', function() {
+        bannerImage.click();
+    });
+
+    // Click on upload button to select file
+    uploadImageBtn.addEventListener('click', function() {
+        bannerImage.click();
+    });
+
+    // Prevent default behavior for drag events
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dragDropArea.addEventListener(eventName, preventDefaults, false);
+    });
+
+    // Visual feedback when dragging over the area
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dragDropArea.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        dragDropArea.addEventListener(eventName, unhighlight, false);
+    });
+
+    // Handle dropped files
+    dragDropArea.addEventListener('drop', handleDrop, false);
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', initDragAndDrop);
+
 // Handle dropped files
-dragDropArea.addEventListener('drop', handleDrop, false);
 
 function handleDrop(e) {
     const dt = e.dataTransfer;