Merge pull request #3754 from AlchemyCMS/refactor-image-cropper-settings-object

refactor(image cropper): accept settings object instead of positional args

Author: tvdeyen

app/javascript/alchemy_admin/image_cropper.js

@@ -6,13 +6,17 @@ export default class ImageCropper {
   #cropFromField = null
   #cropSizeField = null
 
-  constructor(image, defaultBox, aspectRatio, formFieldIds, elementId) {
+  constructor(image, settings) {
     this.image = image
-    this.defaultBox = defaultBox
-    this.aspectRatio = aspectRatio
-    this.#cropFromField = document.getElementById(formFieldIds[0])
-    this.#cropSizeField = document.getElementById(formFieldIds[1])
-    this.elementId = elementId
+    this.defaultBox = settings.default_box
+    this.aspectRatio = settings.ratio
+    this.#cropFromField = document.getElementById(
+      settings.crop_from_form_field_id
+    )
+    this.#cropSizeField = document.getElementById(
+      settings.crop_size_form_field_id
+    )
+    this.elementId = settings.element_id
     this.dialog = Alchemy.currentDialog()
     if (this.dialog) {
       this.dialog.options.closed = () => this.destroy()

app/views/alchemy/admin/crop.html.erb

@@ -22,15 +22,10 @@
 
   const image = document.getElementById("imageToCrop")?.querySelector("img");
 
-  new ImageCropper(
-    image,
-    <%= @settings[:default_box].to_json %>,
-    <%= @settings[:ratio] %>,
-    [
-      "<%= params[:crop_from_form_field_id] %>",
-      "<%= params[:crop_size_form_field_id] %>",
-    ],
-    <%= @element.id %>
-  );
+  new ImageCropper(image, <%= @settings.merge(
+    crop_from_form_field_id: params[:crop_from_form_field_id],
+    crop_size_form_field_id: params[:crop_size_form_field_id],
+    element_id: @element.id
+  ).to_json %>);
 </script>
 <% end %>

spec/javascript/alchemy_admin/image_cropper.spec.js

@@ -15,13 +15,13 @@ describe("ImageCropper", () => {
 
     it("is sets initial data", () => {
       const image = new Image()
-      const cropper = new ImageCropper(
-        image,
-        {},
-        1,
-        ["crop_from", "crop_size"],
-        "element_id"
-      )
+      const cropper = new ImageCropper(image, {
+        default_box: {},
+        ratio: 1,
+        crop_from_form_field_id: "crop_from",
+        crop_size_form_field_id: "crop_size",
+        element_id: "element_id"
+      })
       expect(cropper.cropperOptions["data"]).toEqual({
         height: 480,
         width: 1200,
@@ -32,26 +32,26 @@ describe("ImageCropper", () => {
 
     it("does not set min crop size", () => {
       const image = new Image()
-      const cropper = new ImageCropper(
-        image,
-        {},
-        1,
-        ["crop_from", "crop_size"],
-        "element_id"
-      )
+      const cropper = new ImageCropper(image, {
+        default_box: {},
+        ratio: 1,
+        crop_from_form_field_id: "crop_from",
+        crop_size_form_field_id: "crop_size",
+        element_id: "element_id"
+      })
       expect(cropper.cropperOptions["minCropBoxWidth"]).toBeUndefined()
       expect(cropper.cropperOptions["minCropBoxHeight"]).toBeUndefined()
     })
 
     it("prevents CORS issues", () => {
       const image = new Image()
-      const cropper = new ImageCropper(
-        image,
-        {},
-        1,
-        ["crop_from", "crop_size"],
-        "element_id"
-      )
+      const cropper = new ImageCropper(image, {
+        default_box: {},
+        ratio: 1,
+        crop_from_form_field_id: "crop_from",
+        crop_size_form_field_id: "crop_size",
+        element_id: "element_id"
+      })
       expect(cropper.cropperOptions["checkCrossOrigin"]).toBe(false)
       expect(cropper.cropperOptions["checkOrientation"]).toBe(false)
     })