Updating comments

app/coffee/modules/common.coffee

@@ -114,9 +114,19 @@ module.directive("tgTagLine", ["$log", TagLineDirective])
 ## Change (comment and history mode) directive
 #############################################################################
 
-ChangeDirective = ->
+ChangesDirective = ->
     # TODO: i18n
+    containerTemplate = _.template("""
+    <div>
+        <% if (showMoreEnabled){ %>
+            <a href="" title="Show more" class="show-more">
+            Show <%- howManyMore %> more
+            </a>
+        <% } %>
+    </div>
+    """)
     commentBaseTemplate = _.template("""
+    <div class="entry comment-single <% if(hidden){ %>hidden<% }%>">
         <div class="comment-user activity-comment">
             <a class="avatar" href="" title="<%- userFullName %>">
                 <img src="<%- avatar %>" alt="<%- userFullName %>">
@@ -145,8 +155,10 @@ ChangeDirective = ->
                 <%- creationDate %>
             </div>
         </div>
+    </div>
     """)
     changeBaseTemplate = _.template("""
+    <div class="entry activity-single <% if(hidden){ %>hidden<% }%>">
         <div class="activity-user">
             <a class="avatar" href="" title="<%- userFullName %>">
                 <img src="<%- avatar %>" alt="<%- userFullName %>">
@@ -165,6 +177,7 @@ ChangeDirective = ->
                 <%= comment %>
             </div>
         </div>
+    </div>
     """)
     standardChangeFromToTemplate = _.template("""
     <div class="activity-inner">
@@ -225,6 +238,7 @@ ChangeDirective = ->
     </div>
     """)
     link = ($scope, $el, $attrs, $model) ->
+        $.uncollapsedEntries = null
         countChanges = (comment) ->
             return _.keys(comment.values_diff).length
 
@@ -275,7 +289,7 @@ ChangeDirective = ->
                         to: prettyPrintModification(modification[1])
                     }))
 
-        renderComment = (comment) ->
+        renderComment = (comment, containerDomNode, hidden) ->
             html = commentBaseTemplate({
                 avatar: getUserAvatar(comment.user.pk)
                 userFullName: getUserFullName(comment.user.pk)
@@ -283,23 +297,26 @@ ChangeDirective = ->
                 comment: comment.comment_html
                 changesText: buildChangesText(comment)
                 hasChanges: countChanges(comment) > 0
+                hidden: hidden
             })
-
+            entryDomNode = $(html)
-            $el.html(html)
+            activityContentDom = entryDomNode.find(".comment-content .us-activity")
-            activityContentDom = $el.find(".comment-content .us-activity")
             renderEntries(comment, activityContentDom)
+            console.log entryDomNode.html()
+            containerDomNode.append(entryDomNode)
 
-        renderChange = (change) ->
+        renderChange = (change, containerDomNode, hidden) ->
             html = changeBaseTemplate({
                 avatar: getUserAvatar(change.user.pk)
                 userFullName: getUserFullName(change.user.pk)
                 creationDate: moment(change.created_at).format("DD MMM YYYY HH:mm")
                 comment: change.comment_html
+                hidden: hidden
             })
-
+            entryDomNode = $(html)
-            $el.html(html)
+            activityContentDom = entryDomNode.find(".activity-content")
-            activityContentDom = $el.find(".activity-content")
             renderEntries(change, activityContentDom)
+            containerDomNode.append(entryDomNode)
 
         getUserFullName = (userId) ->
             return $scope.usersById[userId]?.full_name_display
@@ -320,25 +337,44 @@ ChangeDirective = ->
 
             return value
 
-        $scope.$watch $attrs.ngModel, (change) ->
+        $scope.$watch $attrs.ngModel, (changes) ->
-            if not change?
+            if not changes?
                 return
 
+            showMoreEnabled = $.uncollapsedEntries == null and changes.length > 2
+            howManyMore = changes.length - 2
+            html = containerTemplate({
+                showMoreEnabled: showMoreEnabled
+                howManyMore: howManyMore
+            })
+
+            containerDomNode = $(html)
+            _.each changes, (change, index) ->
+                hidden = showMoreEnabled and index < howManyMore
                 if $attrs.mode == "comment"
-                renderComment(change)
+                    renderComment(change, containerDomNode, hidden)
                 else
-                renderChange(change)
+                    renderChange(change, containerDomNode, hidden)
+
+            $el.html(containerDomNode)
 
         $el.on "click", ".activity-title", (event) ->
             event.preventDefault()
             $el.find(".activity-inner").toggleClass("active")
 
+        $el.on "click", ".show-more", (event) ->
+            event.preventDefault()
+            target = angular.element(event.currentTarget)
+            target.hide()
+            $el.find(".entry.hidden").removeClass("hidden")
+            $.uncollapsedEntries = true
+
         $scope.$on "$destroy", ->
             $el.off()
 
     return {link:link, require:"ngModel"}
 
-module.directive("tgChange", ChangeDirective)
+module.directive("tgChanges", ChangesDirective)
 
 
 #############################################################################

app/partials/views/modules/activity.jade

@@ -1,6 +1,6 @@
 section.us-activity.hidden
     //- modules/common.coffee - ChangeDirective
-    div.activity-single(tg-change, ng-model="change", mode="activity", ng-repeat="change in history")
+    div.activity-list(tg-changes, ng-model="history", mode="activity")
 
     //- TODO
     //- a.more-activity(href="", title="show more comments")

app/partials/views/modules/comments.jade

@@ -2,17 +2,18 @@
 //-       You must to define 'var noSaveButton = true' if save button is not necessary
 
 section.us-comments
-    div.add-comment(tg-check-permission, tg-toggle-comment, permission="modify_"+commentModel)
-        textarea(placeholder="Write here a new commet", ng-model="commentModel.comment", tg-markitup)
-
-        unless noSaveButton
-            a.button.button-green.save-comment(href="", title="Comment") Comment
-
-    div.comment-list
     //- modules/common.coffee - ChangeDirective
-        div.comment-single(tg-change, mode="comment", ng-model="comment", ng-repeat="comment in comments")
+    div.comment-list(tg-changes, mode="comment", ng-model="comments")
+
+        div.comment-single
 
         //- TODO
         //- a.more-comments(href="", title="show more comments")
         //-     span show previous comments
         //-     span.prev-comments-num (3 more)
+
+    div.add-comment(tg-check-permission, tg-toggle-comment, permission="modify_"+commentModel)
+        textarea(placeholder="Write here a new commet", ng-model="commentModel.comment", tg-markitup)
+
+        unless noSaveButton
+            a.button.button-green.save-comment(href="", title="Comment") Comment