Advanced Live Commenting jQuery Plugin – jquery-comments

Are you looking fully functional customizable Live Commenting jQuery Plugin If yes then Here I am going to share awesome jQuery Plugin which help for implementing an out-of-the-box commenting solution to any web application with an existing backend. It provides all the UI functionalities and ties them to callbacks that let you easily define what you want to do with the data. The library is highly customizable and very easy to integrate thanks to a wide variety of settings.

Features:

  • Commenting
  • Replying (nested comments)
  • Editing comments
  • Deleting comments
  • Upvoting comments
  • Uploading attachments
  • Hashtags
  • Pinging users
  • Enabling/disabling functionalities
  • Localization
  • Time formatting
  • Field mappings
  • Callbacks
  • Fully responsive and mobile compatible
  • Miscellaneous settings



Libraries

Load jQuery core library and other required supporting libraries including plugins library.

<!-- Styles -->
		<link rel="stylesheet" type="text/css" href="jquery-comments.css">
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 
		<!-- Data -->
		<script type="text/javascript" src="data/comments-data.js"></script>
 
		<!-- Libraries -->
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.0/jquery.textcomplete.js"></script>
		<script type="text/javascript" src="jquery-comments.min.js"></script>

HTML

Create a comments container which display comment box along with previous comment list.

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



JS

sample comment data, you can also load form your database.

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"
   },
   // ...
]




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

$(function() {
				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);
					},
				});
			});




List of All default customization options and Callbacks & functions.

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

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by Viima. Visit their official github repository for more information and follow for future updates.