2022-01-28 16:00:11 -05:00
|
|
|
import $ from 'jquery';
|
2023-09-18 19:50:30 -05:00
|
|
|
import {POST} from '../../modules/fetch.js';
|
2021-10-16 12:28:04 -05:00
|
|
|
|
2023-05-27 20:34:18 -05:00
|
|
|
export function initCompReactionSelector($parent) {
|
|
|
|
$parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
|
2021-10-16 12:28:04 -05:00
|
|
|
e.preventDefault();
|
|
|
|
|
2024-03-27 11:09:34 -05:00
|
|
|
if (this.classList.contains('disabled')) return;
|
2021-10-16 12:28:04 -05:00
|
|
|
|
2024-03-24 23:30:38 -05:00
|
|
|
const actionUrl = this.closest('[data-action-url]')?.getAttribute('data-action-url');
|
|
|
|
const reactionContent = this.getAttribute('data-reaction-content');
|
|
|
|
const hasReacted = this.closest('.ui.segment.reactions')?.querySelector(`a[data-reaction-content="${reactionContent}"]`)?.getAttribute('data-has-reacted') === 'true';
|
2023-05-27 20:34:18 -05:00
|
|
|
|
2023-09-18 19:50:30 -05:00
|
|
|
const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
|
|
|
|
data: new URLSearchParams({content: reactionContent}),
|
2023-05-27 20:34:18 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
const data = await res.json();
|
|
|
|
if (data && (data.html || data.empty)) {
|
2024-03-16 07:22:16 -05:00
|
|
|
const $content = $(this).closest('.content');
|
|
|
|
let $react = $content.find('.segment.reactions');
|
|
|
|
if ((!data.empty || data.html === '') && $react.length > 0) {
|
|
|
|
$react.remove();
|
2021-10-16 12:28:04 -05:00
|
|
|
}
|
2023-05-27 20:34:18 -05:00
|
|
|
if (!data.empty) {
|
2024-03-16 07:22:16 -05:00
|
|
|
const $attachments = $content.find('.segment.bottom:first');
|
|
|
|
$react = $(data.html);
|
|
|
|
if ($attachments.length > 0) {
|
|
|
|
$react.insertBefore($attachments);
|
2023-05-27 20:34:18 -05:00
|
|
|
} else {
|
2024-03-16 07:22:16 -05:00
|
|
|
$react.appendTo($content);
|
2021-10-16 12:28:04 -05:00
|
|
|
}
|
2024-03-16 07:22:16 -05:00
|
|
|
$react.find('.dropdown').dropdown();
|
|
|
|
initCompReactionSelector($react);
|
2021-10-16 12:28:04 -05:00
|
|
|
}
|
2023-05-27 20:34:18 -05:00
|
|
|
}
|
2021-10-16 12:28:04 -05:00
|
|
|
});
|
|
|
|
}
|