Refactor reaction handler Typescript

com.woltlab.wcf/templates/article.tpl

@@ -67,7 +67,6 @@
 
 <div
 	class="section entry article"
-	{unsafe:$__wcf->getReactionHandler()->getDataAttributes('com.woltlab.wcf.likeableArticle', $article->articleID)}
 >
 	{if $articleContent->getImage() && $articleContent->getImage()->hasThumbnail('large')}
 		<div
@@ -122,7 +121,7 @@
 	<footer class="entry__footer">
 		{if MODULE_LIKE && ARTICLE_ENABLE_LIKE && $__wcf->session->getPermission('user.like.canViewLike')}
 			<div class="article__reactionSummary">
-				{include file="reactionSummaryList" reactionData=$articleLikeData objectType="com.woltlab.wcf.likeableArticle" objectID=$article->articleID}
+				{include file="reactionSummary" reactionData=$article->getReactionData()}
 			</div>
 		{/if}
 
@@ -140,15 +139,8 @@
 							{icon name='triangle-exclamation'}
 						</button>
 					{/if}
-					{if MODULE_LIKE && ARTICLE_ENABLE_LIKE && $__wcf->session->getPermission('user.like.canLike') && $article->userID != $__wcf->user->userID}
-						<button
-							type="button"
-							class="button jsTooltip reactButton{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID} active{/if}"
-							title="{lang}wcf.reactions.react{/lang}"
-							data-reaction-type-id="{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID}{$articleLikeData[$article->articleID]->reactionTypeID}{else}0{/if}"
-						>
-							{icon name='face-smile'}
-						</button>
+					{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}
-	<script data-relocate="true">
-		require(['WoltLabSuite/Core/Ui/Reaction/Handler'], function(UiReactionHandler) {
-			new UiReactionHandler('com.woltlab.wcf.likeableArticle', {
-				// permissions
-				canReact: {if $__wcf->getUser()->userID}true{else}false{/if},
-				canReactToOwnContent: false,
-				canViewReactions: {if LIKE_SHOW_SUMMARY}true{else}false{/if},
-
-				// selectors
-				containerSelector: '.article',
-			});
-		});
-	</script>
-{/if}
-
 {include file='footer'}

com.woltlab.wcf/templates/commentList.tpl

@@ -103,9 +103,7 @@
 				<div class="comment__footer">
 					<div class="comment__reactions">
 						{if MODULE_LIKE && $commentManager->supportsLike() && $likeData|isset}
-							{include file="reactionSummaryList" isTiny=true reactionData=$likeData[comment] objectType="com.woltlab.wcf.comment" objectID=$comment->commentID}
-						{else}
-							<a href="#" class="reactionSummaryList reactionSummaryListTiny" data-object-type="com.woltlab.wcf.comment" data-object-id="{$comment->commentID}" title="{lang}wcf.reactions.summary.listReactions{/lang}" style="display: none;"></a>
+							{include file="reactionSummaryList" reactionData=$likeData[comment] objectType="com.woltlab.wcf.comment" objectID=$comment->commentID}
 						{/if}
 					</div>
 
@@ -122,12 +120,14 @@
 						{if MODULE_LIKE && $commentManager->supportsLike() && $__wcf->session->getPermission('user.like.canLike') && $comment->userID != $__wcf->user->userID}
 							<button
 								type="button"
-								class="comment__button comment__button--react jsTooltip button small {if $likeData[comment][$comment->commentID]|isset && $likeData[comment][$comment->commentID]->reactionTypeID} active{/if}"
+								class="reactionButton comment__button comment__button--react jsTooltip button small{if $likeData[comment][$comment->commentID]|isset && $likeData[comment][$comment->commentID]->reactionTypeID} active{/if}"
 								title="{lang}wcf.reactions.react{/lang}"
+								aria-pressed="{if $likeData[comment][$comment->commentID]|isset && $likeData[comment][$comment->commentID]->reactionTypeID}true{else}false{/if}"
 								data-reaction-type-id="{if $likeData[comment][$comment->commentID]|isset && $likeData[comment][$comment->commentID]->reactionTypeID}{$likeData[comment][$comment->commentID]->reactionTypeID}{else}0{/if}"
