[extensions-web] Only load 5 comments by default.

[Jasper St. Pierre <jstpierre src gnome org>]

commit 52e6d539019465bd022627f905251bf48dad1823
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Wed Sep 26 00:12:37 2012 -0300

    Only load 5 comments by default.
    
    The rest will be under a "show more" button.

 .../extensions/templates/extensions/comments.html  |    2 +-
 sweettooth/ratings/views.py                        |    7 ++++++
 sweettooth/static/css/sweettooth.css               |   17 ++++++++++++++-
 sweettooth/static/js/main.js                       |   22 +++++++++++++++----
 .../js/templates/extensions/comments_list.mustache |   12 +++++++---
 sweettooth/static/js/templates/templatedata.js     |    2 +-
 6 files changed, 50 insertions(+), 12 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/comments.html b/sweettooth/extensions/templates/extensions/comments.html
index 7e023ea..0139723 100644
--- a/sweettooth/extensions/templates/extensions/comments.html
+++ b/sweettooth/extensions/templates/extensions/comments.html
@@ -1,6 +1,6 @@
 <div id="comments">
   <h4>User comments</h4>
-  <p>Loading comments...</p>
+  <p class="comments-holder">Loading comments...</p>
 </div>
 <div id="opinion_form">
   <h4>Your opinion</h4>
diff --git a/sweettooth/ratings/views.py b/sweettooth/ratings/views.py
index 1eb91bd..75eba12 100644
--- a/sweettooth/ratings/views.py
+++ b/sweettooth/ratings/views.py
@@ -1,4 +1,6 @@
 
+import json
+
 from django.core.urlresolvers import reverse
 from django.contrib import comments
 from django.contrib.messages import info
@@ -32,5 +34,10 @@ def comment_details(request, comment):
 @ajax_view
 def get_comments(request):
     extension = models.Extension.objects.get(pk=request.GET['pk'])
+    show_all = json.loads(request.GET.get('all', 'false'))
+
     comment_list = comments.get_model().objects.for_model(extension)
+    if not show_all:
+        comment_list = comment_list[:5]
+
     return [comment_details(request, comment) for comment in comment_list]
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index de9bf79..976606b 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -518,6 +518,21 @@ li.extension:last-child {
     margin-right: 30px;
 }
 
+#comments .show-all {
+    font-weight: bold;
+    cursor: pointer;
+    color: #204a87;
+}
+
+#comments .show-all:hover {
+    color: #3465a4;
+}
+
+#comments .show-all.loading {
+    color: #EEEEEC;
+    cursor: default;
+}
+
 .comment {
     margin-left: 90px;
 }
@@ -540,7 +555,7 @@ li.extension:last-child {
     font-weight: bold;
 }
 
-.comment .timestamp {
+.comment time {
     color: #999;
 }
 
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 1ac71c3..eaf2d24 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -173,18 +173,30 @@ function($, messages, modal, hashParamUtils, templates) {
                 $('.icon.upload').uploadify('/ajax/upload/icon/'+pk);
             }
 
-            $(this).find('#comments').each(function() {
-                var $loadingText = $(this).find('p');
+            function fetchComments(base, showAll) {
                 $.ajax({
                     type: 'GET',
                     dataType: 'json',
-                    data: { pk: pk },
+                    data: { pk: pk, all: showAll },
                     url: '/comments/all/',
                 }).done(function(comments) {
-                    var $newContent = $(templates.get('extensions/comments_list')(comments));
+                    var $commentsHolder = base.find('.comments-holder');
+
+                    var data = { comments: comments, show_all: showAll };
+                    var $newContent = $('<div>').append(templates.get('extensions/comments_list')(data));
+                    $newContent.addClass('comments-holder');
+
                     $newContent.find('time').timeago();
-                    $loadingText.replaceWith($newContent);
+                    $newContent.find('.show-all').on('click', function() {
+                        $(this).addClass('loading');
+                        fetchComments(base, true);
+                    });
+                    $commentsHolder.replaceWith($newContent);
                 });
+            }
+
+            $(this).find('#comments').each(function() {
+                fetchComments($(this), false);
             });
         });
     });
diff --git a/sweettooth/static/js/templates/extensions/comments_list.mustache b/sweettooth/static/js/templates/extensions/comments_list.mustache
index 9ea88ae..b55a193 100644
--- a/sweettooth/static/js/templates/extensions/comments_list.mustache
+++ b/sweettooth/static/js/templates/extensions/comments_list.mustache
@@ -1,7 +1,11 @@
-{{#.}}
+{{#comments}}
   {{>extensions/comment}}
   <hr>
-{{/.}}
-{{^.}}
+{{/comments}}
+{{^show_all}}
+<p class="show-all">Show more reviews</p>
+{{/show_all}}
+
+{{^comments}}
   <p>There are no comments. Be the first!</p>
-{{/.}}
+{{/comments}}
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 5668038..c55cf3d 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -3,7 +3,7 @@
 
 define({
   "extensions/comment": "<div class=\"comment\">\n  {{#is_extension_creator}}\n  <div class=\"extension-creator-badge\">Author</div>\n  {{/is_extension_creator}}\n  <img src=\"{{gravatar}}\" class=\"gravatar\">\n  <div class=\"rating-author\">\n    {{#has_rating}}\n      <div class=\"rating\" data-rating-value=\"{{rating}}\"></div> by\n    {{/has_rating}}\n    <a class=\"comment-author\" href=\"{{author.url}}\">{{author.username}}</a>\n    <p>{{comment}}</p>\n    <time datetime=\"{{date.timestamp}}Z\">{{date.standard}}</time>\n  </div>\n</div>",
-  "extensions/comments_list": "{{#.}}\n  {{>extensions/comment}}\n  <hr>\n{{/.}}\n{{^.}}\n  <p>There are no comments. Be the first!</p>\n{{/.}}",
+  "extensions/comments_list": "{{#comments}}\n  {{>extensions/comment}}\n  <hr>\n{{/comments}}\n{{^show_all}}\n<p class=\"show-all\">Show more reviews</p>\n{{/show_all}}\n\n{{^comments}}\n  <p>There are no comments. Be the first!</p>\n{{/comments}}",
   "extensions/error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically detected errors:\n\n{{#errors}}\n  {{.}}\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell Extensions did not detect any errors with this extension.\n{{/errors}}\n\nVersion information:\n\n    Shell version: {{sv}}\n    Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}",
   "extensions/info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n  {{>extensions/info_contents}}\n</div>",
   "extensions/info_contents": "<div class=\"switch\"></div>\n<div class=\"extra-buttons\">\n  <div class=\"upgrade-button\" title=\"Upgrade this extension\"></div>\n  <div class=\"configure-button\" title=\"Configure this extension\"></div>\n</div>\n<h3 class=\"extension-name\">\n  {{#link}}\n    <a href=\"{{link}}\" class=\"title-link\"> <img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n  {{/link}}\n  {{^link}}\n  {{name}}\n  {{/link}}\n</h3>\n{{#creator}}\n  <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n{{/creator}}\n<p class=\"description\">{{first_line_of_description}}</p>\n{{#want_uninstall}}\n  <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n{{/want_uninstall}}",