Disqus Style Comment System In jQuery - comments.js

Disqus Style Comment System In jQuery - comments.js
File Size: 500 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

Changelog:

2018-11-14

  • Minor bug fix

2018-09-13

  • Updated linkify function, minor style enhancements

2018-09-01

  • Run newText through textFromatter in case translations are used

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