Demo
Below is an example of SideComments.js in action. Each section of text can be commented on. Go ahead and give it a try!
Get Started
How to start using SideComments.js on your website immediately.
2. Include SideComments.js in your project.
jQuery Required
You must include jQuery in your project in order for SideComments.js to work. This component uses jQuery to manage DOM manipulation and will not work without it.
You'll need to include the following single JavaScript file and two CSS files to get SideComments.js working.
release/side-comments.js
release/side-comments.css
release/themes/default-theme.css
You can choose not to include default-theme.css, but you'll need to style SideComments youself if you choose not to include it, as side-comments.css handles only the basic layout styling.
3. Set up your HTML.
You need to have a wrapper element to point SideComments at and two things on each commentable section; the class commentable-section and the data attribute data-section-id, which holds the unique ID of that commentable-section for this page.
4. Initialize a new SideComments object.
The current user is an object and is expected to be in the following format:
The existing comments argument is expected to be an array of sections with a nested array of comments. It needs to look like the following:
5. Listen to post and delete events.
Finally, in order to know when a comment has been posted or deleted, just bind to your SideComments' object events and then do whatever you want with them, (likely save and delete from your database).
Docs
Overview of all events and method you can leverage in SideComments.js
SideComments Constructor
The constructor takes one required and two optional arguments:
-
$el(String):
The element which contains all the.commentable-sectionelements. -
currentUser(Object) *optional:
The user representation new comments will be posted under. As it's optional, you can just passnullif there is no current user at the time and set one at a later time with thesetCurrentUsermethod, which is documented below. The current user object needs to look like this: https://gist.github.com/aroc/02a0f8badf219da12667 -
existingComments(Array) *optional:
An array of existing comments that you want inserted at initialization time. You can also insert comments yourself at later time with theinsertCommentmethod, outlined below. The structure of the objects in this array needs to look like this: https://gist.github.com/aroc/54a2669783231a0d2215
Methods
deselectSection(sectionId)
Description: De-select a section and make it inactive, hiding the side comments. If the side comments are already hidden, this method will have no effect.
setCurrentUser(currentUser)
Description: Sets the currentUser to be used for all new comments.
removeCurrentUser()
Description: Removes the currentUser. Without a currentUser, comments amy not be posted. Instead, the addCommentAttempted event gets triggered when a user clicks the "Add Comment" button.
insertComment(comment)
Description: Inserts a comment into the markup. It will insert into the section specified by the comment object.
removeComment(sectionId, commentId)
Description: Removes a comment from the SideComments object and from the markup.
commentsAreVisible()
Description: Returns true if the comments are visbile, false if they are not.
destroy()
Description: Removing the sideComments object, cleaning up any event bindings and removing any markup from the DOM.
Events
| Event Name | Values Passed | Description |
| commentPosted | comment (Object) | Fired after a user fills out the comment form and clicks "Post". |
| addCommentAttempted | None | Fired when a sideComments object doesn't have a current user and the "Add Comment" button is clicked. |
| commentDeleted | comment (Object) | Fired after a user has clicked "Delete" on one of their comments and has confirmed with the dialog that they do want to delete it. |
SideComments.js In Action
Each paragraph tag has the "commentable-section" class, making it a section which can be commented on after you've initialized a new SideComments object and pointed it at the parent element, which is "#commentable-container" for this demo.
Hover over each section and you'll notice a little "comment bubble" pop up. Clicking on the markers on the right will show the SideComments. Sections without any comments only show their marker on hover.
This is the default theme that comes with SideComments.js. You can easily theme SideComments to your liking by not including "default-theme.css" and just styling it all yourself.