Add AspectRatio to attachment

classes/UploadStorage.php

@@ -21,7 +21,8 @@ class UploadStorage {
         $sourceFile = new SourceFile([
             'basename' => pathinfo($this->file->getClientOriginalName(), PATHINFO_FILENAME),
             'extension' => $this->file->getClientOriginalExtension(),
-            'tags' => []
+            'tags' => [],
+            'aspect_ratio' => $this->data['resAspectRatio']
         ]);
         $sourceFile->slugAttributes();
 

formwidgets/Responsiveimage.php

@@ -73,7 +73,9 @@ class Responsiveimage extends FormWidgetBase
      */
     protected function prepareVars()
     {
-        $this->vars['aspectRatio'] = $this->aspectRatio ?: 'null';
+        $this->vars['aspectRatio'] = $this->aspectRatio
+            ? str_replace('"', "'", json_encode(explode(' / ', $this->aspectRatio)))
+            : 'null';
         $this->vars['minWidth'] = $this->minWidth ?: '0';
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->getLoadValue() ?: 'null';

formwidgets/responsiveimage/assets/src/App.vue

@@ -151,7 +151,6 @@ export default {
             }
 
             if (file.width < this.cropOptions.minWidth) {
-                console.log('zu klein');
                 $.oc.flashMsg({
                     text: `Dieses Bild ist zu klein. Bitte wähle ein Bild mit mindestens ${this.cropOptions.minWidth} Pixel Breite.`,
                     class: 'error'
@@ -173,10 +172,17 @@ export default {
             });
         },
         onSend(file, xhr, formData) {
-            formData.append('extraData', JSON.stringify(this.extraData[file.name]));
+            formData.append('extraData', JSON.stringify({
+                ...this.extraData[file.name],
+                resAspectRatio: this.cropOptions.aspectRatio
+            }));
+            formData.append('resAspectRatio', this.aspectRatio);
             this.formData.forEach((v) => {
                 formData.append(v.name, v.value);
             });
+            Object.keys(this.cropOptions).forEach((v) => {
+                formData.append(v, this.cropOptions[v]);
+            });
         },
         onMount() {
             if (!this.value) { return; }

formwidgets/responsiveimage/assets/src/popup.mixin.js

@@ -35,7 +35,7 @@ export default {
                         shade: true,
                         boxWidth: $cropContainer.width(),
                         onChange: _cls.onChangeCrop,
-                        aspectRatio: _cls.cropOptions.aspectRatio,
+                        aspectRatio: _cls.realAspectRatio,
                         minSize: [_cls.cropOptions.minWidth, 0]
                     };
 
@@ -67,6 +67,11 @@ export default {
     },
 
     computed: {
+        realAspectRatio() {
+            return this.cropOptions.aspectRatio
+                ? this.cropOptions.aspectRatio[0] / this.cropOptions.aspectRatio[1]
+                : null;
+        },
         popupId() {
             return `subform-popup-${this.formid}`;
         },

models/SourceFile.php

@@ -24,9 +24,9 @@ class SourceFile extends Model
     /**
      * @var array Fillable fields
      */
-    protected $fillable = ['id', 'basename', 'extension', 'tags', 'slug'];
+    protected $fillable = ['id', 'basename', 'extension', 'tags', 'slug', 'aspect_ratio'];
 
-    public $jsonable = ['tags'];
+    public $jsonable = ['tags', 'aspect_ratio'];
 
     /**
      * @var array Relations

updates/create_file_attachments_table.php

@@ -15,6 +15,7 @@ class CreateResponsiveFilesTable extends Migration
             $table->string('slug');
             $table->string('extension');
             $table->json('tags');
+            $table->string('aspect_ratio')->nullable();
             $table->timestamps();
         });