119 lines
6.6 KiB
Plaintext
119 lines
6.6 KiB
Plaintext
.text-left
|
|
div#comment-list.comment-list
|
|
|
|
script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
|
|
script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js")
|
|
script.
|
|
var sentinel = 0;
|
|
var renderComments = function renderComments(comments, containerSelector, level) {
|
|
var commentDetails;
|
|
var offSetClass = level ? 'col-xs-offset-' + level : '';
|
|
var rowClass = level ? 'col-xs-' + (12 - level) : 'col-xs-12';
|
|
R.forEach(function displayComments(comment) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: '/stories/comments/' + comment,
|
|
error: function (xhr, textStatus, errorThrown) {
|
|
console.log('got error');
|
|
commentDetails = {
|
|
error: true,
|
|
body: 'There seems to be a problem fetching this comment.'
|
|
}
|
|
},
|
|
success: function (data, textStatus, xhr) {
|
|
commentDetails = data;
|
|
var div = document.createElement('div');
|
|
$(div)
|
|
.html(
|
|
"<div class='comment row col-xs-12'>" +
|
|
"<div class='col-xs-1'>" +
|
|
"<img class='img-responsive' src=" + commentDetails.author.picture + "></img>" +
|
|
"</div>" +
|
|
"<div class='col-xs-10'>" +
|
|
"<div class='row'>" +
|
|
"<div class='col-xs-12'>" +
|
|
commentDetails.body +
|
|
"</div>" +
|
|
"</div>" +
|
|
"<div class='row'>" +
|
|
"<h6>" +
|
|
"<div class='col-xs-12 negative-15'>" +
|
|
"commented " + moment(commentDetails.commentedOn).fromNow() + " by " +
|
|
"<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" +
|
|
"</div>" +
|
|
"</h6>" +
|
|
"</div>" +
|
|
"<div class='row negative-20'>" +
|
|
"<div class='col-xs-6 comment-a-comment'>" +
|
|
"<h6>" +
|
|
"<a id='" + commentDetails._id + "'>Reply</a>" +
|
|
"</h6>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</div>"
|
|
)
|
|
.addClass(offSetClass + ' row ' + rowClass + ' comment_' + commentDetails._id)
|
|
.appendTo($(containerSelector));
|
|
|
|
sentinel += commentDetails.comments.length;
|
|
|
|
renderComments(commentDetails.comments, '.comment_' + commentDetails._id, ++level);
|
|
|
|
},
|
|
complete: function () {
|
|
sentinel--;
|
|
if (!sentinel) {
|
|
$('.comment-a-comment').on('click', 'a', function () {
|
|
$(this).unbind('click');
|
|
var div = document.createElement('div');
|
|
var commentId = $(this).attr('id');
|
|
$(div).html(
|
|
"<div class='formgroup'>" +
|
|
"<textarea class='form-control' id='comment-to-comment-textarea'></textarea>" +
|
|
"<button class='btn btn-small btn-primary' id='submit-comment-to-comment'>Submit</button>" +
|
|
"</div>"
|
|
)
|
|
.addClass('col-xs-6 col-xs-offset-3')
|
|
.appendTo($(this).closest('.comment'));
|
|
var submitCommentToCommentHandler = function submitCommentToCommentHandler() {
|
|
$('#submit-comment-to-comment').unbind('click');
|
|
$.post('/stories/comment/' + commentId + '/comment',
|
|
{
|
|
data: {
|
|
associatedPost: commentId,
|
|
body: $('#comment-to-comment-textarea').val(),
|
|
author: {
|
|
picture: user.profile.picture,
|
|
userId: user._id,
|
|
username: user.profile.username
|
|
}
|
|
}
|
|
})
|
|
.fail(function (xhr, textStatus, errorThrown) {
|
|
$('#submit-comment-to-comment').bind('click', submitCommentToCommentHandler);
|
|
})
|
|
.done(function (data, textStatus, xhr) {
|
|
window.location.reload();
|
|
});
|
|
|
|
};
|
|
|
|
$('#submit-comment-to-comment').on('click', submitCommentToCommentHandler);
|
|
});//
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
}, comments);
|
|
}
|
|
sentinel += comments.length;
|
|
|
|
renderComments(comments, $('#comment-list'), 0);
|
|
|
|
|
|
|
|
|
|
|