Skip to content

Commit 0d8d5b3

Browse files
BurntimeXBurntimeX
committed
Migrate wcf.messageTabMenu (jQuery Widget) to Typescript
HTML and CSS are still a mess and should be overhauled with a future update. Closes #6088 Closes #6089
1 parent 392c188 commit 0d8d5b3

22 files changed

+341
-143
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
});
1818
</script>
1919

20-
<div id="poll" class="jsOnly messageTabMenuContent">
20+
<div id="poll-{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}" class="jsOnly messageTabMenuContent">
2121
<dl{if $errorField == 'pollOptions'} class="formError"{/if}>
2222
<dt>
2323
<label for="pollQuestion">{lang}wcf.poll.question{/lang}</label>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
});
1919
</script>
2020

21-
<div class="jsOnly messageTabMenuContent">
21+
<div id="poll-{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}" class="jsOnly messageTabMenuContent">
2222
<dl>
2323
<dt>
2424
<label for="{$wysiwygSelector}pollQuestion">{lang}wcf.poll.question{/lang}</label>

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

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,23 @@
44
<div class="messageTabMenu" data-preselect="{if $preselectTabMenu|isset}{$preselectTabMenu}{else}true{/if}" data-wysiwyg-container-id="{if $wysiwygContainerID|isset}{$wysiwygContainerID}{else}text{/if}">
55
<nav class="messageTabMenuNavigation jsOnly">
66
<ul>
7-
{if MODULE_SMILEY && !$smileyCategories|empty}<li data-name="smilies"><a>{icon name='face-smile'} <span>{lang}wcf.message.smilies{/lang}</span></a></li>{/if}
7+
{if MODULE_SMILEY && !$smileyCategories|empty}<li data-name="smilies"><button type="button">{icon name='face-smile'} <span>{lang}wcf.message.smilies{/lang}</span></button></li>{/if}
88
{if !$attachmentHandler|empty && $attachmentHandler->canUpload()}
9-
<li data-name="attachments"><a>{icon name='paperclip'} <span>{lang}wcf.attachment.attachments{/lang}</span></a></li>
9+
<li data-name="attachments"><button type="button">{icon name='paperclip'} <span>{lang}wcf.attachment.attachments{/lang}</span></button></li>
1010
{/if}
11-
{if $__messageFormSettings}<li data-name="settings"><a>{icon name='gear'} <span>{lang}wcf.message.settings{/lang}</span></a></li>{/if}
12-
{if $__showPoll|isset && $__showPoll}<li data-name="poll"><a>{icon name='chart-bar'} <span>{lang}wcf.poll.management{/lang}</span></a></li>{/if}
11+
{if $__messageFormSettings}<li data-name="settings"><button type="button">{icon name='gear'} <span>{lang}wcf.message.settings{/lang}</span></button></li>{/if}
12+
{if $__showPoll|isset && $__showPoll}<li data-name="poll"><button type="button">{icon name='chart-bar'} <span>{lang}wcf.poll.management{/lang}</span></button></li>{/if}
1313
{event name='tabMenuTabs'}
1414
</ul>
1515
</nav>
1616

17-
{if MODULE_SMILEY && !$smileyCategories|empty}{include file='messageFormSmilies'}{/if}
17+
{if MODULE_SMILEY && !$smileyCategories|empty}{include file='shared_messageFormSmileyTab'}{/if}
1818
{if !$attachmentHandler|empty && $attachmentHandler->canUpload()}
1919
{include file='shared_messageFormAttachments'}
2020
{/if}
2121

22-
{if $__messageFormSettings}{@$__messageFormSettings}{/if}
22+
{if $__messageFormSettings}{unsafe:$__messageFormSettings}{/if}
2323
{include file='__messageFormPoll'}
2424

