From cf4ab3b2df995597d1e19584a873efbdc5fbf9a6 Mon Sep 17 00:00:00 2001
From: Ben Word <ben@benword.com>
Date: Mon, 11 Feb 2013 23:50:49 -0600
Subject: [PATCH] Use Bootstrap media object for listing comments

http://twitter.github.com/bootstrap/components.html#media

- Introduce lib/comments.php: contains Roots_Walker_Comment

- Update templates/comments.php to use the new walker, general
clean up
---
 functions.php          |  1 +
 lib/comments.php       | 64 ++++++++++++++++++++++++++++++
 templates/comments.php | 88 ++++++++++++++----------------------------
 3 files changed, 94 insertions(+), 59 deletions(-)
 create mode 100644 lib/comments.php

diff --git a/functions.php b/functions.php
index ad98cfd..62e8841 100644
--- a/functions.php
+++ b/functions.php
@@ -12,6 +12,7 @@ require_once locate_template('/lib/config.php');          // Configuration
 require_once locate_template('/lib/activation.php');      // Theme activation
 require_once locate_template('/lib/cleanup.php');         // Cleanup
 require_once locate_template('/lib/nav.php');             // Custom nav modifications
+require_once locate_template('/lib/comments.php');        // Custom comments modifications
 require_once locate_template('/lib/rewrites.php');        // URL rewriting for assets
 require_once locate_template('/lib/htaccess.php');        // HTML5 Boilerplate .htaccess
 require_once locate_template('/lib/widgets.php');         // Sidebars and widgets
diff --git a/lib/comments.php b/lib/comments.php
new file mode 100644
index 0000000..d4defd8
--- /dev/null
+++ b/lib/comments.php
@@ -0,0 +1,64 @@
+<?php
+
+function roots_get_avatar($avatar) {
+  $avatar = str_replace("class='avatar", "class='avatar pull-left media-object", $avatar);
+  return $avatar;
+}
+add_filter('get_avatar', 'roots_get_avatar');
+
+/**
+ * Use Bootstrap's media object for listing comments
+ *
+ * @link http://twitter.github.com/bootstrap/components.html#media
+ */
+class Roots_Walker_Comment extends Walker_Comment {
+  function start_lvl(&$output, $depth = 0, $args = array()) {
+    $GLOBALS['comment_depth'] = $depth + 1; ?>
+    <ul <?php comment_class('media unstyled comment-' . get_comment_ID()); ?>>
+    <?php
+  }
+
+  function end_lvl(&$output, $depth = 0, $args = array()) {
+    $GLOBALS['comment_depth'] = $depth + 1;
+    echo '</ul>';
+  }
+
+  function start_el(&$output, $comment, $depth, $args, $id = 0) {
+    $depth++;
+    $GLOBALS['comment_depth'] = $depth;
+    $GLOBALS['comment'] = $comment;
+
+    if (!empty($args['callback'])) {
+      call_user_func($args['callback'], $comment, $args, $depth);
+      return;
+    }
+
+    extract($args, EXTR_SKIP); ?>
+
+  <li <?php comment_class('media comment-' . get_comment_ID()); ?>>
+    <?php echo get_avatar($comment, $size = '64'); ?>
+    <div class="media-body">
+      <h4 class="media-heading"><?php echo get_comment_author_link(); ?></h4>
+      <time datetime="<?php echo comment_date('c'); ?>"><a href="<?php echo htmlspecialchars(get_comment_link($comment->comment_ID)); ?>"><?php printf(__('%1$s', 'roots'), get_comment_date(),  get_comment_time()); ?></a></time>
+      <?php edit_comment_link(__('(Edit)', 'roots'), '', ''); ?>
+
+      <?php if ($comment->comment_approved == '0') : ?>
+        <div class="alert alert-block fade in">
+          <a class="close" data-dismiss="alert">&times;</a>
+          <p><?php _e('Your comment is awaiting moderation.', 'roots'); ?></p>
+        </div>
+      <?php endif; ?>
+
+      <?php comment_text(); ?>
+      <?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))); ?>
+  <?php
+  }
+
+  function end_el(&$output, $comment, $depth = 0, $args = array()) {
+    if (!empty($args['end-callback'])) {
+      call_user_func($args['end-callback'], $comment, $args, $depth);
+      return;
+    }
+    echo "</li>\n";
+  }
+}
diff --git a/templates/comments.php b/templates/comments.php
index e0516ab..ff0e703 100644
--- a/templates/comments.php
+++ b/templates/comments.php
@@ -2,66 +2,33 @@
   if (post_password_required()) {
     return;
   }
-?>
 
