Merge branch 'release/0.1.1' into main

Author: EduardoJM

package.json

@@ -1,6 +1,6 @@
 {
   "name": "django-image-uploader-widget",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "index.js",
   "repository": "https://github.com/EduardoJM/django-image-uploader-widget.git",
   "author": "Eduardo Oliveira <[email protected]>",

setup.py

@@ -8,7 +8,7 @@
 
 setup(
     name='django-image-uploader-widget',
-    version='0.1.0',
+    version='0.1.1',
     description='Simple Image Uploader Widget for Django-Admin',
     long_description=readme,
     long_description_content_type='text/markdown',

src/ImageUploaderInline.ts

@@ -14,6 +14,7 @@ class ImageUploaderInline {
     tempFileInput: HTMLInputElement | null = null;
     next: number = 0;
     dragging: boolean = false;
+    canPreview: boolean = true;
 
     constructor(element: HTMLElement) {
         this.element = element;
@@ -171,6 +172,19 @@ class ImageUploaderInline {
             this.updateEmpty();
             return;
         }
+        if (target.closest('.iuw-preview-icon')) {
+            let image = item.querySelector('img');
+            if (image) {
+                image = image.cloneNode(true) as HTMLImageElement;
+                const modal = this.createPreviewModal(image);
+                setTimeout(() => {
+                    modal.classList.add('visible');
+                    modal.classList.remove('hide');
+                    document.body.style.overflow = 'hidden';
+                }, 50);
+                return;
+            }
+        }
         var fileInput = item.querySelector('input[type=file]') as HTMLInputElement;
         if (e.target === fileInput) {
             return;
@@ -194,6 +208,47 @@ class ImageUploaderInline {
         }
     }
 
+    closePreviewModal = () => {
+        document.body.style.overflow = 'auto';
+        const modal = document.getElementById('iuw-modal-element');
+        if (modal) {
+            modal.classList.remove('visible');
+            modal.classList.add('hide');
+            setTimeout(() => {
+                modal.parentElement.removeChild(modal);
+            }, 300);
+        }
+    }
+
+    onModalClick = (e: Event) => {
+        if (e && e.target) {
+            const element = e.target as HTMLElement;
+            if (element.closest('img.iuw-modal-image-preview-item')) {
+                return;
+            }
+        }
+        this.closePreviewModal();
+    }
+
+    createPreviewModal = (image: HTMLImageElement) : HTMLElement => {
+        image.className = '';
+        image.classList.add('iuw-modal-image-preview-item');
+
+        const modal = document.createElement('div');
+        modal.id = 'iuw-modal-element';
+        modal.classList.add('iuw-modal', 'hide');
+        modal.addEventListener('click', this.onModalClick);
+        
+        const preview = document.createElement('div');
+        preview.classList.add('iuw-modal-image-preview');
+        preview.innerHTML = '<span class="iuw-modal-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg></span>';
+        preview.appendChild(image);
+        modal.appendChild(preview);
+        
+        document.body.appendChild(modal);
+        return modal;
+    }
+
     appendItem(element: Element, url: string) {
         let delete_icon: Element | null = null;
         const related = element.closest('.inline-related');
@@ -202,6 +257,15 @@ class ImageUploaderInline {
             delete_icon.classList.add('iuw-delete-icon');
             delete_icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>';
         }
+        if (this.canPreview) {
+            const span = document.createElement('span');
+            span.classList.add('iuw-preview-icon');
+            if (related.getAttribute('data-candelete') !== 'true') {
+                span.classList.add('iuw-only-preview');
+            }
+            span.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"></path><path xmlns="http://www.w3.org/2000/svg" d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"></path><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"></path></svg>';
+            element.appendChild(span);
+        }
         const img = document.createElement('img');
         img.src = url;
         element.appendChild(img);

src/ImageUploaderWidget.scss

@@ -2,3 +2,4 @@
 @import "./styles/mixins";
 @import "./styles/widget";
 @import "./styles/inline";
+@import "./styles/modal"

src/ImageUploaderWidget.ts

@@ -6,6 +6,7 @@ class ImageUploaderWidget {
     dropLabel: HTMLElement;
     canDelete: boolean = false;
     dragging: boolean = false;
+    canPreview: boolean = true;
 
     id: string;
 
@@ -77,10 +78,51 @@ class ImageUploaderWidget {
         this.element.classList.remove('drop-zone');
     }
 
+    closePreviewModal = () => {
+        document.body.style.overflow = 'auto';
+        const modal = document.getElementById('iuw-modal-element');
+        if (modal) {
+            modal.classList.remove('visible');
+            modal.classList.add('hide');
+            setTimeout(() => {
+                modal.parentElement.removeChild(modal);
+            }, 300);
+        }
+    }
+
+    onModalClick = (e: Event) => {
+        if (e && e.target) {
+            const element = e.target as HTMLElement;
+            if (element.closest('img.iuw-modal-image-preview-item')) {
+                return;
+            }
+        }
+        this.closePreviewModal();
+    }
+
+    createPreviewModal = (image: HTMLImageElement) : HTMLElement => {
+        image.className = '';
+        image.classList.add('iuw-modal-image-preview-item');
+
+        const modal = document.createElement('div');
+        modal.id = 'iuw-modal-element';
+        modal.classList.add('iuw-modal', 'hide');
+        modal.addEventListener('click', this.onModalClick);
+        
+        const preview = document.createElement('div');
+        preview.classList.add('iuw-modal-image-preview');
+        preview.innerHTML = '<span class="iuw-modal-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg></span>';
+        preview.appendChild(image);
+        modal.appendChild(preview);
+        
+        document.body.appendChild(modal);
+        return modal;
+    }
+
     onImagePreviewClick = (e: Event) => {
         if (e && e.target) {
             const targetElement = e.target as HTMLElement;
-            if (e && e.target && targetElement.closest('.iuw-delete-icon')) {
+            if (targetElement.closest('.iuw-delete-icon')) {
                 const element = targetElement.closest('.iuw-image-preview');
                 element.parentElement.removeChild(element);
                 this.checkboxInput.checked = true;
@@ -90,6 +132,20 @@ class ImageUploaderWidget {
                 this.renderWidget();
                 return;
             }
+            if (targetElement.closest('.iuw-preview-icon')) {
+                const element = targetElement.closest('.iuw-image-preview');
+                let image = element.querySelector('img');
+                if (image) {
+                    image = image.cloneNode(true) as HTMLImageElement;
+                    const modal = this.createPreviewModal(image);
+                    setTimeout(() => {
+                        modal.classList.add('visible');
+                        modal.classList.remove('hide');
+                        document.body.style.overflow = 'hidden';
+                    }, 50);
+                    return;
+                }
+            }
         }
         this.fileInput.click();
     }
@@ -113,6 +169,17 @@ class ImageUploaderWidget {
             span.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>';
             preview.appendChild(span);
         }
+
+        if (this.canPreview) {
+            const span = document.createElement('span');
+            span.classList.add('iuw-preview-icon');
+            if (!this.canDelete) {
+                span.classList.add('iuw-only-preview');
+            }
+            span.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"></path><path xmlns="http://www.w3.org/2000/svg" d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"></path><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"></path></svg>';
+            preview.appendChild(span);
+        }
+
         return preview;
     }
 

src/styles/_mixins.scss

@@ -205,7 +205,8 @@
         object-position: center;
     }
 
-    .iuw-delete-icon {
+    .iuw-delete-icon,
+    .iuw-preview-icon {
         /* shape */
         width: 32px;
         height: 32px;
@@ -237,15 +238,18 @@
             transform: none;
             transition: transform 0.3s ease;
         }
-    }
 
-    &:hover {
-        .iuw-delete-icon {
+        &:hover {
             opacity: 1;
 
             svg {
                 transform: scale(1.3);
             }
         }
     }
+
+    .iuw-preview-icon:not(.iuw-only-preview) {
+        top: 32px;
+        border-radius: 0;
+    }
 }

src/styles/_modal.scss

@@ -0,0 +1,81 @@
+#iuw-modal-element {
+    /* position */
+    position: fixed;
+    z-index: 150;
+    left: 0;
+    top: 0;
+
+    /* size */
+    width: 100%;
+    height: 100vh;
+
+    /* styles */
+    background: var(--iuw-modal-overlay);
+
+    /* behaviour */
+    user-select: none;
+    cursor: pointer;
+
+    /* display */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* animations */
+    &.visible {
+        transition: opacity 0.3s;
+    }
+    &.hide {
+        transition: opacity 0.3s;
+        opacity: 0;
+    }
+
+    .iuw-modal-image-preview {
+        width: 90%;
+        height: 80%;
+
+        position: relative;
+
+        img {
+            background: var(--iuw-modal-image-background);
+
+            width: 100%;
+            height: 100%;
+
+            object-fit: contain;
+            object-position: center;
+            
+            cursor: default;
+        }
+
+        .iuw-modal-close {
+            position: absolute;
+            right: 0;
+            top: 0;
+            transform: translate(50%, -50%);
+
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+            background: var(--iuw-modal-closebutton-background);
+            filter: drop-shadow(0 0 5px var(--iuw-modal-closebutton-shadow));
+
+            svg {
+                width: 18px;
+                height: auto;
+                fill: var(--iuw-modal-closebutton-color);
+            }
+
+            @media (max-width: 768px) {
+                transform: none;
+                box-shadow: none;
+                border-radius: unset;
+            }
+        }
+    }
+}

src/styles/_variables.scss

@@ -9,8 +9,29 @@ body {
     --iuw-image-preview-shadow: rgba(0, 0, 0, 0.3);
     --iuw-add-image-background: #EFEFEF;
     --iuw-add-image-color: #AAA;
+    
+    --iuw-modal-overlay: rgba(0, 0, 0, 0.6);
+    --iuw-modal-image-background: #FFF;
+    --iuw-modal-closebutton-background: #FFF;
+    --iuw-modal-closebutton-color: #333;
+    --iuw-modal-closebutton-shadow: rgba(0, 0, 0, 0.2);
 
     @media (prefers-color-scheme: dark) {
+        --iuw-background: #121212;
+        --iuw-border-color: #CCC;
+        --iuw-color: #333;
+        --iuw-placeholder-text-color: #AAA;
+        --iuw-placeholder-destak-color: #417690;
+        --iuw-dropzone-background: rgba(0, 0, 0, 0.8);
+        --iuw-image-preview-border: #333;
+        --iuw-image-preview-shadow: rgba(0, 0, 0, 0.3);
+        --iuw-add-image-background: #333;
+        --iuw-add-image-color: #CCC;
 
+        --iuw-modal-overlay: rgba(0, 0, 0, 0.6);
+        --iuw-modal-image-background: #FFF;
+        --iuw-modal-closebutton-background: #FFF;
+        --iuw-modal-closebutton-color: #333;
+        --iuw-modal-closebutton-shadow: rgba(0, 0, 0, 0.2);
     }
 }