double.tha.fresh.ness

redpeppers-01 · Jan 29, 2025 · 2578fa5 · 2578fa5
1 parent 1fb58c1
commit 2578fa5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -52,12 +52,13 @@
    - Click and drag on the image to apply color
 
 3. **Save Your Work**
-   - Click the **Save** button to upload your colored image to the server and download it locally
+   - Click the **Save** button to download your colored image locally
+   - Your work is also automatically saved in your browser's local storage
 
 4. **Share Your Creation**
-   - Click the **Share** button to upload your image to the server
-   - If your browser supports the Web Share API, a share dialog will appear
-   - If the Web Share API is not supported, a notification will notify you that the image has been saved
+   - Click the **Share** button to upload your colored image to the server
+   - Your creation will be saved in the gallery
+   - You can find shared images in the gallery section below
 
 5. **View Saved Images**
    - Scroll down to the **Saved Images** section to view all saved creations as thumbnails

diff --git a/static/js/jl-coloringBook.js b/static/js/jl-coloringBook.js
@@ -15,6 +15,7 @@ customElements.define('jl-coloringbook', class extends HTMLElement
         jQuery(this).css('display','block');
         //default colors
         this.paletteColors=[
+                'rgba(0, 0, 0, 0.8)',    // Add black as first color
                 'rgba(87, 87, 87,0.8)',
                 'rgba(220, 35, 35,0.8)',
                 'rgba(42, 75, 215,0.8)',
@@ -422,36 +423,13 @@ customElements.define('jl-coloringbook', class extends HTMLElement
             // Get the image data as a Data URL
             let dataUrl = await this.getImageData();
 
-            // Convert Data URL to Blob
-            let response = await fetch(dataUrl);
-            let blob = await response.blob();
-
-            // Create FormData and append the image file
-            let formData = new FormData();
-            formData.append('image', blob, 'ColoringBook.png');
-
-            // Send the image to the server
-            let serverUrl = '/upload-image';
-            let uploadResponse = await fetch(serverUrl, {
-                method: 'POST',
-                body: formData
-            });
-
-            let result = await uploadResponse.json();
-
-            if (uploadResponse.ok && result.status === 'success') {
-                console.log('Image saved on server:', result.filename);
-                // Download the file locally
-                let downloadLink = jQuery(`<a download="ColoringBook.png">Download</a>`).attr('href', dataUrl).appendTo(this.wrapper);
-                downloadLink[0].click();
-                downloadLink.remove();
-
-                // Show notification instead of alert
-                $(document).trigger('showNotification', ['Image saved to your device']);
-            } else {
-                console.error('Server error:', result.message);
-                $(document).trigger('showNotification', ['Failed to save image: ' + result.message]);
-            }
+            // Download the file locally
+            let downloadLink = jQuery(`<a download="ColoringBook.png">Download</a>`).attr('href', dataUrl).appendTo(this.wrapper);
+            downloadLink[0].click();
+            downloadLink.remove();
+
+            // Show notification
+            $(document).trigger('showNotification', ['Image saved to your device']);
 
         } catch (error) {
             console.error('Error saving image:', error);
@@ -468,42 +446,36 @@ customElements.define('jl-coloringbook', class extends HTMLElement
 
         this.isSharing = true;
         const shareButton = jQuery(`.shareButton`, this.shadowRoot);
-        shareButton.prop('disabled', true); // Disable the button
+        shareButton.prop('disabled', true);
 
         try {
-            // Step 1: Get image data
+            // Get image data and upload to server
             let dataUrl = await this.getImageData();
-            // Step 2: Convert Data URL to Blob
             let response = await fetch(dataUrl);
             let blob = await response.blob();
-            // Step 3: Create FormData and append the image file
             let formData = new FormData();
             formData.append('image', blob, 'ColoringBook.png');
 
-            // Step 4: Send the image to the server
-            let serverUrl = '/upload-image';
-            let uploadResponse = await fetch(serverUrl, {
+            // Send to server
+            let uploadResponse = await fetch('/upload-image', {
                 method: 'POST',
                 body: formData
             });
 
             let result = await uploadResponse.json();
 
             if (uploadResponse.ok && result.status === 'success') {
-                console.log('Image saved on server:', result.filename);
-                // Trigger custom events for refreshing saved images and showing notification
                 $(document).trigger('refreshSavedImages');
-                $(document).trigger('showNotification', ['Thanks for sharing your masterpiece!']);
+                $(document).trigger('showNotification', ['Added to gallery!']);
             } else {
                 console.error('Server error:', result.message);
-                $(document).trigger('showNotification', ['Failed to share image on the server: ' + result.message]);
+                $(document).trigger('showNotification', ['Failed to share image: ' + result.message]);
             }
 
         } catch (error) {
             console.error('Error sharing:', error);
             $(document).trigger('showNotification', ['An error occurred while sharing the image.']);
         } finally {
-            // Re-enable sharing after completion (success or failure)
             this.isSharing = false;
             shareButton.prop('disabled', false);
         }

diff --git a/templates/index.html b/templates/index.html
@@ -64,6 +64,15 @@ <h2>Saved Images</h2>
         // Update the year in the footer
         $('#current-year').text(new Date().getFullYear());
 
+        // Function to show notification
+        function showNotification(message) {
+            var notification = $('#notification');
+            notification.text(message).fadeIn();
+            setTimeout(function() {
+                notification.fadeOut();
+            }, 3000);
+        }
+
         // Function to load saved images for a specific page
         function loadSavedImages(page) {
             $.ajax({
@@ -116,15 +125,6 @@ <h2>Saved Images</h2>
             history.pushState({ page: page }, '', '?page=' + page);
         });
 
-        // Function to show notification
-        function showNotification(message) {
-            var notification = $('#notification');
-            notification.text(message).fadeIn();
-            setTimeout(function() {
-                notification.fadeOut();
-            }, 3000);
-        }
-
         // Listen for custom event to refresh saved images
         $(document).on('refreshSavedImages', function() {
             loadSavedImages(1); // Refresh to the first page