API endpoint to get style chooser and change style

Author: Cyperghost

ts/WoltLabSuite/Core/Api/Styles/ChangeStyle.ts

@@ -0,0 +1,22 @@
+/**
+ * Change the style of the current user.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 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 { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+
+export async function changeStyle(styleId: number): Promise<ApiResult<[]>> {
+  try {
+    await prepareRequest(`${window.WSC_RPC_API_URL}core/styles/${styleId}/change`).post().fetchAsJson();
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue([]);
+}

ts/WoltLabSuite/Core/Api/Styles/GetStyleChooser.ts

@@ -0,0 +1,28 @@
+/**
+ * Change the style of the current user.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 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 { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+
+type Response = {
+  template: string;
+};
+
+export async function getStyleChooser(): Promise<ApiResult<string>> {
+  let response: Response;
+
+  try {
+    response = (await prepareRequest(`${window.WSC_RPC_API_URL}core/styles/chooser`).get().fetchAsJson()) as Response;
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue(response.template);
+}

ts/WoltLabSuite/Core/Controller/Style/Changer.ts

@@ -7,70 +7,61 @@
  * @woltlabExcludeBundle all
  */
 
-import * as Ajax from "../../Ajax";
-import * as Language from "../../Language";
-import UiDialog from "../../Ui/Dialog";
-import { DialogCallbackSetup } from "../../Ui/Dialog/Data";
+import { getPhrase } from "../../Language";
+import { changeStyle } from "WoltLabSuite/Core/Api/Styles/ChangeStyle";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { getStyleChooser } from "WoltLabSuite/Core/Api/Styles/GetStyleChooser";
 
 class ControllerStyleChanger {
   /**
    * Adds the style changer to the bottom navigation.
    */
   constructor() {
     document.querySelectorAll(".jsButtonStyleChanger").forEach((link: HTMLAnchorElement) => {
-      link.addEventListener("click", (ev) => this.showDialog(ev));
+      link.addEventListener(
+        "click",
+        promiseMutex((ev) => this.showDialog(ev)),
+      );
     });
   }
 
   /**
    * Loads and displays the style change dialog.
    */
-  showDialog(event: MouseEvent): void {
+  async showDialog(event: MouseEvent): Promise<void> {
     event.preventDefault();
 
-    UiDialog.open(this);
-  }
+    const response = await getStyleChooser();
+    if (!response.ok) {
+      throw new Error("Failed to load style chooser.");
+    }
+
+    const dialog = dialogFactory().fromHtml(response.value).withoutControls();
+
+    dialog.content.querySelectorAll(".styleList > li").forEach((style: HTMLLIElement) => {
+      style.classList.add("pointer");
+      style.addEventListener("click", (ev) => this.#click(ev));
+    });
 
-  _dialogSetup(): ReturnType<DialogCallbackSetup> {
-    return {
-      id: "styleChanger",
-      options: {
-        disableContentPadding: true,
-        title: Language.get("wcf.style.changeStyle"),
-      },
-      source: {
-        data: {
-          actionName: "getStyleChooser",
-          className: "wcf\\data\\style\\StyleAction",
-        },
-        after: (content) => {
-          content.querySelectorAll(".styleList > li").forEach((style: HTMLLIElement) => {
-            style.classList.add("pointer");
-            style.addEventListener("click", (ev) => this.click(ev));
-          });
-        },
-      },
-    };
+    dialog.show(getPhrase("wcf.style.changeStyle"));
   }
 
   /**
    * Changes the style and reloads current page.
    */
-  private click(event: MouseEvent): void {
+  async #click(event: MouseEvent): Promise<void> {
     event.preventDefault();
 
     const listElement = event.currentTarget as HTMLLIElement;
+    const styleId = parseInt(listElement.dataset.styleId!, 10);
+    const response = await changeStyle(styleId);
 
-    Ajax.apiOnce({
-      data: {
-        actionName: "changeStyle",
-        className: "wcf\\data\\style\\StyleAction",
-        objectIDs: [listElement.dataset.styleId],
-      },
-      success: function () {
-        window.location.reload();
-      },
-    });
+    if (!response.ok) {
+      throw new Error("Failed to change style.");
+    }
+
+    window.location.reload();
   }
 }
 
@@ -89,5 +80,5 @@ export function setup(): void {
  * Loads and displays the style change dialog.
  */
 export function showDialog(event: MouseEvent): void {
-  controllerStyleChanger.showDialog(event);
+  void controllerStyleChanger.showDialog(event);
 }

wcfsetup/install/files/js/WoltLabSuite/Core/Api/Styles/ChangeStyle.js

@@ -169,6 +169,8 @@ static function (\wcf\event\endpoint\ControllerCollecting $event) {
             $event->register(new \wcf\system\endpoint\controller\core\styles\DisableStyle());
             $event->register(new \wcf\system\endpoint\controller\core\styles\EnableStyle());
             $event->register(new \wcf\system\endpoint\controller\core\styles\SetStyleAsDefault());
+            $event->register(new \wcf\system\endpoint\controller\core\styles\ChangeStyle());
+            $event->register(new \wcf\system\endpoint\controller\core\styles\GetStyleChooser());
             $event->register(new \wcf\system\endpoint\controller\core\users\options\DeleteOption());
             $event->register(new \wcf\system\endpoint\controller\core\users\options\DisableOption());
             $event->register(new \wcf\system\endpoint\controller\core\users\options\EnableOption());

wcfsetup/install/files/js/WoltLabSuite/Core/Api/Styles/GetStyleChooser.js

@@ -547,6 +547,8 @@ public function changeStyle()
      * Validates the 'getStyleChooser' action.
      *
      * @return void
+     *
+     * @deprecated 6.3
      */
     public function validateGetStyleChooser()
     {
@@ -557,6 +559,8 @@ public function validateGetStyleChooser()
      * Returns the style chooser dialog.
      *
      * @return array{actionName: string, template: string}
+     *
+     * @deprecated 6.3 Use the `\wcf\system\endpoint\controller\core\styles\GetStyleChooser` API-Endpoint instead.
      */
     public function getStyleChooser()
     {

wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/Changer.js

@@ -0,0 +1,44 @@
+<?php
+
+namespace wcf\system\endpoint\controller\core\styles;
+
+use Laminas\Diactoros\Response\JsonResponse;
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use wcf\data\style\Style;
+use wcf\http\Helper;
+use wcf\system\endpoint\IController;
+use wcf\system\endpoint\PostRequest;
+use wcf\system\exception\PermissionDeniedException;
+use wcf\system\WCF;
+
+/**
+ * API endpoint to change the style for the current user.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+#[PostRequest('/core/styles/{id:\d+}/change')]
+final class ChangeStyle implements IController
+{
+    #[\Override]
+    public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface
+    {
+        $style = Helper::fetchObjectFromRequestParameter($variables['id'], Style::class);
+
+        $this->assertStyleCanBeChanged($style);
+
+        (new \wcf\command\style\ChangeStyle($style))();
+
+        return new JsonResponse([]);
+    }
+
+    private function assertStyleCanBeChanged(Style $style): void
+    {
+        if ($style->isDisabled && !WCF::getSession()->getPermission('admin.style.canUseDisabledStyle')) {
+            throw new PermissionDeniedException();
+        }
+    }
+}