linear or threaded comment switch

For antipope discussion: http://www.antipope.org/charlie/blog-static/2011/10/design-changes.html

by Chris Sullins

HTML

<div class="commentList">
    <div class="comment" id="comment1">
        Comment 1
    </div>
    <div class="comment" id="comment2">
        Comment 2
    </div>
    <div class="comment" id="comment3" data-reply-to="comment2">
        Comment 3
    </div>
    <div class="comment" id="comment4" data-reply-to="comment3">
        Comment 4
    </div>
    <div class="comment" id="comment5">
        Comment 5
    </div>
    <div class="comment" id="comment6" data-reply-to="comment4">
        Comment 6
    </div>
    <div class="comment" id="comment7" data-reply-to="comment5">
        Comment 7
    </div>
    <div class="comment" id="comment8" data-reply-to="comment2">
        Comment 8
    </div>
    <div class="comment" id="comment9">
        Comment 9
    </div>
</div>

CSS

.comment {
    background: rgba(0,0,0,0.05);
    border-left: solid 4px #666;
    border-radius: 6px;
    padding: 10px;
    margin: 10px 0;
}

JavaScript

// on DOM load, run this function
$(function() {
    var commentList, comments, replies, controls;
    
    
    // NECESSARY INITIALIZATION
    
    // get the comment container
    commentList = $('.commentList');
    // get all comments
    comments = $(commentList).find('.comment');
    // get all replies (all comments with a data-reply-to attribute)
    replies = $(comments).filter('[data-reply-to]');
    // nest them
    nestComments();
    
    
    
    
    // CONTROLS (wouldn't be present in actual implementation)
    
    // create the controls to nest and un-nest at the top of the body
    controls = $('<div class="controls"><a href="#">nested</a> | <a href="#">single nested</a> | <a href="#">linear</a></div>').prependTo(document.body);
    // add click events to the controls
    $(controls).find('a').eq(0).click(prevent).click(nestComments);
    $(controls).find('a').eq(1).click(prevent).click(singleNestComments);
    $(controls).find('a').eq(2).click(prevent).click(unNestComments);
    
    // function: prevent default action from happening on an event (e.g. following a link)
    function prevent(e) {
        e.preventDefault();
        return false;
    }
    
    
    
    
    // THE (UN)NESTING FUNCTIONS
    
    // function: take the nested comment list and linearize them
    // this function relies on the original order being correct
    function unNestComments() {
        // get all comments, and attach them to the commentlist container
        comments.appendTo(commentList);
    }
    
    // function: take the linear comment list and nest them
    function nestComments() {
        // get all elements with a "data-reply-to" attribute, and detach them
        // then loop through the detached elements, applying this function
        replies.each(function(i, el) {
            var targetId;
            // wrap the element in a jQuery collection
            el = $(el);
            // get the data attribute
            targetId =...