From e9f24cfa74a61c79984290def482d59010c5cc0e Mon Sep 17 00:00:00 2001
From: Timo Stollenwerk <timo@zmag.de>
Date: Sat, 20 Jun 2009 16:00:36 +0000
Subject: [PATCH] Complete rewrite of the show/hide reply-to-comment forms.
 Switch from Javascript event handlers to jQuery event binding. Replace
 reply-to-comment image with a standard reply button. Fix IE7 show
 reply-to-comment form is not working.

svn path=/plone.app.discussion/trunk/; revision=27533
---
 plone/app/discussion/browser/comments.pt      |  17 ++-
 .../javascripts/reply_to_comment_form.js      | 117 ++++++++++--------
 2 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/plone/app/discussion/browser/comments.pt b/plone/app/discussion/browser/comments.pt
index a04ee14..3938f3e 100644
--- a/plone/app/discussion/browser/comments.pt
+++ b/plone/app/discussion/browser/comments.pt
@@ -34,7 +34,7 @@
                              anonymous_creator python:creator in ('Anonymous User', '');"
                  tal:attributes="class python:'comment replyTreeLevel'+str(depth);
                                  style string:margin-left: ${depth}em;
-                                 id string:comment-${reply/id}">
+                                 id string:${reply/id}">
 
                 <div class="commentImage" tal:condition="showCommenterImage">
 
@@ -85,6 +85,13 @@
                      This is the body text of the comment.
                 </div>
 
+                <button style="display: inline;"
+                        class="context reply-to-comment-button"
+                        tal:condition="python:userHasReplyPermission and isDiscussionAllowed or isAnonymousDiscussionAllowed"
+                        i18n:translate="label_reply;">
+                    Reply
+                </button>
+
                 <form name="delete"
                       action=""
                       method="post"
@@ -113,14 +120,6 @@
                            />
                 </form>
 
-                <a href="#" class="reply-to-comment-button" title="reply to this comment"
-                   tal:condition="python:userHasReplyPermission and isDiscussionAllowed or isAnonymousDiscussionAllowed"
-                   tal:attributes="onclick string:createReplyToCommentForm(${reply/id});
-                                   id string:reply-to-comment-${reply/id}-button;
-                                   href string:#comment-${reply/id}">
-                    <img src="++resource++plone.app.discussion.images/reply.gif" />
-                </a>
-
             </div>
 
         </tal:getreplies>
diff --git a/plone/app/discussion/browser/javascripts/reply_to_comment_form.js b/plone/app/discussion/browser/javascripts/reply_to_comment_form.js
index c4a0ca2..273c12d 100644
--- a/plone/app/discussion/browser/javascripts/reply_to_comment_form.js
+++ b/plone/app/discussion/browser/javascripts/reply_to_comment_form.js
@@ -1,71 +1,80 @@
 jq(document).ready(function() {
-    /* Show the reply-to-comment button only when Javascript is enabled.
+
+    /*****************************************************************
+     * Show the reply button only when Javascript is enabled.
      * Otherwise hide it, since the reply functions relies on jQuery.
-     */
-    jq(".reply-to-comment-button").css("display" , "block");
- });
+     *****************************************************************/
+    jq(".reply-to-comment-button").css("display" , "inline");
 
