mirror of
https://github.com/go-gitea/gitea
synced 2024-05-20 04:14:05 +02:00
0352b99221
Backport #30453 by @silverwind Enable `no-sizzle` lint rule, there was only one use in `initCompReactionSelector` which I have rewritten as follows: - Remove all jQuery except the necessary fomantic dropdown init - Remove the recursion, instead bind event listeners to common parent container nodes Did various tests, works with our without attachments, in diff view and in diff comments inside comment list. Additionally the style of reactions now matches between code comments and issue comments: <img width="275" alt="Screenshot 2024-04-13 at 14 58 10" src="https://github.com/go-gitea/gitea/assets/115237/9d08f188-8661-4dd9-bff4-cad6d6d09cab"> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
37 lines
1.6 KiB
JavaScript
37 lines
1.6 KiB
JavaScript
import $ from 'jquery';
|
|
import {POST} from '../../modules/fetch.js';
|
|
|
|
export function initCompReactionSelector() {
|
|
for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
|
|
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
|
|
const target = e.target.closest('.comment-reaction-button');
|
|
if (!target) return;
|
|
e.preventDefault();
|
|
|
|
if (target.classList.contains('disabled')) return;
|
|
|
|
const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
|
|
const reactionContent = target.getAttribute('data-reaction-content');
|
|
|
|
const commentContainer = target.closest('.comment-container');
|
|
|
|
const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
|
|
const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
|
|
const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
|
|
|
|
const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
|
|
data: new URLSearchParams({content: reactionContent}),
|
|
});
|
|
|
|
const data = await res.json();
|
|
bottomReactions?.remove();
|
|
if (data.html) {
|
|
commentContainer.insertAdjacentHTML('beforeend', data.html);
|
|
const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
|
|
$(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
|
|
}
|
|
});
|
|
}
|
|
}
|