Skip to content

Commit 3e56b31

Browse files
BurntimeXBurntimeX
committed
Migrate WCF.Message.Preview to Typescript
1 parent c50ad62 commit 3e56b31

File tree

11 files changed

+320
-48
lines changed

11 files changed

+320
-48
lines changed

‎com.woltlab.wcf/templates/articleAdd.tpl‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -615,29 +615,34 @@
615615
</div>
616616
</form>
617617

618+
<script data-relocate="true">
619+
require(["WoltLabSuite/Core/Controller/Message/I18nPreview"], ({ setup }) => {
620+
{jsphrase name='wcf.global.preview'}
621+
setup(
622+
[
623+
{if !$isMultilingual}
624+
'content0',
625+
{else}
626+
{implode from=$availableLanguages item=availableLanguage}'content{$availableLanguage->languageID}'{/implode}
627+
{/if}
628+
],
629+
'buttonMessagePreview',
630+
'com.woltlab.wcf.article.content',
631+
{if $action === 'edit'}{$article->articleID}{else}0{/if}
632+
);
633+
});
634+
</script>
635+
618636
{js application='wcf' file='WCF.Label' bundle='WCF.Combined'}
619637
<script data-relocate="true">
620638
$(function() {
621639
WCF.Language.addObject({
622640
'wcf.label.none': '{jslang}wcf.label.none{/jslang}',
623-
'wcf.global.preview': '{jslang}wcf.global.preview{/jslang}',
624641
});
625642
626643
{if !$labelGroups|empty}
627644
new WCF.Label.ArticleLabelChooser({ {implode from=$labelGroupsToCategories key=__labelCategoryID item=labelGroupIDs}{@$__labelCategoryID}: [ {implode from=$labelGroupIDs item=labelGroupID}{@$labelGroupID}{/implode} ] {/implode} }, { {implode from=$labelIDs key=groupID item=labelID}{@$groupID}: {@$labelID}{/implode} }, '.articleAddForm');
628645
{/if}
629-
630-
new WCF.Message.I18nPreview({
631-
messageFields: [
632-
{if !$isMultilingual}
633-
'content0',
634-
{else}
635-
{implode from=$availableLanguages item=availableLanguage}'content{$availableLanguage->languageID}'{/implode}
636-
{/if}
637-
],
638-
messageObjectType: 'com.woltlab.wcf.article.content',
639-
messageObjectID: {if $action === 'edit'}{$article->articleID}{else}0{/if}
640-
});
641646
});
642647
</script>
643648

‎com.woltlab.wcf/templates/messageFormPreviewButton.tpl‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,13 @@
66
<button type="button" id="{$previewButtonID}" class="button jsOnly">{lang}wcf.global.button.preview{/lang}</button>
77

