Press "Enter" to skip to content

A JavaScript Library of Choice to Implement Commenting in Your Web Application | comments.js

jquery-comments is a jQuery extension to implement a ready-made comment solution for any web application with an existing background. It provides all the functionality of the UI user interface and links them to callbacks that allow you to easily specify what you want to do with the data. The library is highly customizable and easy to integrate thanks to a variety of settings.

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

It is easy to handle comment data and communicate back end with callback functions.

Features:

  • comment
  • Reply (nested comments)
  • Edit comments
  • Delete comments
  • Supportive comments
  • Attachments are uploaded
  • Hashtag
  • Ping users
  • Enable / disable functions
  • Localization
  • Time coordination
  • Field mappings
  • Callbacks
  • Responsive and compatible with mobile devices
  • Various settings

How to make use of it:

1. Load jQuery JavaScript library and different required assets within the doc.

<!-- 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 information within the doc.

<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 instance comment information:

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: "current.user@viima.com",
    profile_picture_url: "https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png"
   },
   // ...
]

5. Initialize the comment system and get & save remark information with the next capabilities & 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 choices.

$('#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 & capabilities accessible.

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

Disqus Style Comment System, jquery-comments Plugin/Github


See Demo And Download

Official Website(Viima): Click Here

This superior jQuery/javascript plugin is developed by Viima. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.