2525
{event name='tabMenuContents'}
2626
</div>
27-
28-
<script data-relocate="true">
29-
$(function() {
30-
$('.messageTabMenu').messageTabMenu();
31-
});
32-
</script>

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@
88
<div class="messageTabMenu"{if $preselectTabMenu|isset} data-preselect="{$preselectTabMenu}"{/if} data-wysiwyg-container-id="{$wysiwygSelector}">
99
<nav class="messageTabMenuNavigation jsOnly">
1010
<ul>
11-
{if MODULE_SMILEY && !$smileyCategories|empty}<li data-name="smilies"><a>{icon name='face-smile'} <span>{lang}wcf.message.smilies{/lang}</span></a></li>{/if}
11+
{if MODULE_SMILEY && !$smileyCategories|empty}<li data-name="smilies"><button type="button">{icon name='face-smile'} <span>{lang}wcf.message.smilies{/lang}</span></button></li>{/if}
1212
{if !$attachmentHandler|empty && $attachmentHandler->canUpload()}
13-
<li data-name="attachments"><a>{icon name='paperclip'} <span>{lang}wcf.attachment.attachments{/lang}</span></a></li>
13+
<li data-name="attachments"><button type="button">{icon name='paperclip'} <span>{lang}wcf.attachment.attachments{/lang}</span></button></li>
1414
{/if}
15-
{if $__messageFormSettingsInlineContent}<li data-name="settings"><a>{icon name='gear'} <span>{lang}wcf.message.settings{/lang}</span></a></li>{/if}
16-
{if $__showPoll|isset && $__showPoll}<li data-name="poll"><a>{icon name='chart-bar'} <span>{lang}wcf.poll.management{/lang}</span></a></li>{/if}
15+
{if $__messageFormSettingsInlineContent}<li data-name="settings"><button type="button">{icon name='gear'} <span>{lang}wcf.message.settings{/lang}</span></button></li>{/if}
16+
{if $__showPoll|isset && $__showPoll}<li data-name="poll"><button type="button">{icon name='chart-bar'} <span>{lang}wcf.poll.management{/lang}</span></button></li>{/if}
1717
{event name='tabMenuTabs'}
1818
</ul>
1919
</nav>
2020

21-
{if MODULE_SMILEY && !$smileyCategories|empty}{include file='messageFormSmilies'}{/if}
21+
{if MODULE_SMILEY && !$smileyCategories|empty}{include file='shared_messageFormSmileyTab'}{/if}
2222
{if !$attachmentHandler|empty && $attachmentHandler->canUpload()}
2323
{include file='shared_messageFormAttachments'}
2424
{/if}
@@ -29,9 +29,3 @@
2929

3030
{event name='tabMenuContents'}
3131
</div>
32-
33-
<script data-relocate="true">
34-
$(function() {
35-
$('.messageTabMenu').messageTabMenu();
36-
});
37-
</script>

com.woltlab.wcf/templates/messageFormSmilies.tpl renamed to com.woltlab.wcf/templates/shared_messageFormSmileyTab.tpl

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
{foreach from=$smileyCategories item=smileyCategory}
44
{assign var=__tabCount value=$__tabCount + 1}
55
{assign var='__smileyAnchor' value='smilies-'|concat:$smileyCategory->categoryID}
6-
<li data-name="smilies-{@$smileyCategory->categoryID}" data-smiley-category-id="{@$smileyCategory->categoryID}"><a>{$smileyCategory->getTitle()}</a></li>
6+
<li data-name="smilies-{@$smileyCategory->categoryID}" data-smiley-category-id="{@$smileyCategory->categoryID}"><button type="button">{$smileyCategory->getTitle()}</button></li>
77
{/foreach}
88
{/capture}
99

1010
<div class="messageTabMenuContent{if $__tabCount} messageTabMenu{/if}" data-preselect="true" data-collapsible="false" id="smilies-{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}">
1111
{assign var='__firstSmileyCategory' value=$smileyCategories|reset}
1212
{capture assign=__defaultSmilies}
1313
{if $__firstSmileyCategory->categoryID}
14-
{include file='__messageFormSmilies' smilies=$__wcf->getSmileyCache()->getCategorySmilies($__firstSmileyCategory->categoryID)}
14+
{include file='shared_messageFormSmilies' smilies=$__wcf->getSmileyCache()->getCategorySmilies($__firstSmileyCategory->categoryID)}
1515
{else}
16-
{include file='__messageFormSmilies' smilies=$__wcf->getSmileyCache()->getCategorySmilies()}
16+
{include file='shared_messageFormSmilies' smilies=$__wcf->getSmileyCache()->getCategorySmilies()}
1717
{/if}
1818
{/capture}
1919

