website/web/static/js/inline-replies.js
Noah Petherbridge 39398a1f78 Improve comment threads and reply syntax
* On Forums and photo comment threads: display the poster's username
  below their display name, if their username differs. If they do not
  have a distinct display name, a small @ appears in front of their
  display name instead.
* On Quote & Reply, wrap the @mention with a Markdown hyperlink to the
  specific comment ID.
2024-11-23 12:59:40 -08:00

56 lines
1.9 KiB
JavaScript

// nonshy inline "Quote" and "Reply" buttons that activate the comment field
// on the current page. Common logic between forum threads and photo comments.
document.addEventListener('DOMContentLoaded', function() {
const $message = document.querySelector("#message");
// Enhance the in-post Quote and Reply buttons to activate the reply field
// at the page header instead of going to the dedicated comment page.
(document.querySelectorAll(".nonshy-quote-button") || []).forEach(node => {
const message = node.dataset.quoteBody,
replyTo = node.dataset.replyTo,
commentID = node.dataset.commentId;
// If we have a comment ID, have the at-mention link to it.
let atMention = "@" + replyTo;
if (commentID) {
atMention = `[@${replyTo}](/go/comment?id=${commentID})`;
}
node.addEventListener("click", (e) => {
e.preventDefault();
if (replyTo) {
$message.value += atMention + "\n\n";
}
// Prepare the quoted message.
var lines = [];
for (let line of message.split("\n")) {
lines.push("> " + line);
}
$message.value += lines.join("\n") + "\n\n";
$message.scrollIntoView();
$message.focus();
});
});
(document.querySelectorAll(".nonshy-reply-button") || []).forEach(node => {
const replyTo = node.dataset.replyTo,
commentID = node.dataset.commentId;
// If we have a comment ID, have the at-mention link to it.
let atMention = "@" + replyTo;
if (commentID) {
atMention = `[@${replyTo}](/go/comment?id=${commentID})`;
}
node.addEventListener("click", (e) => {
e.preventDefault();
$message.value += atMention + "\n\n";
$message.scrollIntoView();
$message.focus();
});
});
});