An url for profile picture of the current user. Not required if Font Awesome is used.

$('#comments-container').comments({
  profilePictureURL: '/user_profiles/user-icon.png'
});

A boolean value determing whether the current user is administarator

$('#comments-container').comments({
  currentUserIsAdmin: true
});

An url for spinner icon that is shown before comments have been fetched. Not required if Font Awesome is used.

$('#comments-container').comments({
  spinnerIconURL: '/img/spinner.gif'
});

An url for upvote icon that is used as a button for upvoting. Not required if Font Awesome is used.

$('#comments-container').comments({
  upvoteIconURL: '/img/upvote-icon.png'
});

An url for reply icon that is shown after the author of the comment if the comment is a reply. Not required if Font Awesome is used.

$('#comments-container').comments({
  replyIconURL: '/img/reply-icon.png'
});

An url for upload icon that is used as a button for uploading attachments. Not required if Font Awesome is used.

$('#comments-container').comments({
  uploadIconURL: '/img/upload-icon.png'
});

An url for attachment icon that is used as a symbol for attachments. Not required if Font Awesome is used.

$('#comments-container').comments({
  attachmentIconURL: '/img/attachment-icon.png'
});

An url for close icon that is used as a button for closing commenting field. Not required if Font Awesome is used.

$('#comments-container').comments({
  closeIconURL: '/img/close-icon.png'
});

An url for no-comments icon that is shown if there are no comments to show. Not required if Font Awesome is used.

$('#comments-container').comments({
  noCommentsIconURL: '/img/no-comments-icon.png'
});

A string that is displayed as a placeholder in commenting fields

$('#comments-container').comments({
  textareaPlaceholderText: 'Leave a comment'
});

A string that is displayed on sorting button for newest comments

$('#comments-container').comments({
  newestText: 'New'
});

A string that is displayed on sorting button for oldest comments

$('#comments-container').comments({
  oldestText: 'Old'
});

A string that is displayed on sorting button for most popular comments

$('#comments-container').comments({
  popularText: 'Most popular'
});

A string that is displayed on sorting button for attachments

$('#comments-container').comments({
  attachmentsText: 'Show attachments'
});

A string that is displayed on send button

$('#comments-container').comments({
  sendText: 'Comment'
});

A string that is displayed on reply button

$('#comments-container').comments({
  replyText: 'Answer'
});

A string that is displayed on edit button

$('#comments-container').comments({
  editText: 'Modify'
});

A string that is displayed on edited timestamp

$('#comments-container').comments({
  editedText: 'Modified'
});

A string that is displayed as a name of the user for new comments by default

$('#comments-container').comments({
  youText: 'Me'
});

A string that is displayed on save button

$('#comments-container').comments({
  saveText: 'Update'
});

A string that is displayed on delete button

$('#comments-container').comments({
  deleteText: 'Remove'
});

A string that is displayed to show all replies when there are more replies than defined in maxRepliesVisible option. Variable __replyCount__ is used as a placeholder for the reply count.

$('#comments-container').comments({
  viewAllRepliesText: 'Show all replies (__replyCount__)'
});

A string that is displayed to hide replies that weren't visible initially

$('#comments-container').comments({
  hideRepliesText: 'Hide'
});

A string that is displayed if there are no comments to show

$('#comments-container').comments({
  noCommentsText: 'There are no comments'
});

A string that is displayed if there are no attachments to show

$('#comments-container').comments({
  noAttachmentsText: 'There are no attachments'
});

A string that is used to inform the user where the attachments can be dropped

$('#comments-container').comments({
  attachmentDropText: 'Drop here'
});

A css value for the highlight color that is used for example to highlight active sorting button and comments by admin

$('#comments-container').comments({
  highlightColor: '#23A6F0'
});

A css value for the color of the delete button

$('#comments-container').comments({
  deleteButtonColor: 'red'
});

A boolean value determing whether replying is enabled

$('#comments-container').comments({
  enableReplying: false
});

A boolean value determing whether editing is enabled

$('#comments-container').comments({
  enableEditing: false
});

A boolean value determing whether upvoting is enabled

$('#comments-container').comments({
  enableUpvoting: false
});

A boolean value determing whether deleting is enabled

$('#comments-container').comments({
  enableDeleting: false
});

A boolean value determing whether user is allowed to delete own comment that has replies (replies will be deleted as well)

$('#comments-container').comments({
  enableDeletingCommentWithReplies: false
});

A boolean value determing whether attachments are enabled