@@ -26,15 +26,13 @@
2626

2727
{foreach from=$smileyCategories item=smileyCategory}
2828
<div class="messageTabMenuContent" id="smilies-{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}-{@$smileyCategory->categoryID}">
29-
{if $__firstSmileyCategory->categoryID == $smileyCategory->categoryID}{@$__defaultSmilies}{/if}
29+
{if $__firstSmileyCategory->categoryID == $smileyCategory->categoryID}
30+
{@$__defaultSmilies}
31+
{else}
32+
{include file='shared_messageFormSmilies' smilies=$__wcf->getSmileyCache()->getCategorySmilies($smileyCategory->categoryID)}
33+
{/if}
3034
</div>
3135
{/foreach}
32-
33-
<script data-relocate="true">
34-
$(function() {
35-
new WCF.Message.SmileyCategories('{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}');
36-
});
37-
</script>
3836
{else}
3937
{@$__defaultSmilies}
4038
{/if}

com.woltlab.wcf/templates/__messageFormSmilies.tpl renamed to com.woltlab.wcf/templates/shared_messageFormSmilies.tpl

File renamed without changes.

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

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
11
{include file='shared_tabTabMenuFormContainer'}
22

33
<script data-relocate="true">
4-
$(function() {
5-
{if $container->children()|count > 1}
6-
new WCF.Message.SmileyCategories(
7-
'{@$container->getPrefixedWysiwygId()|encodeJS}',
8-
'{@$container->getPrefixedId()|encodeJS}Container',
9-
true
10-
);
11-
12-
$('#{@$container->getPrefixedId()|encodeJS}Container').messageTabMenu();
13-
{/if}
14-
15-
require(['WoltLabSuite/Core/Ui/Smiley/Insert'], function(UiSmileyInsert) {
16-
new UiSmileyInsert('{@$container->getPrefixedWysiwygId()|encodeJS}');
17-
});
4+
require(['WoltLabSuite/Core/Ui/Smiley/Insert'], function(UiSmileyInsert) {
5+
new UiSmileyInsert('{@$container->getPrefixedWysiwygId()|encodeJS}');
186
});
197
</script>

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1 @@
11
{include file='shared_tabMenuFormContainer' __tabMenuCSSClassName='messageTabMenuNavigation'}
2-
3-
<script data-relocate="true">
4-
$(function() {
5-
$('#{@$container->getPrefixedId()|encodeJS}Container').messageTabMenu();
6-
});
7-
</script>

‎ts/WoltLabSuite/Core/Bootstrap.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,9 @@ export function setup(options: BoostrapOptions): void {
157157
whenFirstSeen("[data-report-content]", () => {
158158
void import("./Ui/Moderation/Report").then(({ setup }) => setup());
159159
});
160-
160+
whenFirstSeen(".messageTabMenu", () => {
161+
void import("./Component/Message/MessageTabMenu").then(({ setup }) => setup());
162+
});
161163
whenFirstSeen("woltlab-core-pagination", () => {
162164
void import("./Ui/Pagination/JumpToPage").then(({ setup }) => setup());
163165
});

‎ts/WoltLabSuite/Core/Component/Attachment/List.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import WoltlabCoreFileElement from "../File/woltlab-core-file";
22
import { CkeditorDropEvent } from "../File/Upload";
33
import { createAttachmentFromFile } from "./Entry";
44
import { listenToCkeditor } from "../Ckeditor/Event";
5+
import { getTabMenu } from "../Message/MessageTabMenu";
56

67
function fileToAttachment(fileList: HTMLElement, file: WoltlabCoreFileElement, editor: HTMLElement): void {
78
fileList.append(createAttachmentFromFile(file, editor));
@@ -54,7 +55,7 @@ export function setup(editorId: string): void {
5455
return;
5556
}
5657

57-
window.jQuery(messageTabMenu).messageTabMenu("showTab", "attachments", true);
58+
getTabMenu(editorId)?.setActiveTab("attachments");
5859
})
5960
.collectMetaData((payload) => {
6061
let context: Context | undefined = undefined;

0 commit comments

Comments
 (0)