loading up the forgejo repo on tangled to test page performance
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>
(cherry picked from commit 428e05662f4f745fe7fef04ce9218a86aa4f1b6c)
authored by
Yarden Shoham
and committed by
Earl Warren
8557c6ae
e9b729fc
+15
-16
+15
-16
web_src/js/features/comp/ComboMarkdownEditor.js
+15
-16
web_src/js/features/comp/ComboMarkdownEditor.js
···
132
132
133
133
setupTab() {
134
134
const $container = $(this.container);
135
-
const $tabMenu = $container.find('.tabular.menu');
136
-
const $tabs = $tabMenu.find('> .item');
135
+
const tabs = $container[0].querySelectorAll('.tabular.menu > .item');
137
136
138
137
// Fomantic Tab requires the "data-tab" to be globally unique.
139
138
// So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
140
-
const $tabEditor = $tabs.filter(`.item[data-tab-for="markdown-writer"]`);
141
-
const $tabPreviewer = $tabs.filter(`.item[data-tab-for="markdown-previewer"]`);
142
-
$tabEditor.attr('data-tab', `markdown-writer-${elementIdCounter}`);
143
-
$tabPreviewer.attr('data-tab', `markdown-previewer-${elementIdCounter}`);
144
-
const $panelEditor = $container.find('.ui.tab[data-tab-panel="markdown-writer"]');
145
-
const $panelPreviewer = $container.find('.ui.tab[data-tab-panel="markdown-previewer"]');
146
-
$panelEditor.attr('data-tab', `markdown-writer-${elementIdCounter}`);
147
-
$panelPreviewer.attr('data-tab', `markdown-previewer-${elementIdCounter}`);
139
+
const tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer');
140
+
const tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
141
+
tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
142
+
tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
143
+
const panelEditor = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
144
+
const panelPreviewer = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
145
+
panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
146
+
panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
148
147
elementIdCounter++;
149
148
150
-
$tabEditor[0].addEventListener('click', () => {
149
+
tabEditor.addEventListener('click', () => {
151
150
requestAnimationFrame(() => {
152
151
this.focus();
153
152
});
154
153
});
155
154
156
-
$tabs.tab();
155
+
$(tabs).tab();
157
156
158
-
this.previewUrl = $tabPreviewer.attr('data-preview-url');
159
-
this.previewContext = $tabPreviewer.attr('data-preview-context');
157
+
this.previewUrl = tabPreviewer.getAttribute('data-preview-url');
158
+
this.previewContext = tabPreviewer.getAttribute('data-preview-context');
160
159
this.previewMode = this.options.previewMode ?? 'comment';
161
160
this.previewWiki = this.options.previewWiki ?? false;
162
-
$tabPreviewer.on('click', async () => {
161
+
tabPreviewer.addEventListener('click', async () => {
163
162
const formData = new FormData();
164
163
formData.append('mode', this.previewMode);
165
164
formData.append('context', this.previewContext);
···
167
166
formData.append('wiki', this.previewWiki);
168
167
const response = await POST(this.previewUrl, {data: formData});
169
168
const data = await response.text();
170
-
renderPreviewPanelContent($panelPreviewer, data);
169
+
renderPreviewPanelContent($(panelPreviewer), data);
171
170
});
172
171
}
173
172