lianguan/gitea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix JS error when reply comment on Conversation page (#32685)

Browse Source 
Fix #32684, regression of #32596 (side-effect of jQuery removal: jQuery could tolerate non-existing elements)
And fix another regression bug from #30453 (initCompReactionSelector double-init)
This commit is contained in:
wxiaoguang 2024-12-02 00:13:58 +08:00 committed by GitHub
parent 2abef971dc
commit 1bb1a51f47
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web_src/js/features/comp/ReactionSelector.ts
View File

@ -1,8 +1,8 @@
import {POST} from '../../modules/fetch.ts'; import {POST} from '../../modules/fetch.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts'; import {fomanticQuery} from '../../modules/fomantic/base.ts';
export function initCompReactionSelector() { export function initCompReactionSelector(parent: ParentNode = document) {
for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) { for (const container of parent.querySelectorAll('.issue-content, .diff-file-body')) {
container.addEventListener('click', async (e) => { container.addEventListener('click', async (e) => {
// there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
const target = e.target.closest('.comment-reaction-button'); const target = e.target.closest('.comment-reaction-button');

28
web_src/js/features/repo-diff.ts
View File

@ -38,7 +38,7 @@ function initRepoDiffFileViewToggle() {
} }
function initRepoDiffConversationForm() { function initRepoDiffConversationForm() {
addDelegatedEventListener<HTMLFormElement>(document, 'submit', '.conversation-holder form', async (form, e) => { addDelegatedEventListener<HTMLFormElement, SubmitEvent>(document, 'submit', '.conversation-holder form', async (form, e) => {
e.preventDefault(); e.preventDefault();
const textArea = form.querySelector<HTMLTextAreaElement>('textarea'); const textArea = form.querySelector<HTMLTextAreaElement>('textarea');
if (!validateTextareaNonEmpty(textArea)) return; if (!validateTextareaNonEmpty(textArea)) return;
@ -55,7 +55,9 @@ function initRepoDiffConversationForm() {
formData.append(submitter.name, submitter.value); formData.append(submitter.name, submitter.value);
} }
const trLineType = form.closest('tr').getAttribute('data-line-type'); // on the diff page, the form is inside a "tr" and need to get the line-type ahead
// but on the conversation page, there is no parent "tr"
const trLineType = form.closest('tr')?.getAttribute('data-line-type');
const response = await POST(form.getAttribute('action'), {data: formData}); const response = await POST(form.getAttribute('action'), {data: formData});
const newConversationHolder = createElementFromHTML(await response.text()); const newConversationHolder = createElementFromHTML(await response.text());
const path = newConversationHolder.getAttribute('data-path'); const path = newConversationHolder.getAttribute('data-path');
@ -65,14 +67,18 @@ function initRepoDiffConversationForm() {
form.closest('.conversation-holder').replaceWith(newConversationHolder); form.closest('.conversation-holder').replaceWith(newConversationHolder);
form = null; // prevent further usage of the form because it should have been replaced form = null; // prevent further usage of the form because it should have been replaced
let selector; if (trLineType) {
if (trLineType === 'same') { // if there is a line-type for the "tr", it means the form is on the diff page
selector = `[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`; // then hide the "add-code-comment" [+] button for current code line by adding "tw-invisible" because the conversation has been added
} else { let selector;
selector = `[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`; if (trLineType === 'same') {
} selector = `[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`;
for (const el of document.querySelectorAll(selector)) { } else {
el.classList.add('tw-invisible'); // TODO need to figure out why selector = `[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`;
}
for (const el of document.querySelectorAll(selector)) {
el.classList.add('tw-invisible');
}
} }
fomanticQuery(newConversationHolder.querySelectorAll('.ui.dropdown')).dropdown(); fomanticQuery(newConversationHolder.querySelectorAll('.ui.dropdown')).dropdown();
@ -109,7 +115,7 @@ function initRepoDiffConversationForm() {
const $conversation = $(data); const $conversation = $(data);
$(this).closest('.conversation-holder').replaceWith($conversation); $(this).closest('.conversation-holder').replaceWith($conversation);
$conversation.find('.dropdown').dropdown(); $conversation.find('.dropdown').dropdown();
initCompReactionSelector($conversation); initCompReactionSelector($conversation[0]);
} else { } else {
window.location.reload(); window.location.reload();
} }