-<?php function roots_comment($comment, $args, $depth) {
-  $GLOBALS['comment'] = $comment; ?>
-  <li <?php comment_class(); ?>>
-    <article class="comment-<?php comment_ID(); ?>">
-      <header class="comment-author vcard">
-        <?php echo get_avatar($comment, $size = '32'); ?>
-        <?php printf(__('<cite class="fn">%s</cite>', 'roots'), get_comment_author_link()); ?>
-        <time datetime="<?php echo comment_date('c'); ?>"><a href="<?php echo htmlspecialchars(get_comment_link($comment->comment_ID)); ?>"><?php printf(__('%1$s', 'roots'), get_comment_date(),  get_comment_time()); ?></a></time>
-        <?php edit_comment_link(__('(Edit)', 'roots'), '', ''); ?>
-      </header>
-
-      <?php if ($comment->comment_approved == '0') : ?>
-        <div class="alert alert-block fade in">
-          <a class="close" data-dismiss="alert">&times;</a>
-          <p><?php _e('Your comment is awaiting moderation.', 'roots'); ?></p>
-        </div>
-      <?php endif; ?>
-
-      <section class="comment">
-        <?php comment_text(); ?>
-      </section>
-
-      <?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))); ?>
-
-    </article>
-<?php } ?>
-
-<?php if (have_comments()) : ?>
+ if (have_comments()) : ?>
   <section id="comments">
     <h3><?php printf(_n('One Response to &ldquo;%2$s&rdquo;', '%1$s Responses to &ldquo;%2$s&rdquo;', get_comments_number(), 'roots'), number_format_i18n(get_comments_number()), get_the_title()); ?></h3>
 
-    <ol class="commentlist">
-      <?php wp_list_comments(array('callback' => 'roots_comment')); ?>
+    <ol class="media-list">
+      <?php wp_list_comments(array('walker' => new Roots_Walker_Comment)); ?>
     </ol>
 
-    <?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : // are there comments to navigate through ?>
-      <nav>
-        <ul class="pager">
-          <?php if (get_previous_comments_link()) : ?>
-            <li class="previous"><?php previous_comments_link(__('&larr; Older comments', 'roots')); ?></li>
-          <?php else: ?>
-            <li class="previous disabled"><a><?php _e('&larr; Older comments', 'roots'); ?></a></li>
-          <?php endif; ?>
-          <?php if (get_next_comments_link()) : ?>
-            <li class="next"><?php next_comments_link(__('Newer comments &rarr;', 'roots')); ?></li>
-          <?php else: ?>
-            <li class="next disabled"><a><?php _e('Newer comments &rarr;', 'roots'); ?></a></li>
-          <?php endif; ?>
-        </ul>
-      </nav>
-
-    <?php endif; // check for comment navigation ?>
+    <?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : ?>
+    <nav>
+      <ul class="pager">
+        <?php if (get_previous_comments_link()) : ?>
+          <li class="previous"><?php previous_comments_link(__('&larr; Older comments', 'roots')); ?></li>
+        <?php endif; ?>
+        <?php if (get_next_comments_link()) : ?>
+          <li class="next"><?php next_comments_link(__('Newer comments &rarr;', 'roots')); ?></li>
+        <?php endif; ?>
+      </ul>
+    </nav>
+    <?php endif; ?>
 
     <?php if (!comments_open() && !is_page() && post_type_supports(get_post_type(), 'comments')) : ?>
-      <div class="alert alert-block fade in">
-        <a class="close" data-dismiss="alert">&times;</a>
-        <p><?php _e('Comments are closed.', 'roots'); ?></p>
-      </div>
+    <div class="alert alert-block fade in">
+      <a class="close" data-dismiss="alert">&times;</a>
+      <p><?php _e('Comments are closed.', 'roots'); ?></p>
+    </div>
     <?php endif; ?>
   </section><!-- /#comments -->
 <?php endif; ?>
@@ -84,21 +51,24 @@
     <?php else : ?>
       <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
         <?php if (is_user_logged_in()) : ?>
-          <p><?php printf(__('Logged in as <a href="%s/wp-admin/profile.php">%s</a>.', 'roots'), get_option('siteurl'), $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php __('Log out of this account', 'roots'); ?>"><?php _e('Log out &raquo;', 'roots'); ?></a></p>
+          <p>
+            <?php printf(__('Logged in as <a href="%s/wp-admin/profile.php">%s</a>.', 'roots'), get_option('siteurl'), $user_identity); ?>
+            <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php __('Log out of this account', 'roots'); ?>"><?php _e('Log out &raquo;', 'roots'); ?></a>
+          </p>
         <?php else : ?>
           <label for="author"><?php _e('Name', 'roots'); if ($req) _e(' (required)', 'roots'); ?></label>
-          <input type="text" class="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?>>
+          <input type="text" class="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" <?php if ($req) echo 'aria-required="true"'; ?>>
           <label for="email"><?php _e('Email (will not be published)', 'roots'); if ($req) _e(' (required)', 'roots'); ?></label>
-          <input type="email" class="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?>>
+          <input type="email" class="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" <?php if ($req) echo 'aria-required="true"'; ?>>
           <label for="url"><?php _e('Website', 'roots'); ?></label>
-          <input type="url" class="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3">
+          <input type="url" class="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22">
         <?php endif; ?>
         <label for="comment"><?php _e('Comment', 'roots'); ?></label>
-        <textarea name="comment" id="comment" class="input-xlarge" tabindex="4"></textarea>
-        <p><input name="submit" class="btn btn-primary" type="submit" id="submit" tabindex="5" value="<?php _e('Submit Comment', 'roots'); ?>"></p>
+        <textarea name="comment" id="comment" class="input-xlarge" rows="5" aria-required="true"></textarea>
+        <p><input name="submit" class="btn btn-primary" type="submit" id="submit" value="<?php _e('Submit Comment', 'roots'); ?>"></p>
         <?php comment_id_fields(); ?>
         <?php do_action('comment_form', $post->ID); ?>
       </form>
-    <?php endif; // if registration required and not logged in ?>
+    <?php endif; ?>
   </section><!-- /#respond -->
 <?php endif; ?>