gitea/web_src/js/features/comp/ReactionSelector.ts
silverwind c8ea41b049
Fix remaining typescript issues, enable tsc (#32840)
Fixes 79 typescript errors. Discovered at least two bugs in
`notifications.ts`, and I'm pretty sure this feature was at least
partially broken and may still be, I don't really know how to test it.

After this, only like ~10 typescript errors remain in the codebase but
those are harder to solve.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-12-16 05:02:32 +08:00

37 lines
1.8 KiB
TypeScript

import {POST} from '../../modules/fetch.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
export function initCompReactionSelector(parent: ParentNode = document) {
for (const container of parent.querySelectorAll('.issue-content, .diff-file-body')) {
container.addEventListener('click', async (e: MouseEvent & {target: HTMLElement}) => {
// 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');
fomanticQuery(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
}
});
}
}