Separate list comments for newre and older revision

lib/views/page.html

@@ -17,6 +17,7 @@
   data-page-id="{% if page %}{{ page._id.toString() }}{% endif %}"
   data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
   data-page-revision-id="{% if revision %}{{ revision._id.toString() }}{% endif %}"
+  data-page-revision-created="{% if revision %}{{ revision.createdAt|datetz('U') }}{% endif %}"
   >
 
   {% if not page %}
@@ -322,6 +323,15 @@ $(function() {
     </form>
 
     <div class="page-comments-list" id="page-comments-list">
+      <div class="page-comments-list-newer collapse" id="page-comments-list-newer"></div>
+
+      <a class="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer"><i class="fa fa-angle-double-up"></i> Comments for Newer Revision <i class="fa fa-angle-double-up"></i></a>
+
+      <div class="page-comments-list-current" id="page-comments-list-current"></div>
+
+      <a class="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older"><i class="fa fa-angle-double-down"></i> Comments for Older Revision <i class="fa fa-angle-double-down"></i></a>
+
+      <div class="page-comments-list-older collapse in" id="page-comments-list-older"></div>
     </div>
   </div>
 

resource/css/_comment.scss

@@ -1,3 +1,5 @@
+.crowi.main-container aside.sidebar .side-content {
+
 .page-comments {
   margin: 8px 0 0 0;
 
@@ -21,6 +23,14 @@
   }
 
   .page-comments-list {
+    .page-comments-list-toggle-newer,
+    .page-comments-list-toggle-older {
+      text-align: center;
+      display: block;
+      margin: 8px;
+      font-size: .9em;
+      color: #999;
+    }
     .page-comment {
       margin-top: 8px;
       padding-top: 8px;
@@ -75,3 +85,6 @@
   }
 }
 
+
+
+} // .crowi.main-container aside.sidebar .side-content

resource/js/crowi.js

@@ -214,6 +214,7 @@ Crowi.userPicture = function (user) {
 $(function() {
   var pageId = $('#content-main').data('page-id');
   var revisionId = $('#content-main').data('page-revision-id');
+  var revisionCreatedAt = $('#content-main').data('page-revision-created');
   var currentUser = $('#content-main').data('current-user');
 
   Crowi.linkPath();
@@ -289,10 +290,11 @@ $(function() {
       }
 
       var $commentMeta = $('<div class="page-comment-meta">')
-        .text(commentedAt);
-        //.append($commentRevision);
+        .text(commentedAt + ' ')
+        .append($commentRevision);
+
       var $commentBody = $('<div class="page-comment-body">')
-        .html(comment.replace(/\n/, '<br>'));
+        .html(comment.replace(/(\r\n|\r|\n)/g, '<br>'));
 
       var $commentMain = $('<div class="page-comment-main">')
         .append($commentCreator)
@@ -315,15 +317,44 @@ $(function() {
 
     // get comments
     var $pageCommentList = $('.page-comments-list');
+    var $pageCommentListNewer =   $('#page-comments-list-newer');
+    var $pageCommentListCurrent = $('#page-comments-list-current');
+    var $pageCommentListOlder =   $('#page-comments-list-older');
+    var hasNewer = false;
+    var hasOlder = false;
     $.get('/_api/comments.get', {page_id: pageId}, function(res) {
       if (res.ok) {
         var comments = res.comments;
         $.each(comments, function(i, comment) {
-          $pageCommentList.append(createCommentHTML(comment.revision, comment.creator, comment.comment, comment.createdAt));
+          var commentContent = createCommentHTML(comment.revision, comment.creator, comment.comment, comment.createdAt);
+          if (comment.revision == revisionId) {
+            $pageCommentListCurrent.append(commentContent);
+          } else {
+            if (Date.parse(comment.createdAt)/1000 > revisionCreatedAt) {
+              $pageCommentListNewer.append(commentContent);
+              hasNewer = true;
+            } else {
+              $pageCommentListOlder.append(commentContent);
+              hasOlder = true;
+            }
+          }
         });
       }
     }).fail(function(data) {
+
       // console.log(data);
+    }).always(function() {
+      //$pageCommentList.append($pageCommentListNewer)
+      //  .append($pageCommentListCurrent)
+      //  .append($pageCommentListOlder);
+
+      if (!hasNewer) {
+        $('.page-comments-list-toggle-newer').hide();
+      }
+      if (!hasOlder) {
+        $pageCommentListOlder.addClass('collapse');
+        $('.page-comments-list-toggle-older').hide();
+      }
     });
 
     // post comment event