From d4b2bd1ea881c8b8ff22ea3f2a0a2cf62988b8d1 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Wed, 11 Mar 2026 16:44:24 +0100 Subject: [PATCH 01/14] Use a data transfer object to provide data for reaction button & summary --- com.woltlab.wcf/templates/reactionButton.tpl | 10 +++ com.woltlab.wcf/templates/reactionSummary.tpl | 6 ++ .../lib/data/TCollectionReactions.class.php | 66 +++++++++++++++++++ .../system/reaction/ReactionData.class.php | 14 ++++ 4 files changed, 96 insertions(+) create mode 100644 com.woltlab.wcf/templates/reactionButton.tpl create mode 100644 com.woltlab.wcf/templates/reactionSummary.tpl create mode 100644 wcfsetup/install/files/lib/data/TCollectionReactions.class.php create mode 100644 wcfsetup/install/files/lib/system/reaction/ReactionData.class.php diff --git a/com.woltlab.wcf/templates/reactionButton.tpl b/com.woltlab.wcf/templates/reactionButton.tpl new file mode 100644 index 0000000000..3eeee92c2c --- /dev/null +++ b/com.woltlab.wcf/templates/reactionButton.tpl @@ -0,0 +1,10 @@ + diff --git a/com.woltlab.wcf/templates/reactionSummary.tpl b/com.woltlab.wcf/templates/reactionSummary.tpl new file mode 100644 index 0000000000..4ca078204a --- /dev/null +++ b/com.woltlab.wcf/templates/reactionSummary.tpl @@ -0,0 +1,6 @@ + diff --git a/wcfsetup/install/files/lib/data/TCollectionReactions.class.php b/wcfsetup/install/files/lib/data/TCollectionReactions.class.php new file mode 100644 index 0000000000..0bd62ed17d --- /dev/null +++ b/wcfsetup/install/files/lib/data/TCollectionReactions.class.php @@ -0,0 +1,66 @@ + + * @since 6.3 + */ +trait TCollectionReactions +{ + /** + * @var array + */ + private array $reactionData; + + public function getReactionData(DatabaseObject $object): ReactionData + { + $this->loadReactionData(); + + return $this->reactionData[$object->getObjectID()]; + } + + public function getCachedReactions(DatabaseObject $object): ?string + { + return $this->getReactionData($object)->cachedReactions; + } + + private function loadReactionData(): void + { + if (isset($this->reactionData)) { + return; + } + + $this->reactionData = []; + + $objectType = ReactionHandler::getInstance()->getObjectType($this->getReactionObjectType()); + ReactionHandler::getInstance()->loadLikeObjects($objectType, $this->getObjectIDs()); + + foreach ($this->getObjectIDs() as $objectID) { + $likeObject = ReactionHandler::getInstance()->getLikeObject($objectType, $objectID); + if ($likeObject !== null) { + $this->reactionData[$objectID] = new ReactionData( + $this->getReactionObjectType(), + $objectID, + $likeObject->reactionTypeID ?: 0, + $likeObject->cachedReactions, + $likeObject->getReactionsJson() + ); + } else { + $this->reactionData[$objectID] = new ReactionData( + $this->getReactionObjectType(), + $objectID, + ); + } + } + } + + protected abstract function getReactionObjectType(): string; +} diff --git a/wcfsetup/install/files/lib/system/reaction/ReactionData.class.php b/wcfsetup/install/files/lib/system/reaction/ReactionData.class.php new file mode 100644 index 0000000000..394d2c85e8 --- /dev/null +++ b/wcfsetup/install/files/lib/system/reaction/ReactionData.class.php @@ -0,0 +1,14 @@ + Date: Thu, 12 Mar 2026 19:17:22 +0100 Subject: [PATCH 02/14] Add RPC endpoints for setting / reverting reactions --- .../Core/Api/Reactions/RevertReaction.ts | 34 +++++ .../Core/Api/Reactions/SetReaction.ts | 39 ++++++ .../core/reactions/RevertReaction.class.php | 110 ++++++++++++++++ .../core/reactions/SetReaction.class.php | 124 ++++++++++++++++++ 4 files changed, 307 insertions(+) create mode 100644 ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts create mode 100644 ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts create mode 100644 wcfsetup/install/files/lib/system/endpoint/controller/core/reactions/RevertReaction.class.php create mode 100644 wcfsetup/install/files/lib/system/endpoint/controller/core/reactions/SetReaction.class.php diff --git a/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts b/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts new file mode 100644 index 0000000000..07a61a1d8c --- /dev/null +++ b/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts @@ -0,0 +1,34 @@ +/** + * Reverts a reaction on an object. + * + * @author Marcel Werk + * @copyright 2001-2026 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.3 + * @woltlabExcludeBundle tiny + */ + +import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend"; +import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result"; + +type Response = { + reactions: Record; +}; + +export async function revertReaction(objectType: string, objectID: number): Promise> { + const url = new URL(`${window.WSC_RPC_API_URL}core/reactions/revert`); + + let response: Response; + try { + response = (await prepareRequest(url) + .post({ + objectType, + objectID, + }) + .fetchAsJson()) as Response; + } catch (e) { + return apiResultFromError(e); + } + + return apiResultFromValue(response); +} diff --git a/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts b/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts new file mode 100644 index 0000000000..0076b3cedf --- /dev/null +++ b/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts @@ -0,0 +1,39 @@ +/** + * Sets a reaction on an object. + * + * @author Marcel Werk + * @copyright 2001-2026 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.3 + * @woltlabExcludeBundle tiny + */ + +import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend"; +import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result"; + +type Response = { + reactions: Record; +}; + +export async function setReaction( + objectType: string, + objectID: number, + reactionTypeID: number, +): Promise> { + const url = new URL(`${window.WSC_RPC_API_URL}core/reactions/set`); + + let response: Response; + try { + response = (await prepareRequest(url) + .post({ + objectType, + objectID, + reactionTypeID, + }) + .fetchAsJson()) as Response; + } catch (e) { + return apiResultFromError(e); + } + + return apiResultFromValue(response); +} diff --git a/wcfsetup/install/files/lib/system/endpoint/controller/core/reactions/RevertReaction.class.php b/wcfsetup/install/files/lib/system/endpoint/controller/core/reactions/RevertReaction.class.php new file mode 100644 index 0000000000..80d435cad0 --- /dev/null +++ b/wcfsetup/install/files/lib/system/endpoint/controller/core/reactions/RevertReaction.class.php @@ -0,0 +1,110 @@ + + * @since 6.3 + */ +#[PostRequest('/core/reactions/revert')] +final class RevertReaction implements IController +{ + #[\Override] + public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface + { + $parameters = Helper::mapApiParameters($request, RevertReactionParameters::class); + + $this->assertModuleEnabled(); + $this->assertUserCanReact(); + + $objectType = ReactionHandler::getInstance()->getObjectType($parameters->objectType); + if ($objectType === null) { + throw new UserInputException('objectType'); + } + + $objectTypeProvider = $objectType->getProcessor(); + $likeable = $objectTypeProvider->getObjectByID($parameters->objectID); + \assert($likeable instanceof ILikeObject); + $likeable->setObjectType($objectType); + + if ($objectTypeProvider instanceof IRestrictedLikeObjectTypeProvider) { + if (!$objectTypeProvider->canLike($likeable)) { + throw new PermissionDeniedException(); + } + } elseif (!$objectTypeProvider->checkPermissions($likeable)) { + throw new PermissionDeniedException(); + } + + if ($likeable->getUserID() == WCF::getUser()->userID) { + throw new PermissionDeniedException(); + } + + $like = Like::getLike( + $likeable->getObjectType()->objectTypeID, + $likeable->getObjectID(), + WCF::getUser()->userID + ); + + if ($like->likeID) { + (new \wcf\command\reaction\RevertReaction( + $like, + $likeable + ))(); + } + + $likeObject = LikeObject::getLikeObject( + $likeable->getObjectType()->objectTypeID, + $likeable->getObjectID() + ); + + return new JsonResponse([ + 'reactions' => $likeObject->getCachedReactions(), + ]); + } + + private function assertModuleEnabled(): void + { + if (!\MODULE_LIKE) { + throw new IllegalLinkException(); + } + } + + private function assertUserCanReact(): void + { + if (!WCF::getUser()->userID || !WCF::getSession()->getPermission('user.like.canLike')) { + throw new PermissionDeniedException(); + } + } +} + +/** @internal */ +final class RevertReactionParameters +{ + public function __construct( + /** @var positive-int */ + public readonly int $objectID, + + /** @var non-empty-string */ + public readonly string $objectType, + ) {} +} diff --git a/wcfsetup/install/files/lib/system/endpoint/controller/core/reactions/SetReaction.class.php b/wcfsetup/install/files/lib/system/endpoint/controller/core/reactions/SetReaction.class.php new file mode 100644 index 0000000000..f7b5e963ee --- /dev/null +++ b/wcfsetup/install/files/lib/system/endpoint/controller/core/reactions/SetReaction.class.php @@ -0,0 +1,124 @@ + + * @since 6.3 + */ +#[PostRequest('/core/reactions/set')] +final class SetReaction implements IController +{ + #[\Override] + public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface + { + $parameters = Helper::mapApiParameters($request, SetReactionParameters::class); + + $this->assertModuleEnabled(); + $this->assertUserCanReact(); + + $objectType = ReactionHandler::getInstance()->getObjectType($parameters->objectType); + if ($objectType === null) { + throw new UserInputException('objectType'); + } + + $reactionType = ReactionTypeCache::getInstance()->getReactionTypeByID($parameters->reactionTypeID); + if (!$reactionType->reactionTypeID) { + throw new UserInputException('reactionTypeID'); + } + + $objectTypeProvider = $objectType->getProcessor(); + $likeable = $objectTypeProvider->getObjectByID($parameters->objectID); + \assert($likeable instanceof ILikeObject); + $likeable->setObjectType($objectType); + + if ($objectTypeProvider instanceof IRestrictedLikeObjectTypeProvider) { + if (!$objectTypeProvider->canLike($likeable)) { + throw new PermissionDeniedException(); + } + } elseif (!$objectTypeProvider->checkPermissions($likeable)) { + throw new PermissionDeniedException(); + } + + if ($likeable->getUserID() == WCF::getUser()->userID) { + throw new PermissionDeniedException(); + } + + if (!$reactionType->isAssignable) { + throw new UserInputException('reactionTypeID'); + } + + $like = Like::getLike( + $likeable->getObjectType()->objectTypeID, + $likeable->getObjectID(), + WCF::getUser()->userID + ); + + if (!$like->likeID || $like->reactionTypeID !== $reactionType->reactionTypeID) { + (new \wcf\command\reaction\SetReaction( + $likeable, + WCF::getUser(), + $reactionType + ))(); + } + + $likeObject = LikeObject::getLikeObject( + $likeable->getObjectType()->objectTypeID, + $likeable->getObjectID() + ); + + return new JsonResponse([ + 'reactions' => $likeObject->getCachedReactions(), + ]); + } + + private function assertModuleEnabled(): void + { + if (!\MODULE_LIKE) { + throw new IllegalLinkException(); + } + } + + private function assertUserCanReact(): void + { + if (!WCF::getUser()->userID || !WCF::getSession()->getPermission('user.like.canLike')) { + throw new PermissionDeniedException(); + } + } +} + +/** @internal */ +final class SetReactionParameters +{ + public function __construct( + /** @var positive-int */ + public readonly int $objectID, + + /** @var non-empty-string */ + public readonly string $objectType, + + /** @var positive-int */ + public readonly int $reactionTypeID, + ) {} +} From 56f5c6e0165e049d049089b9f242550be642ef73 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Thu, 12 Mar 2026 19:18:57 +0100 Subject: [PATCH 03/14] Refactor `WoltLabSuite/Core/Ui/Reaction/Handler` --- ts/WoltLabSuite/Core/BootstrapFrontend.ts | 3 + .../Core/Component/Reaction/Button.ts | 252 ++++++++++++++++++ ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts | 1 + .../Core/Api/Reactions/RevertReaction.js | 30 +++ .../Core/Api/Reactions/SetReaction.js | 31 +++ .../js/WoltLabSuite/Core/BootstrapFrontend.js | 3 + .../Core/Component/Reaction/Button.js | 177 ++++++++++++ .../WoltLabSuite/Core/Ui/Reaction/Handler.js | 1 + 8 files changed, 498 insertions(+) create mode 100644 ts/WoltLabSuite/Core/Component/Reaction/Button.ts create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js diff --git a/ts/WoltLabSuite/Core/BootstrapFrontend.ts b/ts/WoltLabSuite/Core/BootstrapFrontend.ts index 9f56aba635..034c889f5c 100644 --- a/ts/WoltLabSuite/Core/BootstrapFrontend.ts +++ b/ts/WoltLabSuite/Core/BootstrapFrontend.ts @@ -169,4 +169,7 @@ export function setup(options: BootstrapOptions): void { whenFirstSeen("[data-report-content]", () => { void import("./Ui/Moderation/Report").then(({ setup }) => setup(options.reportEndpoint)); }); + whenFirstSeen("[data-reaction-object-type]", () => { + void import("./Component/Reaction/Button").then(({ setup }) => setup()); + }); } diff --git a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts new file mode 100644 index 0000000000..f6231cc519 --- /dev/null +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -0,0 +1,252 @@ +/** + * Handles the reactions buttons. + * + * @author Marcel Werk + * @copyright 2001-2026 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.3 + * @woltlabExcludeBundle tiny + */ + +import { revertReaction } from "WoltLabSuite/Core/Api/Reactions/RevertReaction"; +import { setReaction } from "WoltLabSuite/Core/Api/Reactions/SetReaction"; +import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector"; +import { Reaction } from "WoltLabSuite/Core/Ui/Reaction/Data"; +import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener"; +import { createFocusTrap, FocusTrap } from "focus-trap"; +import * as UiAlignment from "WoltLabSuite/Core/Ui/Alignment"; +import * as UiScreen from "WoltLabSuite/Core/Ui/Screen"; +import UiCloseOverlay from "WoltLabSuite/Core/Ui/CloseOverlay"; + +type Result = + | { + ok: true; + reactionTypeId: number; + } + | { + ok: false; + }; + +const availableReactions = Object.values(window.REACTION_TYPES); + +class ReactionPopover { + #resolve?: (value: Result) => void; + #popover?: HTMLElement; + #focusTrap?: FocusTrap; + + open(button: HTMLButtonElement): Promise { + if (this.#resolve !== undefined) { + this.#resolve({ ok: false }); + } + + this.#showPopover(button); + + return new Promise((resolve) => { + this.#resolve = resolve; + }); + } + + cancel(): void { + if (this.#resolve !== undefined) { + this.#resolve({ ok: false }); + } + this.#resolve = undefined; + this.#hidePopover(); + } + + #click(reactionTypeId: number): void { + if (this.#resolve !== undefined) { + this.#resolve({ ok: true, reactionTypeId }); + } + this.#resolve = undefined; + this.#hidePopover(); + } + + #createPopover(): void { + if (this.#popover !== undefined) { + return; + } + + this.#popover = document.createElement("div"); + this.#popover.className = "reactionPopover forceHide"; + + const popoverContent = document.createElement("div"); + popoverContent.className = "reactionPopoverContent"; + + this.#getSortedReactionTypes().forEach((reactionType) => { + const reactionTypeButton = document.createElement("button"); + reactionTypeButton.type = "button"; + reactionTypeButton.tabIndex = 0; + reactionTypeButton.className = "reactionTypeButton jsTooltip"; + reactionTypeButton.title = reactionType.title; + reactionTypeButton.dataset.reactionTypeId = reactionType.reactionTypeID.toString(); + reactionTypeButton.dataset.isAssignable = reactionType.isAssignable.toString(); + reactionTypeButton.innerHTML = reactionType.renderedIcon; + reactionTypeButton.addEventListener("click", () => this.#click(reactionType.reactionTypeID)); + //reactionTypeItem.addEventListener("keydown", (ev) => this.keydown(ev)); + + if (!reactionType.isAssignable) { + reactionTypeButton.hidden = true; + } + + popoverContent.appendChild(reactionTypeButton); + }); + + this.#popover.appendChild(popoverContent); + + document.body.appendChild(this.#popover); + + UiCloseOverlay.add("WoltLabSuite/Core/Component/Reaction/Button", () => this.cancel()); + + DomChangeListener.trigger(); + } + + #showPopover(button: HTMLButtonElement): void { + const popover = this.#getPopover(); + + UiAlignment.set(popover, button, { + horizontal: "center", + vertical: UiScreen.is("screen-xs") ? "bottom" : "top", + }); + + // The popover could be rendered below the input field on mobile, in which case + // the "first" button is displayed at the bottom and thus farthest away. Reversing + // the display order will restore the logic by placing the "first" button as close + // to the react button as possible. + const inverseOrder = popover.style.getPropertyValue("bottom") === "auto"; + if (inverseOrder) { + popover.classList.add("inverseOrder"); + } else { + popover.classList.remove("inverseOrder"); + } + + popover.querySelectorAll(".reactionTypeButton.active").forEach((element: HTMLElement) => { + element.classList.remove("active"); + }); + + if (parseInt(button.dataset.reactionTypeId!)) { + const reactionTypeButton = popover.querySelector( + `.reactionTypeButton[data-reaction-type-id="${button.dataset.reactionTypeId}"]`, + ) as HTMLButtonElement; + reactionTypeButton.classList.add("active"); + reactionTypeButton.hidden = false; + } + + popover.classList.remove("forceHide"); + popover.classList.add("active"); + + this.#getFocusTrap().activate(); + } + + #hidePopover(): void { + const popover = this.#getPopover(); + popover.classList.remove("active"); + + popover + .querySelectorAll('.reactionTypeButton[data-is-assignable="0"]') + .forEach((button: HTMLButtonElement) => (button.hidden = true)); + + this.#getFocusTrap().deactivate(); + } + + #getSortedReactionTypes(): Reaction[] { + return availableReactions.sort((a, b) => a.showOrder - b.showOrder); + } + + #getPopover(): HTMLElement { + if (this.#popover === undefined) { + this.#createPopover(); + } + + return this.#popover!; + } + + #getFocusTrap(): FocusTrap { + if (this.#focusTrap === undefined) { + this.#focusTrap = createFocusTrap(this.#getPopover(), { + allowOutsideClick: true, + escapeDeactivates: (): boolean => { + this.#hidePopover(); + + return false; + }, + preventScroll: true, + }); + } + + return this.#focusTrap; + } +} + +function updateReactionSummary( + objectType: string, + objectId: number, + cachedReactions: Record, + selectedReaction?: number, +): void { + const reactions = new Map(); + Object.entries(cachedReactions).forEach(([key, value]) => { + reactions.set(parseInt(key), value); + }); + + const component = document.querySelector( + `woltlab-core-reaction-summary[object-type="${objectType}"][object-id="${objectId}"]`, + ) as WoltlabCoreReactionSummaryElement; + component?.setData(reactions, selectedReaction); +} + +export function setup(): void { + const reactionPopover = new ReactionPopover(); + + wheneverFirstSeen("[data-reaction-object-type]", (button: HTMLButtonElement) => { + let isOpen = false; + button.addEventListener("click", (event) => { + event.stopPropagation(); // Necessary so that `Ui/CloseOverlay` does not close the popover immediately + + if (isOpen) { + reactionPopover.cancel(); + isOpen = false; + return; + } + + isOpen = true; + void reactionPopover.open(button).then(async (result: Result) => { + isOpen = false; + + if (!result.ok) { + return; + } + + const oldReactionTypeId = parseInt(button.dataset.reactionTypeId!); + + if (result.reactionTypeId == oldReactionTypeId) { + const response = await revertReaction(button.dataset.reactionObjectType!, parseInt(button.dataset.objectId!)); + button.dataset.reactionTypeId = "0"; + button.classList.remove("active"); + + updateReactionSummary( + button.dataset.reactionObjectType!, + parseInt(button.dataset.objectId!), + response.unwrap().reactions, + result.reactionTypeId, + ); + } else { + const response = await setReaction( + button.dataset.reactionObjectType!, + parseInt(button.dataset.objectId!), + result.reactionTypeId, + ); + button.dataset.reactionTypeId = result.reactionTypeId.toString(); + button.classList.add("active"); + + updateReactionSummary( + button.dataset.reactionObjectType!, + parseInt(button.dataset.objectId!), + response.unwrap().reactions, + result.reactionTypeId, + ); + } + }); + }); + }); +} diff --git a/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts b/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts index 6c3de17677..3e340588e9 100644 --- a/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts +++ b/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts @@ -5,6 +5,7 @@ * @copyright 2001-2019 WoltLab GmbH * @license GNU Lesser General Public License * @since 5.2 + * @deprecated 6.3 Use `WoltLabSuite/Core/Component/Reaction/Button` instead. */ import * as Ajax from "../../Ajax"; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js new file mode 100644 index 0000000000..7cff672a26 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js @@ -0,0 +1,30 @@ +/** + * Reverts a reaction on an object. + * + * @author Marcel Werk + * @copyright 2001-2026 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.3 + * @woltlabExcludeBundle tiny + */ +define(["require", "exports", "WoltLabSuite/Core/Ajax/Backend", "../Result"], function (require, exports, Backend_1, Result_1) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.revertReaction = revertReaction; + async function revertReaction(objectType, objectID) { + const url = new URL(`${window.WSC_RPC_API_URL}core/reactions/revert`); + let response; + try { + response = (await (0, Backend_1.prepareRequest)(url) + .post({ + objectType, + objectID, + }) + .fetchAsJson()); + } + catch (e) { + return (0, Result_1.apiResultFromError)(e); + } + return (0, Result_1.apiResultFromValue)(response); + } +}); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js new file mode 100644 index 0000000000..2314daae52 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js @@ -0,0 +1,31 @@ +/** + * Sets a reaction on an object. + * + * @author Marcel Werk + * @copyright 2001-2026 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.3 + * @woltlabExcludeBundle tiny + */ +define(["require", "exports", "WoltLabSuite/Core/Ajax/Backend", "../Result"], function (require, exports, Backend_1, Result_1) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.setReaction = setReaction; + async function setReaction(objectType, objectID, reactionTypeID) { + const url = new URL(`${window.WSC_RPC_API_URL}core/reactions/set`); + let response; + try { + response = (await (0, Backend_1.prepareRequest)(url) + .post({ + objectType, + objectID, + reactionTypeID, + }) + .fetchAsJson()); + } + catch (e) { + return (0, Result_1.apiResultFromError)(e); + } + return (0, Result_1.apiResultFromValue)(response); + } +}); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js index e4390a1280..1c645ee9a1 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js @@ -123,5 +123,8 @@ define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui (0, LazyLoader_1.whenFirstSeen)("[data-report-content]", () => { void new Promise((resolve_11, reject_11) => { require(["./Ui/Moderation/Report"], resolve_11, reject_11); }).then(tslib_1.__importStar).then(({ setup }) => setup(options.reportEndpoint)); }); + (0, LazyLoader_1.whenFirstSeen)("[data-reaction-object-type]", () => { + void new Promise((resolve_12, reject_12) => { require(["./Component/Reaction/Button"], resolve_12, reject_12); }).then(tslib_1.__importStar).then(({ setup }) => setup()); + }); } }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js new file mode 100644 index 0000000000..f9bbd5ef89 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -0,0 +1,177 @@ +/** + * Handles the reactions buttons. + * + * @author Marcel Werk + * @copyright 2001-2026 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.3 + * @woltlabExcludeBundle tiny + */ +define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertReaction", "WoltLabSuite/Core/Api/Reactions/SetReaction", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Dom/Change/Listener", "focus-trap", "WoltLabSuite/Core/Ui/Alignment", "WoltLabSuite/Core/Ui/Screen", "WoltLabSuite/Core/Ui/CloseOverlay"], function (require, exports, tslib_1, RevertReaction_1, SetReaction_1, Selector_1, Listener_1, focus_trap_1, UiAlignment, UiScreen, CloseOverlay_1) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.setup = setup; + Listener_1 = tslib_1.__importDefault(Listener_1); + UiAlignment = tslib_1.__importStar(UiAlignment); + UiScreen = tslib_1.__importStar(UiScreen); + CloseOverlay_1 = tslib_1.__importDefault(CloseOverlay_1); + const availableReactions = Object.values(window.REACTION_TYPES); + class ReactionPopover { + #resolve; + #popover; + #focusTrap; + open(button) { + if (this.#resolve !== undefined) { + this.#resolve({ ok: false }); + } + this.#showPopover(button); + return new Promise((resolve) => { + this.#resolve = resolve; + }); + } + cancel() { + if (this.#resolve !== undefined) { + this.#resolve({ ok: false }); + } + this.#resolve = undefined; + this.#hidePopover(); + } + #click(reactionTypeId) { + if (this.#resolve !== undefined) { + this.#resolve({ ok: true, reactionTypeId }); + } + this.#resolve = undefined; + this.#hidePopover(); + } + #createPopover() { + if (this.#popover !== undefined) { + return; + } + this.#popover = document.createElement("div"); + this.#popover.className = "reactionPopover forceHide"; + const popoverContent = document.createElement("div"); + popoverContent.className = "reactionPopoverContent"; + this.#getSortedReactionTypes().forEach((reactionType) => { + const reactionTypeButton = document.createElement("button"); + reactionTypeButton.type = "button"; + reactionTypeButton.tabIndex = 0; + reactionTypeButton.className = "reactionTypeButton jsTooltip"; + reactionTypeButton.title = reactionType.title; + reactionTypeButton.dataset.reactionTypeId = reactionType.reactionTypeID.toString(); + reactionTypeButton.dataset.isAssignable = reactionType.isAssignable.toString(); + reactionTypeButton.innerHTML = reactionType.renderedIcon; + reactionTypeButton.addEventListener("click", () => this.#click(reactionType.reactionTypeID)); + //reactionTypeItem.addEventListener("keydown", (ev) => this.keydown(ev)); + if (!reactionType.isAssignable) { + reactionTypeButton.hidden = true; + } + popoverContent.appendChild(reactionTypeButton); + }); + this.#popover.appendChild(popoverContent); + document.body.appendChild(this.#popover); + CloseOverlay_1.default.add("WoltLabSuite/Core/Component/Reaction/Button", () => this.cancel()); + Listener_1.default.trigger(); + } + #showPopover(button) { + const popover = this.#getPopover(); + UiAlignment.set(popover, button, { + horizontal: "center", + vertical: UiScreen.is("screen-xs") ? "bottom" : "top", + }); + // The popover could be rendered below the input field on mobile, in which case + // the "first" button is displayed at the bottom and thus farthest away. Reversing + // the display order will restore the logic by placing the "first" button as close + // to the react button as possible. + const inverseOrder = popover.style.getPropertyValue("bottom") === "auto"; + if (inverseOrder) { + popover.classList.add("inverseOrder"); + } + else { + popover.classList.remove("inverseOrder"); + } + popover.querySelectorAll(".reactionTypeButton.active").forEach((element) => { + element.classList.remove("active"); + }); + if (parseInt(button.dataset.reactionTypeId)) { + const reactionTypeButton = popover.querySelector(`.reactionTypeButton[data-reaction-type-id="${button.dataset.reactionTypeId}"]`); + reactionTypeButton.classList.add("active"); + reactionTypeButton.hidden = false; + } + popover.classList.remove("forceHide"); + popover.classList.add("active"); + this.#getFocusTrap().activate(); + } + #hidePopover() { + const popover = this.#getPopover(); + popover.classList.remove("active"); + popover + .querySelectorAll('.reactionTypeButton[data-is-assignable="0"]') + .forEach((button) => (button.hidden = true)); + this.#getFocusTrap().deactivate(); + } + #getSortedReactionTypes() { + return availableReactions.sort((a, b) => a.showOrder - b.showOrder); + } + #getPopover() { + if (this.#popover === undefined) { + this.#createPopover(); + } + return this.#popover; + } + #getFocusTrap() { + if (this.#focusTrap === undefined) { + this.#focusTrap = (0, focus_trap_1.createFocusTrap)(this.#getPopover(), { + allowOutsideClick: true, + escapeDeactivates: () => { + this.#hidePopover(); + return false; + }, + preventScroll: true, + }); + } + return this.#focusTrap; + } + } + function updateReactionSummary(objectType, objectId, cachedReactions, selectedReaction) { + const reactions = new Map(); + Object.entries(cachedReactions).forEach(([key, value]) => { + reactions.set(parseInt(key), value); + }); + const component = document.querySelector(`woltlab-core-reaction-summary[object-type="${objectType}"][object-id="${objectId}"]`); + component?.setData(reactions, selectedReaction); + } + function setup() { + const reactionPopover = new ReactionPopover(); + (0, Selector_1.wheneverFirstSeen)("[data-reaction-object-type]", (button) => { + let isOpen = false; + button.addEventListener("click", (event) => { + event.stopPropagation(); // Necessary so that `Ui/CloseOverlay` does not close the popover immediately + if (isOpen) { + reactionPopover.cancel(); + isOpen = false; + return; + } + isOpen = true; + void reactionPopover.open(button).then(async (result) => { + isOpen = false; + if (!result.ok) { + return; + } + const oldReactionTypeId = parseInt(button.dataset.reactionTypeId); + if (result.reactionTypeId == oldReactionTypeId) { + const response = await (0, RevertReaction_1.revertReaction)(button.dataset.reactionObjectType, parseInt(button.dataset.objectId)); + button.dataset.reactionTypeId = "0"; + button.classList.remove("active"); + updateReactionSummary(button.dataset.reactionObjectType, parseInt(button.dataset.objectId), response.unwrap().reactions, result.reactionTypeId); + } + else { + const response = await (0, SetReaction_1.setReaction)(button.dataset.reactionObjectType, parseInt(button.dataset.objectId), result.reactionTypeId); + button.dataset.reactionTypeId = result.reactionTypeId.toString(); + button.classList.add("active"); + updateReactionSummary(button.dataset.reactionObjectType, parseInt(button.dataset.objectId), response.unwrap().reactions, result.reactionTypeId); + } + }); + }); + }); + } +}); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js index 570f80ac07..0d3ec5e712 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js @@ -5,6 +5,7 @@ * @copyright 2001-2019 WoltLab GmbH * @license GNU Lesser General Public License * @since 5.2 + * @deprecated 6.3 Use `WoltLabSuite/Core/Component/Reaction/Button` instead. */ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Dom/Change/Listener", "../../Dom/Util", "../Alignment", "../CloseOverlay", "../Screen", "focus-trap"], function (require, exports, tslib_1, Ajax, Core, Listener_1, Util_1, UiAlignment, CloseOverlay_1, UiScreen, focus_trap_1) { "use strict"; From ca5e82234fee50030b2c6f501c97103f8611d29d Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Thu, 12 Mar 2026 19:21:51 +0100 Subject: [PATCH 04/14] Hide popover on windows resize --- ts/WoltLabSuite/Core/Component/Reaction/Button.ts | 9 ++++++++- .../js/WoltLabSuite/Core/Component/Reaction/Button.js | 4 +++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts index f6231cc519..e7bb3b41ee 100644 --- a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -83,7 +83,6 @@ class ReactionPopover { reactionTypeButton.dataset.isAssignable = reactionType.isAssignable.toString(); reactionTypeButton.innerHTML = reactionType.renderedIcon; reactionTypeButton.addEventListener("click", () => this.#click(reactionType.reactionTypeID)); - //reactionTypeItem.addEventListener("keydown", (ev) => this.keydown(ev)); if (!reactionType.isAssignable) { reactionTypeButton.hidden = true; @@ -98,6 +97,14 @@ class ReactionPopover { UiCloseOverlay.add("WoltLabSuite/Core/Component/Reaction/Button", () => this.cancel()); + window.addEventListener( + "resize", + () => { + this.cancel(); + }, + { passive: true }, + ); + DomChangeListener.trigger(); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js index f9bbd5ef89..127029e8a5 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -61,7 +61,6 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe reactionTypeButton.dataset.isAssignable = reactionType.isAssignable.toString(); reactionTypeButton.innerHTML = reactionType.renderedIcon; reactionTypeButton.addEventListener("click", () => this.#click(reactionType.reactionTypeID)); - //reactionTypeItem.addEventListener("keydown", (ev) => this.keydown(ev)); if (!reactionType.isAssignable) { reactionTypeButton.hidden = true; } @@ -70,6 +69,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe this.#popover.appendChild(popoverContent); document.body.appendChild(this.#popover); CloseOverlay_1.default.add("WoltLabSuite/Core/Component/Reaction/Button", () => this.cancel()); + window.addEventListener("resize", () => { + this.cancel(); + }, { passive: true }); Listener_1.default.trigger(); } #showPopover(button) { From 22c9ffca752066f2edf9f902e3ed2ab120dfb8f0 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Thu, 12 Mar 2026 19:54:24 +0100 Subject: [PATCH 05/14] Simplify API calls --- .../Core/Api/Reactions/RevertReaction.ts | 19 +++++---------- .../Core/Api/Reactions/SetReaction.ts | 23 +++++-------------- .../Core/Api/Reactions/RevertReaction.js | 14 ++++------- .../Core/Api/Reactions/SetReaction.js | 14 ++++------- 4 files changed, 20 insertions(+), 50 deletions(-) diff --git a/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts b/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts index 07a61a1d8c..b5993923a5 100644 --- a/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts +++ b/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts @@ -9,26 +9,19 @@ */ import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend"; -import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result"; +import { fromInfallibleApiRequest } from "../Result"; type Response = { reactions: Record; }; -export async function revertReaction(objectType: string, objectID: number): Promise> { - const url = new URL(`${window.WSC_RPC_API_URL}core/reactions/revert`); - - let response: Response; - try { - response = (await prepareRequest(url) +export async function revertReaction(objectType: string, objectID: number): Promise { + return fromInfallibleApiRequest(() => { + return prepareRequest(`${window.WSC_RPC_API_URL}core/reactions/revert`) .post({ objectType, objectID, }) - .fetchAsJson()) as Response; - } catch (e) { - return apiResultFromError(e); - } - - return apiResultFromValue(response); + .fetchAsJson(); + }); } diff --git a/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts b/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts index 0076b3cedf..b364047010 100644 --- a/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts +++ b/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts @@ -9,31 +9,20 @@ */ import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend"; -import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result"; +import { fromInfallibleApiRequest } from "../Result"; type Response = { reactions: Record; }; -export async function setReaction( - objectType: string, - objectID: number, - reactionTypeID: number, -): Promise> { - const url = new URL(`${window.WSC_RPC_API_URL}core/reactions/set`); - - let response: Response; - try { - response = (await prepareRequest(url) +export async function setReaction(objectType: string, objectID: number, reactionTypeID: number): Promise { + return fromInfallibleApiRequest(() => { + return prepareRequest(`${window.WSC_RPC_API_URL}core/reactions/set`) .post({ objectType, objectID, reactionTypeID, }) - .fetchAsJson()) as Response; - } catch (e) { - return apiResultFromError(e); - } - - return apiResultFromValue(response); + .fetchAsJson(); + }); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js index 7cff672a26..672add7c8a 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js @@ -12,19 +12,13 @@ define(["require", "exports", "WoltLabSuite/Core/Ajax/Backend", "../Result"], fu Object.defineProperty(exports, "__esModule", { value: true }); exports.revertReaction = revertReaction; async function revertReaction(objectType, objectID) { - const url = new URL(`${window.WSC_RPC_API_URL}core/reactions/revert`); - let response; - try { - response = (await (0, Backend_1.prepareRequest)(url) + return (0, Result_1.fromInfallibleApiRequest)(() => { + return (0, Backend_1.prepareRequest)(`${window.WSC_RPC_API_URL}core/reactions/revert`) .post({ objectType, objectID, }) - .fetchAsJson()); - } - catch (e) { - return (0, Result_1.apiResultFromError)(e); - } - return (0, Result_1.apiResultFromValue)(response); + .fetchAsJson(); + }); } }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js index 2314daae52..60b9073330 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js @@ -12,20 +12,14 @@ define(["require", "exports", "WoltLabSuite/Core/Ajax/Backend", "../Result"], fu Object.defineProperty(exports, "__esModule", { value: true }); exports.setReaction = setReaction; async function setReaction(objectType, objectID, reactionTypeID) { - const url = new URL(`${window.WSC_RPC_API_URL}core/reactions/set`); - let response; - try { - response = (await (0, Backend_1.prepareRequest)(url) + return (0, Result_1.fromInfallibleApiRequest)(() => { + return (0, Backend_1.prepareRequest)(`${window.WSC_RPC_API_URL}core/reactions/set`) .post({ objectType, objectID, reactionTypeID, }) - .fetchAsJson()); - } - catch (e) { - return (0, Result_1.apiResultFromError)(e); - } - return (0, Result_1.apiResultFromValue)(response); + .fetchAsJson(); + }); } }); From b6fdef2cd63b6483177be86eda01b7abbca75a10 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Thu, 12 Mar 2026 19:57:44 +0100 Subject: [PATCH 06/14] Add support for simple toggle button in case only one reaction type is available --- com.woltlab.wcf/templates/reactionButton.tpl | 1 + .../Core/Component/Reaction/Button.ts | 75 +++++++++++++------ .../Core/Component/Reaction/Button.js | 53 +++++++++++-- 3 files changed, 100 insertions(+), 29 deletions(-) diff --git a/com.woltlab.wcf/templates/reactionButton.tpl b/com.woltlab.wcf/templates/reactionButton.tpl index 3eeee92c2c..54a874f6bb 100644 --- a/com.woltlab.wcf/templates/reactionButton.tpl +++ b/com.woltlab.wcf/templates/reactionButton.tpl @@ -2,6 +2,7 @@ type="button" class="reactionButton jsTooltip button{if $reactionData->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" + aria-pressed="{if $reactionData->reactionTypeID}true{else}false{/if}" data-reaction-type-id="{$reactionData->reactionTypeID}" data-reaction-object-type="{$reactionData->objectType}" data-object-id="{$reactionData->objectID}" diff --git a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts index e7bb3b41ee..83d785d534 100644 --- a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -17,6 +17,7 @@ import { createFocusTrap, FocusTrap } from "focus-trap"; import * as UiAlignment from "WoltLabSuite/Core/Ui/Alignment"; import * as UiScreen from "WoltLabSuite/Core/Ui/Screen"; import UiCloseOverlay from "WoltLabSuite/Core/Ui/CloseOverlay"; +import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex"; type Result = | { @@ -202,7 +203,38 @@ function updateReactionSummary( component?.setData(reactions, selectedReaction); } -export function setup(): void { +function setupToggleButton(): void { + wheneverFirstSeen("[data-reaction-object-type]", (button: HTMLButtonElement) => { + button.addEventListener( + "click", + promiseMutex(() => toggleButton(button)), + ); + }); +} + +async function toggleButton(button: HTMLButtonElement): Promise { + const objectId = parseInt(button.dataset.objectId!); + const objectType = button.dataset.reactionObjectType!; + let reactionTypeId: number = 0; + let reactions: Record; + + if (button.classList.contains("active")) { + reactions = (await revertReaction(objectType, objectId)).reactions; + button.dataset.reactionTypeId = "0"; + button.classList.remove("active"); + button.setAttribute("aria-pressed", "false"); + } else { + reactionTypeId = availableReactions[0].reactionTypeID; + reactions = (await setReaction(objectType, objectId, reactionTypeId)).reactions; + button.dataset.reactionTypeId = reactionTypeId.toString(); + button.classList.add("active"); + button.setAttribute("aria-pressed", "true"); + } + + updateReactionSummary(objectType, objectId, reactions, reactionTypeId); +} + +function setupPopoverButton(): void { const reactionPopover = new ReactionPopover(); wheneverFirstSeen("[data-reaction-object-type]", (button: HTMLButtonElement) => { @@ -225,35 +257,34 @@ export function setup(): void { } const oldReactionTypeId = parseInt(button.dataset.reactionTypeId!); + const objectId = parseInt(button.dataset.objectId!); + const objectType = button.dataset.reactionObjectType!; + let reactionTypeId: number = 0; + let reactions: Record; if (result.reactionTypeId == oldReactionTypeId) { - const response = await revertReaction(button.dataset.reactionObjectType!, parseInt(button.dataset.objectId!)); + reactions = (await revertReaction(objectType, objectId)).reactions; button.dataset.reactionTypeId = "0"; button.classList.remove("active"); - - updateReactionSummary( - button.dataset.reactionObjectType!, - parseInt(button.dataset.objectId!), - response.unwrap().reactions, - result.reactionTypeId, - ); + button.setAttribute("aria-pressed", "false"); } else { - const response = await setReaction( - button.dataset.reactionObjectType!, - parseInt(button.dataset.objectId!), - result.reactionTypeId, - ); - button.dataset.reactionTypeId = result.reactionTypeId.toString(); + reactionTypeId = result.reactionTypeId; + reactions = (await setReaction(objectType, objectId, reactionTypeId)).reactions; + button.dataset.reactionTypeId = reactionTypeId.toString(); button.classList.add("active"); - - updateReactionSummary( - button.dataset.reactionObjectType!, - parseInt(button.dataset.objectId!), - response.unwrap().reactions, - result.reactionTypeId, - ); + button.setAttribute("aria-pressed", "true"); } + + updateReactionSummary(objectType, objectId, reactions, reactionTypeId); }); }); }); } + +export function setup(): void { + if (availableReactions.length === 1) { + setupToggleButton(); + } else { + setupPopoverButton(); + } +} diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js index 127029e8a5..91ecd25ef4 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -7,7 +7,7 @@ * @since 6.3 * @woltlabExcludeBundle tiny */ -define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertReaction", "WoltLabSuite/Core/Api/Reactions/SetReaction", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Dom/Change/Listener", "focus-trap", "WoltLabSuite/Core/Ui/Alignment", "WoltLabSuite/Core/Ui/Screen", "WoltLabSuite/Core/Ui/CloseOverlay"], function (require, exports, tslib_1, RevertReaction_1, SetReaction_1, Selector_1, Listener_1, focus_trap_1, UiAlignment, UiScreen, CloseOverlay_1) { +define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertReaction", "WoltLabSuite/Core/Api/Reactions/SetReaction", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Dom/Change/Listener", "focus-trap", "WoltLabSuite/Core/Ui/Alignment", "WoltLabSuite/Core/Ui/Screen", "WoltLabSuite/Core/Ui/CloseOverlay", "WoltLabSuite/Core/Helper/PromiseMutex"], function (require, exports, tslib_1, RevertReaction_1, SetReaction_1, Selector_1, Listener_1, focus_trap_1, UiAlignment, UiScreen, CloseOverlay_1, PromiseMutex_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.setup = setup; @@ -142,7 +142,32 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe const component = document.querySelector(`woltlab-core-reaction-summary[object-type="${objectType}"][object-id="${objectId}"]`); component?.setData(reactions, selectedReaction); } - function setup() { + function setupToggleButton() { + (0, Selector_1.wheneverFirstSeen)("[data-reaction-object-type]", (button) => { + button.addEventListener("click", (0, PromiseMutex_1.promiseMutex)(() => toggleButton(button))); + }); + } + async function toggleButton(button) { + const objectId = parseInt(button.dataset.objectId); + const objectType = button.dataset.reactionObjectType; + let reactionTypeId = 0; + let reactions; + if (button.classList.contains("active")) { + reactions = (await (0, RevertReaction_1.revertReaction)(objectType, objectId)).reactions; + button.dataset.reactionTypeId = "0"; + button.classList.remove("active"); + button.setAttribute("aria-pressed", "false"); + } + else { + reactionTypeId = availableReactions[0].reactionTypeID; + reactions = (await (0, SetReaction_1.setReaction)(objectType, objectId, reactionTypeId)).reactions; + button.dataset.reactionTypeId = reactionTypeId.toString(); + button.classList.add("active"); + button.setAttribute("aria-pressed", "true"); + } + updateReactionSummary(objectType, objectId, reactions, reactionTypeId); + } + function setupPopoverButton() { const reactionPopover = new ReactionPopover(); (0, Selector_1.wheneverFirstSeen)("[data-reaction-object-type]", (button) => { let isOpen = false; @@ -160,20 +185,34 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe return; } const oldReactionTypeId = parseInt(button.dataset.reactionTypeId); + const objectId = parseInt(button.dataset.objectId); + const objectType = button.dataset.reactionObjectType; + let reactionTypeId = 0; + let reactions; if (result.reactionTypeId == oldReactionTypeId) { - const response = await (0, RevertReaction_1.revertReaction)(button.dataset.reactionObjectType, parseInt(button.dataset.objectId)); + reactions = (await (0, RevertReaction_1.revertReaction)(objectType, objectId)).reactions; button.dataset.reactionTypeId = "0"; button.classList.remove("active"); - updateReactionSummary(button.dataset.reactionObjectType, parseInt(button.dataset.objectId), response.unwrap().reactions, result.reactionTypeId); + button.setAttribute("aria-pressed", "false"); } else { - const response = await (0, SetReaction_1.setReaction)(button.dataset.reactionObjectType, parseInt(button.dataset.objectId), result.reactionTypeId); - button.dataset.reactionTypeId = result.reactionTypeId.toString(); + reactionTypeId = result.reactionTypeId; + reactions = (await (0, SetReaction_1.setReaction)(objectType, objectId, reactionTypeId)).reactions; + button.dataset.reactionTypeId = reactionTypeId.toString(); button.classList.add("active"); - updateReactionSummary(button.dataset.reactionObjectType, parseInt(button.dataset.objectId), response.unwrap().reactions, result.reactionTypeId); + button.setAttribute("aria-pressed", "true"); } + updateReactionSummary(objectType, objectId, reactions, reactionTypeId); }); }); }); } + function setup() { + if (availableReactions.length === 1) { + setupToggleButton(); + } + else { + setupPopoverButton(); + } + } }); From 2ddb0e1aae8dabccd975db4afafa3de7a67d2d11 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Thu, 12 Mar 2026 20:17:42 +0100 Subject: [PATCH 07/14] Improve a11y --- ts/WoltLabSuite/Core/Component/Reaction/Button.ts | 13 +++++++++++++ .../WoltLabSuite/Core/Component/Reaction/Button.js | 13 ++++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts index 83d785d534..305832c02d 100644 --- a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -18,6 +18,7 @@ import * as UiAlignment from "WoltLabSuite/Core/Ui/Alignment"; import * as UiScreen from "WoltLabSuite/Core/Ui/Screen"; import UiCloseOverlay from "WoltLabSuite/Core/Ui/CloseOverlay"; import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex"; +import { getPhrase } from "WoltLabSuite/Core/Language"; type Result = | { @@ -70,12 +71,17 @@ class ReactionPopover { this.#popover = document.createElement("div"); this.#popover.className = "reactionPopover forceHide"; + this.#popover.setAttribute("role", "listbox"); + this.#popover.setAttribute("aria-orientation", "horizontal"); + this.#popover.setAttribute("aria-label", getPhrase("wcf.reactions.react")); const popoverContent = document.createElement("div"); popoverContent.className = "reactionPopoverContent"; this.#getSortedReactionTypes().forEach((reactionType) => { const reactionTypeButton = document.createElement("button"); + reactionTypeButton.setAttribute("role", "option"); + reactionTypeButton.setAttribute("aria-selected", "false"); reactionTypeButton.type = "button"; reactionTypeButton.tabIndex = 0; reactionTypeButton.className = "reactionTypeButton jsTooltip"; @@ -130,6 +136,7 @@ class ReactionPopover { popover.querySelectorAll(".reactionTypeButton.active").forEach((element: HTMLElement) => { element.classList.remove("active"); + element.setAttribute("aria-selected", "false"); }); if (parseInt(button.dataset.reactionTypeId!)) { @@ -137,6 +144,7 @@ class ReactionPopover { `.reactionTypeButton[data-reaction-type-id="${button.dataset.reactionTypeId}"]`, ) as HTMLButtonElement; reactionTypeButton.classList.add("active"); + reactionTypeButton.setAttribute("aria-selected", "true"); reactionTypeButton.hidden = false; } @@ -239,6 +247,8 @@ function setupPopoverButton(): void { wheneverFirstSeen("[data-reaction-object-type]", (button: HTMLButtonElement) => { let isOpen = false; + button.setAttribute("aria-haspopup", "listbox"); + button.setAttribute("aria-expanded", "false"); button.addEventListener("click", (event) => { event.stopPropagation(); // Necessary so that `Ui/CloseOverlay` does not close the popover immediately @@ -249,8 +259,11 @@ function setupPopoverButton(): void { } isOpen = true; + button.setAttribute("aria-expanded", "true"); + void reactionPopover.open(button).then(async (result: Result) => { isOpen = false; + button.setAttribute("aria-expanded", "false"); if (!result.ok) { return; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js index 91ecd25ef4..fe255b75d7 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -7,7 +7,7 @@ * @since 6.3 * @woltlabExcludeBundle tiny */ -define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertReaction", "WoltLabSuite/Core/Api/Reactions/SetReaction", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Dom/Change/Listener", "focus-trap", "WoltLabSuite/Core/Ui/Alignment", "WoltLabSuite/Core/Ui/Screen", "WoltLabSuite/Core/Ui/CloseOverlay", "WoltLabSuite/Core/Helper/PromiseMutex"], function (require, exports, tslib_1, RevertReaction_1, SetReaction_1, Selector_1, Listener_1, focus_trap_1, UiAlignment, UiScreen, CloseOverlay_1, PromiseMutex_1) { +define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertReaction", "WoltLabSuite/Core/Api/Reactions/SetReaction", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Dom/Change/Listener", "focus-trap", "WoltLabSuite/Core/Ui/Alignment", "WoltLabSuite/Core/Ui/Screen", "WoltLabSuite/Core/Ui/CloseOverlay", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Language"], function (require, exports, tslib_1, RevertReaction_1, SetReaction_1, Selector_1, Listener_1, focus_trap_1, UiAlignment, UiScreen, CloseOverlay_1, PromiseMutex_1, Language_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.setup = setup; @@ -49,10 +49,15 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe } this.#popover = document.createElement("div"); this.#popover.className = "reactionPopover forceHide"; + this.#popover.setAttribute("role", "listbox"); + this.#popover.setAttribute("aria-orientation", "horizontal"); + this.#popover.setAttribute("aria-label", (0, Language_1.getPhrase)("wcf.reactions.react")); const popoverContent = document.createElement("div"); popoverContent.className = "reactionPopoverContent"; this.#getSortedReactionTypes().forEach((reactionType) => { const reactionTypeButton = document.createElement("button"); + reactionTypeButton.setAttribute("role", "option"); + reactionTypeButton.setAttribute("aria-selected", "false"); reactionTypeButton.type = "button"; reactionTypeButton.tabIndex = 0; reactionTypeButton.className = "reactionTypeButton jsTooltip"; @@ -93,10 +98,12 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe } popover.querySelectorAll(".reactionTypeButton.active").forEach((element) => { element.classList.remove("active"); + element.setAttribute("aria-selected", "false"); }); if (parseInt(button.dataset.reactionTypeId)) { const reactionTypeButton = popover.querySelector(`.reactionTypeButton[data-reaction-type-id="${button.dataset.reactionTypeId}"]`); reactionTypeButton.classList.add("active"); + reactionTypeButton.setAttribute("aria-selected", "true"); reactionTypeButton.hidden = false; } popover.classList.remove("forceHide"); @@ -171,6 +178,8 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe const reactionPopover = new ReactionPopover(); (0, Selector_1.wheneverFirstSeen)("[data-reaction-object-type]", (button) => { let isOpen = false; + button.setAttribute("aria-haspopup", "listbox"); + button.setAttribute("aria-expanded", "false"); button.addEventListener("click", (event) => { event.stopPropagation(); // Necessary so that `Ui/CloseOverlay` does not close the popover immediately if (isOpen) { @@ -179,8 +188,10 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe return; } isOpen = true; + button.setAttribute("aria-expanded", "true"); void reactionPopover.open(button).then(async (result) => { isOpen = false; + button.setAttribute("aria-expanded", "false"); if (!result.ok) { return; } From fa8d75be3f28ebbc7b72263fc0e95b9f1301d0f7 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Fri, 13 Mar 2026 11:06:19 +0100 Subject: [PATCH 08/14] Use new reaction button on `ArticlePage` --- com.woltlab.wcf/templates/article.tpl | 30 ++----------------- .../files/lib/data/article/Article.class.php | 26 +++++++++++++++- .../data/article/ArticleCollection.class.php | 28 +++++++++++++++++ .../files/lib/page/ArticlePage.class.php | 17 +---------- 4 files changed, 57 insertions(+), 44 deletions(-) create mode 100644 wcfsetup/install/files/lib/data/article/ArticleCollection.class.php diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl index 024dfb2937..0386299d2f 100644 --- a/com.woltlab.wcf/templates/article.tpl +++ b/com.woltlab.wcf/templates/article.tpl @@ -67,7 +67,6 @@
getReactionHandler()->getDataAttributes('com.woltlab.wcf.likeableArticle', $article->articleID)} > {if $articleContent->getImage() && $articleContent->getImage()->hasThumbnail('large')}
{if MODULE_LIKE && ARTICLE_ENABLE_LIKE && $__wcf->session->getPermission('user.like.canViewLike')}
- {include file="reactionSummaryList" reactionData=$articleLikeData objectType="com.woltlab.wcf.likeableArticle" objectID=$article->articleID} + {include file="reactionSummary" reactionData=$article->getReactionData()}
{/if} @@ -140,15 +139,8 @@ {icon name='triangle-exclamation'} {/if} - {if MODULE_LIKE && ARTICLE_ENABLE_LIKE && $__wcf->session->getPermission('user.like.canLike') && $article->userID != $__wcf->user->userID} - + {if $article->canReact()} + {include file="reactionButton" reactionData=$article->getReactionData()} {/if} {event name='articleLikeButtons'}{* deprecated: use footerButtons instead *} @@ -264,20 +256,4 @@ {unsafe:$article->getDiscussionProvider()->renderDiscussions()} -{if MODULE_LIKE && ARTICLE_ENABLE_LIKE} - -{/if} - {include file='footer'} diff --git a/wcfsetup/install/files/lib/data/article/Article.class.php b/wcfsetup/install/files/lib/data/article/Article.class.php index 05c634d0e9..e1ae19dd72 100644 --- a/wcfsetup/install/files/lib/data/article/Article.class.php +++ b/wcfsetup/install/files/lib/data/article/Article.class.php @@ -5,6 +5,7 @@ use wcf\data\article\category\ArticleCategory; use wcf\data\article\content\ArticleContent; use wcf\data\attachment\GroupedAttachmentList; +use wcf\data\CollectionDatabaseObject; use wcf\data\DatabaseObject; use wcf\data\ILinkableObject; use wcf\data\IPopoverObject; @@ -14,6 +15,7 @@ use wcf\system\article\discussion\CommentArticleDiscussionProvider; use wcf\system\article\discussion\IArticleDiscussionProvider; use wcf\system\article\discussion\VoidArticleDiscussionProvider; +use wcf\system\reaction\ReactionData; use wcf\system\WCF; /** @@ -38,8 +40,10 @@ * @property-read int $attachments number of attachments in the article descriptions * @property-read 0|1 $isDeleted is 1 if the article is in trash bin, otherwise 0 * @property-read 0|1 $hasLabels is `1` if labels are assigned to the article + * + * @extends CollectionDatabaseObject */ -class Article extends DatabaseObject implements ILinkableObject, IPopoverObject, IUserContent +class Article extends CollectionDatabaseObject implements ILinkableObject, IPopoverObject, IUserContent { /** * indicates that article is unpublished @@ -450,4 +454,24 @@ public function getPopoverLinkClass() { return 'articleLink'; } + + /** + * @since 6.3 + */ + public function canReact(): bool + { + return \MODULE_LIKE + && \ARTICLE_ENABLE_LIKE + && WCF::getUser()->userID + && $this->userID != WCF::getUser()->userID + && WCF::getSession()->getPermission('user.like.canLike'); + } + + /** + * @since 6.3 + */ + public function getReactionData(): ReactionData + { + return $this->getCollection()->getReactionData($this); + } } diff --git a/wcfsetup/install/files/lib/data/article/ArticleCollection.class.php b/wcfsetup/install/files/lib/data/article/ArticleCollection.class.php new file mode 100644 index 0000000000..64ffda2751 --- /dev/null +++ b/wcfsetup/install/files/lib/data/article/ArticleCollection.class.php @@ -0,0 +1,28 @@ + + * @since 6.3 + * + * @extends DatabaseObjectCollection
+ */ +class ArticleCollection extends DatabaseObjectCollection +{ + use TCollectionReactions; + + #[\Override] + protected function getReactionObjectType(): string + { + return 'com.woltlab.wcf.likeableArticle'; + } +} diff --git a/wcfsetup/install/files/lib/page/ArticlePage.class.php b/wcfsetup/install/files/lib/page/ArticlePage.class.php index c5ec1a985d..569a8c97d4 100644 --- a/wcfsetup/install/files/lib/page/ArticlePage.class.php +++ b/wcfsetup/install/files/lib/page/ArticlePage.class.php @@ -5,13 +5,11 @@ use wcf\data\article\CategoryArticleList; use wcf\data\article\ViewableArticle; use wcf\data\comment\StructuredCommentList; -use wcf\data\like\object\LikeObject; use wcf\system\comment\CommentHandler; use wcf\system\comment\manager\ICommentManager; use wcf\system\interaction\StandaloneInteractionContextMenuComponent; use wcf\system\interaction\user\ArticleInteractions; use wcf\system\MetaTagHandler; -use wcf\system\reaction\ReactionHandler; use wcf\system\request\LinkHandler; use wcf\system\WCF; use wcf\util\StringUtil; @@ -56,12 +54,6 @@ class ArticlePage extends AbstractArticlePage */ public $commentList; - /** - * like data for the article - * @var LikeObject[] - */ - public $articleLikeData = []; - /** * @inheritDoc */ @@ -116,13 +108,6 @@ public function readData() $this->previousArticle = $article; } - // fetch likes - if (MODULE_LIKE) { - $objectType = ReactionHandler::getInstance()->getObjectType('com.woltlab.wcf.likeableArticle'); - ReactionHandler::getInstance()->loadLikeObjects($objectType, [$this->article->articleID]); - $this->articleLikeData = ReactionHandler::getInstance()->getLikeObjects($objectType); - } - // add meta/og tags MetaTagHandler::getInstance()->addTag( 'og:title', @@ -205,7 +190,6 @@ public function assignVariables() WCF::getTPL()->assign([ 'previousArticle' => $this->previousArticle, 'nextArticle' => $this->nextArticle, - 'articleLikeData' => $this->articleLikeData, 'interactionContextMenu' => StandaloneInteractionContextMenuComponent::forContentInteractionButton( new ArticleInteractions(), $this->article, @@ -220,6 +204,7 @@ public function assignVariables() 'commentObjectTypeID' => 0, 'lastCommentTime' => 0, 'likeData' => [], + 'articleLikeData' => [], ]); } } From 5d3b2d6c8ff3a7268adbb1c592939f2418309779 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Fri, 13 Mar 2026 11:17:21 +0100 Subject: [PATCH 09/14] Use new reaction button for comments --- com.woltlab.wcf/templates/commentList.tpl | 10 +++++----- .../templates/commentResponseList.tpl | 12 ++++++------ ts/WoltLabSuite/Core/Component/Comment/List.ts | 18 ------------------ .../Core/Component/Comment/List.js | 17 +---------------- 4 files changed, 12 insertions(+), 45 deletions(-) diff --git a/com.woltlab.wcf/templates/commentList.tpl b/com.woltlab.wcf/templates/commentList.tpl index 26c9af5459..5e7c56156a 100644 --- a/com.woltlab.wcf/templates/commentList.tpl +++ b/com.woltlab.wcf/templates/commentList.tpl @@ -103,9 +103,7 @@
{if MODULE_LIKE && $commentManager->supportsLike() && $likeData|isset} - {include file="reactionSummaryList" isTiny=true reactionData=$likeData[comment] objectType="com.woltlab.wcf.comment" objectID=$comment->commentID} - {else} - + {include file="reactionSummaryList" reactionData=$likeData[comment] objectType="com.woltlab.wcf.comment" objectID=$comment->commentID} {/if}
@@ -122,12 +120,14 @@ {if MODULE_LIKE && $commentManager->supportsLike() && $__wcf->session->getPermission('user.like.canLike') && $comment->userID != $__wcf->user->userID} {/if} diff --git a/com.woltlab.wcf/templates/commentResponseList.tpl b/com.woltlab.wcf/templates/commentResponseList.tpl index 9882e88bd7..801f772fab 100644 --- a/com.woltlab.wcf/templates/commentResponseList.tpl +++ b/com.woltlab.wcf/templates/commentResponseList.tpl @@ -100,9 +100,7 @@
{if MODULE_LIKE && $commentManager->supportsLike() && $likeData|isset} - {include file="reactionSummaryList" isTiny=true reactionData=$likeData[response] objectType="com.woltlab.wcf.comment.response" objectID=$response->responseID} - {else} - + {include file="reactionSummaryList" reactionData=$likeData[response] objectType="com.woltlab.wcf.comment.response" objectID=$response->responseID} {/if}
@@ -110,15 +108,17 @@ {if MODULE_LIKE && $commentManager->supportsLike() && $__wcf->session->getPermission('user.like.canLike') && $response->userID != $__wcf->user->userID} {/if} - + {event name='commentResponseButtons'}
diff --git a/ts/WoltLabSuite/Core/Component/Comment/List.ts b/ts/WoltLabSuite/Core/Component/Comment/List.ts index 121bcda12a..118612d6a0 100644 --- a/ts/WoltLabSuite/Core/Component/Comment/List.ts +++ b/ts/WoltLabSuite/Core/Component/Comment/List.ts @@ -14,7 +14,6 @@ import { getPhrase } from "../../Language"; import { CommentAdd } from "./Add"; import { CommentResponseAdd } from "./Response/Add"; import * as UiScroll from "../../Ui/Scroll"; -import UiReactionHandler from "../../Ui/Reaction/Handler"; import type WoltlabCoreCommentElement from "./woltlab-core-comment"; import type WoltlabCoreCommentResponseElement from "./Response/woltlab-core-comment-response"; @@ -35,23 +34,6 @@ class CommentList { this.#initLoadNextComments(); this.#initCommentAdd(); this.#initHashHandling(); - this.#initReactions(); - } - - #initReactions(): void { - if (this.#container.dataset.enableReactions !== "true") { - return; - } - - new UiReactionHandler("com.woltlab.wcf.comment", { - containerSelector: `#${this.#container.id} .commentList__item`, - buttonSelector: ".comment__button--react", - }); - - new UiReactionHandler("com.woltlab.wcf.comment.response", { - containerSelector: `#${this.#container.id} .commentResponseList__item`, - buttonSelector: ".commentResponse__button--react", - }); } #initHashHandling(): void { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/List.js index 928aa9db32..0b3f24b02e 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/List.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/List.js @@ -6,14 +6,13 @@ * @license GNU Lesser General Public License * @since 6.0 */ -define(["require", "exports", "tslib", "../../Dom/Change/Listener", "../../Dom/Util", "../../Helper/Selector", "../../Language", "./Add", "./Response/Add", "../../Ui/Scroll", "../../Ui/Reaction/Handler", "WoltLabSuite/Core/Api/Comments/RenderComment", "WoltLabSuite/Core/Api/Comments/RenderComments", "WoltLabSuite/Core/Api/Comments/Responses/RenderResponse", "WoltLabSuite/Core/Api/Comments/Responses/RenderResponses"], function (require, exports, tslib_1, Listener_1, Util_1, Selector_1, Language_1, Add_1, Add_2, UiScroll, Handler_1, RenderComment_1, RenderComments_1, RenderResponse_1, RenderResponses_1) { +define(["require", "exports", "tslib", "../../Dom/Change/Listener", "../../Dom/Util", "../../Helper/Selector", "../../Language", "./Add", "./Response/Add", "../../Ui/Scroll", "WoltLabSuite/Core/Api/Comments/RenderComment", "WoltLabSuite/Core/Api/Comments/RenderComments", "WoltLabSuite/Core/Api/Comments/Responses/RenderResponse", "WoltLabSuite/Core/Api/Comments/Responses/RenderResponses"], function (require, exports, tslib_1, Listener_1, Util_1, Selector_1, Language_1, Add_1, Add_2, UiScroll, RenderComment_1, RenderComments_1, RenderResponse_1, RenderResponses_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.setup = setup; Listener_1 = tslib_1.__importDefault(Listener_1); Util_1 = tslib_1.__importDefault(Util_1); UiScroll = tslib_1.__importStar(UiScroll); - Handler_1 = tslib_1.__importDefault(Handler_1); class CommentList { #container; #commentResponseAdd; @@ -24,20 +23,6 @@ define(["require", "exports", "tslib", "../../Dom/Change/Listener", "../../Dom/U this.#initLoadNextComments(); this.#initCommentAdd(); this.#initHashHandling(); - this.#initReactions(); - } - #initReactions() { - if (this.#container.dataset.enableReactions !== "true") { - return; - } - new Handler_1.default("com.woltlab.wcf.comment", { - containerSelector: `#${this.#container.id} .commentList__item`, - buttonSelector: ".comment__button--react", - }); - new Handler_1.default("com.woltlab.wcf.comment.response", { - containerSelector: `#${this.#container.id} .commentResponseList__item`, - buttonSelector: ".commentResponse__button--react", - }); } #initHashHandling() { window.addEventListener("hashchange", () => { From 3643ea1eda10800e182a7443052c4ce91b98bf3f Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Fri, 13 Mar 2026 11:57:37 +0100 Subject: [PATCH 10/14] Add keyboard navigation in popover --- .../Core/Component/Reaction/Button.ts | 51 ++++++++++++++++++- .../Core/Component/Reaction/Button.js | 44 +++++++++++++++- 2 files changed, 93 insertions(+), 2 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts index 305832c02d..a3c918c3be 100644 --- a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -74,6 +74,7 @@ class ReactionPopover { this.#popover.setAttribute("role", "listbox"); this.#popover.setAttribute("aria-orientation", "horizontal"); this.#popover.setAttribute("aria-label", getPhrase("wcf.reactions.react")); + this.#popover.tabIndex = 0; const popoverContent = document.createElement("div"); popoverContent.className = "reactionPopoverContent"; @@ -83,7 +84,6 @@ class ReactionPopover { reactionTypeButton.setAttribute("role", "option"); reactionTypeButton.setAttribute("aria-selected", "false"); reactionTypeButton.type = "button"; - reactionTypeButton.tabIndex = 0; reactionTypeButton.className = "reactionTypeButton jsTooltip"; reactionTypeButton.title = reactionType.title; reactionTypeButton.dataset.reactionTypeId = reactionType.reactionTypeID.toString(); @@ -112,6 +112,10 @@ class ReactionPopover { { passive: true }, ); + this.#popover.addEventListener("keydown", (event) => { + this.#handleKeydown(event); + }); + DomChangeListener.trigger(); } @@ -192,6 +196,51 @@ class ReactionPopover { return this.#focusTrap; } + + #handleKeydown(event: KeyboardEvent): void { + const element = event.target; + if (!(element instanceof HTMLElement)) { + return; + } + + const buttons = Array.from(document.querySelectorAll('.reactionTypeButton[data-is-assignable="1"]')); + if (!buttons.length) { + return; + } + + switch (event.key) { + case "Left": + case "ArrowLeft": { + event.preventDefault(); + const index = buttons.indexOf(element); + if (index - 1 >= 0) { + buttons[index - 1].focus(); + } + break; + } + + case "Right": + case "ArrowRight": { + event.preventDefault(); + event.preventDefault(); + const index = buttons.indexOf(element); + if (index + 1 < buttons.length) { + buttons[index + 1].focus(); + } + break; + } + + case "Home": + event.preventDefault(); + buttons[0].focus(); + break; + + case "End": + event.preventDefault(); + buttons[buttons.length - 1].focus(); + break; + } + } } function updateReactionSummary( diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js index fe255b75d7..ba76093abf 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -52,6 +52,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe this.#popover.setAttribute("role", "listbox"); this.#popover.setAttribute("aria-orientation", "horizontal"); this.#popover.setAttribute("aria-label", (0, Language_1.getPhrase)("wcf.reactions.react")); + this.#popover.tabIndex = 0; const popoverContent = document.createElement("div"); popoverContent.className = "reactionPopoverContent"; this.#getSortedReactionTypes().forEach((reactionType) => { @@ -59,7 +60,6 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe reactionTypeButton.setAttribute("role", "option"); reactionTypeButton.setAttribute("aria-selected", "false"); reactionTypeButton.type = "button"; - reactionTypeButton.tabIndex = 0; reactionTypeButton.className = "reactionTypeButton jsTooltip"; reactionTypeButton.title = reactionType.title; reactionTypeButton.dataset.reactionTypeId = reactionType.reactionTypeID.toString(); @@ -77,6 +77,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe window.addEventListener("resize", () => { this.cancel(); }, { passive: true }); + this.#popover.addEventListener("keydown", (event) => { + this.#handleKeydown(event); + }); Listener_1.default.trigger(); } #showPopover(button) { @@ -140,6 +143,45 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe } return this.#focusTrap; } + #handleKeydown(event) { + const element = event.target; + if (!(element instanceof HTMLElement)) { + return; + } + const buttons = Array.from(document.querySelectorAll('.reactionTypeButton[data-is-assignable="1"]')); + if (!buttons.length) { + return; + } + switch (event.key) { + case "Left": + case "ArrowLeft": { + event.preventDefault(); + const index = buttons.indexOf(element); + if (index - 1 >= 0) { + buttons[index - 1].focus(); + } + break; + } + case "Right": + case "ArrowRight": { + event.preventDefault(); + event.preventDefault(); + const index = buttons.indexOf(element); + if (index + 1 < buttons.length) { + buttons[index + 1].focus(); + } + break; + } + case "Home": + event.preventDefault(); + buttons[0].focus(); + break; + case "End": + event.preventDefault(); + buttons[buttons.length - 1].focus(); + break; + } + } } function updateReactionSummary(objectType, objectId, cachedReactions, selectedReaction) { const reactions = new Map(); From 1ae7bce21d7180728a33fcef2039fea5ac1e1852 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Fri, 13 Mar 2026 13:51:05 +0100 Subject: [PATCH 11/14] Improve popover UI in mobile version --- ts/WoltLabSuite/Core/Component/Reaction/Button.ts | 14 ++++++++++++-- .../WoltLabSuite/Core/Component/Reaction/Button.js | 11 +++++++++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts index a3c918c3be..cb475f6c52 100644 --- a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -79,6 +79,9 @@ class ReactionPopover { const popoverContent = document.createElement("div"); popoverContent.className = "reactionPopoverContent"; + const popoverButtonList = document.createElement("div"); + popoverButtonList.className = "reactionTypeButtonList"; + this.#getSortedReactionTypes().forEach((reactionType) => { const reactionTypeButton = document.createElement("button"); reactionTypeButton.setAttribute("role", "option"); @@ -89,15 +92,22 @@ class ReactionPopover { reactionTypeButton.dataset.reactionTypeId = reactionType.reactionTypeID.toString(); reactionTypeButton.dataset.isAssignable = reactionType.isAssignable.toString(); reactionTypeButton.innerHTML = reactionType.renderedIcon; + + const reactionTypeButtonTitle = document.createElement("span"); + reactionTypeButtonTitle.className = "reactionTypeButtonTitle"; + reactionTypeButtonTitle.innerHTML = reactionType.title; + reactionTypeButton.appendChild(reactionTypeButtonTitle); + reactionTypeButton.addEventListener("click", () => this.#click(reactionType.reactionTypeID)); if (!reactionType.isAssignable) { reactionTypeButton.hidden = true; } - popoverContent.appendChild(reactionTypeButton); + popoverButtonList.appendChild(reactionTypeButton); }); + popoverContent.appendChild(popoverButtonList); this.#popover.appendChild(popoverContent); document.body.appendChild(this.#popover); @@ -186,7 +196,7 @@ class ReactionPopover { this.#focusTrap = createFocusTrap(this.#getPopover(), { allowOutsideClick: true, escapeDeactivates: (): boolean => { - this.#hidePopover(); + this.cancel(); return false; }, diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js index ba76093abf..e364fc2151 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -55,6 +55,8 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe this.#popover.tabIndex = 0; const popoverContent = document.createElement("div"); popoverContent.className = "reactionPopoverContent"; + const popoverButtonList = document.createElement("div"); + popoverButtonList.className = "reactionTypeButtonList"; this.#getSortedReactionTypes().forEach((reactionType) => { const reactionTypeButton = document.createElement("button"); reactionTypeButton.setAttribute("role", "option"); @@ -65,12 +67,17 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe reactionTypeButton.dataset.reactionTypeId = reactionType.reactionTypeID.toString(); reactionTypeButton.dataset.isAssignable = reactionType.isAssignable.toString(); reactionTypeButton.innerHTML = reactionType.renderedIcon; + const reactionTypeButtonTitle = document.createElement("span"); + reactionTypeButtonTitle.className = "reactionTypeButtonTitle"; + reactionTypeButtonTitle.innerHTML = reactionType.title; + reactionTypeButton.appendChild(reactionTypeButtonTitle); reactionTypeButton.addEventListener("click", () => this.#click(reactionType.reactionTypeID)); if (!reactionType.isAssignable) { reactionTypeButton.hidden = true; } - popoverContent.appendChild(reactionTypeButton); + popoverButtonList.appendChild(reactionTypeButton); }); + popoverContent.appendChild(popoverButtonList); this.#popover.appendChild(popoverContent); document.body.appendChild(this.#popover); CloseOverlay_1.default.add("WoltLabSuite/Core/Component/Reaction/Button", () => this.cancel()); @@ -135,7 +142,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe this.#focusTrap = (0, focus_trap_1.createFocusTrap)(this.#getPopover(), { allowOutsideClick: true, escapeDeactivates: () => { - this.#hidePopover(); + this.cancel(); return false; }, preventScroll: true, From f8c31098230ca93763da8b1ae451d8ee837a62e7 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Fri, 13 Mar 2026 13:58:16 +0100 Subject: [PATCH 12/14] Remove obsolete code --- ts/WoltLabSuite/Core/Component/Reaction/Button.ts | 1 - .../files/js/WoltLabSuite/Core/Component/Reaction/Button.js | 1 - .../install/files/lib/data/article/ArticleCollection.class.php | 1 - 3 files changed, 3 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts index cb475f6c52..75addd69ce 100644 --- a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -231,7 +231,6 @@ class ReactionPopover { case "Right": case "ArrowRight": { - event.preventDefault(); event.preventDefault(); const index = buttons.indexOf(element); if (index + 1 < buttons.length) { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js index e364fc2151..c126be6b98 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -171,7 +171,6 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe } case "Right": case "ArrowRight": { - event.preventDefault(); event.preventDefault(); const index = buttons.indexOf(element); if (index + 1 < buttons.length) { diff --git a/wcfsetup/install/files/lib/data/article/ArticleCollection.class.php b/wcfsetup/install/files/lib/data/article/ArticleCollection.class.php index 64ffda2751..148e1c96d9 100644 --- a/wcfsetup/install/files/lib/data/article/ArticleCollection.class.php +++ b/wcfsetup/install/files/lib/data/article/ArticleCollection.class.php @@ -2,7 +2,6 @@ namespace wcf\data\article; -use filebase\data\license\License; use wcf\data\DatabaseObjectCollection; use wcf\data\TCollectionReactions; From 0f2a644d454aa9b70eb6d25096a1669605ac999b Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Fri, 13 Mar 2026 14:00:21 +0100 Subject: [PATCH 13/14] Fix `#getSortedReactionTypes()` mutating the shared `availableReactions` array --- ts/WoltLabSuite/Core/Component/Reaction/Button.ts | 9 ++------- .../js/WoltLabSuite/Core/Component/Reaction/Button.js | 7 ++----- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts index 75addd69ce..4ba7752c7f 100644 --- a/ts/WoltLabSuite/Core/Component/Reaction/Button.ts +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -11,7 +11,6 @@ import { revertReaction } from "WoltLabSuite/Core/Api/Reactions/RevertReaction"; import { setReaction } from "WoltLabSuite/Core/Api/Reactions/SetReaction"; import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector"; -import { Reaction } from "WoltLabSuite/Core/Ui/Reaction/Data"; import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener"; import { createFocusTrap, FocusTrap } from "focus-trap"; import * as UiAlignment from "WoltLabSuite/Core/Ui/Alignment"; @@ -29,7 +28,7 @@ type Result = ok: false; }; -const availableReactions = Object.values(window.REACTION_TYPES); +const availableReactions = Object.values(window.REACTION_TYPES).sort((a, b) => a.showOrder - b.showOrder); class ReactionPopover { #resolve?: (value: Result) => void; @@ -82,7 +81,7 @@ class ReactionPopover { const popoverButtonList = document.createElement("div"); popoverButtonList.className = "reactionTypeButtonList"; - this.#getSortedReactionTypes().forEach((reactionType) => { + availableReactions.forEach((reactionType) => { const reactionTypeButton = document.createElement("button"); reactionTypeButton.setAttribute("role", "option"); reactionTypeButton.setAttribute("aria-selected", "false"); @@ -179,10 +178,6 @@ class ReactionPopover { this.#getFocusTrap().deactivate(); } - #getSortedReactionTypes(): Reaction[] { - return availableReactions.sort((a, b) => a.showOrder - b.showOrder); - } - #getPopover(): HTMLElement { if (this.#popover === undefined) { this.#createPopover(); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js index c126be6b98..6ce87ac6f8 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -15,7 +15,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe UiAlignment = tslib_1.__importStar(UiAlignment); UiScreen = tslib_1.__importStar(UiScreen); CloseOverlay_1 = tslib_1.__importDefault(CloseOverlay_1); - const availableReactions = Object.values(window.REACTION_TYPES); + const availableReactions = Object.values(window.REACTION_TYPES).sort((a, b) => a.showOrder - b.showOrder); class ReactionPopover { #resolve; #popover; @@ -57,7 +57,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe popoverContent.className = "reactionPopoverContent"; const popoverButtonList = document.createElement("div"); popoverButtonList.className = "reactionTypeButtonList"; - this.#getSortedReactionTypes().forEach((reactionType) => { + availableReactions.forEach((reactionType) => { const reactionTypeButton = document.createElement("button"); reactionTypeButton.setAttribute("role", "option"); reactionTypeButton.setAttribute("aria-selected", "false"); @@ -128,9 +128,6 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Api/Reactions/RevertRe .forEach((button) => (button.hidden = true)); this.#getFocusTrap().deactivate(); } - #getSortedReactionTypes() { - return availableReactions.sort((a, b) => a.showOrder - b.showOrder); - } #getPopover() { if (this.#popover === undefined) { this.#createPopover(); From 1054332517e307e1c024b401a98ddc2856661209 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Sat, 14 Mar 2026 15:25:39 +0100 Subject: [PATCH 14/14] Add missing CSS class `small` --- com.woltlab.wcf/templates/reactionButton.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/com.woltlab.wcf/templates/reactionButton.tpl b/com.woltlab.wcf/templates/reactionButton.tpl index 54a874f6bb..9b62c182c7 100644 --- a/com.woltlab.wcf/templates/reactionButton.tpl +++ b/com.woltlab.wcf/templates/reactionButton.tpl @@ -1,6 +1,6 @@