finish

Author: silverwind

templates/shared/avatar_upload_crop.tmpl

@@ -4,5 +4,5 @@
 {{- /* the cropper-panel must be next sibling of the input "avatar" */ -}}
 <div class="cropper-panel tw-hidden">
 	<div class="tw-my-2">{{ctx.Locale.Tr "settings.cropper_prompt"}}</div>
-	<div class="cropper-wrapper"><img class="cropper-source" src alt></div>
+	<div class="cropper-wrapper"></div>
 </div>

web_src/js/features/comp/Cropper.ts

@@ -1,70 +1,67 @@
-import {createElementFromHTML, showElem, type DOMEvent} from '../../utils/dom.ts';
-import type {CropperCanvas, CropperImage} from 'cropperjs';
+import {createElementFromHTML, hideElem, showElem, type DOMEvent} from '../../utils/dom.ts';
+import {debounce} from 'perfect-debounce';
+import type {CropperCanvas, CropperSelection} from 'cropperjs';
 
 type CropperOpts = {
   container: HTMLElement,
-  imageSource: HTMLImageElement,
+  wrapper: HTMLDivElement,
   fileInput: HTMLInputElement,
 }
 
-async function initCompCropper({container, fileInput, imageSource}: CropperOpts) {
+async function initCompCropper({container, fileInput, wrapper}: CropperOpts) {
   await import(/* webpackChunkName: "cropperjs" */'cropperjs');
-  let currentFileName = '';
-  let currentFileLastModified = 0;
 
-  const canvasEl = createElementFromHTML<CropperCanvas>(`
-    <cropper-canvas background theme-color="var(--color-primary)">
-      <cropper-image src="${imageSource.src}" scalable skewable translatable></cropper-image>
-      <cropper-shade hidden></cropper-shade>
-      <cropper-handle action="select" plain></cropper-handle>
-      <cropper-selection initial-coverage="0.5" initial-aspect-ratio="1" movable resizable outlined>
-        <cropper-grid role="grid" covered></cropper-grid>
-        <cropper-crosshair centered></cropper-crosshair>
-        <cropper-handle action="move" theme-color="#ffffff23"></cropper-handle>
-        <cropper-handle action="n-resize"></cropper-handle>
-        <cropper-handle action="e-resize"></cropper-handle>
-        <cropper-handle action="s-resize"></cropper-handle>
-        <cropper-handle action="w-resize"></cropper-handle>
-        <cropper-handle action="ne-resize"></cropper-handle>
-        <cropper-handle action="nw-resize"></cropper-handle>
-        <cropper-handle action="se-resize"></cropper-handle>
-        <cropper-handle action="sw-resize"></cropper-handle>
-      </cropper-selection>
-    </cropper-canvas>
-  `);
-
-  const imgEl = canvasEl.querySelector<CropperImage>('cropper-image');
+  fileInput.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
+    if (!e.target.files?.length) {
+      wrapper.replaceChildren();
+      hideElem(container);
+      return;
+    }
 
-  canvasEl.addEventListener('action', async (e) => {
-    const canvas = await (e.target as CropperCanvas).$toCanvas();
-    canvas.toBlob((blob) => {
-      const croppedFileName = currentFileName.replace(/\.[^.]{3,4}$/, '.png');
-      const croppedFile = new File([blob], croppedFileName, {type: 'image/png', lastModified: currentFileLastModified});
-      const dataTransfer = new DataTransfer();
-      dataTransfer.items.add(croppedFile);
-      fileInput.files = dataTransfer.files;
-    });
-  });
+    const [file] = e.target.files;
+    const objectUrl = URL.createObjectURL(file);
+    const canvasEl = createElementFromHTML<CropperCanvas>(`
+      <cropper-canvas theme-color="var(--color-primary)">
+        <cropper-image src="${objectUrl}" scalable skewable translatable></cropper-image>
+        <cropper-shade hidden></cropper-shade>
+        <cropper-handle action="select" plain></cropper-handle>
+        <cropper-selection aspect-ratio="1" movable resizable>
+          <cropper-handle action="move" theme-color="transparent"></cropper-handle>
+          <cropper-handle action="n-resize"></cropper-handle>
+          <cropper-handle action="e-resize"></cropper-handle>
+          <cropper-handle action="s-resize"></cropper-handle>
+          <cropper-handle action="w-resize"></cropper-handle>
+          <cropper-handle action="ne-resize"></cropper-handle>
+          <cropper-handle action="nw-resize"></cropper-handle>
+          <cropper-handle action="se-resize"></cropper-handle>
+          <cropper-handle action="sw-resize"></cropper-handle>
+        </cropper-selection>
+      </cropper-canvas>
+    `);
+    canvasEl.querySelector<CropperSelection>('cropper-selection').addEventListener('change', debounce(async (e) => {
+      const selection = e.target as CropperSelection;
+      if (!selection.width || !selection.height) return;
+      const canvas = await selection.$toCanvas();
 
-  imageSource.replaceWith(canvasEl);
+      canvas.toBlob((blob) => {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(new File(
+          [blob],
+          file.name.replace(/\.[^.]{3,4}$/, '.png'),
+          {type: 'image/png', lastModified: file.lastModified},
+        ));
+        fileInput.files = dataTransfer.files;
+      });
+    }, 200));
 
-  fileInput.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files?.length > 0) {
-      currentFileName = files[0].name;
-      currentFileLastModified = files[0].lastModified;
-      const fileURL = URL.createObjectURL(files[0]);
-      imageSource.src = fileURL;
-      // @ts-expect-error - https://github.com/go-gitea/gitea/pull/33827
-      imgEl.src = fileURL;
-      showElem(container);
-    }
+    wrapper.replaceChildren(canvasEl);
+    showElem(container);
   });
 }
 
 export async function initAvatarUploaderWithCropper(fileInput: HTMLInputElement) {
   const panel = fileInput.nextElementSibling as HTMLElement;
   if (!panel?.matches('.cropper-panel')) throw new Error('Missing cropper panel for avatar uploader');
-  const imageSource = panel.querySelector<HTMLImageElement>('.cropper-source');
-  await initCompCropper({container: panel, fileInput, imageSource});
+  const wrapper = panel.querySelector<HTMLImageElement>('.cropper-wrapper');
+  await initCompCropper({container: panel, fileInput, wrapper});
 }