Comment filer slider for x50

by Anton

HTML

<link rel="stylesheet" type="text/css" href="http://www.advancebydesign.com/examples/jquery-simple-slider-control/jscslider.css">

<div class="comments" id="comments">
    
<div id="comment_filter"><input type="number" class="slider" id="comment_slider" min="-25" max="25" value="0" style="width:200px;">
    &nbsp;&nbsp;Рейтинг от <span id="comment_floor_value" style="display:inline;">0</span><div>
    
<script type="text/javascript" src="http://www.advancebydesign.com/examples/jquery-simple-slider-control/jscslider.js"></script>
    
        <div class="comment-wrapper" id="comment_wrapper_id_188">
        
<div id="comment_id_188" class="comment   self">
    <a name="comment188"></a>
    
    <div class="folding" style=""></div>
    <ul class="info">        <li class="avatar"><a href="http://x50.sevencrafts.net/profile/Anton/"><img src="http://x50.sevencrafts.net/uploads/images/00/00/03/2012/06/15/avatar_24x24.jpg?150738" alt="avatar"></a></li>        <li class="username"><a href="http://x50.sevencrafts.net/profile/Anton/">Anton</a></li>        <li class="date">25 июня 2012, 14:13</li>            </ul>
    
    <div id="comment_content_id_188" class="content">            
            Подтвержу из своего психотипа, больше двух-трёх комментариев редко читаю, разве что если знакомые общаются :)</div>
    
    
                            
        <div id="vote_area_comment_188" class="voting positive guest     ">
            <a href="#" class="plus" onclick="return ls.vote.vote(188,this,1,'comment');"></a>
            <span id="vote_total_comment_188" class="total">-20</span>
            <a href="#" class="minus" onclick="return ls.vote.vote(188,this,-1,'comment');"></a>
        </div>
        
    
    <ul class="links">
                    <li><a href="#" onclick="ls.comments.toggleCommentForm(188); return false;" class="reply-link">Ответить</a></li>
                <li><a href="#comment188" class="comment-link"></a></li>    
                <li...

CSS

/* Comments */
#comment_filter {
    margin: 0.5em 1em;
}

.comment.hidden { opacity: 0.3; }
.comments { margin-bottom: 10px; }
.comments .comment-wrapper { overflow: hidden; zoom: 1; position: relative; }
.comments .comment-wrapper .comment-wrapper { padding-left: 25px; }

.comment-preview { padding: 5px 10px; margin-bottom: 5px; background: #fafafa; overflow: hidden; zoom: 1; }
.comments-header { padding-left: 20px; margin-bottom: 20px; }
.comments-header h3 { font-size: 18px; font-family: Verdana, sans-serif; margin-bottom: 3px; }
.comments-header a.rss { background: url(../images/icons.gif) no-repeat scroll -70px -247px transparent; margin-right: 20px; padding-left: 14px; }

/* Comment */
.comment { margin-bottom: 18px; position: relative; padding-left: 20px; zoom: 1; }
.comment .deleted { padding: 5px 10px; color: #777; background: #f4f4f4; }
.comment .folding { width: 10px; height: 10px; position: absolute; top: 14px; left: 4px; background: url(../images/icons.gif) -20px -210px no-repeat; cursor: pointer; }
.comment .folding.folded { background-position: 0 -210px; }
.comment .goto-comment-child { display: none; }
.comment .voting { position: absolute; top: 32px; right: 0; width: 48px; height: 30px; }
.comment .voting .plus { position: absolute; top: 0; left: 0; }
.comment .voting .minus { position: absolute; top: 16px; left: 0; }
.comment .voting .total { position: absolute; top: 4px; right: 0; font-weight: normal; color: #333; padding: 0; }
.comment .voting.positive .total { color: #390; }
.comment .voting.negative .total { color: #f00; }

/* Comment Highlights */
.comment .content,                         .comment .content:before                    { background-color: #f7f7f7; }
.comment.deleted .content,                 .comment.deleted .content:before             { background-color: #c5c5c5; }
.comment.deleted.not-admin .content,     .comment.deleted.not-admin .content:before     { padding: 5px 10px; min-height: 0; background-color: #f7f7f7; color:...

JavaScript

var items_to_hide = '.content, .voting, .links';

setRatingFilter($('#comment_slider').val());

$('#comment_slider').change(function() {
    setRatingFilter($(this).val());
});

function setRatingFilter(value) {
    $('#comment_floor_value').text(value);
    
    $('#comments .hidden_comment_hint').live('click', function() {showComment($(this).parent());});
    
    // fade out below, fade in above
    $('#comments .comment').each(function() {
        if(Number($(this).find('.total').text()) >= value) {
            showComment($(this));
         } else {
            // hide (don't show)
            hideComment($(this));
        }
    });
};

function showComment(comment) {
    if(comment.hasClass('hidden')) {
        comment
            .find(items_to_hide).show().end()
            .removeClass('hidden')
            .find('.hidden_comment_hint').remove();
    } 
}

function hideComment(comment) {
    if(!(comment.hasClass('hidden'))) {
        comment.find(items_to_hide).hide().end()
            .addClass('hidden')
            .append('<div class="hidden_comment_hint">Комментарий ниже заданного рейтинга, <a href="#" class="show_comment">показать</a>?</div>');
    }
}