ChatBook/infinite_comment_loading.php at master · God-Hand/ChatBook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
		<style src="assets/css/comment.css"></style>
		<style type="text/css">
			div {
		    word-wrap: break-word;
			}
		  ::-webkit-scrollbar {
		      width: 5px;
		  }
		  ::-webkit-scrollbar-track {
		      background: #f1f1f1;
		  }
		  ::-webkit-scrollbar-thumb {
		      background: #888;
		  }
		  ::-webkit-scrollbar-thumb:hover {
		      background: #555;
		  }
			body{
				font-size: 14px;
			}
		</style>
	</head>
	<body class="bg-light">
		<div class="comment_area">
	  </div>
	  <img id="loading" src="assets/images/icons/loading.gif">
	</body>
</html>

<script>
	var commentRequestResponse = true;
	var post_id = '<?php echo $_REQUEST['post_id']; ?>';
	function loadComments(){
		if(commentRequestResponse){
			var last_comment_id = $('.comment:last').attr('id');
			var noMoreComments = $('.comment_area').find('.noMoreComments').val();
			if (noMoreComments == 'false') {
				commentRequestResponse = false;
				$('#loading').show();
				$.post("includes/load_comments.php", {post_id : post_id, last_comment_id : last_comment_id}, function(data){
					$('.comment_area').find('.noMoreComments').remove();
					$('.comment_area').append(data);
					$('#loading').hide();
					commentRequestResponse = true;
				});
			}
		}
	}
	$(document).ready(function() {
		$('#loading').show();
		commentRequestResponse = false;
		$.post("includes/load_comments.php", {post_id : post_id, last_comment_id : 0}, function(data){
			$('#loading').hide();
			$('.comment_area').html(data);
			commentRequestResponse = true;
		});
		$(window).scroll(function() {
			if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
				loadComments();
			}
		});
	});

	function likeComment(obj) {
		if(obj.value == "0") {
			obj.innerHTML = "<i class='fa fa-thumbs-down'></i>&nbspUnLike";
			obj.value = '1';
			$('#commentlikecount'+obj.id).html(parseInt($('#commentlikecount'+obj.id).html())+1);
		} else {
			obj.innerHTML = "<i class='fa fa-thumbs-up'></i>&nbspLike";
			obj.value = '0';
			$('#commentlikecount'+obj.id).html(parseInt($('#commentlikecount'+obj.id).html())-1);
		}
		$.post("includes/like_comment.php", {comment_id : obj.id, user_action : obj.value}, function(data){
		});
	}
</script>