From: Cyperghost Date: Tue, 17 Dec 2024 12:48:11 +0000 (+0100) Subject: Render quote tab dynamic X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=1d5d1f582d4e5f63623518f9827ac69132641e39;p=GitHub%2FWoltLab%2FWCF.git Render quote tab dynamic --- diff --git a/com.woltlab.wcf/templates/__messageFormQuote.tpl b/com.woltlab.wcf/templates/__messageFormQuote.tpl index 30e8947507..d4b635e106 100644 --- a/com.woltlab.wcf/templates/__messageFormQuote.tpl +++ b/com.woltlab.wcf/templates/__messageFormQuote.tpl @@ -1,5 +1,11 @@ {* TODO *} -
+
+ + diff --git a/com.woltlab.wcf/templates/__messageFormQuoteInline.tpl b/com.woltlab.wcf/templates/__messageFormQuoteInline.tpl index 30e8947507..d4b635e106 100644 --- a/com.woltlab.wcf/templates/__messageFormQuoteInline.tpl +++ b/com.woltlab.wcf/templates/__messageFormQuoteInline.tpl @@ -1,5 +1,11 @@ {* TODO *} -
+
+ + diff --git a/com.woltlab.wcf/templates/messageFormTabs.tpl b/com.woltlab.wcf/templates/messageFormTabs.tpl index ee2625ec72..0044e7b25f 100644 --- a/com.woltlab.wcf/templates/messageFormTabs.tpl +++ b/com.woltlab.wcf/templates/messageFormTabs.tpl @@ -9,9 +9,8 @@
    • {/if} {if $__messageFormSettings}
    • {/if} -
  • - {* TODO change count *} - +
    • {if $__showPoll|isset && $__showPoll}
    • {/if} {event name='tabMenuTabs'} diff --git a/com.woltlab.wcf/templates/messageFormTabsInline.tpl b/com.woltlab.wcf/templates/messageFormTabsInline.tpl index c84fa26a82..82728fce2a 100644 --- a/com.woltlab.wcf/templates/messageFormTabsInline.tpl +++ b/com.woltlab.wcf/templates/messageFormTabsInline.tpl @@ -13,9 +13,8 @@
    • {/if} {if $__messageFormSettingsInlineContent}
    • {/if} -
  • - {* TODO change count *} - +
    • {if $__showPoll|isset && $__showPoll}
    • {/if} {event name='tabMenuTabs'} diff --git a/ts/WoltLabSuite/Core/Component/Message/MessageTabMenu.ts b/ts/WoltLabSuite/Core/Component/Message/MessageTabMenu.ts index 0c87f8f370..37dfd7c454 100644 --- a/ts/WoltLabSuite/Core/Component/Message/MessageTabMenu.ts +++ b/ts/WoltLabSuite/Core/Component/Message/MessageTabMenu.ts @@ -65,6 +65,31 @@ class TabMenu { this.#activeTabName = tabName; } + showTab(tabName: string, title?: string): void { + this.#tabs + .filter((element) => element.dataset.name === tabName) + .forEach((element) => { + element.hidden = false; + + // Set new title + if (title) { + element.querySelector("span")!.textContent = title; + } + }); + } + + hideTab(tabName: string): void { + this.#tabs + .filter((element) => element.dataset.name === tabName) + .forEach((element) => { + element.hidden = true; + + if (element.classList.contains("active")) { + this.#closeAllTabs(); + } + }); + } + #init(): void { for (let i = 0; i < this.#tabs.length; i++) { const tab = this.#tabs[i]; diff --git a/ts/WoltLabSuite/Core/Component/Quote/List.ts b/ts/WoltLabSuite/Core/Component/Quote/List.ts new file mode 100644 index 0000000000..27604f26b6 --- /dev/null +++ b/ts/WoltLabSuite/Core/Component/Quote/List.ts @@ -0,0 +1,77 @@ +/** + * Handles quotes for CKEditor 5 message fields. + * + * @author Olaf Braun + * @copyright 2001-2024 WoltLab GmbH + * @license GNU Lesser General Public License + * @since 6.2 + */ +import * as Core from "WoltLabSuite/Core/Core"; +import { listenToCkeditor } from "WoltLabSuite/Core/Component/Ckeditor/Event"; +import type { CKEditor } from "WoltLabSuite/Core/Component/Ckeditor"; +import { getTabMenu } from "WoltLabSuite/Core/Component/Message/MessageTabMenu"; +import { getPhrase } from "WoltLabSuite/Core/Language"; + +export const STORAGE_KEY = Core.getStoragePrefix() + "quotes"; +const quoteLists = new Map(); + +class QuoteList { + #container: HTMLElement; + #editor: CKEditor; + #editorId: string; + + constructor(editorId: string, editor: CKEditor) { + this.#editorId = editorId; + this.#editor = editor; + this.#container = document.getElementById(`quotes_${editorId}`)!; + if (this.#container === null) { + throw new Error(`The quotes container for '${editorId}' does not exist.`); + } + + window.addEventListener("storage", (event) => { + if (event.key !== STORAGE_KEY) { + return; + } + + this.renderQuotes(event.newValue); + }); + + this.renderQuotes(window.localStorage.getItem(STORAGE_KEY)); + } + + public renderQuotes(template: string | null): void { + this.#container.innerHTML = template || ""; + + if (template) { + getTabMenu(this.#editorId)?.showTab( + "quotes", + getPhrase("wcf.message.quote.showQuotes", { + count: this.#container.childElementCount, + }), + ); + } else { + getTabMenu(this.#editorId)?.hideTab("quotes"); + } + } +} + +export function getQuoteList(editorId: string): QuoteList | undefined { + return quoteLists.get(editorId); +} + +export function setup(editorId: string): void { + if (quoteLists.has(editorId)) { + return; + } + + const editor = document.getElementById(editorId); + if (editor === null) { + throw new Error(`The editor '${editorId}' does not exist.`); + } + + listenToCkeditor(editor).ready(({ ckeditor }) => { + if (ckeditor.features.quoteBlock) { + quoteLists.set(editorId, new QuoteList(editorId, ckeditor)); + } + }); +} diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Message/MessageTabMenu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Message/MessageTabMenu.js index 84ec5d2ddc..9cf054b3e2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Message/MessageTabMenu.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Message/MessageTabMenu.js @@ -53,6 +53,27 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/Selector", "Wol this.#tabContainers[tabIndex].classList.add("active"); this.#activeTabName = tabName; } + showTab(tabName, title) { + this.#tabs + .filter((element) => element.dataset.name === tabName) + .forEach((element) => { + element.hidden = false; + // Set new title + if (title) { + element.querySelector("span").textContent = title; + } + }); + } + hideTab(tabName) { + this.#tabs + .filter((element) => element.dataset.name === tabName) + .forEach((element) => { + element.hidden = true; + if (element.classList.contains("active")) { + this.#closeAllTabs(); + } + }); + } #init() { for (let i = 0; i < this.#tabs.length; i++) { const tab = this.#tabs[i]; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Quote/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Quote/List.js new file mode 100644 index 0000000000..c00ea38c31 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Quote/List.js @@ -0,0 +1,58 @@ +define(["require", "exports", "tslib", "WoltLabSuite/Core/Core", "WoltLabSuite/Core/Component/Ckeditor/Event", "WoltLabSuite/Core/Component/Message/MessageTabMenu", "WoltLabSuite/Core/Language"], function (require, exports, tslib_1, Core, Event_1, MessageTabMenu_1, Language_1) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.STORAGE_KEY = void 0; + exports.getQuoteList = getQuoteList; + exports.setup = setup; + Core = tslib_1.__importStar(Core); + exports.STORAGE_KEY = Core.getStoragePrefix() + "quotes"; + const quoteLists = new Map(); + class QuoteList { + #container; + #editor; + #editorId; + constructor(editorId, editor) { + this.#editorId = editorId; + this.#editor = editor; + this.#container = document.getElementById(`quotes_${editorId}`); + if (this.#container === null) { + throw new Error(`The quotes container for '${editorId}' does not exist.`); + } + window.addEventListener("storage", (event) => { + if (event.key !== exports.STORAGE_KEY) { + return; + } + this.renderQuotes(event.newValue); + }); + this.renderQuotes(window.localStorage.getItem(exports.STORAGE_KEY)); + } + renderQuotes(template) { + this.#container.innerHTML = template || ""; + if (template) { + (0, MessageTabMenu_1.getTabMenu)(this.#editorId)?.showTab("quotes", (0, Language_1.getPhrase)("wcf.message.quote.showQuotes", { + count: this.#container.childElementCount, + })); + } + else { + (0, MessageTabMenu_1.getTabMenu)(this.#editorId)?.hideTab("quotes"); + } + } + } + function getQuoteList(editorId) { + return quoteLists.get(editorId); + } + function setup(editorId) { + if (quoteLists.has(editorId)) { + return; + } + const editor = document.getElementById(editorId); + if (editor === null) { + throw new Error(`The editor '${editorId}' does not exist.`); + } + (0, Event_1.listenToCkeditor)(editor).ready(({ ckeditor }) => { + if (ckeditor.features.quoteBlock) { + quoteLists.set(editorId, new QuoteList(editorId, ckeditor)); + } + }); + } +}); diff --git a/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php b/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php index 6bced647c0..54aa1975fd 100644 --- a/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php +++ b/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php @@ -136,6 +136,8 @@ final class PreloadPhrasesCollectingListener $event->preload('wcf.message.share.permalink.html'); $event->preload('wcf.message.share.socialMedia'); + $event->preload('wcf.message.quote.showQuotes'); + $event->preload('wcf.moderation.report.reportContent'); $event->preload('wcf.page.jumpTo');