From b0b83a1ffb977061a1bbda286d17edd3237d7677 Mon Sep 17 00:00:00 2001 From: Tobias Birmili Date: Sat, 20 Jul 2024 17:26:08 +0200 Subject: [PATCH] feat: improve drag+drop UI --- public/index.html | 49 +++++++++++++++++++++++++++++++---------------- public/script.js | 30 +++++++++++++++++++++++++++-- 2 files changed, 60 insertions(+), 19 deletions(-) diff --git a/public/index.html b/public/index.html index beca302..668e257 100644 --- a/public/index.html +++ b/public/index.html @@ -2,34 +2,49 @@ - - Image Grid Creator + + Image Grid Arranger -

Upload 8 images to arrange them in a 2x4 grid. No images will be uploaded.

-
+
- - - +
+
You can also drag and drop up to 8 images into this area!
+ +
+ \ No newline at end of file diff --git a/public/script.js b/public/script.js index 764a912..ce09423 100644 --- a/public/script.js +++ b/public/script.js @@ -2,6 +2,7 @@ const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const fileInput = document.getElementById('fileInput'); const downloadBtn = document.getElementById('downloadBtn'); +const messageContainer = document.getElementById('message-container'); const MAX_IMAGES = 8; const GRID_MAX_COLS = 4; @@ -16,7 +17,8 @@ let maxCanvasWidth, maxCanvasHeight; fileInput.addEventListener('change', handleFileSelect); downloadBtn.addEventListener('click', downloadImage); -canvas.addEventListener('dragover', (e) => e.preventDefault()); +canvas.addEventListener('dragover', handleDragOver); +canvas.addEventListener('dragleave', handleDragLeave); canvas.addEventListener('drop', handleDrop); window.addEventListener('resize', handleResize); @@ -39,6 +41,7 @@ function handleFileSelect(event) { repositionImages(); drawImages(); enableDragAndDrop(); + updateMessageVisibility(); }); } @@ -94,8 +97,19 @@ function repositionImages() { })); } +function handleDragOver(e) { + e.preventDefault(); + canvas.classList.add('drag-over'); +} + +function handleDragLeave(e) { + e.preventDefault(); + canvas.classList.remove('drag-over'); +} + function handleDrop(e) { e.preventDefault(); + canvas.classList.remove('drag-over'); const files = Array.from(e.dataTransfer.files); if (images.length + files.length > MAX_IMAGES) { alert(`Please upload a total of up to ${MAX_IMAGES} images.`); @@ -111,6 +125,7 @@ function handleDrop(e) { repositionImages(); drawImages(); enableDragAndDrop(); + updateMessageVisibility(); }); } @@ -284,4 +299,15 @@ function downloadImage() { link.download = 'combined-image.png'; link.href = originalCanvas.toDataURL(); link.click(); -} \ No newline at end of file +} + +function updateMessageVisibility() { + if (images.length === 0) { + messageContainer.style.display = 'block'; + } else { + messageContainer.style.display = 'none'; + } +} + +// Initialize message visibility +updateMessageVisibility(); \ No newline at end of file