From 8863e9275ff5381c11cd87e06f138c6e1bdff552 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Wed, 20 Nov 2024 08:12:55 +0000
Subject: [PATCH] code optimization

---
 options/locale/locale_en-US.ini      |  1 +
 templates/user/settings/profile.tmpl | 15 ++++++----
 web_src/css/features/cropper.css     | 36 ++++++++++++----------
 web_src/js/features/comp/Cropper.ts  | 45 ++++++++++++++++------------
 4 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 122b70924a..92bbb549e2 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -763,6 +763,7 @@ uploaded_avatar_not_a_image = The uploaded file is not an image.
 uploaded_avatar_is_too_big = The uploaded file size (%d KiB) exceeds the maximum size (%d KiB).
 update_avatar_success = Your avatar has been updated.
 update_user_avatar_success = The user's avatar has been updated.
+cropper_prompt = Note: The saved image format after cropping is unified as JPEG.
 
 change_password = Update Password
 old_password = Current Password
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index f6b7a9cd13..a29128ee4f 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -127,17 +127,20 @@
 					<input id="new-avatar" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
 				</div>
 
-				<div class="inline field cropper hidden" id="cropper">
-					<div class="preview">
+				<div class="inline field cropper-panel tw-hidden" id="cropper-panel">
+					<div class="cropper-preview">
 						<h3>{{ctx.Locale.Tr "preview"}}</h3>
 						<div>
-							<img id="result">
+							<img id="cropper-result">
 						</div>
 					</div>
-					<div class="editor">
-						<h3>{{ctx.Locale.Tr "edit"}}</h3>
+					<div class="cropper-editor">
 						<div>
-							<img id="image">
+              <h3>{{ctx.Locale.Tr "edit"}}</h3>
+              <span>{{ctx.Locale.Tr "settings.cropper_prompt"}}</span>
+            </div>
+						<div class="cropper-wrapper">
+							<img class="tw-hidden" id="cropper-source">
 						</div>
 					</div>
 				</div>
diff --git a/web_src/css/features/cropper.css b/web_src/css/features/cropper.css
index 74cd9a2808..cbd98f6618 100644
--- a/web_src/css/features/cropper.css
+++ b/web_src/css/features/cropper.css
@@ -1,22 +1,28 @@
 @import "cropperjs/dist/cropper.css";
 
-.cropper {
+.cropper-panel {
   display: flex;
   column-gap: 10px;
-}
 
-.hidden {
-  display: none;
-}
+  .cropper-editor {
+    flex: 1;
+    max-width: 100%;
+    overflow: hidden;
+    .cropper-wrapper {
+      height: 600px;
+      max-height: 600px;
+    }
+    >div {
+      display: flex;
+      column-gap: 10px;
+    }
+  }
 
-.editor {
-  flex: 1;
-}
-
-#result {
-  overflow: hidden;
-  width: 256px;
-  height: 256px;
-  max-width: 256px;
-  max-height: 256px;
+  #cropper-result {
+    overflow: hidden;
+    width: 256px;
+    height: 256px;
+    max-width: 256px;
+    max-height: 256px;
+  }
 }
diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts
index 5f6bed27cb..f01583b700 100644
--- a/web_src/js/features/comp/Cropper.ts
+++ b/web_src/js/features/comp/Cropper.ts
@@ -1,33 +1,40 @@
 import Cropper from 'cropperjs';
+import {showElem} from '../../utils/dom.ts';
 
 export function initCompCropper() {
-  if (!document.querySelector('#cropper')) {
+  const cropperContainer = document.querySelector('#cropper-panel');
+  if (!cropperContainer) {
     return;
   }
 
   let filename;
-  const image = document.querySelector('#image');
-  const result = document.querySelector('#result');
+  let cropper;
+  const source = document.querySelector('#cropper-source');
+  const result = document.querySelector('#cropper-result');
   const input = document.querySelector('#new-avatar');
 
   const done = function (url) {
-    image.src = url;
+    source.src = url;
 
-    const cropper = new Cropper(image, {
-      aspectRatio: 1,
-      viewMode: 1,
-      crop() {
-        const canvas = cropper.getCroppedCanvas();
-        result.src = canvas.toDataURL();
-        canvas.toBlob((blob) => {
-          const file = new File([blob], filename, {type: 'image/jpeg', lastModified: Date.now()});
-          const container = new DataTransfer();
-          container.items.add(file);
-          input.files = container.files;
-        });
-      },
-    });
-    document.querySelector('#cropper').classList.remove('hidden');
+    if (cropper) {
+      cropper.replace(url);
+    } else {
+      cropper = new Cropper(source, {
+        aspectRatio: 1,
+        viewMode: 1,
+        crop() {
+          const canvas = cropper.getCroppedCanvas();
+          result.src = canvas.toDataURL();
+          canvas.toBlob((blob) => {
+            const file = new File([blob], filename, {type: 'image/jpeg', lastModified: Date.now()});
+            const container = new DataTransfer();
+            container.items.add(file);
+            input.files = container.files;
+          });
+        },
+      });
+    }
+    showElem(cropperContainer);
   };
 
   input.addEventListener('change', (e) => {