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!

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.

Get Started

How to start using SideComments.js on your website immediately.

1. Download SideComments.js

Direct download

Download SideComments.js immediately.

Download SideComments.js

Source code

Check out the source code on Github.

SideComments.js on Github

Install with Component

You can install SideComments via component.

component install aroc/side-comments

or include side-comments in your component.json file dependencies object.

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-section elements.
  • currentUser (Object) *optional:
    The user representation new comments will be posted under. As it's optional, you can just pass null if there is no current user at the time and set one at a later time with the setCurrentUser method, 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 the insertComment method, 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.