diff --git a/app/coffee/modules/common.coffee b/app/coffee/modules/common.coffee index 3405fd30..02bae5ca 100644 --- a/app/coffee/modules/common.coffee +++ b/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(""" +
+ <% if (showMoreEnabled){ %> + + Show <%- howManyMore %> more + + <% } %> +
+ """) commentBaseTemplate = _.template(""" +
<%- userFullName %> @@ -145,24 +155,27 @@ ChangeDirective = -> <%- creationDate %>
+ """) changeBaseTemplate = _.template(""" -
- - <%- userFullName %> - -
-
-
- - <%- userFullName %> +
+
+ + <%- userFullName %> - - <%- creationDate %> -
-
- <%= comment %> +
+
+ + <%- userFullName %> + + + <%- creationDate %> + +
+
+ <%= comment %> +
""") @@ -225,6 +238,7 @@ ChangeDirective = ->
""") 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 }) - - $el.html(html) - activityContentDom = $el.find(".comment-content .us-activity") + entryDomNode = $(html) + activityContentDom = entryDomNode.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 }) - - $el.html(html) - activityContentDom = $el.find(".activity-content") + entryDomNode = $(html) + activityContentDom = entryDomNode.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) -> - if not change? + $scope.$watch $attrs.ngModel, (changes) -> + if not changes? return - if $attrs.mode == "comment" - renderComment(change) - else - renderChange(change) + 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, containerDomNode, hidden) + else + 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) ############################################################################# diff --git a/app/partials/views/modules/activity.jade b/app/partials/views/modules/activity.jade index 8aa1d2c2..f68ddc3e 100644 --- a/app/partials/views/modules/activity.jade +++ b/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") diff --git a/app/partials/views/modules/comments.jade b/app/partials/views/modules/comments.jade index 21279e5d..78fe0a38 100644 --- a/app/partials/views/modules/comments.jade +++ b/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) + //- modules/common.coffee - ChangeDirective + div.comment-list(tg-changes, mode="comment", ng-model="comments") - 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-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