diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl index 024dfb29373..0386299d2f6 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/com.woltlab.wcf/templates/commentList.tpl b/com.woltlab.wcf/templates/commentList.tpl index 26c9af5459f..5e7c56156a8 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 9882e88bd78..801f772fab3 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/com.woltlab.wcf/templates/reactionButton.tpl b/com.woltlab.wcf/templates/reactionButton.tpl new file mode 100644 index 00000000000..9b62c182c73 --- /dev/null +++ b/com.woltlab.wcf/templates/reactionButton.tpl @@ -0,0 +1,11 @@ + diff --git a/com.woltlab.wcf/templates/reactionSummary.tpl b/com.woltlab.wcf/templates/reactionSummary.tpl new file mode 100644 index 00000000000..4ca078204a9 --- /dev/null +++ b/com.woltlab.wcf/templates/reactionSummary.tpl @@ -0,0 +1,6 @@ + diff --git a/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts b/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts new file mode 100644 index 00000000000..b5993923a5b --- /dev/null +++ b/ts/WoltLabSuite/Core/Api/Reactions/RevertReaction.ts @@ -0,0 +1,27 @@ +/** + * 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 { fromInfallibleApiRequest } from "../Result"; + +type Response = { + reactions: Record; +}; + +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(); + }); +} diff --git a/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts b/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts new file mode 100644 index 00000000000..b3640470106 --- /dev/null +++ b/ts/WoltLabSuite/Core/Api/Reactions/SetReaction.ts @@ -0,0 +1,28 @@ +/** + * 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 { fromInfallibleApiRequest } from "../Result"; + +type Response = { + reactions: Record; +}; + +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(); + }); +} diff --git a/ts/WoltLabSuite/Core/BootstrapFrontend.ts b/ts/WoltLabSuite/Core/BootstrapFrontend.ts index 9f56aba6357..034c889f5c6 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/Comment/List.ts b/ts/WoltLabSuite/Core/Component/Comment/List.ts index 121bcda12a0..118612d6a08 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/ts/WoltLabSuite/Core/Component/Reaction/Button.ts b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts new file mode 100644 index 00000000000..4ba7752c7f5 --- /dev/null +++ b/ts/WoltLabSuite/Core/Component/Reaction/Button.ts @@ -0,0 +1,356 @@ +/** + * 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 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"; +import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex"; +import { getPhrase } from "WoltLabSuite/Core/Language"; + +type Result = + | { + ok: true; + reactionTypeId: number; + } + | { + ok: false; + }; + +const availableReactions = Object.values(window.REACTION_TYPES).sort((a, b) => a.showOrder - b.showOrder); + +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"; + 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"; + + const popoverButtonList = document.createElement("div"); + popoverButtonList.className = "reactionTypeButtonList"; + + availableReactions.forEach((reactionType) => { + const reactionTypeButton = document.createElement("button"); + reactionTypeButton.setAttribute("role", "option"); + reactionTypeButton.setAttribute("aria-selected", "false"); + reactionTypeButton.type = "button"; + reactionTypeButton.className = "reactionTypeButton jsTooltip"; + reactionTypeButton.title = reactionType.title; + 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; + } + + popoverButtonList.appendChild(reactionTypeButton); + }); + + popoverContent.appendChild(popoverButtonList); + this.#popover.appendChild(popoverContent); + + document.body.appendChild(this.#popover); + + UiCloseOverlay.add("WoltLabSuite/Core/Component/Reaction/Button", () => this.cancel()); + + window.addEventListener( + "resize", + () => { + this.cancel(); + }, + { passive: true }, + ); + + this.#popover.addEventListener("keydown", (event) => { + this.#handleKeydown(event); + }); + + 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"); + element.setAttribute("aria-selected", "false"); + }); + + if (parseInt(button.dataset.reactionTypeId!)) { + const reactionTypeButton = popover.querySelector( + `.reactionTypeButton[data-reaction-type-id="${button.dataset.reactionTypeId}"]`, + ) as HTMLButtonElement; + reactionTypeButton.classList.add("active"); + reactionTypeButton.setAttribute("aria-selected", "true"); + 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(); + } + + #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.cancel(); + + return false; + }, + preventScroll: true, + }); + } + + 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(); + 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: 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); +} + +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) => { + 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) { + reactionPopover.cancel(); + isOpen = false; + return; + } + + 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; + } + + 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) { + reactions = (await revertReaction(objectType, objectId)).reactions; + button.dataset.reactionTypeId = "0"; + button.classList.remove("active"); + button.setAttribute("aria-pressed", "false"); + } else { + reactionTypeId = result.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); + }); + }); + }); +} + +export function setup(): void { + if (availableReactions.length === 1) { + setupToggleButton(); + } else { + setupPopoverButton(); + } +} diff --git a/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts b/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts index 6c3de17677a..3e340588e94 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 00000000000..672add7c8a7 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/RevertReaction.js @@ -0,0 +1,24 @@ +/** + * 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) { + return (0, Result_1.fromInfallibleApiRequest)(() => { + return (0, Backend_1.prepareRequest)(`${window.WSC_RPC_API_URL}core/reactions/revert`) + .post({ + objectType, + objectID, + }) + .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 new file mode 100644 index 00000000000..60b90733302 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Reactions/SetReaction.js @@ -0,0 +1,25 @@ +/** + * 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) { + return (0, Result_1.fromInfallibleApiRequest)(() => { + return (0, Backend_1.prepareRequest)(`${window.WSC_RPC_API_URL}core/reactions/set`) + .post({ + objectType, + objectID, + reactionTypeID, + }) + .fetchAsJson(); + }); + } +}); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js index e4390a12806..1c645ee9a18 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/Comment/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/List.js index 928aa9db323..0b3f24b02e4 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", () => { 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 00000000000..6ce87ac6f84 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Reaction/Button.js @@ -0,0 +1,274 @@ +/** + * 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", "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; + 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).sort((a, b) => a.showOrder - b.showOrder); + 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"; + 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"; + const popoverButtonList = document.createElement("div"); + popoverButtonList.className = "reactionTypeButtonList"; + availableReactions.forEach((reactionType) => { + const reactionTypeButton = document.createElement("button"); + reactionTypeButton.setAttribute("role", "option"); + reactionTypeButton.setAttribute("aria-selected", "false"); + reactionTypeButton.type = "button"; + reactionTypeButton.className = "reactionTypeButton jsTooltip"; + reactionTypeButton.title = reactionType.title; + 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; + } + 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()); + window.addEventListener("resize", () => { + this.cancel(); + }, { passive: true }); + this.#popover.addEventListener("keydown", (event) => { + this.#handleKeydown(event); + }); + 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"); + 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"); + 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(); + } + #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.cancel(); + return false; + }, + preventScroll: true, + }); + } + 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(); + 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(); + 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 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; + 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) { + reactionPopover.cancel(); + isOpen = false; + 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; + } + 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) { + reactions = (await (0, RevertReaction_1.revertReaction)(objectType, objectId)).reactions; + button.dataset.reactionTypeId = "0"; + button.classList.remove("active"); + button.setAttribute("aria-pressed", "false"); + } + else { + reactionTypeId = result.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 setup() { + if (availableReactions.length === 1) { + setupToggleButton(); + } + else { + setupPopoverButton(); + } + } +}); 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 570f80ac073..0d3ec5e7124 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"; 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 00000000000..0bd62ed17dc --- /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/data/article/Article.class.php b/wcfsetup/install/files/lib/data/article/Article.class.php index 05c634d0e9d..e1ae19dd722 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 00000000000..148e1c96d93 --- /dev/null +++ b/wcfsetup/install/files/lib/data/article/ArticleCollection.class.php @@ -0,0 +1,27 @@ + + * @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 c5ec1a985de..569a8c97d42 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' => [], ]); } } 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 00000000000..80d435cad0d --- /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 00000000000..f7b5e963eef --- /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, + ) {} +} 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 00000000000..394d2c85e82 --- /dev/null +++ b/wcfsetup/install/files/lib/system/reaction/ReactionData.class.php @@ -0,0 +1,14 @@ +