app/templates/components/stream-feed/items/post/comment.hbs
{{#if (or comment.isNew updateComment.isRunning)}}
{{! TODO - @Josh - Loading effect for new comments }}
<div class="text-xs-center w-100 m-t-1 m-b-1">
{{loading-spinner size="small"}}
</div>
{{else if comment.isDeleted}}
<div class="text-xs-center w-100">
<p class="font-italic">{{t "components.stream-feed.post.comment.deleting"}}</p>
</div>
{{else}}
{{! comment author }}
<div class="media-left">
<a href={{href-to "users.index" comment.user}}>
{{lazy-image class="media-object" src=(image comment.user.avatar "small")}}
</a>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href={{href-to "users.index" comment.user}}>
{{comment.user.name}}
</a>
</h4>
{{! comment content }}
<span class="comment-body">
{{#if isEditing}}
{{expanding-textarea comment.content
update=(action (mut comment.content))
keyEvents=(hash 13=(action "updateComment"))
class="form-control add-comment"}}
{{else}}
{{#if comment.contentFormatted}}
{{#read-more text=(format-content comment.contentFormatted) length=350 maxLines=16 isHTML=true as |rm|}}
{{#if rm.wasTruncated}}
<div class="view-more">
<a href="#" {{action rm.toggleVisibility}}>
{{#if rm.isTruncated}}
{{t "feeds.post.more"}}
{{else}}
{{t "feeds.post.less"}}
{{/if}}
</a>
</div>
{{/if}}
{{/read-more}}
{{/if}}
{{/if}}
</span>
{{! comment upload}}
{{#if galleryItems.firstObject}}
{{#photo-swipe class="uploads-photo-swipe" bgOpacity=0.92 showAnimationDuration=0 hideAnimationDuration=0 history=false items=galleryItems as |photoswipe|}}
<a href="#" class="uploads-item" {{action photoswipe.actions.open (hash index=0 shareEl=false)}}>
{{lazy-image src=galleryItems.firstObject.thumbSrc class="comment-upload"}}
{{#if (eq galleryItems.firstObject.type "image/gif")}}
<div class="uploads-overlay uploads-gif">{{t "components.stream-feed.post.comment.gif"}}</div>
{{/if}}
</a>
{{/photo-swipe}}
{{else if (not (is-object-empty comment.embed))}}
{{stream-feed/items/post/embed embed=comment.embed embedUrl=comment.embedUrl}}
{{/if}}
<div class="stream-item-activity">
{{! likes }}
{{likeable-resource
resource=comment
likesCount=comment.likesCount
likesCountUpdate=(action (mut comment.likesCount))
onCreate=(action "trackEngagement" "like")
}}
<span class="seperator"> ยท </span>
{{#unless isReply}}
<small class="comment-reply" {{action "showReply"}}>
{{t "components.stream-feed.post.comment.reply"}}
</small>
{{/unless}}
{{! comment timestamp }}
<a href={{href-to "comments" comment.id}}>
<small class="comment-time">
{{moment-from-now comment.createdAt interval=60000}}
{{#if commentEdited}}
· {{t "components.stream-feed.post.edited"}} {{moment-from-now comment.editedAt interval=60000}}
{{/if}}
</small>
</a>
{{! more dropdown }}
<div class="stream-comment-options d-inline-block">
<span class="more-wrapper">
<a href="#" class="more-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{svg-jar "more"}}
</a>
<div class="dropdown-menu">
{{! Copy Permalink }}
<a class="dropdown-item" href="#" data-clipboard-text={{concat host (href-to "comments" comment.id)}} {{action "trackEngagement" "click"}}>
{{t "components.stream-feed.post.comment.copy-link"}}
</a>
{{! Edit/Delete Options }}
{{#if canEditComment}}
<a class="dropdown-item" href="#" {{action (toggle "isEditing" this)}}>{{t "components.stream-feed.post.comment.edit"}}</a>
<a class="dropdown-item" href="#" {{action (toggle "deleteModalOpened" this)}}>{{t "components.stream-feed.post.comment.delete"}}</a>
{{#if deleteModalOpened}}
{{to-elsewhere named="modal" send=(component "modals/confirm-action"
onConfirm=(action "deleteComment")
onClose=(toggle-action "deleteModalOpened" this)
)}}
{{/if}}
{{/if}}
{{! Report/Blocking Options }}
{{#if (and session.hasUser (not (is-self comment.user)))}}
<a class="dropdown-item" href="#" {{action (toggle "reportingComment" this)}}>{{t "components.stream-feed.post.comment.report"}}</a>
{{#if reportingComment}}
{{to-elsewhere named="modal" send=(component "modals/report-content"
content=comment
group=post.targetGroup
onClose=(toggle-action "reportingComment" this)
)}}
{{/if}}
<a class="dropdown-item" href="#" {{action (toggle "blockUserModal" this)}}>{{t "components.users.block" user=comment.user.name}}</a>
{{#if blockUserModal}}
{{to-elsewhere named="modal" send=(component "modals/block-user"
user=comment.user
onClose=(toggle-action "blockUserModal" this)
)}}
{{/if}}
{{/if}}
</div>
</span>
</div>
</div>
{{! comment replies }}
{{#if isTopLevel}}
{{#if getReplies.isRunning}}
<div class="p-t-1 p-b-1 text-xs-center">
{{loading-spinner size="small"}}
</div>
{{else}}
{{! Reply Pagination }}
{{#if replies}}
{{#if hasNextPage}}
<div class="comment-actions clearfix">
{{! action }}
<div class="pull-sm-left">
{{#if isLoading}}
{{loading-spinner size="small"}}
{{else}}
<a href="#" {{action "onPagination"}}>{{t "components.stream-feed.post.comment.previous-replies"}}</a>
{{/if}}
</div>
{{! Comment count }}
<div class="pull-sm-right">
{{t "components.stream-feed.post.comment-count" count=replies.length total=comment.repliesCount}}
</div>
</div>
{{/if}}
{{! Replies list }}
<ul class="media-list reply-list">
{{#each replies as |reply|}}
{{stream-feed/items/post/comment
isTopLevel=false
comment=reply
post=post
kitsuGroupMembership=kitsuGroupMembership
onReply=(action "onReply")
onDelete=(action "deletedReply")
likesCountUpdate=(action (mut reply.likesCount))
replyCountUpdate=(action (mut comment.repliesCount))
trackEngagement=(action "trackEngagement")
updateFollow=updateFollow
tagName="li"
class="media new-comment"}} {{! HACK: Until we have transitions }}
{{/each}}
</ul>
{{/if}}
{{! Reply text box }}
{{#if (and isReplying (not readOnly))}}
<div class="add-reply-wrapper">
{{stream-feed/items/post/comment-box
onSubmit=createReply
placeholder=(t "components.stream-feed.post.comment.add-reply")
className="form-control reply-comment"
upload=upload
}}
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
{{/if}}