Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (108 sloc) 5.25 KB
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>&nbsp;</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+'">\
<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>';
}
}
You can’t perform that action at this time.