$('#comments-container').comments({
  enableAttachments: true
});

A boolean value determing whether hashtags are enabled. Enabling this functionality highlights the hashtags and the hashtagClicked callback function will be executed once the user has clicked a hashtag.

$('#comments-container').comments({
  enableHashtags: true
});

A boolean value determing whether pinging users is enabled. Enabling this functionality highlights the pings and the pingClicked callback function will be executed once the user has clicked a ping.

N.B.

• The feature is depended on a javascript library called jquery-textcomplete
• You need to implement the searchUsers callback function which returns a list of all users matching the ping
• jquery-comments assumes that the pings are sent to the server in format @<user_id>, for example @145
• jquery-comments assumes that the pings are returned from the server in format @<user_fullname>, for example @Bryan Connery together with a dictionary of pinged users and respective full names
  EXAMPLE

  {
    content: "What do you think @Bryan Connery?",
    pings: {254: "Bryan Connery"},
    ...
  }
  

$('#comments-container').comments({
  enablePinging: true
});

A boolean value determing whether navigation is enabled

$('#comments-container').comments({
  enableNavigation: false
});

A boolean value determing whether comments will be posted by pressing enter

$('#comments-container').comments({
  postCommentOnEnter: true
});

A boolean value determing whether the main navigation elements are presented in a dropdown

$('#comments-container').comments({
  forceResponsive: true
});

A boolean value determing whether any actions are enabled

$('#comments-container').comments({
  readOnly: true
});

A dictionary that is used to map the fields between jquery-comments and the server. The keys of the dictionary represent field names used within the jquery-comments whereas the values represent the field names from your API. In callback functions the data is remapped to match with your API so you can use the comment data as such.

id                    // Required
parent                // Required if replying is enabled
created               // Required
modified              // Required if editing is enabled
content               // Optional
attachments           // Required if attachments are enabled
pings                 // Required if pinging is enabled
creator               // Required if pinging is enabled
fullname              // Required
profilePictureURL     // Optional
isNew                 // Optional
createdByAdmin        // Optional
createdByCurrentUser  // Required if editing is enabled
upvoteCount           // Required if upvoting is enabled
userHasUpvoted        // Required if upvoting is enabled

fieldMappings: {
  id: 'id',
  parent: 'parent',
  created: 'created',
  modified: 'modified',
  content: 'content',
  attachments: 'attachments',
  pings: 'pings',
  creator: 'creator',
  fullname: 'fullname',
  profilePictureURL: 'profile_picture_url',
  isNew: 'is_new',
  createdByAdmin: 'created_by_admin',
  createdByCurrentUser: 'created_by_current_user',
  upvoteCount: 'upvote_count',
  userHasUpvoted: 'user_has_upvoted'
}

$('#comments-container').comments({
  fieldMappings: {
     parent: 'comment_id',
     modified: 'edited',
     fullname: 'name',
     profilePictureURL: 'user_image',
     upvoteCount: 'upvotes',
  }
});

A callback function that is called after the comments have been rendered

function() {}

$('#comments-container').comments({
  refresh: function() {
    $('#comments-container').addClass('rendered');
  }
});

A callback function that is used to fetch the comments array from the server. The callback provides both success and error callbacks which should be called based on the result from the server. The success callback takes the comment array as a parameter.

function(success, error) {
  success([]);
}

$('#comments-container').comments({
  getComments: function(success, error) {
    $.ajax({
      type: 'get',
      url: '/api/comments/',
      success: function(commentsArray) {
        success(commentsArray)
      },
      error: error
    });
  }
});

A callback function that is used for searching users when pinging. The callback provides both success and error callbacks which should be called based on the result from the server. The success callback takes the user array as a parameter.

function(term, success, error) {
  success([]);
}

$('#comments-container').comments({
  searchUsers: function(term, success, error) {
    $.ajax({
      type: 'get',
      url: '/api/users/?search=' + term,
      success: function(userArray) {
        success(userArray)
      },
      error: error
    });
  }
});

A callback function that is used to create a new comment to the server. The first parameter of the callback is commentJSON that contains the data of the new comment. The callback provides both success and error callbacks which should be called based on the result from the server. The success callback takes the created comment as a parameter.

function(commentJSON, success, error) {
  success(commentJSON);
}

$('#comments-container').comments({
  postComment: function(commentJSON, success, error) {
    $.ajax({
      type: 'post',
      url: '/api/comments/',
      data: commentJSON,
      success: function(comment) {
        success(comment)
      },
      error: error
    });
  }
});

