FIX: Added reply to link for non JS to avoid multiple forms. If using AJAX a hidden form is used. Fallback for JavaScript turned off in browsers

code/controllers/CommentingController.php

@@ -629,7 +629,7 @@ class CommentingController extends Controller
         } elseif (!$comment->Moderated) {
             // Display the "awaiting moderation" text
             $holder = $this->getOption('comments_holder_id');
-            $hash = "{$holder}_PostCommentForm_error";
+            $hash = "moderated";
         } else {
             // Link to the moderated, non-spam comment
             $hash = $comment->Permalink();

code/extensions/CommentsExtension.php

@@ -480,6 +480,22 @@ class CommentsExtension extends DataExtension
             ->renderWith('CommentsInterface');
     }
 
+    /*
+    JavaScript form reply requires an empty form, when the reply button is
+    clicked the correct values are inserted, the form moved, and then shown
+     */
+    public function getReplyFormForJavaScript() {
+        // Build reply controller
+        $controller = CommentingController::create();
+        $controller->setOwnerRecord($this->owner);
+        $controller->setBaseClass($this->owner->ClassName);
+        $controller->setOwnerController(Controller::curr());
+        $comment = new Comment();
+        $comment->ID='JSOnly';
+        $comment->ParentID = $this->owner->ID;
+        return $controller->ReplyForm($comment);
+    }
+
     /**
      * Returns whether this extension instance is attached to a {@link SiteTree} object
      *

code/model/Comment.php

@@ -46,7 +46,7 @@ class Comment extends DataObject
     );
 
     private static $has_many = array(
-        "ChildComments"    => "Comment"
+        "ChildComments" => "Comment"
     );
 
     private static $default_sort = '"Created" DESC';
@@ -734,6 +734,17 @@ class Comment extends DataObject
         return $list;
     }
 
+    /**
+     * Ascertains whether or not to show the reply form
+     */
+    public function ShowReplyToForm() {
+        $controller = Controller::curr();
+        $request = $controller->getRequest();
+        $replyTo = $request->getVar('replyTo');
+        $result = $replyTo == $this->ID;
+        return $result;
+    }
+
     /**
      * Returns the list of replies, with spam and unmoderated items excluded, for use in the frontend
      *

javascript/CommentsInterface.js

@@ -57,44 +57,81 @@
 			}
 		});
 
-		/**
-		 * Comment reply form
-		 */
-		$( ".comment-replies-container .comment-reply-form-holder" ).entwine({
-			onmatch: function() {
-				// If and only if this is not the currently selected form, hide it on page load
-				var selectedHash = window.document.location.hash.substr(1),
-					form = $(this).children('.reply-form');
-				if( !selectedHash || selectedHash !== form.prop( 'id' ) ) {
-					this.hide();
-				}
-				this._super();
-			},
-			onunmatch: function() {
-				this._super();
-			}
-		});
-
 		/**
 		 * Toggle on/off reply form
 		 */
 		$( ".comment-reply-link" ).entwine({
 			onclick: function( e ) {
-				var allForms = $( ".comment-reply-form-holder" ),
+                // Prevent focus
-					formID = $( this ).prop('href').replace(/^[^#]*#/, '#'),
+                e.preventDefault();
-					form = $(formID).closest('.comment-reply-form-holder');
 
-				// Prevent focus
+                var jqTarget = $(e.target);
-				e.preventDefault();
+                var commentID = jqTarget.attr('data-comment-id');
-				if(form.is(':visible')) {
+                container = $('#replyFormJS');
-					allForms.slideUp();
+                var state = jqTarget.attr('data-state');
-				} else {
+
-					allForms.not(form).slideUp();
+                // Show possibly hidden reply form, alter state so that it works
-					form.slideDown();
+                // in context of relevant comment
-				}
+                if (state != 'replying') {
+                    cancelTheCancels();
+                    toggleButtonText(jqTarget);
+
+                    // hide the form if it's visible
+                    if(container.is(':visible')) {
+                        container.toggle();
+                    }
+
+                    var jqComment = $('#reply-form-container-' + commentID);
+                    var form = container.find('form');
+                    action = form.attr('action');
+                    form.attr('action', '/CommentingController/reply/' + commentID);
+                    var inputParemtCommentID = container.find("input[name='ParentCommentID']");
+                    var inputComment = container.find("input[name='Comment']");
+                    inputParemtCommentID.attr('value', commentID);
+                    inputComment.attr('value', '');
+                    container.detach().appendTo(jqComment);
+
+                    var allForms = $( ".comment-reply-form-holder" ),
+                        formID = $( this ).prop('href').replace(/^[^#]*#/, '#'),
+                        form = $(formID).closest('.comment-reply-form-holder');
+
+                    // Show the form
+                    container.toggle();
+
+                    $('html, body').animate({
+                        scrollTop: container.offset().top - 30
+                    }, 200);
+
+                } else {
+                    // Cancel reply, hide form, change button text
+                    toggleButtonText(jqTarget);
+                    container.slideUp();
+                }
 			}
 		});
 
+        /**
+         * Revert buttons in a state of replying to that of cancelled, changing
+         * text back to 'Reply to <person>'
+         */
+        function toggleButtonText(node) {
+            var state = node.attr('data-state');
+            if (state != 'replying') {
+                node.html(ss.i18n._t('CommentsInterface_singlecomment_ss.CANCEL_REPLY'));
+                node.attr('data-state', 'replying');
+            } else {
+                node.html(ss.i18n._t('CommentsInterface_singlecomment_ss.REPLY_TO'));
+                node.attr('data-state', 'cancelled');
+            }
+        }
+
+        function cancelTheCancels() {
+            var toFix = $("a[data-state='replying']");
+            toFix.each(function(index) {
+                var jqTarget = $(this);
+                toggleButtonText(jqTarget);
+            });
+        }
 
 		/**
 		 * Preview comment by fetching it from the server via ajax.
@@ -166,7 +203,7 @@
 					}
 					else if(link.hasClass('delete')) {
 						comment.fadeOut(1000, function() {
-                            comment.remove();
+							comment.remove();
 
 							if(commentsList.children().length === 0) {
 								noCommentsYet.show();
@@ -212,5 +249,3 @@
 		});*/
 	});
 })(jQuery);
