feat(cropper): add aspect ratio options (1:1, 4:3, 16:9, free) and fix styling

js/components/image-cropper.js

@@ -0,0 +1,389 @@
+/**
+ * Image Cropper Component
+ * Uses Cropper.js for image cropping with square aspect ratio
+ */
+
+import { t } from '../i18n.js'
+
+// Load Cropper.js dynamically (self-hosted for privacy)
+let cropperLoaded = false
+async function loadCropperJS() {
+    if (cropperLoaded) return
+    
+    // Load CSS
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = '/css/vendor/cropper.min.css'
+    document.head.appendChild(link)
+    
+    // Load JS
+    await new Promise((resolve, reject) => {
+        const script = document.createElement('script')
+        script.src = '/js/vendor/cropper.min.js'
+        script.onload = resolve
+        script.onerror = reject
+        document.head.appendChild(script)
+    })
+    
+    cropperLoaded = true
+}
+
+class ImageCropper extends HTMLElement {
+    constructor() {
+        super()
+        this.cropper = null
+        this.currentFile = null
+        this.onCropComplete = null
+        this.onCancel = null
+        this.currentAspectRatio = 1
+    }
+
+    connectedCallback() {
+        this.render()
+        this.setupEventListeners()
+    }
+
+    disconnectedCallback() {
+        this.destroyCropper()
+    }
+
+    render() {
+        this.innerHTML = /* html */`
+            <div class="cropper-overlay" id="cropper-overlay">
+                <div class="cropper-modal">
+                    <div class="cropper-header">
+                        <h3>${t('cropper.title')}</h3>
+                        <button type="button" class="cropper-close" id="cropper-close" aria-label="Close">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="18" y1="6" x2="6" y2="18"></line>
+                                <line x1="6" y1="6" x2="18" y2="18"></line>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="cropper-container">
+                        <img id="cropper-image" src="" alt="Crop preview">
+                    </div>
+                    <div class="cropper-toolbar">
+                        <span class="cropper-toolbar-label">${t('cropper.aspectRatio')}</span>
+                        <div class="cropper-ratio-buttons">
+                            <button type="button" class="cropper-ratio-btn active" data-ratio="1">1:1</button>
+                            <button type="button" class="cropper-ratio-btn" data-ratio="1.333">4:3</button>
+                            <button type="button" class="cropper-ratio-btn" data-ratio="1.778">16:9</button>
+                            <button type="button" class="cropper-ratio-btn" data-ratio="0">${t('cropper.free')}</button>
+                        </div>
+                    </div>
+                    <div class="cropper-preview-section">
+                        <span class="cropper-preview-label">${t('cropper.preview')}</span>
+                        <div class="cropper-preview" id="cropper-preview"></div>
+                    </div>
+                    <div class="cropper-actions">
+                        <button type="button" class="btn btn-outline" id="cropper-cancel">${t('cropper.cancel')}</button>
+                        <button type="button" class="btn btn-primary" id="cropper-confirm">${t('cropper.confirm')}</button>
+                    </div>
+                </div>
+            </div>
+        `
+    }
+
+    setupEventListeners() {
+        this.querySelector('#cropper-close')?.addEventListener('click', () => this.cancel())
+        this.querySelector('#cropper-cancel')?.addEventListener('click', () => this.cancel())
+        this.querySelector('#cropper-confirm')?.addEventListener('click', () => this.confirm())
+        
+        // Close on overlay click
+        this.querySelector('#cropper-overlay')?.addEventListener('click', (e) => {
+            if (e.target.id === 'cropper-overlay') this.cancel()
+        })
+        
+        // Aspect ratio buttons
+        this.querySelectorAll('.cropper-ratio-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.querySelectorAll('.cropper-ratio-btn').forEach(b => b.classList.remove('active'))
+                btn.classList.add('active')
+                const ratio = parseFloat(btn.dataset.ratio)
+                this.currentAspectRatio = ratio
+                if (this.cropper) {
+                    this.cropper.setAspectRatio(ratio === 0 ? NaN : ratio)
+                }
+            })
+        })
+    }
+
+    async open(file, onComplete, onCancel) {
+        await loadCropperJS()
+        
+        this.currentFile = file
+        this.onCropComplete = onComplete
+        this.onCancel = onCancel
+        
+        const overlay = this.querySelector('#cropper-overlay')
+        const image = this.querySelector('#cropper-image')
+        
+        // Create object URL for the file
+        const url = URL.createObjectURL(file)
+        image.src = url
+        
+        // Wait for image to load
+        await new Promise(resolve => {
+            image.onload = resolve
+        })
+        
+        // Show overlay
+        overlay.classList.add('visible')
+        document.body.style.overflow = 'hidden'
+        
+        // Reset aspect ratio buttons
+        this.currentAspectRatio = 1
+        this.querySelectorAll('.cropper-ratio-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.ratio === '1')
+        })
+        
+        // Initialize Cropper
+        this.destroyCropper()
+        this.cropper = new window.Cropper(image, {
+            aspectRatio: 1,
+            viewMode: 1,
+            dragMode: 'move',
+            autoCropArea: 0.9,
+            cropBoxMovable: true,
+            cropBoxResizable: true,
+            toggleDragModeOnDblclick: false,
+            preview: '#cropper-preview',
+            background: false
+        })
+    }
+
+    async confirm() {
+        if (!this.cropper) return
+        
+        // Calculate output dimensions based on aspect ratio
+        const maxSize = 1200
+        let width, height
+        if (this.currentAspectRatio === 0 || isNaN(this.currentAspectRatio)) {
+            // Free crop - use actual crop box dimensions, max 1200px on longest side
+            const cropData = this.cropper.getCropBoxData()
+            const scale = Math.min(1, maxSize / Math.max(cropData.width, cropData.height))
+            width = Math.round(cropData.width * scale)
+            height = Math.round(cropData.height * scale)
+        } else if (this.currentAspectRatio >= 1) {
+            width = maxSize
+            height = Math.round(maxSize / this.currentAspectRatio)
+        } else {
+            height = maxSize
+            width = Math.round(maxSize * this.currentAspectRatio)
+        }
+        
+        // Get cropped canvas
+        const canvas = this.cropper.getCroppedCanvas({
+            width,
+            height,
+            imageSmoothingEnabled: true,
+            imageSmoothingQuality: 'high'
+        })
+        
+        // Convert to blob
+        const blob = await new Promise(resolve => {
+            canvas.toBlob(resolve, 'image/jpeg', 0.9)
+        })
+        
+        // Create file from blob
+        const croppedFile = new File([blob], this.currentFile.name, {
+            type: 'image/jpeg',
+            lastModified: Date.now()
+        })
+        
+        // Create preview URL
+        const previewUrl = canvas.toDataURL('image/jpeg', 0.9)
+        
+        this.close()
+        
+        if (this.onCropComplete) {
+            this.onCropComplete(croppedFile, previewUrl)
+        }
+    }
+
+    cancel() {
+        this.close()
+        if (this.onCancel) {
+            this.onCancel()
+        }
+    }
+
+    close() {
+        const overlay = this.querySelector('#cropper-overlay')
+        overlay.classList.remove('visible')
+        document.body.style.overflow = ''
+        
+        this.destroyCropper()
+        
+        // Revoke object URL
+        const image = this.querySelector('#cropper-image')
+        if (image.src.startsWith('blob:')) {
+            URL.revokeObjectURL(image.src)
+        }
+        image.src = ''
+    }
+
+    destroyCropper() {
+        if (this.cropper) {
+            this.cropper.destroy()
+            this.cropper = null
+        }
+    }
+}
+
+customElements.define('image-cropper', ImageCropper)
+
+const style = document.createElement('style')
+style.textContent = /* css */`
+    image-cropper .cropper-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.85);
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        padding: var(--space-md);
+    }
+
+    image-cropper .cropper-overlay.visible {
+        display: flex;
+    }
+
+    image-cropper .cropper-modal {
+        background: var(--color-bg);
+        border-radius: var(--radius-lg);
+        max-width: 600px;
+        width: 100%;
+        max-height: 90vh;
+        margin: auto;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        opacity: 1;
+    }
+
+    image-cropper .cropper-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--space-md) var(--space-lg);
+        border-bottom: 1px solid var(--color-border);
+    }
+
+    image-cropper .cropper-header h3 {
+        margin: 0;
+        font-size: var(--font-size-lg);
+    }
+
+    image-cropper .cropper-close {
+        background: none;
+        border: none;
+        padding: var(--space-xs);
+        cursor: pointer;
+        color: var(--color-text-muted);
+        border-radius: var(--radius-sm);
+    }
+
+    image-cropper .cropper-close:hover {
+        background: var(--color-bg-tertiary);
+        color: var(--color-text);
+    }
+
+    image-cropper .cropper-container {
+        position: relative;
+        width: 100%;
+        height: 350px;
+        background: var(--color-bg-tertiary);
+    }
+
+    image-cropper .cropper-container img {
+        display: block;
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    image-cropper .cropper-toolbar {
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        padding: var(--space-sm) var(--space-lg);
+        border-top: 1px solid var(--color-border);
+        background: var(--color-bg-secondary);
+    }
+
+    image-cropper .cropper-toolbar-label {
+        font-size: var(--font-size-sm);
+        color: var(--color-text-muted);
+    }
+
+    image-cropper .cropper-ratio-buttons {
+        display: flex;
+        gap: var(--space-xs);
+    }
+
+    image-cropper .cropper-ratio-btn {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: var(--font-size-sm);
+        border: 1px solid var(--color-border);
+        background: var(--color-bg);
+        color: var(--color-text-secondary);
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        transition: all var(--transition-fast);
+    }
+
+    image-cropper .cropper-ratio-btn:hover {
+        background: var(--color-bg-tertiary);
+        color: var(--color-text);
+    }
+
+    image-cropper .cropper-ratio-btn.active {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+        color: var(--color-bg);
+    }
+
+    image-cropper .cropper-preview-section {
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        padding: var(--space-md) var(--space-lg);
+        border-top: 1px solid var(--color-border);
+    }
+
+    image-cropper .cropper-preview-label {
+        font-size: var(--font-size-sm);
+        color: var(--color-text-muted);
+    }
+
+    image-cropper .cropper-preview {
+        width: 80px;
+        height: 80px;
+        border-radius: var(--radius-md);
+        overflow: hidden;
+        border: 1px solid var(--color-border);
+    }
+
+    image-cropper .cropper-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--space-sm);
+        padding: var(--space-md) var(--space-lg);
+        border-top: 1px solid var(--color-border);
+    }
+
+    @media (max-width: 768px) {
+        image-cropper .cropper-container {
+            height: 280px;
+        }
+    }
+`
+document.head.appendChild(style)
+
+export { ImageCropper }

