Verantwortliche Stell
{if $view->user->userID == $__wcf->user->userID}
- {unsafe:$view->user->getAvatar()->getImageTag(128)}
+
{else}
{unsafe:$view->user->getAvatar()->getImageTag(128)}
{/if}
diff --git a/com.woltlab.wcf/userMenu.xml b/com.woltlab.wcf/userMenu.xml
index 1d8ccefe15f..6cea9f70df5 100644
--- a/com.woltlab.wcf/userMenu.xml
+++ b/com.woltlab.wcf/userMenu.xml
@@ -16,11 +16,6 @@
wcf.user.menu.profile
2
-
- wcf\form\AvatarEditForm
- wcf.user.menu.profile
- 3
-
wcf\form\SignatureEditForm
wcf.user.menu.profile
@@ -63,5 +58,6 @@
diff --git a/ts/WoltLabSuite/Core/Bootstrap.ts b/ts/WoltLabSuite/Core/Bootstrap.ts
index b58cd698786..de5f694d891 100644
--- a/ts/WoltLabSuite/Core/Bootstrap.ts
+++ b/ts/WoltLabSuite/Core/Bootstrap.ts
@@ -160,6 +160,10 @@ export function setup(options: BoostrapOptions): void {
whenFirstSeen(".messageTabMenu", () => {
void import("./Component/Message/MessageTabMenu").then(({ setup }) => setup());
});
+ whenFirstSeen("[data-edit-avatar]", () => {
+ void import("./Component/User/Avatar").then(({ setup }) => setup());
+ });
+
whenFirstSeen("woltlab-core-pagination", () => {
void import("./Ui/Pagination/JumpToPage").then(({ setup }) => setup());
});
diff --git a/ts/WoltLabSuite/Core/Component/File/Upload.ts b/ts/WoltLabSuite/Core/Component/File/Upload.ts
index 857bec5eeb7..18b67b91cce 100644
--- a/ts/WoltLabSuite/Core/Component/File/Upload.ts
+++ b/ts/WoltLabSuite/Core/Component/File/Upload.ts
@@ -277,6 +277,8 @@ export function setup(): void {
void upload(element, resizedFile);
})
.catch((e) => {
+ element.dispatchEvent(new CustomEvent("cancel"));
+
if (e === undefined) {
// User closed the dialog.
return;
diff --git a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
index 0df74810338..5ff0cb49bd2 100644
--- a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
+++ b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
@@ -222,10 +222,10 @@ abstract class ImageCropper {
const maxHeight = maxWidth / this.configuration.aspectRatio;
if (
- Math.round(selection.width) < minWidth ||
- Math.round(selection.height) < minHeight ||
- Math.round(selection.width) > maxWidth ||
- Math.round(selection.height) > maxHeight
+ selection.width < minWidth ||
+ selection.height < minHeight ||
+ selection.width > maxWidth ||
+ selection.height > maxHeight
) {
event.preventDefault();
}
@@ -260,8 +260,8 @@ abstract class ImageCropper {
this.cropperSelection!.$change(
0,
0,
- this.maxSize.width * selectionRatio,
- this.maxSize.height * selectionRatio,
+ Math.min(this.cropperCanvasRect.width, this.maxSize.width * selectionRatio),
+ Math.min(this.cropperCanvasRect.height, this.maxSize.height * selectionRatio),
this.configuration.aspectRatio,
true,
);
@@ -319,6 +319,29 @@ class ExactImageCropper extends ImageCropper {
return super.showDialog();
}
+ protected getCanvas(): Promise {
+ // Calculate the size of the image in relation to the window size
+ const selectionRatio = Math.min(
+ this.cropperCanvasRect!.width / this.width,
+ this.cropperCanvasRect!.height / this.height,
+ );
+ const width = this.cropperSelection!.width / selectionRatio;
+ const height = width / this.configuration.aspectRatio;
+
+ const sizes = this.configuration.sizes
+ .filter((size) => {
+ return width >= size.width && height >= size.height;
+ })
+ .reverse();
+
+ const size = sizes.length > 0 ? sizes[0] : this.minSize;
+
+ return this.cropperSelection!.$toCanvas({
+ width: size.width,
+ height: size.height,
+ });
+ }
+
public async loadImage(): Promise {
await super.loadImage();
diff --git a/ts/WoltLabSuite/Core/Component/User/Avatar.ts b/ts/WoltLabSuite/Core/Component/User/Avatar.ts
new file mode 100644
index 00000000000..e9b3024631a
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Component/User/Avatar.ts
@@ -0,0 +1,73 @@
+/**
+ * Handles the user avatar edit buttons.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2024 WoltLab GmbH
+ * @license GNU Lesser General Public License
+ * @since 6.2
+ * @woltlabExcludeBundle all
+ */
+
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
+import { show as showNotification } from "WoltLabSuite/Core/Ui/Notification";
+import { registerCallback } from "WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor";
+import WoltlabCoreFile from "WoltLabSuite/Core/Component/File/woltlab-core-file";
+
+interface Result {
+ avatar: string;
+}
+
+async function editAvatar(button: HTMLElement): Promise {
+ const { ok, result } = await dialogFactory().usingFormBuilder().fromEndpoint(button.dataset.editAvatar!);
+
+ if (ok) {
+ const avatarForm = document.getElementById("avatarForm");
+ if (avatarForm) {
+ const img = avatarForm.querySelector("img.userAvatarImage")!;
+ if (img.src === result.avatar) {
+ return;
+ }
+
+ // In the ACP, the form should not be reloaded after changing the avatar.
+ img.src = result.avatar;
+ showNotification();
+ } else {
+ window.location.reload();
+ }
+ }
+}
+
+export function setup(): void {
+ wheneverFirstSeen(
+ "#wcf\\\\action\\\\UserAvatarAction_avatarFileIDContainer woltlab-core-file img",
+ (img: HTMLImageElement) => {
+ img.classList.add("userAvatarImage");
+ img.parentElement!.classList.add("userAvatar");
+ },
+ );
+
+ const avatarForm = document.getElementById("avatarForm");
+ if (avatarForm) {
+ registerCallback("wcf\\action\\UserAvatarAction_avatarFileID", (fileId: number | undefined) => {
+ if (!fileId) {
+ return;
+ }
+
+ const file = document.querySelector(
+ `#wcf\\\\action\\\\UserAvatarAction_avatarFileIDContainer woltlab-core-file[file-id="${fileId}"]`,
+ )!;
+
+ avatarForm.querySelector("img.userAvatarImage")!.src = file.link!;
+ showNotification();
+ });
+ }
+
+ wheneverFirstSeen("[data-edit-avatar]", (button) => {
+ button.addEventListener(
+ "click",
+ promiseMutex(() => editAvatar(button)),
+ );
+ });
+}
diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index 039c734c971..d25c8a0201a 100644
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -5,7 +5,7 @@
* @since 6.1
*/
-import WoltlabCoreFileElement from "WoltLabSuite/Core/Component/File/woltlab-core-file";
+import WoltlabCoreFileElement, { Thumbnail } from "WoltLabSuite/Core/Component/File/woltlab-core-file";
import { getPhrase } from "WoltLabSuite/Core/Language";
import { deleteFile } from "WoltLabSuite/Core/Api/Files/DeleteFile";
import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener";
@@ -20,6 +20,7 @@ import { innerError } from "WoltLabSuite/Core/Dom/Util";
type FileId = string;
const fileProcessors = new Map();
+const callbacks = new Map) => void)[]>();
export interface ExtraButton {
title: string;
@@ -35,6 +36,9 @@ export class FileProcessor {
readonly #fileInput: HTMLInputElement;
readonly #useBigPreview: boolean;
readonly #singleFileUpload: boolean;
+ readonly #simpleReplace: boolean;
+ readonly #hideDeleteButton: boolean;
+ readonly #thumbnailSize?: string;
readonly #extraButtons: ExtraButton[];
#uploadResolve: undefined | (() => void);
@@ -42,12 +46,18 @@ export class FileProcessor {
fieldId: string,
singleFileUpload: boolean = false,
useBigPreview: boolean = false,
+ simpleReplace: boolean = false,
+ hideDeleteButton: boolean = false,
+ thumbnailSize?: string,
extraButtons: ExtraButton[] = [],
) {
this.#fieldId = fieldId;
this.#useBigPreview = useBigPreview;
this.#singleFileUpload = singleFileUpload;
+ this.#simpleReplace = simpleReplace;
+ this.#hideDeleteButton = hideDeleteButton;
this.#extraButtons = extraButtons;
+ this.#thumbnailSize = thumbnailSize;
this.#container = document.getElementById(fieldId + "Container")!;
if (this.#container === null) {
@@ -55,6 +65,19 @@ export class FileProcessor {
}
this.#uploadButton = this.#container.querySelector("woltlab-core-file-upload") as WoltlabCoreFileUploadElement;
+
+ if (this.#simpleReplace) {
+ this.#uploadButton.addEventListener("shouldUpload", () => {
+ const file =
+ this.#uploadButton.parentElement!.querySelector("woltlab-core-file[file-id]");
+ if (!file) {
+ return;
+ }
+
+ this.#simpleFileReplace(file);
+ });
+ }
+
this.#uploadButton.addEventListener("uploadStart", (event: CustomEvent) => {
if (this.#uploadResolve !== undefined) {
this.#uploadResolve();
@@ -65,7 +88,7 @@ export class FileProcessor {
this.#fileInput = this.#uploadButton.querySelector('input[type="file"]')!;
this.#container.querySelectorAll("woltlab-core-file").forEach((element) => {
- this.#registerFile(element, element.parentElement);
+ this.#registerFile(element, element.parentElement, false);
});
fileProcessors.set(fieldId, this);
@@ -80,12 +103,14 @@ export class FileProcessor {
buttons.classList.add("buttonList");
buttons.classList.add(this.classPrefix + "item__buttons");
- let listItem = document.createElement("li");
- listItem.append(this.getDeleteButton(element));
- buttons.append(listItem);
+ if (!this.#hideDeleteButton) {
+ const listItem = document.createElement("li");
+ listItem.append(this.getDeleteButton(element));
+ buttons.append(listItem);
+ }
- if (this.#singleFileUpload) {
- listItem = document.createElement("li");
+ if (this.#singleFileUpload && !this.#simpleReplace) {
+ const listItem = document.createElement("li");
listItem.append(this.getReplaceButton(element));
buttons.append(listItem);
}
@@ -118,6 +143,46 @@ export class FileProcessor {
container.append(buttons);
}
+ protected getReplaceButton(element: WoltlabCoreFileElement): HTMLButtonElement {
+ const replaceButton = document.createElement("button");
+ replaceButton.type = "button";
+ replaceButton.classList.add("button", "small");
+ replaceButton.textContent = getPhrase("wcf.global.button.replace");
+ replaceButton.addEventListener("click", () => {
+ const oldContext = this.#startReplaceFile(element);
+
+ clearPreviousErrors(this.#uploadButton);
+
+ const changeEventListener = () => {
+ this.#fileInput.removeEventListener("cancel", cancelEventListener);
+
+ // Wait until the upload starts,
+ // the request to the server is not synchronized with the end of the `change` event.
+ // Otherwise, we would swap the context too soon.
+ void new Promise((resolve) => {
+ this.#uploadResolve = resolve;
+ }).then(() => {
+ this.#uploadResolve = undefined;
+ this.#uploadButton.dataset.context = oldContext;
+ });
+ };
+ const cancelEventListener = () => {
+ this.#uploadButton.dataset.context = oldContext;
+ this.#registerFile(this.#replaceElement!, null, false);
+ this.#replaceElement = undefined;
+ this.#uploadResolve = undefined;
+ this.#fileInput.removeEventListener("change", changeEventListener);
+ };
+
+ this.#fileInput.addEventListener("cancel", cancelEventListener, { once: true });
+ this.#fileInput.addEventListener("change", changeEventListener, { once: true });
+
+ this.#fileInput.click();
+ });
+
+ return replaceButton;
+ }
+
#markElementUploadHasFailed(container: HTMLElement, element: WoltlabCoreFileElement, reason: unknown): void {
fileInitializationFailed(container, element, reason);
@@ -133,6 +198,8 @@ export class FileProcessor {
const result = await deleteFile(element.fileId!);
if (result.ok) {
this.#unregisterFile(element);
+
+ notifyValueChange(this.#fieldId, this.values);
} else {
let container: HTMLElement = element;
if (!this.#useBigPreview) {
@@ -150,51 +217,40 @@ export class FileProcessor {
return deleteButton;
}
- protected getReplaceButton(element: WoltlabCoreFileElement): HTMLButtonElement {
- const replaceButton = document.createElement("button");
- replaceButton.type = "button";
- replaceButton.classList.add("button", "small");
- replaceButton.textContent = getPhrase("wcf.global.button.replace");
- replaceButton.addEventListener("click", () => {
- // Add to context an extra attribute that the replace button is clicked.
- // After the dialog is closed or the file is selected, the context will be reset to his old value.
- // This is necessary as the serverside validation will otherwise fail.
- const oldContext = this.#uploadButton.dataset.context!;
- const context = JSON.parse(oldContext);
- context.__replace = true;
- this.#uploadButton.dataset.context = JSON.stringify(context);
+ #simpleFileReplace(oldFile: WoltlabCoreFileElement) {
+ const oldContext = this.#startReplaceFile(oldFile);
- this.#replaceElement = element;
- this.#unregisterFile(element);
+ const cropCancelledEvent = () => {
+ this.#uploadResolve = undefined;
+ this.#uploadButton.dataset.context = oldContext;
+ this.#registerFile(this.#replaceElement!, null, false);
+ this.#replaceElement = undefined;
+ };
- clearPreviousErrors(this.#uploadButton);
+ this.#uploadButton.addEventListener("cancel", cropCancelledEvent, { once: true });
- const changeEventListener = () => {
- this.#fileInput.removeEventListener("cancel", cancelEventListener);
+ void new Promise((resolve) => {
+ this.#uploadResolve = resolve;
+ }).then(() => {
+ this.#uploadResolve = undefined;
+ this.#uploadButton.dataset.context = oldContext;
+ this.#uploadButton.removeEventListener("cancel", cropCancelledEvent);
+ });
+ }
- // Wait until the upload starts,
- // the request to the server is not synchronized with the end of the `change` event.
- // Otherwise, we would swap the context too soon.
- void new Promise((resolve) => {
- this.#uploadResolve = resolve;
- }).then(() => {
- this.#uploadResolve = undefined;
- this.#uploadButton.dataset.context = oldContext;
- });
- };
- const cancelEventListener = () => {
- this.#uploadButton.dataset.context = oldContext;
- this.#registerFile(this.#replaceElement!);
- this.#replaceElement = undefined;
- this.#fileInput.removeEventListener("change", changeEventListener);
- };
+ #startReplaceFile(element: WoltlabCoreFileElement): string {
+ // Add to context an extra attribute that the replace button is clicked.
+ // After the dialog is closed or the file is selected, the context will be reset to his old value.
+ // This is necessary as the serverside validation will otherwise fail.
+ const oldContext = this.#uploadButton.dataset.context!;
+ const context = JSON.parse(oldContext);
+ context.__replace = true;
+ this.#uploadButton.dataset.context = JSON.stringify(context);
- this.#fileInput.addEventListener("cancel", cancelEventListener, { once: true });
- this.#fileInput.addEventListener("change", changeEventListener, { once: true });
- this.#fileInput.click();
- });
+ this.#replaceElement = element;
+ this.#unregisterFile(element);
- return replaceButton;
+ return oldContext;
}
#unregisterFile(element: WoltlabCoreFileElement): void {
@@ -205,7 +261,11 @@ export class FileProcessor {
}
}
- #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): void {
+ #registerFile(
+ element: WoltlabCoreFileElement,
+ container: HTMLElement | null = null,
+ notifyCallback: boolean = true,
+ ): void {
if (container === null) {
if (this.#useBigPreview) {
container = this.#container.querySelector(".fileUpload__preview");
@@ -234,11 +294,11 @@ export class FileProcessor {
void deleteFile(this.#replaceElement.fileId!);
this.#replaceElement = undefined;
}
- this.#fileInitializationCompleted(element, container!);
+ this.#fileInitializationCompleted(element, container!, notifyCallback);
})
.catch((reason) => {
if (this.#replaceElement !== undefined) {
- this.#registerFile(this.#replaceElement);
+ this.#registerFile(this.#replaceElement, null, false);
this.#replaceElement = undefined;
if (this.#useBigPreview) {
@@ -257,19 +317,23 @@ export class FileProcessor {
});
}
- #fileInitializationCompleted(element: WoltlabCoreFileElement, container: HTMLElement): void {
+ #fileInitializationCompleted(
+ element: WoltlabCoreFileElement,
+ container: HTMLElement,
+ notifyCallback: boolean = true,
+ ): void {
if (this.#useBigPreview) {
- element.dataset.previewUrl = element.link!;
- element.unbounded = true;
+ setThumbnail(
+ element,
+ element.thumbnails.find((thumbnail) => thumbnail.identifier === this.#thumbnailSize),
+ true,
+ );
} else {
if (element.isImage()) {
- const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
- if (thumbnail !== undefined) {
- element.thumbnail = thumbnail;
- } else {
- element.dataset.previewUrl = element.link!;
- element.unbounded = false;
- }
+ const thumbnailSize = this.#thumbnailSize ?? "tiny";
+
+ const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === thumbnailSize);
+ setThumbnail(element, thumbnail);
if (element.link !== undefined && element.filename !== undefined) {
const filenameLink = document.createElement("a");
@@ -304,6 +368,10 @@ export class FileProcessor {
container.append(input);
this.addButtons(container, element);
+
+ if (notifyCallback) {
+ notifyValueChange(this.#fieldId, this.values);
+ }
}
get values(): undefined | number | Set {
@@ -324,6 +392,16 @@ export class FileProcessor {
}
}
+function setThumbnail(element: WoltlabCoreFileElement, thumbnail?: Thumbnail, unbounded: boolean = false) {
+ if (unbounded) {
+ element.dataset.previewUrl = thumbnail !== undefined ? thumbnail.link : element.link;
+ } else if (thumbnail !== undefined) {
+ element.thumbnail = thumbnail;
+ }
+
+ element.unbounded = unbounded;
+}
+
export function getValues(fieldId: string): undefined | number | Set {
const field = fileProcessors.get(fieldId);
if (field === undefined) {
@@ -332,3 +410,30 @@ export function getValues(fieldId: string): undefined | number | Set {
return field.values;
}
+
+/**
+ * Registers a callback that will be called when the value of the field changes.
+ *
+ * @since 6.2
+ */
+export function registerCallback(fieldId: string, callback: (values: undefined | number | Set) => void): void {
+ if (!callbacks.has(fieldId)) {
+ callbacks.set(fieldId, []);
+ }
+
+ callbacks.get(fieldId)!.push(callback);
+}
+
+/**
+ * @since 6.2
+ */
+export function unregisterCallback(
+ fieldId: string,
+ callback: (values: undefined | number | Set) => void,
+): void {
+ callbacks.set(fieldId, callbacks.get(fieldId)?.filter((registeredCallback) => registeredCallback !== callback) ?? []);
+}
+
+function notifyValueChange(fieldId: string, values: undefined | number | Set): void {
+ callbacks.get(fieldId)?.forEach((callback) => callback(values));
+}
diff --git a/wcfsetup/install/files/acp/database/update_com.woltlab.wcf_6.2.php b/wcfsetup/install/files/acp/database/update_com.woltlab.wcf_6.2.php
new file mode 100644
index 00000000000..c275d354e18
--- /dev/null
+++ b/wcfsetup/install/files/acp/database/update_com.woltlab.wcf_6.2.php
@@ -0,0 +1,29 @@
+
+ */
+
+use wcf\system\database\table\column\IntDatabaseTableColumn;
+use wcf\system\database\table\index\DatabaseTableForeignKey;
+use wcf\system\database\table\PartialDatabaseTable;
+
+return [
+ PartialDatabaseTable::create('wcf1_user')
+ ->columns([
+ IntDatabaseTableColumn::create('avatarFileID')
+ ->length(10)
+ ->defaultValue(null),
+ ])
+ ->foreignKeys([
+ DatabaseTableForeignKey::create()
+ ->columns(['avatarFileID'])
+ ->referencedTable('wcf1_file')
+ ->referencedColumns(['fileID'])
+ ->onDelete('SET NULL'),
+ ]),
+];
diff --git a/wcfsetup/install/files/acp/templates/userAdd.tpl b/wcfsetup/install/files/acp/templates/userAdd.tpl
index 62ab6118f6d..1fdee9563b7 100644
--- a/wcfsetup/install/files/acp/templates/userAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userAdd.tpl
@@ -600,32 +600,23 @@
diff --git a/wcfsetup/install/files/js/WCF.User.js b/wcfsetup/install/files/js/WCF.User.js
index ef10ee5ea6a..7cdd55e47df 100644
--- a/wcfsetup/install/files/js/WCF.User.js
+++ b/wcfsetup/install/files/js/WCF.User.js
@@ -1406,150 +1406,6 @@ else {
});
}
-/**
- * Namespace for avatar functions.
- */
-WCF.User.Avatar = {};
-
-if (COMPILER_TARGET_DEFAULT) {
- /**
- * Avatar upload function
- *
- * @see WCF.Upload
- */
- WCF.User.Avatar.Upload = WCF.Upload.extend({
- /**
- * user id of avatar owner
- * @var integer
- */
- _userID: 0,
-
- /**
- * Initializes a new WCF.User.Avatar.Upload object.
- *
- * @param integer userID
- */
- init: function (userID) {
- this._super($('#avatarUpload > dd > div'), undefined, 'wcf\\data\\user\\avatar\\UserAvatarAction');
- this._userID = userID || 0;
-
- $('#avatarForm input[type=radio]').change(function () {
- if ($(this).val() == 'custom') {
- $('#avatarUpload > dd > div').show();
- }
- else {
- $('#avatarUpload > dd > div').hide();
- }
- });
- if (!$('#avatarForm input[type=radio][value=custom]:checked').length) {
- $('#avatarUpload > dd > div').hide();
- }
- },
-
- /**
- * @see WCF.Upload._initFile()
- */
- _initFile: function (file) {
- return $('#avatarUpload > dt > img');
- },
-
- /**
- * @see WCF.Upload._success()
- */
- _success: function (uploadID, data) {
- if (data.returnValues.url) {
- this._updateImage(data.returnValues.url);
-
- // hide error
- $('#avatarUpload > dd > .innerError').remove();
-
- // show success message
- var $notification = new WCF.System.Notification(WCF.Language.get('wcf.user.avatar.upload.success'));
- $notification.show();
- }
- else if (data.returnValues.errorType) {
- // show error
- this._getInnerErrorElement().text(WCF.Language.get('wcf.user.avatar.upload.error.' + data.returnValues.errorType));
- }
- },
-
- /**
- * Updates the displayed avatar image.
- *
- * @param string url
- */
- _updateImage: function (url) {
- $('#avatarUpload > dt > img').remove();
- var $image = $('{lang}wcf.user.avatar{/lang}
--
+
- - - -
-
{if $avatarType == 'custom' && $userAvatar !== null}
- {@$userAvatar->getImageTag(96)}
+
{else}
}images/avatars/avatar-default.svg)
{/if}
-
- - - - - {* placeholder for upload button: *} - + +
- +
-
-
-
+
+