Mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove jQuery `.attr` from the ComboMarkdownEditor (#30051) 

- Switched from jQuery `attr` to plain javascript `getAttribute` and
`setAttribute`
- Tested the markdown editor and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
This commit is contained in:
Yarden Shoham 2024-03-25 02:00:54 +02:00 committed by GitHub
parent a7d0c5de4c
commit 428e05662f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web_src/js/features/comp/ComboMarkdownEditor.js
View File

@ -132,34 +132,33 @@ class ComboMarkdownEditor {
setupTab() { setupTab() {
const $container = $(this.container); const $container = $(this.container);
const $tabMenu = $container.find('.tabular.menu'); const tabs = $container[0].querySelectorAll('.tabular.menu > .item');
const $tabs = $tabMenu.find('> .item');
// Fomantic Tab requires the "data-tab" to be globally unique. // Fomantic Tab requires the "data-tab" to be globally unique.
// So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic. // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
const $tabEditor = $tabs.filter(`.item[data-tab-for="markdown-writer"]`); const tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer');
const $tabPreviewer = $tabs.filter(`.item[data-tab-for="markdown-previewer"]`); const tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
$tabEditor.attr('data-tab', `markdown-writer-${elementIdCounter}`); tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
$tabPreviewer.attr('data-tab', `markdown-previewer-${elementIdCounter}`); tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
const $panelEditor = $container.find('.ui.tab[data-tab-panel="markdown-writer"]'); const panelEditor = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
const $panelPreviewer = $container.find('.ui.tab[data-tab-panel="markdown-previewer"]'); const panelPreviewer = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
$panelEditor.attr('data-tab', `markdown-writer-${elementIdCounter}`); panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
$panelPreviewer.attr('data-tab', `markdown-previewer-${elementIdCounter}`); panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
elementIdCounter++; elementIdCounter++;
$tabEditor[0].addEventListener('click', () => { tabEditor.addEventListener('click', () => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.focus(); this.focus();
}); });
}); });
$tabs.tab(); $(tabs).tab();
this.previewUrl = $tabPreviewer.attr('data-preview-url'); this.previewUrl = tabPreviewer.getAttribute('data-preview-url');
this.previewContext = $tabPreviewer.attr('data-preview-context'); this.previewContext = tabPreviewer.getAttribute('data-preview-context');
this.previewMode = this.options.previewMode ?? 'comment'; this.previewMode = this.options.previewMode ?? 'comment';
this.previewWiki = this.options.previewWiki ?? false; this.previewWiki = this.options.previewWiki ?? false;
$tabPreviewer.on('click', async () => { tabPreviewer.addEventListener('click', async () => {
const formData = new FormData(); const formData = new FormData();
formData.append('mode', this.previewMode); formData.append('mode', this.previewMode);
formData.append('context', this.previewContext); formData.append('context', this.previewContext);
@ -167,7 +166,7 @@ class ComboMarkdownEditor {
formData.append('wiki', this.previewWiki); formData.append('wiki', this.previewWiki);
const response = await POST(this.previewUrl, {data: formData}); const response = await POST(this.previewUrl, {data: formData});
const data = await response.text(); const data = await response.text();
renderPreviewPanelContent($panelPreviewer, data); renderPreviewPanelContent($(panelPreviewer), data);
}); });
} }