Introduction

This post will be the first in a series about the modules I wrote that everyone can use. Just hang tight and maybe you can take advantage of these too.

At the bottom of this page (past the comments), you can see that there is an interactive comment form that allows you to post comments without leaving the page. This ability is part of a module I wrote using JavaScript and I hope you like it.

Features

Add, edit, and reply

You can add new comments, edit old ones, and make directed replies all on the same page, depending on how you set it up.

Previewing

Write your comments in HTML and BBCode, and this comment form can preview your input in real time, complete with your avatar and signature.

BBCode input validation

This comment form can validate your input by detecting if you have any misaligned tags, improperly nested tags, or no input at all. If it finds anything wrong, it'll tell you, and you'll be unable to submit normally. Once you fix your error(s), you can then preview/submit successfully.

Traditional form submission

If you still wish to submit your comment without letting it pass validation, you can still submit the traditional way. Just press the "Force Submit" button. Feature removed.

Short-term memory

It also happens to have limited storage capabilities, and will remember user input until it is submitted during the lifetime of the browser's current tab. You can see this by reloading the page while you have an unpublished comment in the form's textarea.

How to use

Prerequisites

Note: Make sure your code is under the cut, with the blog entry input format set to BBCode.

To get a comment form onto your page, you'll need to set up a JavaScript file. The default one I have made for you is this: https://dl.dropboxusercontent.com/s/6wgfzg8xhov4z75/comment-form-example-1.js. If you want to keep everything the way it is, you don't have to do anything to this file. If there are things you need to add, you can use your own link in place of this one.

In the lower half of the file, you'll see something like this:

requirejs(["jquery", "gms-comment-form"], function($, CommentForm) {
	// Internals excluded.
});

This is the entry point for your script. Of course, you can do other things with JavaScript if you know how. Note that any modules you use are placed in square brackets. You can define where the modules are in the config section in the upper half of the file. The function part assigns names to those modules.

Code

Place this code into your blog post:

<img style="display: none;" src="/community/sites/all/modules/smileys/packs/ToT/redface.gif" onload="var script = document.createElement('script'); script.type = 'application/javascript'; script.dataset.main = 'https://dl.dropboxusercontent.com/s/6wgfzg8xhov4z75/comment-form-example-1.js'; script.src = 'http://requirejs.org/docs/release/2.1.15/minified/require.js'; document.head.appendChild(script);">

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ih44znn3xo222ko/comment-form-example-1.css">

The lower part is an optional CSS file. Note that you can also use your own CSS if you wish, either in a separate file like the above sample or inline with your blog post.

Once you have that, you should be all ready to go. Please note that once you submit your changes, you may need to refresh the page (such as if you are using Chrome or Safari).

Source

The comment form module I created can be found here. This module takes advantage of other modules. These include the Validator module, which validates user input, and the Previewer module, which handles the comment previews.

License

This code is released under GPL v3+. Among other things, this means you can redistribute applications using this code as long as you use the same license and provide the source. Remember to leave the copyright notices where they are. Read about the license here.

Credits

Thanks to patorjk for the BBCode parser.

Feedback

Do you have any questions? Do you find this useful? Did you find any mistakes? Does something not work in your browser? Leave me a comment. Suggestions are always welcome.

If you find something wrong, please leave a description of the anomaly — you don't have to fix it yourself. Also include what browser(s) and what operating system you are using, especially if you notice that the problem doesn't happen on other platforms.

Todo?

• User suggestions.
• Should I trim the example images at the sides? I don't know if the sides reinforce the context, or if they are unnecessary. Trimming them would reduce the file size, too, along with the stretching.
• Prevent comment form from appearing when editing the blog entry. Fixed.
• Edit form brings back last page of comments, not the page of the edited comment (only apparent when the corresponding pages are different). Note that this is default TEFc behavior.
• Replace screenshots with ones that more accurately represent the new version.
• Support more BBCode tags. Unsupported ones include the PHP tag.
• Change preview to even/odd (and update its id, if applicable) depending on which comment it will be?

See also

TEFc

• AlisonRobin's External CSS Guide.

External

• RequireJS, the module loader I use.
• jQuery, a useful library compatible with RequireJS.