Displaying Comments in the Viewport

Here is some very simple example code for working with the comments feature.

Place this in your page.vm, preferably after the opening body tag.

<script type="text/javascript">
    var pageId = '$page.id';
    var commentResourcePath = '$comments.restUrl';
</script>
JS

Here is the actual template code rendering the comments thread. Place this underneath the $page.content. 

<h2>Comments</h2>
#macro(printCommentThread $comment)
<li class="comment">
  <div class="comment-header">
    $comment.author
    (created: $comment.creationDate("yyyy-MM-dd hh:mm"),
    last modified: $comment.lastModificationDate("yyyy-MM-dd hh:mm"))
  </div>
  <div class="comment-content">
	  <p class="comment-body">$comment.content</p>
  </div>
  <div><a class="comment-reply-link" data-comment-id="$comment.id" href="#">Reply</a></div>
  #foreach($child in $comment.children)
    <ol class="comment-threads">
	#printCommentThread($child)
    </ol>
  #end
</li>
#end
<ol id="comments-section" class="comment-threads top-level">
  #foreach($comment in $page.topLevelComments)
    #printCommentThread($comment)
  #end
</ol>
XML

Adding Comments from Viewport

Create an extra javascript file to place this code into. This can be loaded after jQuery in your head element. This creates a form after the comments-section.

See Referencing JS/CSS and Image Files for including created files.

$(document).ready(function () {
  
  var generateFormId = function(commentId) {
    var formId = "comment-submit-form";
    return commentId ? formId + "-" + commentId : formId;
  };
  
  var generateCommentReplyForm = function(formId, commentId) {
	return '<form id="' + formId + '">' +
      '  <input type="text" name="pageId" value="' + pageId + '" hidden="true">' +
      '  <input type="text" name="replyTo" value="' + commentId + '" hidden="true">' +
      '  <textarea name="content" rows="5" cols="30"></textarea><br>' +
      '  <select name="contentType">' +
      '    <option value="markdown">Markdown</option>' +
      '    <option value="plain">Plain</option>' +
      '  </select>' +
      '  <input type="submit" value="Submit">' +
      '</form>';
  };
 
  var submitFormEvent = function(event) {
    var data = {
      'pageId': this.elements.pageId.value,
      'replyTo': this.elements.replyTo.value,
      'content': this.elements.content.value,
      'contentType': this.elements.contentType.value,
    };
    $.ajax({
      type: "POST",
      url: commentResourcePath,
      data: $.param(data),
      success: function() {
        location.reload();
      },
      error: function() {
        alert("There was an error submitting the comment.");
      }
    });
           
	event.preventDefault();
  };
  
  $('#comments-section').after(generateCommentReplyForm('comment-submit-form', ''));
  $('#comment-submit-form').submit(submitFormEvent);
  
  $('.comment-reply-link').click(function(event) {
    var commentId = this.dataset.commentId;
    var formId = generateFormId(commentId);
    var form = $('#' + formId);
    if (form.length) {
		form.remove();
    } else {
		$(this).after(generateCommentReplyForm(formId, commentId));
		$('#' + formId).submit(submitFormEvent);
    }
    event.preventDefault();
  });
  
});
JS

There is currently no support for editing and deleting comments from within Viewport. Watch and vote on the feature request in our Jira.