js/components/pages/page-create.js

@@ -5,6 +5,7 @@ import { directus } from '../../services/directus.js'
 import { SUPPORTED_CURRENCIES } from '../../services/currency.js'
 import '../location-picker.js'
 import '../pow-captcha.js'
+import '../image-cropper.js'
 
 const STORAGE_KEY = 'dgray_create_draft'
 
@@ -359,6 +360,8 @@ class PageCreate extends HTMLElement {
                         </div>
                     ` : ''}
                     
+                    <image-cropper id="image-cropper"></image-cropper>
+                    
                     <div class="form-actions">
                         <button type="button" class="btn btn-outline btn-lg" id="cancel-btn">
                             ${t('create.cancel')}
@@ -436,18 +439,37 @@ class PageCreate extends HTMLElement {
 
     handleImageSelect(e) {
         const files = Array.from(e.target.files)
+        this.pendingFiles = [...files]
+        this.processNextImage()
+    }
+
+    processNextImage() {
+        if (this.pendingFiles.length === 0) return
+        if (this.imageFiles.length >= 5) {
+            this.pendingFiles = []
+            return
+        }
         
-        files.forEach(file => {
-            if (this.imageFiles.length >= 5) return
-            this.imageFiles.push(file)
-            
-            const reader = new FileReader()
-            reader.onload = (e) => {
-                this.imagePreviews.push(e.target.result)
-                this.updateImagePreviews()
-            }
-            reader.readAsDataURL(file)
-        })
+        const file = this.pendingFiles.shift()
+        const cropper = this.querySelector('#image-cropper')
+        
+        if (cropper) {
+            cropper.open(
+                file,
+                (croppedFile, previewUrl) => {
+                    // On crop complete
+                    this.imageFiles.push(croppedFile)
+                    this.imagePreviews.push(previewUrl)
+                    this.updateImagePreviews()
+                    // Process next image
+                    this.processNextImage()
+                },
+                () => {
+                    // On cancel - skip this image
+                    this.processNextImage()
+                }
+            )
+        }
     }
     
     updateImagePreviews() {

js/components/pages/page-listing.js

@@ -148,7 +148,7 @@ class PageListing extends HTMLElement {
 
         const images = (this.listing.images || []).slice(0, 5)
         const hasImages = images.length > 0
-        const firstImage = hasImages ? this.getImageUrl(images[0], 800) : null
+        const firstImage = hasImages ? this.getImageUrl(images[0]) : null
         this.allImages = images
         
         const categoryName = this.listing.category?.name || ''
@@ -466,7 +466,7 @@ class PageListing extends HTMLElement {
                 const index = parseInt(thumb.dataset.index)
                 const mainImg = this.querySelector('#main-img')
                 if (mainImg && this.allImages[index]) {
-                    mainImg.src = this.getImageUrl(this.allImages[index], 800)
+                    mainImg.src = this.getImageUrl(this.allImages[index])
                     this.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'))
                     thumb.classList.add('active')
                 }
@@ -587,19 +587,15 @@ style.textContent = /* css */`
     }
     
     page-listing .listing-image-main {
-        aspect-ratio: 16/9;
-        max-height: 500px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        background: var(--color-bg-tertiary);
+        display: block;
+        width: 100%;
     }
     
     page-listing .listing-image-main img {
+        display: block;
         width: 100%;
-        height: 100%;
-        object-fit: contain;
+        height: auto;
+        border-radius: var(--radius-md);
     }
     
     page-listing .listing-image-main .placeholder-icon {