85d8f52789
* Hide blocked users' content appropriately * Use RESTful create route * Update functionality to block the user * Fix specs for new route * Use const instead of var * Add noopener and noreferrer * Remove caching for blocked user ids * Add new rule for lack of noopener noreferrer * Update snapshot
113 lines
5.3 KiB
Text
113 lines
5.3 KiB
Text
function buildCommentHTML(comment) {
|
|
var depthClass = "";
|
|
var githubIcon = "";
|
|
var twitterIcon = "";
|
|
var customClass = "";
|
|
var detailsStartHTML = "";
|
|
var detailsFinishHTML = "";
|
|
var body = "";
|
|
|
|
if (!comment.newly_created) {
|
|
depthClass="child flat-node"
|
|
} else if (comment.depth == 0 ){
|
|
depthClass = "root";
|
|
} else if (comment.depth < 3) {
|
|
depthClass="child"
|
|
} else {
|
|
depthClass="child flat-node"
|
|
}
|
|
if (comment.user.twitter_username && comment.user.twitter_username.length > 0) {
|
|
twitterIcon = '<a href="http://twitter.com/'+comment.user.twitter_username+'" rel="noopener noreferrer" target="_blank"><%= image_tag("twitter-logo.svg", class:"icon-img", alt: "twitter logo") %></a>'
|
|
}
|
|
if (comment.user.github_username && comment.user.github_username.length > 0) {
|
|
githubIcon = '<a href="http://github.com/'+comment.user.github_username+'" rel="noopener noreferrer" target="_blank"><%= image_tag("github-logo.svg", class:"icon-img", alt: "github logo") %></a>'
|
|
}
|
|
if (comment.newly_created) {
|
|
customClass = "comment-created-via-fetch"
|
|
}
|
|
if (comment.depth < 3) {
|
|
detailsStartHTML = '<details open><summary><span> </span></summary>'
|
|
detailsFinishHTML = '</details>'
|
|
}
|
|
|
|
body = '<style>'+comment.css+'</style>\
|
|
'+detailsStartHTML+'\
|
|
<div class="comment-hash-marker" id="'+comment.id_code+'"></div>\
|
|
<div id="comment-node-'+comment.id+'" class="single-comment-node '+depthClass+' comment-deep-'+comment.depth+'" "\
|
|
data-comment-id="'+comment.id+'" data-comment-author-id="'+comment.user.id+'" data-current-user-comment="'+comment.newly_created+'" data-content-user-id="'+comment.user.id+'">\
|
|
<div class="inner-comment '+customClass+'">\
|
|
<div class="details">\
|
|
<a href="/'+comment.user.username+'">\
|
|
<img class="profile-pic" src="'+comment.user.profile_pic+'" alt="'+comment.user.username+'">\
|
|
<span class="comment-username"><span class="comment-username-inner">'+comment.user.name+'</span></span>\
|
|
</a>\
|
|
'+twitterIcon+'\
|
|
'+githubIcon+'\
|
|
<div class="comment-date">\
|
|
<a href="'+comment.url+'">\
|
|
<time datetime="'+comment.published_timestamp+'">\
|
|
'+comment.readable_publish_date+'\
|
|
</time>\
|
|
</a>\
|
|
</div>\
|
|
<button class="dropbtn">\
|
|
<%= image_tag("three-dots.svg", class: "dropdown-icon", alt: "Toggle dropdown menu") %>\
|
|
</button>\
|
|
<div class="dropdown">\
|
|
<div class="dropdown-content">\
|
|
<a href="'+comment.url+'">\
|
|
Permalink\
|
|
</a>\
|
|
<a href="'+comment.url+'/settings">\
|
|
Settings\
|
|
</a>\
|
|
<a href="/report-abuse?url=https://dev.to'+comment.url+'">Report Abuse</a>\
|
|
</div>\
|
|
</div>\
|
|
</div>\
|
|
<div class="body">\
|
|
'+comment.body_html+'\
|
|
'+reactions(comment)+'\
|
|
</div>\
|
|
'+actions(comment)+'\
|
|
</div>\
|
|
</div>\
|
|
'+detailsFinishHTML;
|
|
|
|
return body;
|
|
}
|
|
|
|
function actions(comment) {
|
|
if (comment.newly_created) {
|
|
return '<div class="actions" data-comment-id="'+comment.id+'" data-path="'+comment.url+'">\
|
|
<span class="current-user-actions" style="display: '+ (comment.newly_created ? 'inline-block' : 'none') +';">\
|
|
<a data-no-instant="" href="'+comment.url+'/delete_confirm" class="edit-butt" rel="nofollow">DELETE</a>\
|
|
<a href="'+comment.url+'/edit" class="edit-butt" rel="nofollow">EDIT</a>\
|
|
</span>\
|
|
<a href="#" class="toggle-reply-form" rel="nofollow">REPLY</a>\
|
|
</div>';
|
|
} else {
|
|
return '<div class="actions" data-comment-id="'+comment.id+'" data-path="'+comment.url+'" data-commentable-id="'+comment.commentable.id+'">\
|
|
<a href="'+comment.url+'" rel="nofollow">VIEW/REPLY</a>\
|
|
</div>';
|
|
}
|
|
}
|
|
|
|
function reactions(comment) {
|
|
if (comment.newly_created) {
|
|
return '<button class="reaction-button reacted" id="button-for-comment-'+comment.id+'" data-comment-id="'+comment.id+'">\
|
|
<img src="<%= asset_path("favorite-heart-outline-button.svg") %>" alt="Favorite heart outline button">\
|
|
<img class="voted-heart" src="<%= asset_path("emoji/emoji-one-heart.png") %>" alt="Favorite heart button">\
|
|
<span class="reactions-count" id="reactions-count-'+comment.id+'">1</span></button>';
|
|
} else {
|
|
if (comment.heart_ids.indexOf(userData().id) > -1) {
|
|
var reactedClass = "reacted";
|
|
} else {
|
|
var reactedClass = ""
|
|
}
|
|
return '<button style="background:white" class="reaction-button '+ reactedClass +'" id="button-for-comment-'+comment.id+'" data-comment-id="'+comment.id+'">\
|
|
<img src="<%= asset_path("favorite-heart-outline-button.svg") %>" alt="Favorite heart outline button">\
|
|
<img class="voted-heart" src="<%= asset_path("emoji/emoji-one-heart.png") %>" alt="Favorite heart button">\
|
|
<span class="reactions-count" id="reactions-count-'+comment.id+'">'+comment.positive_reactions_count+'</span></button>';
|
|
}
|
|
}
|