From 96ed2c864c966981bcb6158bcfc4c1bc280e8964 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <git@pixelde.su>
Date: Sun, 22 Jan 2023 17:43:40 +0100
Subject: [PATCH] Add Stimulus cropper controller

---
 .../controllers/cropper_controller.ts         | 49 +++++++++++++++++++
 .../retrospring/initializers/stimulus.ts      |  2 +
 2 files changed, 51 insertions(+)
 create mode 100644 app/javascript/retrospring/controllers/cropper_controller.ts

diff --git a/app/javascript/retrospring/controllers/cropper_controller.ts b/app/javascript/retrospring/controllers/cropper_controller.ts
new file mode 100644
index 00000000..269d0066
--- /dev/null
+++ b/app/javascript/retrospring/controllers/cropper_controller.ts
@@ -0,0 +1,49 @@
+import { Controller } from '@hotwired/stimulus';
+import Croppr from 'croppr';
+
+export default class extends Controller {
+  static targets = ['input', 'controls', 'cropper', 'x', 'y', 'w', 'h'];
+
+  declare readonly inputTarget: HTMLInputElement;
+  declare readonly controlsTarget: HTMLElement;
+  declare readonly cropperTarget: HTMLImageElement;
+  declare readonly xTarget: HTMLInputElement;
+  declare readonly yTarget: HTMLInputElement;
+  declare readonly wTarget: HTMLInputElement;
+  declare readonly hTarget: HTMLInputElement;
+
+  static values = {
+    aspectRatio: String
+  };
+
+  declare readonly aspectRatioValue: string;
+
+  readImage(file, callback) {
+    callback((window.URL || window.webkitURL).createObjectURL(file));
+  }
+
+  updateValues(data) {
+    this.xTarget.value = data.x;
+    this.yTarget.value = data.y;
+    this.wTarget.value = data.width;
+    this.hTarget.value = data.height;
+  }
+
+  change() {
+    this.controlsTarget.classList.toggle('d-none');
+
+    if (this.inputTarget.files && this.inputTarget.files[0]) {
+      this.readImage(this.inputTarget.files[0], (src) => {
+        this.cropperTarget.src = src;
+
+        new Croppr(this.cropperTarget, {
+          aspectRatio: parseFloat(this.aspectRatioValue),
+          startSize: [100, 100, '%'],
+          onCropStart: this.updateValues.bind(this),
+          onCropMove: this.updateValues.bind(this),
+          onCropEnd: this.updateValues.bind(this)
+        });
+      });
+    }
+  }
+}
diff --git a/app/javascript/retrospring/initializers/stimulus.ts b/app/javascript/retrospring/initializers/stimulus.ts
index 3af6306c..64ba1a50 100644
--- a/app/javascript/retrospring/initializers/stimulus.ts
+++ b/app/javascript/retrospring/initializers/stimulus.ts
@@ -7,6 +7,7 @@ import FormatPopupController from "retrospring/controllers/format_popup_controll
 import CollapseController from "retrospring/controllers/collapse_controller";
 import ThemeController from "retrospring/controllers/theme_controller";
 import CapabilitiesController from "retrospring/controllers/capabilities_controller";
+import CropperController from "retrospring/controllers/cropper_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -23,6 +24,7 @@ export default function (): void {
   window['Stimulus'].register('character-count', CharacterCountController);
   window['Stimulus'].register('character-count-warning', CharacterCountWarningController);
   window['Stimulus'].register('collapse', CollapseController);
+  window['Stimulus'].register('cropper', CropperController);
   window['Stimulus'].register('format-popup', FormatPopupController);
   window['Stimulus'].register('theme', ThemeController);
 }