Remove `defaultCoverPhoto` from bootstrap

diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
index 3c2bb79d096a3cafddf8b45ec7872280243b5fab..4c72ec8b2181d4805ac933b0aff5d2f18f430b5e 100644 (file)
--- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
+++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
@@ -88,7 +88,6 @@ window.addEventListener('pageshow', function(event) {
                        dynamicColorScheme: {if $__wcf->getStyleHandler()->getColorScheme() === 'system'}true{else}false{/if},
                        endpointUserPopover: {if $__wcf->getSession()->getPermission('user.profile.canViewUserProfile')}'{link controller='UserPopover'}{/link}'{else}''{/if},
                        executeCronjobs: {if $executeCronjobs}'{link controller="CronjobPerform"}{/link}'{else}undefined{/if},
-                       defaultCoverPhoto: '{unsafe:$__wcf->styleHandler->getStyle()->getCoverPhotoUrl()|encodeJS}',
                        {if ENABLE_SHARE_BUTTONS}
                                {assign var='__shareProviders' value="\n"|explode:SHARE_BUTTONS_PROVIDERS}
                                shareButtonProviders: [

diff --git a/com.woltlab.wcf/templates/user.tpl b/com.woltlab.wcf/templates/user.tpl
index b4a34e5d38be571ac6040cd732a14e8eed4bc735..88d36daefcf178a4b76ed75f8062236080ff4b9b 100644 (file)
--- a/com.woltlab.wcf/templates/user.tpl
+++ b/com.woltlab.wcf/templates/user.tpl
@@ -115,7 +115,7 @@
                        {if $user->canEditCoverPhoto()}
                                <ul class="userProfileManageCoverPhoto buttonGroup buttonList smallButtons">
                                        <li>
-                                               <button type="button" data-edit-cover-photo="{link controller="UserCoverPhoto" id=$user->userID}{/link}" class="button small">
+                                               <button type="button" data-edit-cover-photo="{link controller="UserCoverPhoto" id=$user->userID}{/link}" data-default-cover-photo="{$__wcf->styleHandler->getStyle()->getCoverPhotoUrl()}" class="button small">
                                                        {icon name='pencil'} {lang}wcf.user.coverPhoto.management{/lang}
                                                </button>
                                        </li>

diff --git a/ts/WoltLabSuite/Core/Bootstrap.ts b/ts/WoltLabSuite/Core/Bootstrap.ts
index f23ebbc78d03b5ade77cee251341f5f401f00479..cb0032697195a33fe9bd2f7822885cf49919de6c 100644 (file)
--- a/ts/WoltLabSuite/Core/Bootstrap.ts
+++ b/ts/WoltLabSuite/Core/Bootstrap.ts
@@ -52,7 +52,6 @@ window.__wcf_bc_eventHandler = EventHandler;
 export interface BoostrapOptions {
   dynamicColorScheme: boolean;
   enableMobileMenu: boolean;
-  defaultCoverPhoto?: string;
   pageMenuMainProvider: PageMenuMainProvider;
 }
 
@@ -190,7 +189,7 @@ export function setup(options: BoostrapOptions): void {
     void import("./Component/Image/Viewer").then(({ setupLegacy }) => setupLegacy());
   });
   whenFirstSeen("[data-edit-cover-photo]", () => {
-    void import("./Component/User/CoverPhoto").then(({ setup }) => setup(options.defaultCoverPhoto));
+    void import("./Component/User/CoverPhoto").then(({ setup }) => setup());
   });
 
   // Move the reCAPTCHA widget overlay to the `pageOverlayContainer`

diff --git a/ts/WoltLabSuite/Core/BootstrapFrontend.ts b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
index 66117be6e17321b8849d9495583d7293d132c6f5..bf3f2b9c14bcf3802e8d5700677ba08ef5f17b75 100644 (file)
--- a/ts/WoltLabSuite/Core/BootstrapFrontend.ts
+++ b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
@@ -31,7 +31,6 @@ interface BootstrapOptions {
     registerUrl: string;
     notificationLastReadTime: number;
   };
-  defaultCoverPhoto?: string;
   dynamicColorScheme: boolean;
   endpointUserPopover: string;
   executeCronjobs: string | undefined;
@@ -71,7 +70,6 @@ export function setup(options: BootstrapOptions): void {
     dynamicColorScheme: options.dynamicColorScheme,
     enableMobileMenu: true,
     pageMenuMainProvider: new UiPageMenuMainFrontend(),
-    defaultCoverPhoto: options.defaultCoverPhoto,
   });
   UiPageHeaderMenu.init();
 

diff --git a/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts b/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
index b76b176ea937cc544cc39080d0c9fbaecececbb4..b591014115b12e57fcb3cc2f79e854e87dd52739 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
+++ b/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
@@ -18,6 +18,7 @@ import WoltlabCoreFile from "WoltLabSuite/Core/Component/File/woltlab-core-file"
 import { fire as fireEvent } from "WoltLabSuite/Core/Event/Handler";
 import { getPhrase } from "WoltLabSuite/Core/Language";
 import DomUtil from "WoltLabSuite/Core/Dom/Util";
+import { unescapeHTML } from "WoltLabSuite/Core/StringUtil";
 
 type ResponseGetForm = {
   dialog: string;
@@ -25,7 +26,8 @@ type ResponseGetForm = {
   title: string;
 };
 
-async function editCoverPhoto(button: HTMLElement, defaultCoverPhoto?: string): Promise<void> {
+async function editCoverPhoto(button: HTMLElement): Promise<void> {
+  const defaultCoverPhoto = button.dataset.defaultCoverPhoto;
   const json = (await prepareRequest(button.dataset.editCoverPhoto!).get().fetchAsJson()) as ResponseGetForm;
   const dialog = dialogFactory().fromHtml(json.dialog).withoutControls();
   const coverPhotoElement = getCoverPhotoElement();
@@ -34,25 +36,26 @@ async function editCoverPhoto(button: HTMLElement, defaultCoverPhoto?: string):
 
   dialog.addEventListener("afterClose", () => {
     const file = dialog.querySelector<WoltlabCoreFile>("woltlab-core-file");
-    const coverPhotoUrl = file?.link ?? defaultCoverPhoto;
+    const coverPhotoUrl = unescapeHTML(file?.link ?? defaultCoverPhoto ?? "");
+    const coverPhotoStyle = `url("${coverPhotoUrl}")`;
 
     if (FormBuilderManager.hasForm(json.formId)) {
       FormBuilderManager.unregisterForm(json.formId);
     }
 
-    if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === `url("${coverPhotoUrl}")`) {
+    if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === coverPhotoStyle) {
       // nothing changed
       return;
     }
 
     if (coverPhotoElement && coverPhotoUrl) {
-      coverPhotoElement.style.setProperty("background-image", `url(${coverPhotoUrl})`, "");
+      coverPhotoElement.style.setProperty("background-image", coverPhotoStyle, "");
     } else {
       // ACP cover photo management
       if (!coverPhotoElement && coverPhotoUrl) {
         coverPhotoNotice!.parentElement!.appendChild(
           DomUtil.createFragmentFromHtml(
-            `<div id="coverPhotoPreview" style="background-image: url(${coverPhotoUrl});"></div>`,
+            `<div id="coverPhotoPreview" style="background-image: ${coverPhotoStyle};"></div>`,
           ),
         );
         coverPhotoNotice!.remove();
@@ -79,11 +82,11 @@ function getCoverPhotoElement(): HTMLElement | null {
   return document.querySelector<HTMLElement>(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
 }
 
-export function setup(defaultCoverPhoto?: string): void {
+export function setup(): void {
   wheneverFirstSeen("[data-edit-cover-photo]", (button) => {
     button.addEventListener(
       "click",
-      promiseMutex(() => editCoverPhoto(button, defaultCoverPhoto)),
+      promiseMutex(() => editCoverPhoto(button)),
     );
   });
 }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
index 0183e78ff646f12859c04e636fc4e60a200fc33f..bcf44c189cdb3a449797fb902cd4c57df114cacc 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
@@ -154,7 +154,7 @@ define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools",
             void new Promise((resolve_12, reject_12) => { require(["./Component/Image/Viewer"], resolve_12, reject_12); }).then(tslib_1.__importStar).then(({ setupLegacy }) => setupLegacy());
         });
         (0, LazyLoader_1.whenFirstSeen)("[data-edit-cover-photo]", () => {
-            void new Promise((resolve_13, reject_13) => { require(["./Component/User/CoverPhoto"], resolve_13, reject_13); }).then(tslib_1.__importStar).then(({ setup }) => setup(options.defaultCoverPhoto));
+            void new Promise((resolve_13, reject_13) => { require(["./Component/User/CoverPhoto"], resolve_13, reject_13); }).then(tslib_1.__importStar).then(({ setup }) => setup());
         });
         // Move the reCAPTCHA widget overlay to the `pageOverlayContainer`
         // when widget form elements are placed in a dialog.

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
index fdab623b6b0eb2efc41ec3e23d17ee9296752c50..4ef44badd6af590972cb4e99333a30c6d6dff78e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
@@ -45,7 +45,6 @@ define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui
             dynamicColorScheme: options.dynamicColorScheme,
             enableMobileMenu: true,
             pageMenuMainProvider: new Frontend_1.default(),
-            defaultCoverPhoto: options.defaultCoverPhoto,
         });
         UiPageHeaderMenu.init();
         if (options.styleChanger) {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
index ec5e70a8e63133d69600f79f97cebe1080d3b57c..87ae89e16fd71daea3fa22a98f84b335ae10c1af 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
@@ -7,13 +7,14 @@
  * @since     6.2
  * @woltlabExcludeBundle all
  */
-define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ajax/Backend", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Form/Builder/Manager", "WoltLabSuite/Core/Event/Handler", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Dom/Util"], function (require, exports, tslib_1, PromiseMutex_1, Selector_1, Dialog_1, Backend_1, Notification_1, FormBuilderManager, Handler_1, Language_1, Util_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ajax/Backend", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Form/Builder/Manager", "WoltLabSuite/Core/Event/Handler", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Dom/Util", "WoltLabSuite/Core/StringUtil"], function (require, exports, tslib_1, PromiseMutex_1, Selector_1, Dialog_1, Backend_1, Notification_1, FormBuilderManager, Handler_1, Language_1, Util_1, StringUtil_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = setup;
     FormBuilderManager = tslib_1.__importStar(FormBuilderManager);
     Util_1 = tslib_1.__importDefault(Util_1);
-    async function editCoverPhoto(button, defaultCoverPhoto) {
+    async function editCoverPhoto(button) {
+        const defaultCoverPhoto = button.dataset.defaultCoverPhoto;
         const json = (await (0, Backend_1.prepareRequest)(button.dataset.editCoverPhoto).get().fetchAsJson());
         const dialog = (0, Dialog_1.dialogFactory)().fromHtml(json.dialog).withoutControls();
         const coverPhotoElement = getCoverPhotoElement();
@@ -21,21 +22,22 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
         const oldCoverPhoto = coverPhotoElement?.style.backgroundImage;
         dialog.addEventListener("afterClose", () => {
             const file = dialog.querySelector("woltlab-core-file");
-            const coverPhotoUrl = file?.link ?? defaultCoverPhoto;
+            const coverPhotoUrl = (0, StringUtil_1.unescapeHTML)(file?.link ?? defaultCoverPhoto ?? "");
+            const coverPhotoStyle = `url("${coverPhotoUrl}")`;
             if (FormBuilderManager.hasForm(json.formId)) {
                 FormBuilderManager.unregisterForm(json.formId);
             }
-            if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === `url("${coverPhotoUrl}")`) {
+            if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === coverPhotoStyle) {
                 // nothing changed
                 return;
             }
             if (coverPhotoElement && coverPhotoUrl) {
-                coverPhotoElement.style.setProperty("background-image", `url(${coverPhotoUrl})`, "");
+                coverPhotoElement.style.setProperty("background-image", coverPhotoStyle, "");
             }
             else {
                 // ACP cover photo management
                 if (!coverPhotoElement && coverPhotoUrl) {
-                    coverPhotoNotice.parentElement.appendChild(Util_1.default.createFragmentFromHtml(`<div id="coverPhotoPreview" style="background-image: url(${coverPhotoUrl});"></div>`));
+                    coverPhotoNotice.parentElement.appendChild(Util_1.default.createFragmentFromHtml(`<div id="coverPhotoPreview" style="background-image: ${coverPhotoStyle};"></div>`));
                     coverPhotoNotice.remove();
                 }
                 else if (coverPhotoElement && !coverPhotoUrl) {
@@ -53,9 +55,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
     function getCoverPhotoElement() {
         return document.querySelector(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
     }
-    function setup(defaultCoverPhoto) {
+    function setup() {
         (0, Selector_1.wheneverFirstSeen)("[data-edit-cover-photo]", (button) => {
-            button.addEventListener("click", (0, PromiseMutex_1.promiseMutex)(() => editCoverPhoto(button, defaultCoverPhoto)));
+            button.addEventListener("click", (0, PromiseMutex_1.promiseMutex)(() => editCoverPhoto(button)));
         });
     }
 });