|
|
@@ -0,0 +1,250 @@ |
|
|
|
var loading = false; |
|
|
|
|
|
|
|
$(document).ready(function () { |
|
|
|
|
|
|
|
// make alert button fixed and hide it after a few seconds |
|
|
|
$(".alert.msg").addClass("fixed-alert"); |
|
|
|
setTimeout(function(){ $(".alert.msg").remove(); }, 5000); |
|
|
|
|
|
|
|
// on show replies link click |
|
|
|
$(".show-replies").click(function(e){ |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
// check if data is not still loading |
|
|
|
if(loading == true) { return false; } |
|
|
|
|
|
|
|
// store self into a var to give it access inside the post |
|
|
|
var self = $(this); |
|
|
|
|
|
|
|
// set loading to true and get data from html element attributres |
|
|
|
loading = true; |
|
|
|
data = $(this).data(); |
|
|
|
|
|
|
|
// make an ajax request to get comment replies |
|
|
|
$.post("/ajax.php?action=commentReplies&commentId=" + castAsInteger(data.commentid), {}) |
|
|
|
|
|
|
|
// data retrieved. try and build the html |
|
|
|
.done(function (payload) { |
|
|
|
|
|
|
|
if(payload.error === true) { |
|
|
|
// reset loading flag and throw error |
|
|
|
loading = false; |
|
|
|
throw new Error("Failed to parse ajax payload"); |
|
|
|
} |
|
|
|
|
|
|
|
// loop data and build replies html |
|
|
|
repliesHtml = ""; |
|
|
|
payload.data.comments.forEach(function(item){ |
|
|
|
|
|
|
|
// html data |
|
|
|
const commentId = castAsInteger(item.id); |
|
|
|
const repliedTo = (item.repliedToUser ? "<a href='/profile?id=" + item.repliedToUserId + "'>@" + item.repliedToUser + "</a> " : "" ); |
|
|
|
const likeBtnClass = item.hasLiked == 1 ? "class='active'" : ""; |
|
|
|
const dislikeBtnClass = item.hasDisliked == 1 ? "class='active'" : ""; |
|
|
|
const profileImg = item.profileImgUrl != false ? `<a href='/profile?id=${item.usersId}' class='comment-profile-image has-image' style='background-image: url(${item.profileImgUrl})'></a>` : `<a href='/profile?id=${item.usersId}' class='comment-profile-image'><i class='fa fa-user' aria-hidden='true'></i></a>`; |
|
|
|
|
|
|
|
//delete form |
|
|
|
deleteHtml = ""; |
|
|
|
if(payload.data.canDelete) { |
|
|
|
deleteHtml = ` |
|
|
|
<form method='post' class='delete-comment' action='#comments'> |
|
|
|
<input type='hidden' name='action' value='deleteComment' /> |
|
|
|
<input type='hidden' name='commentId' value='${commentId}' /> |
|
|
|
<button type='submit'><i class='fa fa-times' aria-hidden='true'></i></button> |
|
|
|
</form> |
|
|
|
`; |
|
|
|
} |
|
|
|
|
|
|
|
// build replis html (specific to comment type) |
|
|
|
repliesHtml += ` |
|
|
|
<div id='commentRow${commentId}' class='comment-row'> |
|
|
|
${deleteHtml}${profileImg} |
|
|
|
<div class='comment-box'> |
|
|
|
<p><a href='/profile?id=${item.usersId}'>${item.profileName}</a> • ${item.datePosted}</p> |
|
|
|
<p class='user-comment'> |
|
|
|
${repliedTo} |
|
|
|
${item.iv_comment} |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class='score-button-wrapper'> |
|
|
|
<div class='score-form like-form'> |
|
|
|
<button type='submit' data-object='${data.objectid}' data-type='${item.commentType}' data-commentId='${commentId}' data-like='1' ${likeBtnClass}><i class='fa fa-thumbs-up' aria-hidden='true'></i></button> |
|
|
|
<span class='likeCounter'>${item.totalLikes}</span> |
|
|
|
</div> |
|
|
|
<div class='score-form dislike-form'> |
|
|
|
<button type='submit' data-object='${data.objectid}' data-type='${item.commentType}' data-commentId='${commentId}' data-like='0' ${dislikeBtnClass}><i class='fa fa-thumbs-down' aria-hidden='true'></i></button> |
|
|
|
<span class='likeCounter'>${item.totalDislikes}</span> |
|
|
|
</div> |
|
|
|
<a href='#' class='reply reply-button' data-profile='${item.profileName}' data-object='${data.objectid}' data-type='${item.commentType}' data-parent='${item.parentId}' data-author='${item.usersId}' data-reply='${commentId}'>Reply</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id='replyBox${commentId}'></div> |
|
|
|
`; |
|
|
|
}); |
|
|
|
|
|
|
|
// set html and show replies |
|
|
|
$('#replies'+ data.commentid).html(repliesHtml); |
|
|
|
|
|
|
|
//check if comment box text is overflowing |
|
|
|
limitReplyBoxHeight(); |
|
|
|
|
|
|
|
//bind click events |
|
|
|
bindReplyButtons(); |
|
|
|
bindLikesButtons(); |
|
|
|
|
|
|
|
// remove link and reset loading |
|
|
|
$(self).remove(); |
|
|
|
loading = false; |
|
|
|
}) |
|
|
|
.fail(function(){ |
|
|
|
|
|
|
|
// reset loading flag |
|
|
|
loading = false |
|
|
|
return false; |
|
|
|
}) |
|
|
|
; |
|
|
|
}); |
|
|
|
|
|
|
|
//check if comment box text is overflowing max of 90 height |
|
|
|
limitReplyBoxHeight(); |
|
|
|
|
|
|
|
//bind click events |
|
|
|
bindReplyButtons(); |
|
|
|
bindLikesButtons(); |
|
|
|
}); |
|
|
|
|
|
|
|
function castAsInteger(number) { return isNaN(parseInt(number)) ? 0 : parseInt(number); } |
|
|
|
|
|
|
|
function limitReplyBoxHeight() { |
|
|
|
|
|
|
|
// check height of comment boxes |
|
|
|
$('.comment-box').each(function () { |
|
|
|
if ($(this).outerHeight() >= 125) { |
|
|
|
$(this).addClass('comment-box-overflow'); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// update box heights |
|
|
|
bindHeightHandler(); |
|
|
|
} |
|
|
|
|
|
|
|
// bind functions |
|
|
|
function bindHeightHandler() { |
|
|
|
$( ".comment-box-overflow").unbind( "click.show", toggleHeightHandler ); |
|
|
|
$( ".comment-box-overflow").bind( "click.show", toggleHeightHandler ); |
|
|
|
} |
|
|
|
|
|
|
|
function bindCancelButtons() { |
|
|
|
// bind cancel button |
|
|
|
$( ".cancel-reply").unbind( "click.cancel", cancelhandler ); |
|
|
|
$( ".cancel-reply").bind( "click.cancel", cancelhandler ); |
|
|
|
} |
|
|
|
|
|
|
|
function bindReplyButtons() { |
|
|
|
// bind reply button |
|
|
|
$( ".reply-button").unbind( "click.replys", replyhandler ); |
|
|
|
$( ".reply-button").bind( "click.replys", replyhandler ); |
|
|
|
} |
|
|
|
|
|
|
|
function bindLikesButtons() { |
|
|
|
$(".score-form button").unbind( "click.like", likesHandler ); |
|
|
|
$(".score-form button").bind( "click.like", likesHandler ); |
|
|
|
} |
|
|
|
|
|
|
|
function escapeHtml(html){ |
|
|
|
var text = document.createTextNode(html); |
|
|
|
var p = document.createElement('p'); |
|
|
|
p.appendChild(text); |
|
|
|
return p.innerHTML; |
|
|
|
} |
|
|
|
|
|
|
|
// bind handlers |
|
|
|
var toggleHeightHandler = function() { |
|
|
|
$(this).toggleClass("show-overflow"); |
|
|
|
} |
|
|
|
|
|
|
|
var cancelhandler = function(e) { |
|
|
|
|
|
|
|
// prevent form submit |
|
|
|
e.preventDefault(); |
|
|
|
replyboxId = $(this).data().replybox; |
|
|
|
|
|
|
|
// reset reply box html |
|
|
|
$("#replyBox" + replyboxId).html(""); |
|
|
|
} |
|
|
|
|
|
|
|
var likesHandler = function(e) { |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
data = $(this).data(); |
|
|
|
|
|
|
|
commentId = castAsInteger(data.commentid); |
|
|
|
objectId = castAsInteger(data.object); |
|
|
|
objectType = castAsInteger(data.type); |
|
|
|
liked = castAsInteger(data.like); |
|
|
|
|
|
|
|
if(! (commentId && objectId && objectType )) { return false; } |
|
|
|
|
|
|
|
// make an ajax request to like/dislike a comment |
|
|
|
$.post(`/ajax.php?action=likeComment&commentId=${commentId}&objectId=${objectId}&objectType=${objectType}&liked=${liked}`, {}) |
|
|
|
.done(function(payload){ |
|
|
|
if(payload.error === true) { |
|
|
|
location.reload(); |
|
|
|
return false; |
|
|
|
} |
|
|
|
|
|
|
|
// remove all active classes before proceed |
|
|
|
$("#commentRow" + commentId + " button").removeClass("active"); |
|
|
|
|
|
|
|
// check which button should be activated |
|
|
|
switch(true) { |
|
|
|
case payload.data.hasLiked == 1: |
|
|
|
$("#commentRow" + commentId + " .like-form button").addClass("active"); |
|
|
|
break; |
|
|
|
case payload.data.hasDisliked == 1: |
|
|
|
$("#commentRow" + commentId + " .dislike-form button").addClass("active"); |
|
|
|
break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
|
|
|
|
// update scores |
|
|
|
$("#commentRow" + commentId + " .like-form .likeCounter").html(castAsInteger(payload.data.totalLikes)); |
|
|
|
$("#commentRow" + commentId + " .dislike-form .likeCounter").html(castAsInteger(payload.data.totalDislikes)); |
|
|
|
|
|
|
|
}).fail(function(){ return false; }) |
|
|
|
; |
|
|
|
} |
|
|
|
|
|
|
|
var replyhandler = function(e) { |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
data = $(this).data(); |
|
|
|
|
|
|
|
// form elements |
|
|
|
const subReplyClass = data.reply ? "post-form-subreply" : ""; |
|
|
|
const dataReplyBox = data.reply ? data.reply : data.parent; |
|
|
|
const authorHiddenInput = data.author ? "<input type='hidden' name='authorId' value='" + castAsInteger(data.author) + "'>" : ""; |
|
|
|
const placeholder = escapeHtml(data.profile); |
|
|
|
|
|
|
|
// build reply box html structure |
|
|
|
replyHtml = ` |
|
|
|
<form method='post' id='postComment' class='post-comment-form post-form-reply ${subReplyClass}' action='#comments'> |
|
|
|
<input type='hidden' name='action' value='addComment'> |
|
|
|
<input type='hidden' name='commentType' value='${data.type}'> |
|
|
|
<input type='hidden' name='parentId' value='${data.parent}'> |
|
|
|
<input type='hidden' name='objectId' value='${data.object}'> |
|
|
|
${authorHiddenInput} |
|
|
|
<textarea class='form-control' placeholder="Reply to ${placeholder}" name='comment' maxlength='2000'></textarea> |
|
|
|
<button type='submit' class='btn btn-success post-comment-btn'>Post</button> |
|
|
|
<button class='btn btn-danger cancel-reply' data-replybox='${dataReplyBox}'>Cancel</button> |
|
|
|
</form> |
|
|
|
`; |
|
|
|
|
|
|
|
// set reply box html |
|
|
|
$("#replyBox" + (data.reply ? data.reply : data.parent )).html(replyHtml); |
|
|
|
|
|
|
|
// bind cancel buttons actions |
|
|
|
bindCancelButtons(); |
|
|
|
}; |