philomena/assets/js/comment.js

184 lines
5.7 KiB
JavaScript
Raw Permalink Normal View History

2019-10-05 02:09:52 +02:00
/**
* Comments.
*/
import { $ } from './utils/dom';
import { filterNode } from './imagesclientside';
import { fetchHtml } from './utils/requests';
2024-04-16 14:02:12 +02:00
import { timeAgo } from './timeago';
2019-10-05 02:09:52 +02:00
function handleError(response) {
const errorMessage = '<div>Comment failed to load!</div>';
if (!response.ok) {
return errorMessage;
}
return response.text();
}
function commentPosted(response) {
2024-07-04 02:27:59 +02:00
const commentEditTab = $('#js-comment-form a[data-click-tab="write"]'),
commentEditForm = $('#js-comment-form'),
container = document.getElementById('comments'),
requestOk = response.ok;
2019-10-05 02:09:52 +02:00
commentEditTab.click();
commentEditForm.reset();
if (requestOk) {
2020-02-22 16:31:30 +01:00
response.text().then(text => {
if (text.includes('<div class="flash flash--warning">')) {
2020-02-22 16:31:30 +01:00
window.location.reload();
2024-07-04 02:27:59 +02:00
} else {
2020-02-22 16:31:30 +01:00
displayComments(container, text);
}
2020-02-22 16:31:30 +01:00
});
2024-07-04 02:27:59 +02:00
} else {
2019-10-05 02:09:52 +02:00
window.location.reload();
window.scrollTo(0, 0); // Error message is displayed at the top of the page (flash)
}
}
function loadParentPost(event) {
const clickedLink = event.target,
2024-07-04 02:27:59 +02:00
// Find the comment containing the link that was clicked
fullComment = clickedLink.closest('article.block'),
// Look for a potential image and comment ID
commentMatches = /(\w+)#comment_(\w+)$/.exec(clickedLink.getAttribute('href'));
2019-10-05 02:09:52 +02:00
// If the clicked link is already active, just clear the parent comments
if (clickedLink.classList.contains('active_reply_link')) {
clearParentPost(clickedLink, fullComment);
return true;
}
if (commentMatches) {
// If the regex matched, get the image and comment ID
2024-07-04 02:27:59 +02:00
const [, imageId, commentId] = commentMatches;
2019-10-05 02:09:52 +02:00
2019-11-12 03:38:51 +01:00
fetchHtml(`/images/${imageId}/comments/${commentId}`)
2019-10-05 02:09:52 +02:00
.then(handleError)
.then(data => {
clearParentPost(clickedLink, fullComment);
insertParentPost(data, clickedLink, fullComment);
});
return true;
}
}
function insertParentPost(data, clickedLink, fullComment) {
// Add the 'subthread' class to the comment with the clicked link
fullComment.classList.add('subthread');
// Insert parent comment
fullComment.insertAdjacentHTML('beforebegin', data);
// Add class subthread and fetched-comment - use separate add()-methods to support IE11
fullComment.previousSibling.classList.add('subthread');
fullComment.previousSibling.classList.add('fetched-comment');
// Execute timeago on the new comment - it was not present when first run
2024-04-16 14:02:12 +02:00
timeAgo(fullComment.previousSibling.getElementsByTagName('time'));
2019-10-05 02:09:52 +02:00
// Add class active_reply_link to the clicked link
clickedLink.classList.add('active_reply_link');
// Filter images (if any) in the loaded comment
filterNode(fullComment.previousSibling);
}
function clearParentPost(clickedLink, fullComment) {
// Remove any previous siblings with the class fetched-comment
while (fullComment.previousSibling && fullComment.previousSibling.classList.contains('fetched-comment')) {
fullComment.previousSibling.parentNode.removeChild(fullComment.previousSibling);
}
// Remove class active_reply_link from all links in the comment
[].slice.call(fullComment.getElementsByClassName('active_reply_link')).forEach(link => {
link.classList.remove('active_reply_link');
});
// If this full comment isn't a fetched comment, remove the subthread class.
if (!fullComment.classList.contains('fetched-comment')) {
fullComment.classList.remove('subthread');
}
}
function displayComments(container, commentsHtml) {
container.innerHTML = commentsHtml;
// Execute timeago on comments
2024-04-16 14:02:12 +02:00
timeAgo(document.getElementsByTagName('time'));
2019-10-05 02:09:52 +02:00
// Filter images in the comments
filterNode(container);
}
function loadComments(event) {
const container = document.getElementById('comments'),
2024-07-04 02:27:59 +02:00
hasHref = event.target && event.target.getAttribute('href'),
hasHash = window.location.hash && window.location.hash.match(/#comment_([a-f0-9]+)/),
getURL =
hasHref ||
(hasHash
? `${container.dataset.currentUrl}?comment_id=${window.location.hash.substring(9, window.location.hash.length)}`
: container.dataset.currentUrl);
2019-10-05 02:09:52 +02:00
fetchHtml(getURL)
.then(handleError)
.then(data => {
displayComments(container, data);
// Make sure the :target CSS selector applies to the inserted content
// https://bugs.chromium.org/p/chromium/issues/detail?id=98561
if (hasHash) {
// eslint-disable-next-line
window.location = window.location;
}
});
return true;
}
function setupComments() {
2024-07-04 02:27:59 +02:00
const comments = document.getElementById('comments'),
hasHash = window.location.hash && window.location.hash.match(/^#comment_([a-f0-9]+)$/),
targetOnPage = hasHash ? Boolean($(window.location.hash)) : true;
2019-10-05 02:09:52 +02:00
// Load comments over AJAX if we are on a page with element #comments
if (comments) {
if (!comments.dataset.loaded || !targetOnPage) {
// There is no event associated with the initial load, so use false
loadComments(false);
2024-07-04 02:27:59 +02:00
} else {
2019-10-05 02:09:52 +02:00
filterNode(comments);
}
}
// Define clickable elements and the function to execute on click
const targets = {
'article[id*="comment"] .communication__body__text a[href]': loadParentPost,
'#comments .pagination a[href]': loadComments,
'#js-refresh-comments': loadComments,
};
document.addEventListener('click', event => {
2024-07-04 02:27:59 +02:00
if (event.button === 0) {
// Left-click only
2019-10-05 02:09:52 +02:00
for (const target in targets) {
if (event.target && event.target.closest(target)) {
targets[target](event) && event.preventDefault();
}
}
}
});
document.addEventListener('fetchcomplete', event => {
if (event.target.id === 'js-comment-form') commentPosted(event.detail);
});
}
export { setupComments };