designguide extending jquery based comments

Add jQuery-based Commenting

Melody's progenitor, Movable Type, has used custom JavaScript to handle commenting behavior for a long time. But thanks to a jQuery-based API developed by Byrne Reese, some of the newer Movable Type themes and Melody offer the option of controlling commenting via jQuery. The API is hosted at Byrne's GitHub page.

This is a simple guide on how to implement this alternative jQuery-based commenting in a Melody theme.

Structure

There are three main components to this API:

1. The jQuery MT data object (javascript_mt.mtml in the repository).
2. mtauth.js
3. mtgreet.js

The javascript link statements should be included in the html head section in precisely that order and following the link for the main jQuery library, /mt-static/js/jquery.min.js.

The jQuery MT data object is a data structure that contains a lot of site-specific information such as which URLs to use for sign in/sign out, blog ID number and comment configuration data. It is used by both the authentication and greeting APIs. Most of its contents should be self-explanatory upon reading it (it is a very simple JavaScript object).

Authentication

The authentication API (mtauth.js) is similar to the old Movable Type API in some respects, but much simplified. It exposes the following capabilities:

• onauthchange(user) event that can be bound to any DOM object. This is called when the API does something that affects the user's authentication in some fashion. A good use for this would be to bind it to the comment form so that when the user is authenticated, the comment form is adapted accordingly.
• $.fn.movabletype.fetchUser(callback) support function which attempts to retrieve the user's session from the Melody back end.
• $.fn.movabletype.getUser() support function which, when called after fetchUser(), will return an object representing the user's session. The object has the following properties:
  • is_authenticated (boolean)
  • can_comment (boolean)
  • is_author (boolean)
  • is_banned (boolean)
  • is_anonymous (boolean)
  • is_trusted (boolean)
  • author (string)
  • email (string)
  • url (string)
• $.fn.movabletype.setUser(u) support function that lets you override the current user.

Here is an example of how the authentication API can be used to adapt a comment form to a user getting authenticated:

    $(function() {
        $.fn.movabletype.fetchUser();
        $.fn.movabletype.getUser();
        form = $('#comment-form');
        form.submit(function() {
            //#armor is a hidden input like this:
            //
            //It gets updated like below on form submit to help block spam
            $('#armor', form).val(mt.blog.comments.armor);
        });
        form.onauthchange(function(evt, user) {
            if (user.is_authenticated) {
                $('#author').val(user.author).parent().hide();
                $('#email').val(user.email).parent().hide();
                $('#url').val(user.url).parent().hide();
            }
        });
    });

Creating the Comment Form

The greeting API has very solid documentation. It's called like this:

$('#myGreetingDiv').greet({ .... });

A Melody comment form should contain the following HTML characteristics:

• Method type is POST.
• The action points to the comment script (comments.cgi, easily identified in a template via <$mt:CGIPath$><$mt:CommentScript$>)
• Four inputs named author, email, url and text (comment text).
• Five hidden inputs named static (default value is "1"), entry_id, __lang, parent_id and armor. The value of parent_id should be the comment ID number of the comment which will serve as the parent. How you get this is something you'll have to figure out on your own, but a simple way would be to make each comment block have an id attribute like "comment-<$mt:CommentID$>" in the template.
• At least one submit button whose name is "post." A submit button named "preview," when clicked, will cause the comment to be shown as a preview. The Melody comment system looks for a field named "post" to direct it to post the comment versus preview it. If none are specified, the comment attempt will fail.

This is an example of a full Melody comment form:

    <form id="comment-form" class="comment-form" method="post" action="<$mt:CGIPath$><$mt:CommentScript$>">
        <div>
            <input type="hidden" name="static" value="1" />
            <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
            <input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
            <input type="hidden" name="parent_id" value="" id="comment-parent-id" />
            <input type="hidden" id="armor" name="armor" value="1" />
        </div>
        <div id="greeting"></div>
        <div class="hide_on_auth">
            <label for="author">Name:</label>
            <input type="text" id="author" name="author">
        </div>
        <div class="hide_on_auth">
            <label for="url">URL:</label>
            <input type="text" id="url" name="url">
        </div>
        <div class="hide_on_auth">
            <label for="email">Email:</label>
            <input type="text" id="email" name="email">
        </div>
        <div>
            <label for="author">Comment:</label>
            <textarea id="text" name="text"></textarea>
        </div>
        <div>
            <input type="submit" name="post" value="Post"/>
            <input type="reset" value="Cancel"/>
        </div>
    </form>

Continue Reading

• Prev: Creating a Custom Login Form
• Next:
• Table of Contents: Building Websites with Melody, a Guide for Designers

 

Category: Guide

Tags: design guide, comments, jquery

Questions, comments, can't find something? Let us know at our community outpost on Get Satisfaction.

Credits

• Author: Mike Thomsen
• Edited by: Violet Bliss Dietz