pdf-grabber/html/js/comments.js

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> &bull; ${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();
};