1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
|
/**
* Comments.
*/
import { $ } from './utils/dom';
import { showOwnedComments } from './communications/comment';
import { filterNode } from './imagesclientside';
import { fetchHtml } from './utils/requests';
function handleError(response) {
const errorMessage = '<div>Comment failed to load!</div>';
if (!response.ok) {
return errorMessage;
}
return response.text();
}
function commentPosted(response) {
const commentEditTab = $('#js-comment-form a[data-click-tab="write"]'),
commentEditForm = $('#js-comment-form'),
container = document.getElementById('comments'),
requestOk = response.ok;
commentEditTab.click();
commentEditForm.reset();
if (requestOk) {
response.text().then(text => displayComments(container, text));
}
else {
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,
// 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'));
// 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
const [ , imageId, commentId ] = commentMatches;
// Use .html because the default response is JSON
fetchHtml(`/posts/${imageId}/comments/${commentId}.html`)
.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
window.booru.timeAgo(fullComment.previousSibling.getElementsByTagName('time'));
// 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
window.booru.timeAgo(document.getElementsByTagName('time'));
// Filter images in the comments
filterNode(container);
// Show options on own comments
showOwnedComments();
}
function loadComments(event) {
const container = document.getElementById('comments'),
hasHref = event.target && event.target.getAttribute('href'),
hasHash = window.location.hash && window.location.hash.match(/#comment_([a-f0-9]+)/),
originalUrl = container.dataset.currentUrl,
sepChar = originalUrl.indexOf('?') !== -1 ? '&' : '?',
getURL = hasHref || (hasHash ? `${originalUrl}${sepChar}comment_id=${window.location.hash.substring(9, window.location.hash.length)}`
: container.dataset.currentUrl);
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() {
const comments = document.getElementById('comments'),
hasHash = window.location.hash && window.location.hash.match(/^#comment_([a-f0-9]+)$/),
targetOnPage = hasHash ? Boolean($(window.location.hash)) : true;
// 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);
}
else {
filterNode(comments);
showOwnedComments();
}
}
// 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 => {
if (event.button === 0) { // Left-click only
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 };
|
