Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Major changes that make this thing finally functional in all contexts…

…. Production ready.
  • Loading branch information...
commit a6e23a7422c3378ed9d2670e30aa3452fbbb7389 1 parent 8cde679
Byrne authored June 23, 2009
54  README.mdwn
Source Rendered
@@ -27,10 +27,10 @@ Add this code to the header of your web site.
27 27
     <script type="text/javascript" src="jquery.mtgreeting.js"></script>
28 28
     <script type="text/javascript" src="jquery.mtcomment.js"></script>
29 29
 
30  
-Note: you may need to adjust the paths to each of the scripts above
  30
+Note: You may need to adjust the paths to each of the scripts above
31 31
 depending upon where they are located on your web server.
32 32
 
33  
-Note: it may not be obvious, but this also assumes you also reference
  33
+Note: It may not be obvious, but this also assumes you also reference
34 34
 jQuery and other prerequisites. Like so:
35 35
 
36 36
     <script type="text/javascript" 
@@ -50,8 +50,24 @@ your web site and blog:
50 50
         <script type="text/javascript" src="jquery.mtauth.js"></script>
51 51
         <script type="text/javascript" src="jquery.mtgreeting.js"></script>
52 52
         <script type="text/javascript">
53  
-        $(document).ready(function() {
54  
-          $('.reply').reply();
  53
+        $(document).ready(function(){
  54
+          if ($('#comments-form')) {
  55
+	    /* First, let's boot strap the comment form on the page. 
  56
+             * In this one step, we take the default MT comment form and turn
  57
+             * into a fully AJAXified comment form. 
  58
+             */
  59
+            var form = $('#comments-form').commentForm({ 
  60
+              insertMethod: 'append',
  61
+              target: '.comments-content'
  62
+            });
  63
+	    /* Once the form is bootstrapped and we have a handle to it
  64
+             * we then pass that as a handle to the reply function which
  65
+             * provides the inline commenting ability.
  66
+             */
  67
+            $('.reply').reply({
  68
+              sourceForm: form
  69
+            });
  70
+          };
55 71
         });
56 72
         </script>
57 73
       </head>
@@ -65,26 +81,38 @@ your web site and blog:
65 81
       </body>
66 82
     </html>
67 83
 
68  
-# Usage
  84
+# Usage and API
69 85
 
70  
-## Configuration Options
  86
+## Methods
71 87
 
72  
-* `speed` (default: 'slow') - The speed at which animations occur.
  88
+### `commentForm`
73 89
 
74  
-* `entryId` (default: null) - The entry ID for which the comment is in reply. This should be embedded in the source comment form. But if it is not, then specify this to have mtcomment forcibly set the `entry_id` form parameter upon form submit.
  90
+* `speed` (default: 'slow') - The speed at which animations occur.
75 91
 
76  
-* `formSource` (default: '#comments-form') - The selector to the comment form source. This will serve as the template for the ajax comment form that will be automatically generated for you.
  92
+* `entryId` (default: null) - The entry ID for which the comment is in reply. This should be embedded in the source comment form as an input element with the name `entry_id`. But if it is not, then specify this to have mtcomment forcibly set the `entry_id` form parameter upon form submit.
77 93
 
78  
-* `formClass` (default: 'ajax-comments-form') - This class name of the form that will be created for you.
  94
+* `parentId` (default: 0) - The comment ID for which replies will be related. This is only relevant for inline/threaded comments.
79 95
 
80 96
 * `leaveCommentMsg` (default: 'Leave a comment...') - This is the text that will appear in the comment box by default. The text will disappear when the user clicks inside the text area to leave a comment.
81 97
 
82  
-## Events and Callbacks
  98
+* `insertMethod` (values: "append" (default) and "after") - Determines the method jQuery will use for inserting the newly added comment into an existing thread. See jQuery's documentation on Manipulation for more info.
  99
+
  100
+* `replySelector` (default: a.reply) - A selector relative to an individual comment's containing `<div>` that references the "reply" link which will open an inline comment form when clicked.
  101
+
  102
+* `onSuccess` (default: null) - This is invoked when a comment has been successfully posted. The value of this option should be a function that takes the following parameters as input: form DOM element, comment DOM element, parent ID. If this is left unspecified then the plugin will simply make the comment appear. The intent of this comment is to better control the animations that govern the reveal and hiding of inline form and comment elements.
  103
+
  104
+* `target` (default: '#comments-list') - The element or element selector to which new comments will be inserted according to the insertMethod specified.
  105
+
  106
+### `reply`
  107
+
  108
+* `speed` (default: 'slow') - The speed at which animations occur.
  109
+
  110
+* `formSource` (default: '#comments-form') - The selector to the comment form source. This will serve as the template for the ajax comment form that will be automatically generated for you.
83 111
 
84  
-TODO
  112
+* `target` (default: '#comments-list') - The element or element selector to which new comments will be inserted.
85 113
 
86 114
 # License and Copyright
87 115
 
88  
-Copyright 2009, Byrne Reese. All rights reserved.
  116
+Copyright 2009, Open Melody Software Group. All rights reserved.
89 117
 
90 118
 This plugin is licensed under the same terms as jQuery itself. 
18  jquery.mtcomment.css
... ...
@@ -1,9 +1,9 @@
1 1
 /* This is the CSS for the commenting jquery plugin */
2  
-
3  
-.comment #comments-form-inner #comments-open-footer { width: 90%; text-align: right; padding: 5px 5px 0 0; }
  2
+#comment-preview-comment { display: none; }
  3
+.comment #comments-form-inner #comments-open-footer { width: 100%; text-align: left; padding: 5px 5px 0 0; }
4 4
 .comment #comments-form-inner #comment-form-subscribe { display: none; }
5 5
 .comment #comments-form-inner #comments-open-text label { display: none; }
6  
-.comment #comments-form-inner #comment-text {
  6
+.comment #comments-form-inner .comment-text {
7 7
     width: 100%; 
8 8
     height: 40px; 
9 9
 }
@@ -11,9 +11,9 @@ a.reply.expanded {
11 11
     background-image: url(reply-comment-bg-top.gif);
12 12
     background-repeat: no-repeat;
13 13
     background-position: bottom center;
14  
-    padding-bottom: 10px;
  14
+    padding-bottom: 11px;
15 15
 }
16  
-.comment #comments-form-inner #comments-open-text {
  16
+.comment #comments-form-inner {
17 17
     padding: 10px;
18 18
     background-color: #eeeeea;
19 19
     margin-top: 7px;
@@ -22,8 +22,10 @@ a.reply.expanded {
22 22
     -webkit-border-radius: 5px;
23 23
 }
24 24
 
25  
-.comment #spinner,
26  
-.comment #spinner-status {
  25
+.comments-form { position: relative; }
  26
+
  27
+#comments .spinner,
  28
+#comments .spinner-status {
27 29
     display: none;
28 30
     position: absolute;
29 31
     top: 0;
@@ -32,7 +34,7 @@ a.reply.expanded {
32 34
     height: 100%;
33 35
     background: transparent url(spinner.gif) no-repeat center center;
34 36
 }
35  
-.comment #spinner {
  37
+#comments .spinner {
36 38
     filter:alpha(opacity=5);
37 39
     -moz-opacity:.5;
38 40
     opacity:.5;
154  jquery.mtcomment.js
... ...
@@ -1,11 +1,79 @@
1 1
 (function($){
  2
+  $.fn.ajaxSubmit.debug = true;
  3
+  $.fn.commentForm = function(options) {
  4
+    var defaults = {
  5
+      speed: 'slow',
  6
+      entryId: 0,
  7
+      parentId: 0,
  8
+      leaveCommentMsg: 'Leave a comment...',
  9
+      insertMethod: 'append',
  10
+      replySelector: 'a.reply',
  11
+      onSuccess: null,
  12
+      target: '#comments-list'
  13
+    };
  14
+    var settings = $.extend( {}, defaults, options);
  15
+    return this.each(function() {
  16
+        var f = $(this);
  17
+        var id = f.attr('id');
  18
+        var action = f.attr('action');
  19
+        var method = f.attr('method');
  20
+        var entry_id = $('[name=entry_id]').val();
  21
+        if (!entry_id) entry_id = settings.entryId;
  22
+        // TODO - bail if no entry_id specified?
  23
+        
  24
+        // initialize the overlay
  25
+        f.append('<div class="spinner"></div><div class="spinner-status"></div>');
  26
+        // clear focus event, and initialize the 'Leave a comment...' message
  27
+        f.find('textarea').unbind('focus').val(settings.leaveCommentMsg).focus( function() { $(this).val(''); } );
  28
+        // for now, let's kill the preview button
  29
+        // in the future this will only happen when live previews are activated
  30
+        f.find('input.comment-preview').hide();
  31
+        // clear any submit events, so we can make our own
  32
+        //f.unbind('submit');
  33
+        f.submit( function(e){
  34
+            var form = $(this);
  35
+            $(this).find('[name=ajax]').val('1');
  36
+            $(this).find('[name=entry_id]').val(entry_id);
  37
+            $(this).find('[name=preview]').val('0');
  38
+            $(this).find('[name=parent_id]').val(settings.parentId);
  39
+            $(this).find('[name=armor]').val(mt.blog.comments.armor);
  40
+            $(this).ajaxSubmit({
  41
+              contentType: 'application/x-www-form-urlencoded; charset=utf-8',
  42
+              iframe: false,
  43
+              type: 'post',
  44
+              dataType: null,
  45
+              clearForm: true,
  46
+              beforeSubmit: function(formData, jqForm, options) {
  47
+                var queryString = $.param(formData); // for debugging
  48
+                $('#'+id+' .spinner, #'+id+' .spinner-status').fadeIn('fast').css('height',f.height());
  49
+              },
  50
+              success: function(responseText, statusText) {
  51
+                  $('#'+id+' .spinner, #'+id+' .spinner-status').fadeOut();
  52
+                  var comment = $(responseText).hide();
  53
+                  var cid = comment.attr('id').substr(8);
  54
+                  var parent;
  55
+                  if (settings.parentId) {
  56
+                      parent = comment.wrap('<div style="margin-left:20px;" class="comment-replies"></div>').parent();
  57
+                  }
  58
+                  if (settings.insertMethod == 'append') $(settings.target).append(parent ? parent : comment);
  59
+                  if (settings.insertMethod == 'after') $(settings.target).after(parent ? parent : comment);
  60
+                  if (settings.onSuccess) settings.onSuccess(form,comment,0);
  61
+                  else { comment.fadeIn(); }
  62
+                  if (comment.find(settings.replySelector)) {
  63
+                      var opts = $.extend( {}, settings, { parentId: cid, target: comment });
  64
+                      comment.find(settings.replySelector).reply(opts);
  65
+                  }
  66
+                }
  67
+              });
  68
+            return false;
  69
+          });
  70
+      });
  71
+  };
2 72
   $.fn.reply = function(options) {
3 73
     var defaults = {
4 74
       speed: 'slow',
5  
-      entryId: null,
6  
-      formSource: '#comments-form',
7  
-      formClass: 'ajax-comments-form',
8  
-      leaveCommentMsg: 'Leave a comment...'
  75
+      sourceForm: $('#comments-form'),
  76
+      target: '#comments-list'
9 77
     };
10 78
     var self;
11 79
     var settings = $.extend( {}, defaults, options);
@@ -16,62 +84,40 @@
16 84
       var pid = pid_e.attr('id').substr(8);
17 85
       var pauthor_e = $(this).closest('.byline').find('.vcard.author');
18 86
       var pauthor = pauthor_e.html();
19  
-      var form = clicked[pid];
20  
-      if (!form) {
21  
-        clicked[pid] = initForm( replyLink, pid, pid_e );
  87
+      if (!clicked[pid]) {
  88
+        // initing the form:
  89
+        // 1. clone the source
  90
+        var newForm = settings.sourceForm.clone();
  91
+        // * making sure the IDs are unique for validity
  92
+        var newid = newForm.attr('id') + '-' + pid;
  93
+        newForm.hide().attr('id',newid);
  94
+        replyLink.after(newForm);
  95
+        // * running "commentForm on it"
  96
+        newForm.commentForm({
  97
+          parentId: pid,
  98
+          insertMethod: 'after',
  99
+          target: pid_e,
  100
+          // maybe the comment should be hidden prior to it being shown?
  101
+          onSuccess: function(f,c,pid) { 
  102
+              replyLink.removeClass('expanded').addClass('collapsed');
  103
+              f.slideUp('fast', function() { c.slideDown(settings.speed) } );
  104
+            }
  105
+        });
  106
+        clicked[pid] = newForm;
22 107
         $(this).addClass('expanded');
23 108
         clicked[pid].slideDown(settings.speed);
24  
-      } else if (form.hasClass('expanded')) {
25  
-        $(this).siblings('.'+settings.formClass).slideUp(settings.speed);
26  
-        $(this).removeClass('expanded');
27  
-        $(this).addClass('collapsed');
28  
-      } else if (form.hasClass('collapsed')) {
29  
-        $(this).siblings('.'+settings.formClass).slideDown(settings.speed);
30  
-        $(this).addClass('expanded');
31  
-        $(this).removeClass('collapsed');
  109
+      } else if (replyLink.hasClass('expanded')) {
  110
+        clicked[pid].slideUp(settings.speed);
  111
+        $(this).removeClass('expanded').addClass('collapsed');
  112
+      } else if (replyLink.hasClass('collapsed')) {
  113
+        clicked[pid].slideDown(settings.speed);
  114
+        $(this).addClass('expanded').removeClass('collapsed');
32 115
       } else {
33 116
         alert("Fatal error. A form was never initialized for this element.");
34 117
       }
35 118
     };
36 119
     return this.each(function() {
37  
-        obj = $(this);
38  
-        self = obj;
39  
-        self.click( onReplyClick );
40  
-      });
41  
-    function initForm( target, parent, parent_elem ) {
42  
-      var form_html = $(settings.formSource).html();
43  
-      var f = target.after('<form class="'+settings.formClass+'">'+form_html+'</form>').siblings('.'+settings.formClass);
44  
-      f.css({ 'display':'none', 'position':'relative','margin':'0','padding':'0' });
45  
-      f.append('<div id="spinner"></div><div id="spinner-status"></div>');
46  
-      f.find('textarea').unbind('focus').val(settings.leaveCommentMsg).focus( function() { $(this).val(''); });
47  
-      f.find('input#comment-preview').replaceWith('');
48  
-      f.unbind('submit');
49  
-      f.submit( function(e){
50  
-          // TODO - use classes, not IDs
51  
-          // TODO - add config variables
52  
-          $(this).find('#ajax').val('1');
53  
-          $(this).find('#parent_id').val(parent);
54  
-          $(this).find('#armor').val(mt.blog.comments.armor);
55  
-          // TODO - fix! this is not submitting any more
56  
-          $(this).ajaxSubmit({
57  
-              contentType: 'application/x-www-form-urlencoded; charset=utf-8',
58  
-              url: mt.blog.comments.script,
59  
-              type: 'post',
60  
-              clearForm: true,
61  
-              beforeSubmit: function(formData, jqForm, options) {
62  
-                var queryString = $.param(formData); 
63  
-                $('#spinner, #spinner-status').fadeIn('fast').css('height',f.height());
64  
-              },
65  
-              success: function(responseText, statusText) {
66  
-                $('#spinner, #spinner-status').fadeOut( function() { f.hide(); target.removeClass('expanded'); });
67  
-                var comment = parent_elem.after(responseText).siblings('.comment');
68  
-                comment.fadeIn('slow');
69  
-                comment.find('a.reply').click( onReplyClick );
70  
-              }
71  
-            });
72  
-          return false;
73  
-        });
74  
-      return f;
75  
-    };
  120
+        $(this).click( onReplyClick );
  121
+    });
76 122
   };
77 123
 })(jQuery);

0 notes on commit a6e23a7

Please sign in to comment.
Something went wrong with that request. Please try again.