
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()} });
This awesome jQuery plugin is developed by Viima. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 18.08.2018
- Source