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: "[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 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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…