mirror of https://github.com/go-gitea/gitea.git
Rewrite and restyle reaction selector and enable no-sizzle eslint rule (#30453)
Enable `no-sizzle` lint rule, there was only one use in `initCompReactionSelector` and: - Remove all jQuery except the necessary fomantic dropdown init - Remove the recursion, instead bind event listeners to common parent container nodes --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>pull/30214/head^2
silverwind
10 months ago
committed by
GitHub
parent
6999a88fd9
commit
4b1063f3db
@ -0,0 +1,70 @@
|
|||||||
|
.bottom-reactions {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
margin: 0 1em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item .conversation-holder .bottom-reactions {
|
||||||
|
margin: 1em 0 0 36px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .ui.label {
|
||||||
|
padding: 5px 8px;
|
||||||
|
font-weight: var(--font-weight-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .ui.label.primary {
|
||||||
|
background-color: var(--color-reaction-active-bg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .ui.label:hover {
|
||||||
|
background-color: var(--color-reaction-hover-bg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .ui.label.disabled {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .ui.label .reaction {
|
||||||
|
font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .ui.label .reaction img {
|
||||||
|
height: 16px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .reaction-count {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.dropdown.select-reaction .menu {
|
||||||
|
min-width: 170px; /* item-outer-width * 4 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.dropdown.select-reaction .menu > .item {
|
||||||
|
float: left;
|
||||||
|
margin: 4px;
|
||||||
|
font-size: 20px;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .select-reaction {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions .select-reaction:not(.active) {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-reactions:hover .select-reaction {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
@ -1,38 +1,36 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {POST} from '../../modules/fetch.js';
|
import {POST} from '../../modules/fetch.js';
|
||||||
|
|
||||||
export function initCompReactionSelector($parent) {
|
export function initCompReactionSelector() {
|
||||||
$parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
|
for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
|
||||||
e.preventDefault();
|
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 (this.classList.contains('disabled')) return;
|
if (target.classList.contains('disabled')) return;
|
||||||
|
|
||||||
const actionUrl = this.closest('[data-action-url]')?.getAttribute('data-action-url');
|
const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
|
||||||
const reactionContent = this.getAttribute('data-reaction-content');
|
const reactionContent = target.getAttribute('data-reaction-content');
|
||||||
const hasReacted = this.closest('.ui.segment.reactions')?.querySelector(`a[data-reaction-content="${reactionContent}"]`)?.getAttribute('data-has-reacted') === 'true';
|
|
||||||
|
|
||||||
const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
|
const commentContainer = target.closest('.comment-container');
|
||||||
data: new URLSearchParams({content: reactionContent}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await res.json();
|
const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
|
||||||
if (data && (data.html || data.empty)) {
|
const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
|
||||||
const $content = $(this).closest('.content');
|
const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
|
||||||
let $react = $content.find('.segment.reactions');
|
|
||||||
if ((!data.empty || data.html === '') && $react.length > 0) {
|
const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
|
||||||
$react.remove();
|
data: new URLSearchParams({content: reactionContent}),
|
||||||
}
|
});
|
||||||
if (!data.empty) {
|
|
||||||
const $attachments = $content.find('.segment.bottom:first');
|
const data = await res.json();
|
||||||
$react = $(data.html);
|
bottomReactions?.remove();
|
||||||
if ($attachments.length > 0) {
|
if (data.html) {
|
||||||
$react.insertBefore($attachments);
|
commentContainer.insertAdjacentHTML('beforeend', data.html);
|
||||||
} else {
|
const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
|
||||||
$react.appendTo($content);
|
$(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
|
||||||
}
|
|
||||||
$react.find('.dropdown').dropdown();
|
|
||||||
initCompReactionSelector($react);
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue