Fix it so that upvoting or downvoting a revealed thresholded comment doesn't hide it again. The fix is to explicitly store a `data-show-thresholded` flag on the comment, instead of manually hiding elements with jQuery, and to morph the comment HTML instead of replacing it so that the state isn't lost after voting. Alpine.js is used for this, which isn't strictly necessary, but is useful to test the library before adopting it on a wider scale. https://alpinejs.dev/start-here
45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
import Utility from "./utility";
|
|
|
|
class CommentComponent {
|
|
static initialize() {
|
|
if ($("#c-posts #a-show, #c-comments").length) {
|
|
$(document).on("click.danbooru.comment", ".edit_comment_link", CommentComponent.showEditForm);
|
|
$(document).on("click.danbooru.comment", ".expand-comment-response", CommentComponent.showNewCommentForm);
|
|
$(document).on("click.danbooru.comment", ".comment-copy-id", CommentComponent.copyID);
|
|
$(document).on("click.danbooru.comment", ".comment-copy-link", CommentComponent.copyLink);
|
|
}
|
|
}
|
|
|
|
static showNewCommentForm(e) {
|
|
$(e.target).hide();
|
|
var $form = $(e.target).closest("div.new-comment").find("form");
|
|
$form.show();
|
|
$form[0].scrollIntoView(false);
|
|
$form.find("textarea").selectEnd();
|
|
e.preventDefault();
|
|
}
|
|
|
|
static showEditForm(e) {
|
|
$(this).closest(".comment").find(".edit_comment").show();
|
|
e.preventDefault();
|
|
}
|
|
|
|
static async copyID(e) {
|
|
let id = $(this).closest(".comment").data("id");
|
|
let link = `comment #${id}`;
|
|
Utility.copyToClipboard(link);
|
|
e.preventDefault();
|
|
}
|
|
|
|
static async copyLink(e) {
|
|
let id = $(this).closest(".comment").data("id");
|
|
let link = `${window.location.origin}/comments/${id}`;
|
|
Utility.copyToClipboard(link);
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
$(document).ready(CommentComponent.initialize);
|
|
|
|
export default CommentComponent;
|