-function createReplyToCommentForm(comment_id) {
-    /*
-     * This function creates a form to reply to a specific comment with
-     * the comment_id given as parameter. It does so by cloneing the existing
-     * commenting form at the end of the page template.
-     */
 
-    /* The jQuery id of the reply-to-comment button */
-    var button = "#reply-to-comment-" + comment_id + "-button";
+    /*****************************************************************
+	 * Create reply to comment form.
+     *****************************************************************/
+	jq(".reply-to-comment-button").bind("click", function(e){
 
-	/* Clone the reply div at the end of the page template that contains
-	 * the regular comment form and insert it after the reply button of the
-	 * current comment.
-	 */
-    reply_div = jq("#commenting").clone(true);
-	reply_div.insertAfter(button).css("display", "none")
+		var comment_div = jq(this).parents().filter(".comment");
+		var comment_id = comment_div.attr("id");
 
-    /* Remove id="reply" attribute, since we use it to uniquely
-       the main reply form. */
-    reply_div.removeAttr("id")
+		var reply_button = comment_div.find(".reply-to-comment-button");
 
-    /* Hide the reply button (only hide, because we may want to show it
-     * again if the user hits the cancel button).
-     */
-    jq(button).css("display", "none");
+	    /* Clone the reply div at the end of the page template that contains
+	     * the regular comment form and insert it after the reply button of the
+	     * current comment.
+	     */
+	    var reply_div = jq("#commenting").clone(true);
+	    reply_div.appendTo(comment_div).css("display", "none");
 
-    /* Fetch the reply form inside the reply div */
-	reply_form = reply_div.find("form");
+	    /* Remove id="reply" attribute, since we use it to uniquely
+	       the main reply form. */
+	    reply_div.removeAttr("id")
 
-    /* Add a hidden field with the id of the comment */
-    reply_form.append("<input type=\"hidden\" value=\"" + comment_id + "\" name=\"form.reply_to_comment_id\"");
+	    /* Hide the reply button (only hide, because we may want to show it
+	     * again if the user hits the cancel button).
+	     */
+	    jq(reply_button).css("display", "none");
 
-    /* Change the form action to @@reply-to-comment */
-	old_action = reply_form.attr("action");
-	new_action = old_action.replace("@@add-comment",  "@@reply-to-comment");
-	reply_form.attr("action", new_action);
+	    /* Fetch the reply form inside the reply div */
+	    var reply_form = reply_div.find("form");
 
-    /* Add a remove-reply-to-comment Javascript function to remove the form */
-	cancel_reply_button = reply_div.find(".cancelreplytocomment");
-	cancel_reply_button.attr("onclick", "removeReplyToCommentForm(" + comment_id  +");")
+	    /* Add a hidden field with the id of the comment */
+	    reply_form.append("<input type=\"hidden\" value=\"" + comment_id + "\" name=\"form.reply_to_comment_id\"");
 
-    /* Remove already typed in text from the reply form. */
-	reply_form.find(".field").find("input").attr("value", "")
-	reply_form.find(".field").find("textarea").attr("value", "")
+	    /* Change the form action to @@reply-to-comment */
+	    var old_action = reply_form.attr("action");
+	    var new_action = old_action.replace("@@add-comment",  "@@reply-to-comment");
+	    reply_form.attr("action", new_action);
 
-    /* Show the reply layer with a slide down effect */
-    reply_div.slideDown("slow");
+	    /* Add a remove-reply-to-comment Javascript function to remove the form */
+	    var cancel_reply_button = reply_div.find(".cancelreplytocomment");
+	    cancel_reply_button.attr("id", comment_id);
 
-    /* Show the cancel button in the reply-to-comment form */
-	cancel_reply_button.css("display", "inline")
-}
+	    /* Remove already typed in text from the reply form. */
+	    reply_form.find(".field").find("input").attr("value", "")
+	    reply_form.find(".field").find("textarea").attr("value", "")
 
-function removeReplyToCommentForm(comment_id) {
-    /*
-     * This function removes the reply-to-comment form of a specific comment.
-     */
+	    /* Show the reply layer with a slide down effect */
+	    reply_div.slideDown("slow");
 
-    /* Show the reply-to-comment button again. */
-    jq("#reply-to-comment-" + comment_id + "-button").css("display", "block");
+	    /* Show the cancel button in the reply-to-comment form */
+	    cancel_reply_button.css("display", "inline");
 
-	/* Find the reply-to-comment form and hide and remove it again. */
-	reply_to_comment_form = jq("#comment-" + comment_id).find(".reply")
-	reply_to_comment_form.remove(reply_to_comment_form.slideUp("slow"))
-}
+    });
+
+
+    /*****************************************************************
+     * Remove reply to comment form.
+     *****************************************************************/
+    jq(".cancelreplytocomment").bind("click", function(e){
+
+        reply_to_comment_button = jq(this).parents().filter(".comment").find(".reply-to-comment-button");
+
+        /* Find the reply-to-comment form and hide and remove it again. */
+        reply_to_comment_form = jq(this).parents().filter(".reply")
+        reply_to_comment_form.slideUp("slow", function() { jq(this).remove(); } );
+
+        /* Show the reply-to-comment button again. */
+        reply_to_comment_button.css("display", "inline");
+
+    });
+
+ });
\ No newline at end of file