Add cropping support when modifying the user/org/repo avatar

[kerwin612]

Fixed #33321

[kerwin612]

repo:

org:

[wxiaoguang]

When coding, need to do the best to avoid the unmaintainable code caused by copy-paste: 546f133

[delvh]

That looks like a really fragile selector to me.
Can we perhaps have a distinct js class instead?

[wxiaoguang]

Actually it is the right thing to do.

If you want to introduce a general selector, it needs much more work to make it compatible with multiple elements on the same page, which is not our case.

The current approach should be good and clear enough, and it is easy to refactor in the future.

[wxiaoguang]

If you think it's worth to introduce a general selector, feel free to try to propose some changes to see whether it would be simpler and more stable than this selector.

[delvh]

I mean…
As far as I can see, it's always the same action we perform.
So, wouldn't it make sense to invert the calls from each specific component takes care of initializing only its selector using the same method
to all elements matching this selector inside the document are initialized?
Or am I missing any case where we need additional logic?

If we don't need to customize the initialization of any avatar cropper (-> all avatar croppers are initialized exactly the same), then we can unify the logic.
Otherwise, I agree with you.
So, can you think of a case where we might want separate initialization logic or are already using it?

[wxiaoguang]

So, can you think of a case where we might want separate initialization logic or are already using it?

Yes, you are right, that's the key point.

Actually I have tried to use a general selector js-avatar-with-cropper (some traces were still left in 006dd61 🤣 ), but at last I decided to drop it because overall it looks stranger in this case ......

TBH at the moment I haven't got a real case, that's just my opinion that such selector should be flexible and clear enough. (The combo-markdown-editor has a similar case: auto-init or not .... but that's another story)

gitea/web_src/js/features/common-form.ts

Line 34 in 7e596bd

queryElems<HTMLElement>(document, '.combo-markdown-editor:not(.custom-init)', (el) => initComboMarkdownEditor(el));

[wxiaoguang]

By the way, I am planning some frontend changes to make the JS init system more stable. A brief idea is like this:

<button data-global-click="show-panel"></button>
<a data-global-click="link-acton"></a>
<div class="dropdown" data-global-init="initMyDropdown"></div>
<div class="editor" data-global-init="initComboMarkdownDropdown"></div>
<input name="avatar" data-global-init="initAvatarUploaderWithCropper">

Then we could resolve many longstanding problems:

1. avoid many duplicate "init" calls (the case in this PR)
2. incorrect init & double init (especially when use htmx or partial reloading)

But it is only a brief idea, just FYI

as per @wxiaoguang

[wxiaoguang]

@delvh managed to introduce avatar-file-with-cropper again in f045e77

[wxiaoguang]

If no more suggestions, I will vote my approval