+								data-reaction-object-type="com.woltlab.wcf.comment"
+								data-object-id="{$comment->commentID}"
 							>
 								{icon name='face-smile'}
-								<span class="invisible">{lang}wcf.reactions.react{/lang}</span>
 							</button>
 						{/if}
 

com.woltlab.wcf/templates/commentResponseList.tpl

@@ -100,25 +100,25 @@
 				<div class="commentResponse__footer">
 					<div class="commentResponse__reactions">
 						{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}
-							<a href="#" class="reactionSummaryList reactionSummaryListTiny jsOnly" data-object-type="com.woltlab.wcf.comment.response" data-object-id="{$response->responseID}" title="{lang}wcf.reactions.summary.listReactions{/lang}" style="display: none;"></a>
+							{include file="reactionSummaryList" reactionData=$likeData[response] objectType="com.woltlab.wcf.comment.response" objectID=$response->responseID}
 						{/if}
 					</div>
 
 					<div class="commentResponse__buttons">
 						{if MODULE_LIKE && $commentManager->supportsLike() && $__wcf->session->getPermission('user.like.canLike') && $response->userID != $__wcf->user->userID}
 							<button
 								type="button"
-								class="commentResponse__button commentResponse__button--react jsTooltip button small {if $likeData[response][$response->responseID]|isset && $likeData[response][$response->responseID]->reactionTypeID} active{/if}"
+								class="reactionButton commentResponse__button commentResponse__button--react jsTooltip button small{if $likeData[response][$response->responseID]|isset && $likeData[response][$response->responseID]->reactionTypeID} active{/if}"
 								title="{lang}wcf.reactions.react{/lang}"
+								aria-pressed="{if $likeData[response][$response->responseID]|isset && $likeData[response][$response->responseID]->reactionTypeID}true{else}false{/if}"
 								data-reaction-type-id="{if $likeData[response][$response->responseID]|isset && $likeData[response][$response->responseID]->reactionTypeID}{$likeData[response][$response->responseID]->reactionTypeID}{else}0{/if}"
+								data-reaction-object-type="com.woltlab.wcf.comment.response"
+								data-object-id="{$response->responseID}"
 							>
 								{icon name='face-smile'}
-								<span class="invisible">{lang}wcf.reactions.react{/lang}</span>
 							</button>
 						{/if}
-						
+
 						{event name='commentResponseButtons'}
 					</div>
 

com.woltlab.wcf/templates/reactionButton.tpl

@@ -0,0 +1,11 @@
+<button
+	type="button"
+	class="reactionButton jsTooltip button small{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}"
+>
+	{icon name='face-smile'}
+</button>

com.woltlab.wcf/templates/reactionSummary.tpl

@@ -0,0 +1,6 @@
+<woltlab-core-reaction-summary
+	data="{$reactionData->reactionsJson}"
+	object-type="{$reactionData->objectType}"
+	object-id="{$reactionData->objectID}"
+	selected-reaction="{$reactionData->reactionTypeID}"
+></woltlab-core-reaction-summary>

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 <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ * @woltlabExcludeBundle tiny
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { fromInfallibleApiRequest } from "../Result";
+
+type Response = {
+  reactions: Record<number, number>;
+};
+
+export async function revertReaction(objectType: string, objectID: number): Promise<Response> {
+  return fromInfallibleApiRequest(() => {
+    return prepareRequest(`${window.WSC_RPC_API_URL}core/reactions/revert`)
+      .post({
+        objectType,
+        objectID,
+      })
+      .fetchAsJson();
+  });
+}

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 <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ * @woltlabExcludeBundle tiny
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { fromInfallibleApiRequest } from "../Result";
+
+type Response = {
+  reactions: Record<number, number>;
+};
+
+export async function setReaction(objectType: string, objectID: number, reactionTypeID: number): Promise<Response> {
+  return fromInfallibleApiRequest(() => {
+    return prepareRequest(`${window.WSC_RPC_API_URL}core/reactions/set`)
+      .post({
+        objectType,
+        objectID,
+        reactionTypeID,
+      })
+      .fetchAsJson();
+  });
+}

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());
+  });
 }

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 {