-
-

javascript/lang/en.js

@@ -6,5 +6,7 @@ if (typeof(ss) == 'undefined' || typeof(ss.i18n) == 'undefined') {
     ss.i18n.addDictionary('en', {
         "CommentsInterface_singlecomment_ss.DELETE_CONFIRMATION": "Are you sure?",
         "CommentsInterface_singlecomment_ss.AJAX_ERROR": "An error occurred whilst updating the comment",
+        "CommentsInterface_singlecomment_ss.REPLY_TO" : "Reply to",
+        "CommentsInterface_singlecomment_ss.CANCEL_REPLY" : "Cancel Reply",
     });
 }

lang/en.yml

@@ -61,6 +61,8 @@ en:
     ISSPAM: 'spam it'
     PBY: 'Posted by'
     REMCOM: 'reject it'
+    REPLY_TO: 'Reply to'
+    CANCEL_REPLY: 'Cancel Reply'
   CommentsInterface_ss:
     AWAITINGMODERATION: 'Your comment has been submitted and is now awaiting moderation.'
     COMMENTLOGINERROR: 'You cannot post comments until you have logged in'

templates/CommentReplies.ss

@@ -1,10 +1,10 @@
 <% if $RepliesEnabled %>
 	<div class="comment-replies-container">
-		
 		<div class="comment-reply-form-holder">
-			$ReplyForm
+            <%-- non ajax, only show if replyTo is set --%>
+            <% if $ShowReplyToForm %>$ReplyForm<% end_if %>
 		</div>
-	
+
 		<div class="comment-replies-holder">
 			<% if $Replies %>
 				<ul class="comments-list level-{$Depth}">

templates/CommentsInterface.ss

@@ -25,7 +25,7 @@
 			<% if $PagedComments %>
 				<ul class="comments-list root-level">
 					<% loop $PagedComments %>
-						<li class="comment $EvenOdd<% if FirstLast %> $FirstLast <% end_if %> $SpamClass">
+                        <li class="comment $EvenOdd<% if FirstLast %> $FirstLast <% end_if %> $SpamClass">
 							<% include CommentsInterface_singlecomment %>
 						</li>
 					<% end_loop %>
@@ -51,3 +51,5 @@
 		</p>
 	</div>
 <% end_if %>
+<%-- include a hidden form for JS use when replying --%>
+<div id="replyFormJS" style="display:none;">$ReplyFormForJavaScript</div>

templates/CommentsInterface_singlecomment.ss

@@ -33,10 +33,12 @@
 				<% end_if %>
 			</div>
 			<% if $RepliesEnabled %>
-				<a class="comment-reply-link" href="#{$ReplyForm.FormName}">Reply to $AuthorName.XML</a>
+				<a data-comment-id="$ID" class="comment-reply-link" href="$Parent.Link?replyTo=$ID#Form_ReplyForm_$ID"><% _t('CommentsInterface_singlecomment_ss.REPLY_TO','Reply to') %>&nbsp;$AuthorName.XML</a>
 			<% end_if %>
 		</div>
 	<% end_if %>
 
+    <div class="comment-replies-container" id="reply-form-container-$ID"></div>
+
 	<% include CommentReplies %>
 <% end_if %>