Disqus Style Comment System In jQuery - comments.js

The jQuery Comments plugin makes it simple to create a nice clean, highly customizable, Disqus inspired comment system on the web app.

Easy to handle the comment data and communicate with back-end with callback functions.

More features:

• Custom profile images.
• Font Awesome based icons.
• Easy to localize the strings.
• Responsive desigin.
• Mobile-friendly.
• Autocomplete for @.
• Supports replay, edit, upvote, delete, attachment, ping, navigation, etc.
• Customizable appearances.
• Load & save comment data via JSON.

How to use it:

1. Load jQuery JavaScript library and other required resources in the document.

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<!-- jquery.textcomplete plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.4/jquery.textcomplete.min.js"></script>

2. Load the jQuery Comments plugin's files in the document.

<link rel="stylesheet" href="css/jquery-comments.css">
<script src="js/jquery-comments.js"></script>

3. Create a container for the comment system.

<div id="comments-container"></div>

4. The example comment data:

var commentsArray = [{
   "id": 1,
   "parent": null,
   "created": "2015-01-01",
   "modified": "2015-01-01",
   "content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu.",
   "pings": [],
   "creator": 6,
   "fullname": "Simon Powell",
   "profile_picture_url": "https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png",
   "created_by_admin": false,
   "created_by_current_user": false,
   "upvote_count": 3,
   "user_has_upvoted": false,
   "is_new": false
},
// ...
]
var usersArray = [{
    id: 1,
    fullname: "Current User",
    email: "[email protected]",
    profile_picture_url: "https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png"
   },
   // ...
]

5. Initialize the comment system and get & save comment data with the following functions & callbacks.

var saveComment = function(data) {
  // Convert pings to human readable format
  $(data.pings).each(function(index, id) {
    var user = usersArray.filter(function(user){return user.id == id})[0];
    data.content = data.content.replace('@' + id, '@' + user.fullname);
  });
  return data;
}
$('#comments-container').comments({
  profilePictureURL: 'https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png',
  currentUserId: 1,
  roundProfilePictures: true,
  textareaRows: 1,
  enableAttachments: true,
  enableHashtags: true,
  enablePinging: true,
  getUsers: function(success, error) {
    setTimeout(function() {
      success(usersArray);
    }, 500);
  },
  getComments: function(success, error) {
    setTimeout(function() {
      success(commentsArray);
    }, 500);
  },
  postComment: function(data, success, error) {
    setTimeout(function() {
      success(saveComment(data));
    }, 500);
  },
  putComment: function(data, success, error) {
    setTimeout(function() {
      success(saveComment(data));
    }, 500);
  },
  deleteComment: function(data, success, error) {
    setTimeout(function() {
      success();
    }, 500);
  },
  upvoteComment: function(data, success, error) {
    setTimeout(function() {
      success(data);
    }, 500);
  },
  uploadAttachments: function(dataArray, success, error) {
    setTimeout(function() {
      success(dataArray);
    }, 500);
  },
});

6. All default customization options.

$('#comments-container').comments({
  // User
  profilePictureURL: '',
  currentUserIsAdmin: false,
  currentUserId: null,
  // Font awesome icon overrides
  spinnerIconURL: '',
  upvoteIconURL: '',
  replyIconURL: '',
  uploadIconURL: '',
  attachmentIconURL: '',
  fileIconURL: '',
  noCommentsIconURL: '',
  // Strings to be formatted (for example localization)
  textareaPlaceholderText: 'Add a comment',
  newestText: 'Newest',
  oldestText: 'Oldest',
  popularText: 'Popular',
  attachmentsText: 'Attachments',
  sendText: 'Send',
  replyText: 'Reply',
  editText: 'Edit',
  editedText: 'Edited',
  youText: 'You',
  saveText: 'Save',
  deleteText: 'Delete',
  newText: 'New',
  viewAllRepliesText: 'View all __replyCount__ replies',
  hideRepliesText: 'Hide replies',
  noCommentsText: 'No comments',
  noAttachmentsText: 'No attachments',
  attachmentDropText: 'Drop files here',
  textFormatter: function(text) {return text},
  // Functionalities
  enableReplying: true,
  enableEditing: true,
  enableUpvoting: true,
  enableDeleting: true,
  enableAttachments: false,
  enableHashtags: false,
  enablePinging: false,
  enableDeletingCommentWithReplies: false,
  enableNavigation: true,
  postCommentOnEnter: false,
  forceResponsive: false,
  readOnly: false,
  defaultNavigationSortKey: 'newest',
  // Colors
  highlightColor: '#2793e6',
  deleteButtonColor: '#C9302C',
  scrollContainer: this.$el,
  roundProfilePictures: false,
  textareaRows: 2,
  textareaRowsOnFocus: 2,
  textareaMaxRows: 5,
  maxRepliesVisible: 2,
  fieldMappings: {
    id: 'id',
    parent: 'parent',
    created: 'created',
    modified: 'modified',
    content: 'content',
    file: 'file',
    fileURL: 'file_url',
    fileMimeType: 'file_mime_type',
    pings: 'pings',
    creator: 'creator',
    fullname: 'fullname',
    profileURL: 'profile_url',
    profilePictureURL: 'profile_picture_url',
    isNew: 'is_new',
    createdByAdmin: 'created_by_admin',
    createdByCurrentUser: 'created_by_current_user',
    upvoteCount: 'upvote_count',
    userHasUpvoted: 'user_has_upvoted'
  },
});

7. Callbacks & functions available.

$('#comments-container').comments({
  getUsers: function(success, error) {success([])},
  getComments: function(success, error) {success([])},
  postComment: function(commentJSON, success, error) {success(commentJSON)},
  putComment: function(commentJSON, success, error) {success(commentJSON)},
  deleteComment: function(commentJSON, success, error) {success()},
  upvoteComment: function(commentJSON, success, error) {success(commentJSON)},
  hashtagClicked: function(hashtag) {},
  pingClicked: function(userId) {},
  uploadAttachments: function(commentArray, success, error) {success(commentArray)},
  refresh: function() {},
  timeFormatter: function(time) {return new Date(time).toLocaleDateString()}
});

This awesome jQuery plugin is developed by Viima. For more Advanced Usages, please check the demo page or visit the official website.