88
<script data-relocate="true">
9-
$(function() {
10-
WCF.Language.addObject({
11-
'wcf.global.preview': '{jslang}wcf.global.preview{/jslang}'
12-
});
13-
14-
new WCF.Message.DefaultPreview({
15-
messageFieldID: '{$previewMessageFieldID}',
16-
previewButtonID: '{$previewButtonID}',
17-
messageObjectType: '{$previewMessageObjectType}',
18-
messageObjectID: '{$previewMessageObjectID}'
19-
});
9+
require(["WoltLabSuite/Core/Controller/Message/Preview"], ({ setup }) => {
10+
{jsphrase name='wcf.global.preview'}
11+
setup(
12+
'{unsafe:$previewMessageFieldID|encodeJS}',
13+
'{unsafe:$previewButtonID|encodeJS}',
14+
'{unsafe:$previewMessageObjectType|encodeJS}',
15+
'{unsafe:$previewMessageObjectID|encodeJS}'
16+
);
2017
});
2118
</script>

‎com.woltlab.wcf/templates/shared_wysiwygPreviewFormButton.tpl‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,13 @@
55
*}>{$button->getLabel()}</button>
66

77
<script data-relocate="true">
8-
require(['Language'], function(Language) {
9-
Language.addObject({
10-
'wcf.global.preview': '{jslang}wcf.global.preview{/jslang}'
11-
});
12-
13-
new WCF.Message.DefaultPreview({
14-
messageFieldID: '{@$button->getPrefixedWysiwygId()|encodeJS}',
15-
previewButtonID: '{@$button->getPrefixedId()|encodeJS}',
16-
messageObjectType: '{@$button->getObjectType()->objectType|encodeJS}',
17-
messageObjectID: '{@$button->getObjectId()}'
18-
});
8+
require(["WoltLabSuite/Core/Controller/Message/Preview"], ({ setup }) => {
9+
{jsphrase name='wcf.global.preview'}
10+
setup(
11+
'{unsafe:$button->getPrefixedWysiwygId()|encodeJS}',
12+
'{unsafe:$button->getPrefixedId()|encodeJS}',
13+
'{unsafe:$button->getObjectType()->objectType|encodeJS}',
14+
'{unsafe:$button->getObjectId()}'
15+
);
1916
});
2017
</script>

‎ts/WoltLabSuite/Core/Controller/Message/I18nPreview.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/**
2+
* Provides previews for mulitple CKEditor 5 message fields.
3+
*
4+
* @author Marcel Werk
5+
* @copyright 2001-2024 WoltLab GmbH
6+
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
7+
* @since 6.2
8+
*/
9+
10+
import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
11+
import { dboAction } from "WoltLabSuite/Core/Ajax";
12+
import { listenToCkeditor } from "WoltLabSuite/Core/Component/Ckeditor/Event";
13+
import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
14+
import { getPhrase } from "WoltLabSuite/Core/Language";
15+
import DomUtil from "WoltLabSuite/Core/Dom/Util";
16+
import { CKEditor } from "WoltLabSuite/Core/Component/Ckeditor";
17+
18+
type ResponseGetMessagePreview = {
19+
message: string;
20+
raw: string;
21+
};
22+
23+
async function loadPreview(message: string, objectType: string, objectId: number): Promise<void> {
24+
const response = (await dboAction("getMessagePreview", "wcf\\data\\bbcode\\MessagePreviewAction")
25+
.payload({
26+
data: {
27+
message,
28+
},
29+
messageObjectType: objectType,
30+
messageObjectID: objectId,
31+
})
32+
.dispatch()) as ResponseGetMessagePreview;
33+
34+
const dialog = dialogFactory()
35+
.fromHtml('<div class="htmlContent">' + response.message + "</div>")
36+
.withoutControls();
37+
dialog.show(getPhrase("wcf.global.preview"));
38+
}
39+
40+
function getEditorMap(messageFieldIds: string[]): Map<string, CKEditor> {
41+
const map = new Map<string, CKEditor>();
42+
messageFieldIds.forEach((messageFieldId) => {
43+
listenToCkeditor(document.getElementById(messageFieldId)!).ready(({ ckeditor }) => {
44+
map.set(messageFieldId, ckeditor);
45+
});
46+
});
47+
48+
return map;
49+
}
50+
51+
function getActiveEditor(map: Map<string, CKEditor>): CKEditor | undefined {
52+
let activeEditor: CKEditor | undefined = undefined;
53+
map.forEach((editor) => {
54+
if (editor.isVisible()) {
55+
activeEditor = editor;
56+
}
57+
});
58+
59+
return activeEditor;
60+
}
61+
62+
export function setup(messageFieldIds: string[], previewButtonId: string, objectType: string, objectId: number): void {
63+
const map = getEditorMap(messageFieldIds);
64+
65+
document.getElementById(previewButtonId)?.addEventListener(
66+
"click",
67+
promiseMutex(() => {
68+
const activeEditor = getActiveEditor(map);
69+
if (activeEditor === undefined) {
70+
return Promise.resolve();
71+
}
72+
73+
if (activeEditor.getHtml() === "") {
74+
DomUtil.innerError(activeEditor.element, getPhrase("wcf.global.form.error.empty"));
75+
return Promise.resolve();
76+
} else {
77+
DomUtil.innerError(activeEditor.element, false);
78+
}
79+
80+
return loadPreview(activeEditor.getHtml(), objectType, objectId);
81+
}),
82+
);
83+
}

‎ts/WoltLabSuite/Core/Controller/Message/Preview.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* Provides previews for CKEditor 5 message fields.
3+
*
4+
* @author Marcel Werk
5+
* @copyright 2001-2024 WoltLab GmbH
6+
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
7+
* @since 6.2
8+
*/
9+
10+
import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
11+
import { dboAction } from "WoltLabSuite/Core/Ajax";
12+
import { listenToCkeditor } from "WoltLabSuite/Core/Component/Ckeditor/Event";
13+
import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
14+
import { getPhrase } from "WoltLabSuite/Core/Language";
15+
import DomUtil from "WoltLabSuite/Core/Dom/Util";
16+
17+
type ResponseGetMessagePreview = {
18+
message: string;
19+
raw: string;
20+
};
21+
22+
async function loadPreview(message: string, objectType: string, objectId: number): Promise<void> {
23+
const response = (await dboAction("getMessagePreview", "wcf\\data\\bbcode\\MessagePreviewAction")
24+
.payload({
25+
data: {
26+
message,
27+
},
28+
messageObjectType: objectType,
29+
messageObjectID: objectId,
30+
})
31+
.dispatch()) as ResponseGetMessagePreview;
32+
33+
const dialog = dialogFactory()
34+
.fromHtml('<div class="htmlContent">' + response.message + "</div>")
35+
.withoutControls();
36+
dialog.show(getPhrase("wcf.global.preview"));
37+
}
38+
39+
export function setup(messageFieldId: string, previewButtonId: string, objectType: string, objectId: number): void {
40+
listenToCkeditor(document.getElementById(messageFieldId)!).ready(({ ckeditor }) => {
41+
document.getElementById(previewButtonId)?.addEventListener(
42+
"click",
43+
promiseMutex(() => {
44+
if (ckeditor.getHtml() === "") {
45+
DomUtil.innerError(ckeditor.element, getPhrase("wcf.global.form.error.empty"));
46+
return Promise.resolve();
47+
} else {
48+
DomUtil.innerError(ckeditor.element, false);
49+
}
50+
51+
return loadPreview(ckeditor.getHtml(), objectType, objectId);
52+
}),
53+
);
54+
});
55+
}

‎ts/WoltLabSuite/Core/Controller/User/Signature/Preview.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
/**
2+
* Handles the preview of signatures.
3+
*
4+
* @author Marcel Werk
5+
* @copyright 2001-2024 WoltLab GmbH
6+
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
7+
* @since 6.2
8+
*/
9+
110
import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
211
import { dboAction } from "WoltLabSuite/Core/Ajax";
312
import { listenToCkeditor } from "WoltLabSuite/Core/Component/Ckeditor/Event";

‎wcfsetup/install/files/acp/templates/articleAdd.tpl‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -616,30 +616,36 @@
616616
</div>
617617
</form>
618618

619+
<script data-relocate="true">
620+
require(["WoltLabSuite/Core/Controller/Message/I18nPreview"], ({ setup }) => {
621+
{jsphrase name='wcf.global.preview'}
622+
setup(
623+
[
624+
{if !$isMultilingual}
625+
'content0',
626+
{else}
627+
{implode from=$availableLanguages item=availableLanguage}'content{$availableLanguage->languageID}'{/implode}
628+
{/if}
629+
],
630+
'buttonMessagePreview',
631+
'com.woltlab.wcf.article.content',
632+
{if $action === 'edit'}{$article->articleID}{else}0{/if}
633+
);
634+
});
635+
</script>
636+
619637
{js application='wcf' file='WCF.Label' bundle='WCF.Combined'}
620638
<script data-relocate="true">
621639
$(function() {
622640
WCF.Language.addObject({
623641
'wcf.label.none': '{jslang}wcf.label.none{/jslang}',
624-
'wcf.global.preview': '{jslang}wcf.global.preview{/jslang}',
625642
});
626643
627644
{if !$labelGroups|empty}
628645
new WCF.Label.ArticleLabelChooser({ {implode from=$labelGroupsToCategories key=__labelCategoryID item=labelGroupIDs}{@$__labelCategoryID}: [ {implode from=$labelGroupIDs item=labelGroupID}{@$labelGroupID}{/implode} ] {/implode} }, { {implode from=$labelIDs key=groupID item=labelID}{@$groupID}: {@$labelID}{/implode} }, '.articleAddForm');
629646
{/if}
630-
631-
new WCF.Message.I18nPreview({
632-
messageFields: [
633-
{if !$isMultilingual}
634-
'content0',
635-
{else}
636-
{implode from=$availableLanguages item=availableLanguage}'content{$availableLanguage->languageID}'{/implode}
637-
{/if}
638-
],
639-
messageObjectType: 'com.woltlab.wcf.article.content',
640-
messageObjectID: {if $action === 'edit'}{$article->articleID}{else}0{/if}
641-
});
642647
});
643648
</script>
644649

650+
645651
{include file='footer'}

‎wcfsetup/install/files/js/WCF.Message.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,7 @@ if (COMPILER_TARGET_DEFAULT) {
238238
* @param string className
239239
* @param string messageFieldID
240240
* @param string previewButtonID
241+
* @deprecated 6.2 Use `WoltLabSuite/Core/Controller/Message/Preview` instead.
241242
*/
242243
WCF.Message.Preview = Class.extend({
243244
/**
@@ -454,6 +455,7 @@ if (COMPILER_TARGET_DEFAULT) {
454455
* Default implementation for message previews.
455456
*
456457
* @see WCF.Message.Preview
458+
* @deprecated 6.2 Use `WoltLabSuite/Core/Controller/Message/Preview` instead.
457459
*/
458460
WCF.Message.DefaultPreview = WCF.Message.Preview.extend({
459461
_dialog: null,
@@ -517,6 +519,9 @@ if (COMPILER_TARGET_DEFAULT) {
517519
}
518520
});
519521

522+
/**
523+
* @deprecated 6.2 Use `WoltLabSuite/Core/Controller/Message/I18nPreview` instead.
524+
*/
520525
WCF.Message.I18nPreview = WCF.Message.Preview.extend({
521526
_activeMessageField: '',
522527
_dialog: null,

‎wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Message/I18nPreview.js‎

Lines changed: 64 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)