Updating comments

stable
Alejandro Alonso 2014-08-29 13:03:06 +02:00
parent 9aebe8127e
commit c18f7a0b91
3 changed files with 76 additions and 39 deletions

View File

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

View File

@ -1,6 +1,6 @@
section.us-activity.hidden section.us-activity.hidden
//- modules/common.coffee - ChangeDirective //- 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 //- TODO
//- a.more-activity(href="", title="show more comments") //- a.more-activity(href="", title="show more comments")

View File

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