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

css/vendor/cropper.min.css

@@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.6.1
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2023-09-17T03:44:17.565Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

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)
-        
-        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()
+        this.pendingFiles = [...files]
+        this.processNextImage()
+    }
+
+    processNextImage() {
+        if (this.pendingFiles.length === 0) return
+        if (this.imageFiles.length >= 5) {
+            this.pendingFiles = []
+            return
+        }
+        
+        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()
+                }
+            )
         }
-            reader.readAsDataURL(file)
-        })
     }
     
     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 {

locales/de.json

@@ -199,6 +199,14 @@
     "message": "Die gesuchte Seite existiert leider nicht.",
     "backHome": "Zur Startseite"
   },
+  "cropper": {
+    "title": "Bild zuschneiden",
+    "preview": "Vorschau:",
+    "cancel": "Abbrechen",
+    "confirm": "Übernehmen",
+    "aspectRatio": "Format:",
+    "free": "Frei"
+  },
   "captcha": {
     "verify": "Ich bin kein Roboter",
     "verified": "Verifiziert",

locales/en.json

@@ -199,6 +199,14 @@
     "message": "The page you are looking for does not exist.",
     "backHome": "Back to Home"
   },
+  "cropper": {
+    "title": "Crop image",
+    "preview": "Preview:",
+    "cancel": "Cancel",
+    "confirm": "Apply",
+    "aspectRatio": "Ratio:",
+    "free": "Free"
+  },
   "captcha": {
     "verify": "I'm not a robot",
     "verified": "Verified",

locales/fr.json

@@ -199,6 +199,14 @@
     "message": "La page que vous recherchez n'existe pas.",
     "backHome": "Retour à l'accueil"
   },
+  "cropper": {
+    "title": "Recadrer l'image",
+    "preview": "Aperçu:",
+    "cancel": "Annuler",
+    "confirm": "Appliquer",
+    "aspectRatio": "Format:",
+    "free": "Libre"
+  },
   "captcha": {
     "verify": "Je ne suis pas un robot",
     "verified": "Vérifié",

service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'dgray-v34';
+const CACHE_NAME = 'dgray-v38';
 const STATIC_ASSETS = [
     '/',
     '/index.html',
@@ -6,6 +6,7 @@ const STATIC_ASSETS = [
     '/css/variables.css',
     '/css/base.css',
     '/css/components.css',
+    '/css/vendor/cropper.min.css',
     '/js/app.js',
     '/js/router.js',
     '/js/i18n.js',
@@ -17,7 +18,9 @@ const STATIC_ASSETS = [
     '/js/components/listing-card.js',
     '/js/components/search-box.js',
     '/js/components/error-boundary.js',
+    '/js/components/image-cropper.js',
     '/js/services/currency.js',
+    '/js/vendor/cropper.min.js',
     '/locales/de.json',
     '/locales/en.json',
     '/locales/fr.json',