A callback function that is used to update an existing comment to the server. The first parameter of the callback is commentJSON that contains the data of the updated comment. The callback provides both success and error callbacks which should be called based on the result from the server. The success callback takes the updated comment as a parameter.

function(commentJSON, success, error) {
  success(commentJSON);
}

$('#comments-container').comments({
  putComment: function(commentJSON, success, error) {
    $.ajax({
      type: 'put',
      url: '/api/comments/' + commentJSON.id,
      data: commentJSON,
      success: function(comment) {
        success(comment)
      },
      error: error
    });
  }
});

A callback function that is used to delete a comment from the server. The first parameter of the callback is commentJSON that contains the data of the comment to be deleted. The callback provides both success and error callbacks which should be called based on the result from the server.

function(commentJSON, success, error) {
  success();
}

$('#comments-container').comments({
  deleteComment: function(commentJSON, success, error) {
    $.ajax({
      type: 'delete',
      url: '/api/comments/' + commentJSON.id,
      success: success,
      error: error
    });
  }
});

A callback function that is used to create or delete an upvote. The first parameter of the callback is commentJSON that contains the data of the upvoted comment. The callback provides both success and error callbacks which should be called based on the result from the server. The success callback takes the updated comment as a parameter.

function(commentJSON, success, error) {
  success(commentJSON);
}

$('#comments-container').comments({
  upvoteComment: function(commentJSON, success, error) {
    var commentURL = '/api/comments/' + commentJSON.id;
    var upvotesURL = commentURL + '/upvotes/';

    if(commentJSON.userHasUpvoted) {
      $.ajax({
        type: 'post',
        url: upvotesURL,
        data: {
          comment: commentJSON.id
        },
        success: function() {
          success(commentJSON)
        },
        error: error
      });
    } else {
      $.ajax({
        type: 'delete',
        url: upvotesURL + upvoteId,
        success: function() {
          success(commentJSON)
        },
        error: error
      });
    }
  }
});

A callback function that is used to validate attachments prior uploading them to server. The first parameter of the callback is attachments array including all the attachments to be uploaded. The callback function takes an array of validated attachments as a parameter.

Please see Working with attachments for more information.

function(attachments, callback) {
  callback(attachments);
}

$('#comments-container').comments({
  validateAttachments: function(attachments, callback) {
    var validAttachments = [];

    $(attachments).each(function(index, attachment) {
      var maxFileSizeMb = 10;
      var fileSizeMb = attachment.file.size / 1000000;

      if(fileSizeMb <= maxFileSizeMb) {
        validAttachments.push(attachment);
      }
    });

    callback(validAttachments);
  }
});

A callback function that is called after user has clicked a hashtag

function(hashtag) {}

$('#comments-container').comments({
  hashtagClicked: function(hashtag) {
    location.hash = 'tags/' + hashtag
  }
});

A callback function that is called after user has clicked a ping

function(ping) {}

$('#comments-container').comments({
  pingClicked: function(ping) {
    location.hash = 'users/' + ping
  }
});

A callback function that is called for strings before inserting to DOM. Can be used for localization for instance.

function(text) {
  return text;
}

$('#comments-container').comments({
  textFormatter: function(text) {
    return i18n.translate(text);
  }
});

A callback function that is called for timestamps before inserting to DOM. Can be used for relative times for instance.

function(time) {
  return new Date(time).toLocaleDateString();
}

$('#comments-container').comments({
  timeFormatter: function(time) {
    return moment(time).fromNow();
  }
});

A string value determing the default sorting. Possible values are newest, oldest, popularity and attachments

$('#comments-container').comments({
  defaultNavigationSortKey: 'popularity'
});

A boolean value determing whether profile pictures are rounded

$('#comments-container').comments({
  roundProfilePictures: true
});

An integer value determing how many rows there are in the commenting fields

$('#comments-container').comments({
  textareaRows: 1
});

An integer value determing how many rows there are in the commenting fields on focus

$('#comments-container').comments({
  textareaRowsOnFocus: 4
});

An integer or a boolean value determing the maximum amount of rows in commenting fields as they increase when typing. If set to false, commenting fields will increase infinitely.

$('#comments-container').comments({
  textareaMaxRows: false
});

An integer value determing the maximum amount of replies that are visibile intially under a comment. The hidden replies can be shown by clicking the button with a text set in viewAllRepliesText option.

$('#comments-container').comments({
  maxRepliesVisible: 3
});