Xomment

Xomment is a Movable Type plugin that uses web 2.0 technology to improve the comment experience. When fully installed, it does four things through the magic of jQuery and Movable Type:

  1. Organizes comments into panels. It’s like pagination, only better.
  2. Submits comments via Ajax
  3. Previews comments via Ajax
  4. Quotes comments via Ajax.

Download

Xomment 2.02 Changes:

  1. use jQuery 1.3 and jQuery UI 1.7 from Google
  2. use “Smoothness” style by default
  3. Note: You will need to update the “Comment Response” template as well.

Xomment 2.01 Changes:

  1. Bugfix: Xomment now works with authenticated users; thanks, Michael, for the workaround.
--- 2.0/plugins/Xomment/tmpl/xomment_js.tmpl	2008-11-21 19:17:44.000000000 -0500
+++ 2.01/plugins/Xomment/tmpl/xomment_js.tmpl	2008-11-21 19:29:41.000000000 -0500
@@ -235,6 +235,11 @@
   if(comment_count == 0)
     $('#comment-panels').add('#comment-panels-dummy').hide();
     
+  // Stop MT from firing errant submit() if people are logged in
+  var $mtForm = $('#comments-form').get(0);
+  if ($mtForm)
+    $mtForm.submit = function() { return false; }
+ 
   $('#comments-form').ajaxForm({
     beforeSubmit: function(data, obj, opt) {
       obj.addClass('submitted');

Xomment 2.00 Changes:

  1. Upgraded: jquery.forms and jquery.ui
  2. Change: New directory structure
  3. Feature: Templates now stored in separate files
  4. Feature: Support for loading comments on a blog level
  5. Change: More flexibility on fetching comments

Xomment 1.7 Changes:

  1. Change: New directory layout for mt-static
  2. Feature: Compatibility with MTOS 4.2
  3. Feature: jQuery 1.4.6, jQuery UI 1.5b4, jQuery Form Plugin 2.11
  4. Feature: Hide panels if there are no comments
  5. Feature: Add “submitted” class that is active during form submission. (But this may be irrelevant with 4.2’s new submission logic.)
  6. Feature: #comment-last now works on clicked links.
  7. Feature: onLoadComments meta-handler for modifying html.
  8. Bug Fix: Handling of submission error messages
  9. Bug Fix: displaying multiple lines of tabs.
  10. Bug Fix: proper handling of cookies.
  11. Bug Fix: text size of comments.

Don’t forget to refresh you templates (and save any customizations) when you upgrade. Note that this version has only been fully tested with Firefox 2.0.

Demo

My main blogs will soon be converted to use Xomment, but until then, you can play with this test entry.

Plugin Installation

First, extract the archive. If you do this directly into your Movable Type home directory the files will be put into their proper places automatically. However, if you prefer, you can install them manually in the following locations:


mt-static/plugins/Xomment/i/tabs-b.png
mt-static/plugins/Xomment/i/tabs.png
mt-static/plugins/Xomment/jquery.form.js
mt-static/plugins/Xomment/jquery.form.min.js
mt-static/plugins/Xomment/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png
mt-static/plugins/Xomment/smoothness/images/ui-bg_flat_75_ffffff_40x100.png
mt-static/plugins/Xomment/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png
mt-static/plugins/Xomment/smoothness/images/ui-bg_glass_65_ffffff_1x400.png
mt-static/plugins/Xomment/smoothness/images/ui-bg_glass_75_dadada_1x400.png
mt-static/plugins/Xomment/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png
mt-static/plugins/Xomment/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png
mt-static/plugins/Xomment/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png
mt-static/plugins/Xomment/smoothness/images/ui-icons_222222_256x240.png
mt-static/plugins/Xomment/smoothness/images/ui-icons_2e83ff_256x240.png
mt-static/plugins/Xomment/smoothness/images/ui-icons_454545_256x240.png
mt-static/plugins/Xomment/smoothness/images/ui-icons_888888_256x240.png
mt-static/plugins/Xomment/smoothness/images/ui-icons_cd0a0a_256x240.png
mt-static/plugins/Xomment/smoothness/jquery-ui-1.7.css
mt-static/plugins/Xomment/smoothness/jquery-ui-1.7.min.css
mt-static/plugins/Xomment/xomment.css
plugins/Xomment/config.yaml
plugins/Xomment/lib/Xomment.pm
plugins/Xomment/readme.txt
plugins/Xomment/tmpl/xomment_head.tmpl
plugins/Xomment/tmpl/xomment_js.tmpl
plugins/Xomment/tmpl/xomment_panel.tmpl
plugins/Xomment/tmpl/xomment_panels.tmpl
plugins/Xomment/tmpl/xomment_quote.tmpl
plugins/Xomment/tmpl/xomment_response.tmpl

Note: If you are running MT under FastCGI, you will need to restart your webserver or dispatcher before Movable Type will recognize the new plugin.

Next you will need to make several changes to your templates to add Xomment functionality. The following instructions are based on the simple templates included with MTOS 4.2. You may need to adapt them to your specific setup.

Template Installation

From your blog’s dashboard menu, go to Design » Templates and click the action link in the sidebar to install/refresh Xomment templates.

xomment-cap.png

Note to Upgraders: If you have previously installed Xomment templates, the refresh will overwrite any customizations you have made to the code.

Enabling Xomment

First go to Preferences » Comment and check “Use Comment Confirmation Page” and save.

To enable Xomments functionality, edit your “HTML Head” template module to add the following code:

<mt:If name="feedback_template"><mt:IfCommentsActive>
    <mt:SetVar name="do_xomment_head" value="1"/>
</mt:IfCommentsActive></mt:If>
<mt:If name="do_xomment_head">
  <mt:Include module="Xomment Head" />
  <mt:SetVar name="panel_size" value="10"/>
  <mt:SetVar name="panel_static_list" value="1,-1"/>
<mt:Ignore>
<!-- Remove the ignore tags if you use jQuery elsewhere in your site. -->
<mt:Else>
  <link rel="stylesheet" href="<$mt:StaticWebPath$>plugins/Xomment/smoothness/jquery-ui-1.7.min.css" type="text/css" media="screen" title="Smoothness" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
</mt:Ignore>
</mt:If>

This will include the Xomment javascript and styles for both your individual entry archives and your page archives where comments are displayed and if they are in fact displayed.

Now if you do not have a Comment Detail template module, create it and move the comment detail text from the Comments module to it. The detail text is the entire <div id="comment-<$MTCommentID$>"...>...</div> block.

If you are using MTOS 4.2, you can replace mt:CommentReplyLink with mt:XommentReplyLink, which will also quote the comment and move the user to the comment text box.

         <div id="comment-<$MTCommentID$>" class="comment<mt:IfCommentParent> comment-reply</mt:IfCommentParent>">
            <div class="inner">
                <div class="comment-header">
                    <div class="asset-meta">
                        <span class="byline">
                            <$MTCommentAuthorIdentity$>
        <mt:IfCommentParent>
                            <span class="vcard author"><$MTCommentAuthorLink$></span> replied to <a href="<mt:CommentParent><$mt:CommentLink$></mt:CommentParent>">comment from <mt:CommentParent><$MTCommentAuthor$></mt:CommentParent></a>
        <mt:else>
                            <span class="vcard author"><$MTCommentAuthorLink$></span>
        </mt:IfCommentParent>
                            | <a href="<$mt:CommentLink$>"><abbr class="published" title="<$MTCommentDate format_name="iso8601"$>"><$MTCommentDate$></abbr></a>
        <MTIfCommentsAccepted>
                            | <$MTXommentReplyLink$>
        </MTIfCommentsAccepted>
                        </span>
                    </div>
                </div>
                <div class="comment-content">
                    <$MTCommentBody$>
                </div>
            </div>
        </div>

Back in the Comments template module, replace the code that displays comments with <mt:Include module="Xomment Panels"/>. In MT 4.2, the display code is everything between

<mt:ignore>
<!-- Display comments -->
</mt:ignore>

and

<mt:ignore>
<!-- Display commenting form if entry/page is accepting comments -->
</mt:ignore>
<mt:ignore>
<!-- Display comments for the entry/page or commenting form if entry/page is accepting comments -->
</mt:ignore>
<MTIfCommentsActive>
<div id="comments" class="comments">


    <mt:ignore>
    <!-- Display comments -->
    </mt:ignore>

    <mt:Include module="Xomment Panels"/>

    <mt:ignore>
    <!-- Display commenting form if entry/page is accepting comments -->
    </mt:ignore>
    <MTIfCommentsAccepted>
    <div class="comments-open" id="comments-open">
        <h2 class="comments-open-header">Leave a comment</h2>
        <div class="comments-open-content">

        <mt:ignore>
        <!-- Display greeting for users if blog allows users to register locally -->
        </mt:ignore>
            <div id="comment-greeting"></div>

            <form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
                <input type="hidden" name="static" value="1" />
                <input type="hidden" name="entry_id" value="<$MTEntryID$>" />
                <input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />
                <input type="hidden" name="parent_id" value="<$MTCommentParentID$>" id="comment-parent-id" />
                <input type="hidden" name="armor" value="1" />
                <input type="hidden" name="preview" value="" />
                <input type="hidden" name="sid" value="" />
                <div id="comments-open-data">
                    <div id="comment-form-name">
                        <label for="comment-author">Name</label>
                        <input id="comment-author" name="author" size="30" value="" onfocus="mtCommentFormOnFocus()" />
                    </div>
                    <div id="comment-form-email">
                        <label for="comment-email">Email Address</label>
                        <input id="comment-email" name="email" size="30" value="" onfocus="mtCommentFormOnFocus()" />
                    </div>
                    <div id="comment-form-url">
                        <label for="comment-url">URL</label>
                        <input id="comment-url" name="url" size="30" value="" onfocus="mtCommentFormOnFocus()" />
                    </div>
                    <div id="comment-form-remember-me">
                        <input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" value="1" accesskey="r" />
                        <label for="comment-bake-cookie">Remember personal info?</label>
                    </div>
                </div>
                <div id="comment-form-reply" style="display:none">
                    <input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
                    <label for="comment-reply" id="comment-reply-label"></label>
                </div>
                <div id="comments-open-text">
                    <label for="comment-text">Comments
                    <MTIfAllowCommentHTML>(You may use HTML tags for style)</MTIfAllowCommentHTML></label>
                    <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
                </div>
                <div id="comments-open-captcha"></div>
                <div id="comments-open-footer">
                    <input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="Preview" onclick="this.form.preview.value='1';" />
                    <input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />
                </div>
            </form>


        </div>
    </div>
    </MTIfCommentsAccepted>


</div>
</MTIfCommentsActive>

And finally replace the Comment Preview system template with

<div class="comment-preview">
<mt:Include module="Comment Detail"/>
</div>

and the Comment Response system template with

<mt:If name="comment_confirmation">
 <div class="comment-success">
  <mt:XommentPanels new_comments="1">
    <mt:XommentPanelComments>
      <$mt:Include module="Comment Detail"$>
    </mt:XommentPanelComments>
  </mt:XommentPanels>
  </div>
<mt:Else name="comment_pending">
  <div class="comment-pending ui-widget"><div class="ui-state-highlight ui-corner-all"><p>
    <span class="ui-icon ui-icon-info"></span>
    Your comment has been received and held for approval by the blog owner.
  </p></div></div>
<mt:Else name="comment_error">
  <div class="comment-error ui-widget"><div class="ui-state-error ui-corner-all"><p>
    <span class="ui-icon ui-icon-alert"></span>
    <strong>Your comment submission failed for the following reasons:</strong><br />
    <$MT:ErrorMessage$>
  </p></div></div>
</mt:If>

That’s it; you are done. Now rebuild your site to use Xomment in its full glory.

Configuration

Template Variables

panel_size—The number of comments to display per panel.

panel_static_list—A list of the panels to include statically in the generated webpage. Panels not listed will be downloaded on demand from your webserver. If value is “*”, all panels will be included statically. Positive numbers count from the front, and negative numbers count from the end, e.g. “1,-1” embeds the first and last panels. Ranges are also supported; “1-3,-4--2” embeds the first, second, third, forth to last, third to last, and second to last.

Template Tags

XommentPanels

XommentPanelsHeader

XommentPanelsFooter

XommentPanelComments

XommentReplyLink

CGI Methods

mt-comments.cgi?__mode=xomment

Bug Reporting

It’s coming.…

FAQ

Q. Xomment is too slow.—Try running it under FastCGI.

Q. How can I customize the Xomment?—Just edit the templates. See jQuery, jQuery UI Tabs, and jQuery Forms for documentation.

Q. How can I style new/updated comments?—When Xomment adds updates the comments list, it add the class “new” to all comments, so the css rule div.comment.new can be used to style newly added comments.

Q. How can I get Xomment to remember the last panel that I was on?—Xomment creates a cookie to remember the last comment that was accessed by the user either through a page load or a call to the update function. If no specific comment is asked for, it will automatically load the panel associated with this comment. However, if the special ‘#comment-last’ is present on page load, Xomment will load the required panel and jump to the last comment accessed. The ‘xomment.last_comment’ cookie expires after a week.

Q. How can I get Xomment to live update the comments?—Use a timer function to call panelUpdate(). When someone creates some working code, I’ll post it.

Q. How do I change the appearance of the tabs?—The tabs appearance is controlled by a jQuery UI style, Smoothness, which is loaded in Xomment Head and/or HTML Head templates. Replacing it with another style will modify the appearance of Xomment.

Q. How do I customize Xomment’s error, success, pending, etc. messages?—Use the following CSS selectors.

div.comment-error {
}
div.comment-success {
}
div.comment-pending {
}
div.comment-preview {
}

Q. How do I get Xomment 1.7 to work with MT 4.1?—MTOS’s javascript changed considerably between 4.1 and 4.2. You will need to make changes to the Xomment Javascript to get it to work with 4.1’s javascript. First add the following wrapper functions at the beginning.

function mtHide(id) { return hideDocumentElement(id); }
function mtShow(id) { return showDocumentElement(id); }
function mtEntryOnLoad() { return individualArchivesOnLoad(); }
function mtReplyCommentOnClick(x,y) { return; }
function mtGetCookie(name) { return getCookie(name);}
function mtSetCookie(name, value, expires, path, domain, secure)  { return setCookie(name, value, expires, path, domain, secure);}
function mtFixDate(name) { return fixDate(name);}

Next replace the definition of function xommentFormOkay() with

function xommentFormOkay() {
      var $form = $('#comments-form');
      $form.removeClass('submitted');  
}

And finally remove both instances of these two lines.

        mtHide('comment-form-reply');
        $('#comment-reply')[0].checked = false;

Edit the “Xomment Panels” template. Remove the line

<h2 class="comments-header"><mt:EntryCommentCount singular="<span id="comments-count">1</span> Comment" plural="<span id="comments-count">#</span> Comments" none="<span id="comments-count">No</span> Comments"/></h2>

and replace it with

<h2 class="comments-header"><span id="comments-count"><mt:EntryCommentCount/></span> Comments</h2>

You will also need to use the following for you Comment Response Template.

<mt:If name="body_class" eq="mt-comment-confirmation">
  <mt:XommentPanelComments after="param">
    <mt:Include module="Comment Detail"/>
  </mt:XommentPanelComments>
<mt:Else name="body_class" eq="mt-comment-pending">
  <div class="comment-pending"><p>
    Your comment has been received and held for approval by the blog owner.
  </p></div>
<mt:Else name="body_class" eq="mt-comment-error">
  <div class="comment-error"><p>
    Your comment submission failed for the following reasons: <MT:ErrorMessage/>
  </p></div>
</mt:If>

Previous Versions

Xomment 1.6—Initial Wide Release

Xomment 1.5

Xomment 1.4

Xomment 1.3

Xomment 1.2

Xomment 1.1

Xomment 1.0

Acknowledgments

Jay Allen helped with a lot of the documentation and template organization.

About this Archive

Find recent content on the main index or look in the archives to find all content.

Archives

Powered by Movable Type 4.37