'댓글 더 보기' 플러그인 업그레이드

iTIPs/티스토리 2014. 11. 7. 12:19

댓글 더 보기 플러그인은 이미 몇달 전 이 블로그에 적용하고 소개해 드렸었는데요.

티스토리 댓글 길어질 때 '댓글 더보기' 플러그인

기능상 부족한 점을 보완하고, 애니메이션까지 추가해서 업그레이드 해보았습니다.

물론 성능 부담은 최소한으로 줄이려 노력했습니다.

댓글 더 보기 플러그인을 사용하면 뭐가 좋나요?

제 경우는 댓글 목록 아래에 댓글 입력창이 있는 경우를 선호합니다.

그래야 댓글에 있는 내용을 한번이라도 읽어보고 쓸데없는 중복 댓글을 달지 않을테니까요.

그런데 댓글목록이 너무 길어질 경우 댓글을 달려면 스크롤을 한참 내려야하는 불편이 생기게됩니다.

그래서 페이스북처럼 댓글이 너무 많아질 경우 몇개만 보여주고, 나머지는 더 보기를 눌러야 보이는 방식을 적용한 것입니다.

결국 장점은 저와 비슷한 생각을 갖고 계신 분들에게만 장점일지도 모르겠습니다.

댓글 입력창을 댓글 목록 아래에 배치해도 큰 불편이 없다.
댓글이 많을 경우에도 스크롤이 짧아진다.
재미있다(?)

지난 버전에서 달라진점

대부분의 스킨에서 사용 가능하도록 수정했습니다. (티스토리 기본스킨일지라도!)
적용법이 더 쉬워졌습니다.
댓글 더 보기 버튼이 표시될 댓글 갯수를 설정할 수 있습니다.
더 보기 버튼에 현재 보여진 댓글 갯수와 남은 댓글 갯수가 표시됩니다.
댓글을 한번에 다 보이게 하는 '전체보기'버튼을 추가했습니다.
애니메이션이 추가되어 새로 보이는 댓글이 어떤 것인지 파악하기 쉬워졌습니다.
댓글이 50개가 넘어서 티스토리 자체의 '이전 댓글 보기' 버튼이 생성되더라도 정상 작동합니다.

적용 방법

skin.html에서 </body> 윗줄에 다음 스크립트를 붙여넣으면 끝입니다.


<script>window.jQuery||document.write('<script src="http://s1.daumcdn.net/svc/original/U03/cssjs/jquery/jquery-1.11.0.min.js"><\/script>');</script>
<script>
// 댓글 더 보기 플러그인 - http://nubiz.tistory.com/546
var thresholdCount = 8; //댓글 표시 갯수
$("li[id^='comment']").parent().first().addClass("nubiz");
var commentCount = $(".nubiz>li[id^='comment']").length;
$(".nubiz").append('<button id="moreComment" onclick="moreComment()" style="display:none"> 보기 </button><button id="allComment" onclick="showAllComment()" style="display:none">전체</br>보기</button><style>#moreComment {width: 85%;height: 50px;font-size: .8em;font-weight: bold;background-color: #eee;float:left;}#allComment{width: 15%;height: 50px;font-size: .8em;font-weight: bold;background-color: #eee;}#moreComment:hover,#allComment:hover {color:#fff;background-color: #999;}</style>')
function refeshComment() {
    $("#moreComment").html("더 보기 [ " + $("li[id^=comment]:visible").length + "/" + $("li[id^='comment']").length + " ]");
}
function moreComment() {
    $(".nubiz>li[id^='comment']:hidden:lt("+thresholdCount+")").show(500)
    if($("li[id^='comment']:hidden")[0]==undefined){
        $("#moreComment, #allComment").hide(500)
    };
    refeshComment();
}
function showAllComment() {
    $(".nubiz>li[id^=comment]").show(500);
    $("#moreComment, #allComment").hide(500);
}
if (commentCount > thresholdCount) {
    $("#moreComment, #allComment").show();
    $(".nubiz>li[id^='comment']:gt(" + (thresholdCount-1) + ")").hide();
    refeshComment();
};
$("li[id^='ttMorePreviousComments']").click(function(){showAllComment()});
</script>