Displaying and Adding User Comments

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>

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>

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();
  });
  
});

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