ajung/plone.app.discussion
ajung
/
plone.app.discussion
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Timo Stollenwerk 2009-06-20 16:00:36 +00:00
parent 23d4b25218
commit e9f24cfa74
2 changed files with 71 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
plone/app/discussion/browser/comments.pt
View File

@ -34,7 +34,7 @@
anonymous_creator python:creator in ('Anonymous User', '');" anonymous_creator python:creator in ('Anonymous User', '');"
tal:attributes="class python:'comment replyTreeLevel'+str(depth); tal:attributes="class python:'comment replyTreeLevel'+str(depth);
style string:margin-left: ${depth}em; style string:margin-left: ${depth}em;
id string:comment-${reply/id}"> id string:${reply/id}">
<div class="commentImage" tal:condition="showCommenterImage"> <div class="commentImage" tal:condition="showCommenterImage">
@ -85,6 +85,13 @@
This is the body text of the comment. This is the body text of the comment.
</div> </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" <form name="delete"
action="" action=""
method="post" method="post"
@ -113,14 +120,6 @@
/> />
</form> </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> </div>
</tal:getreplies> </tal:getreplies>

117
plone/app/discussion/browser/javascripts/reply_to_comment_form.js
View File

@ -1,71 +1,80 @@
jq(document).ready(function() { 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. * 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 var comment_div = jq(this).parents().filter(".comment");
* the regular comment form and insert it after the reply button of the var comment_id = comment_div.attr("id");
* current comment.
*/
reply_div = jq("#commenting").clone(true);
reply_div.insertAfter(button).css("display", "none")
/* Remove id="reply" attribute, since we use it to uniquely var reply_button = comment_div.find(".reply-to-comment-button");
the main reply form. */
reply_div.removeAttr("id")
/* Hide the reply button (only hide, because we may want to show it /* Clone the reply div at the end of the page template that contains
* again if the user hits the cancel button). * the regular comment form and insert it after the reply button of the
*/ * current comment.
jq(button).css("display", "none"); */
var reply_div = jq("#commenting").clone(true);
reply_div.appendTo(comment_div).css("display", "none");
/* Fetch the reply form inside the reply div */ /* Remove id="reply" attribute, since we use it to uniquely
reply_form = reply_div.find("form"); the main reply form. */
reply_div.removeAttr("id")
/* Add a hidden field with the id of the comment */ /* Hide the reply button (only hide, because we may want to show it
reply_form.append("<input type=\"hidden\" value=\"" + comment_id + "\" name=\"form.reply_to_comment_id\""); * again if the user hits the cancel button).
*/
jq(reply_button).css("display", "none");
/* Change the form action to @@reply-to-comment */ /* Fetch the reply form inside the reply div */
old_action = reply_form.attr("action"); var reply_form = reply_div.find("form");
new_action = old_action.replace("@@add-comment", "@@reply-to-comment");
reply_form.attr("action", new_action);
/* Add a remove-reply-to-comment Javascript function to remove the form */ /* Add a hidden field with the id of the comment */
cancel_reply_button = reply_div.find(".cancelreplytocomment"); reply_form.append("<input type=\"hidden\" value=\"" + comment_id + "\" name=\"form.reply_to_comment_id\"");
cancel_reply_button.attr("onclick", "removeReplyToCommentForm(" + comment_id +");")
/* Remove already typed in text from the reply form. */ /* Change the form action to @@reply-to-comment */
reply_form.find(".field").find("input").attr("value", "") var old_action = reply_form.attr("action");
reply_form.find(".field").find("textarea").attr("value", "") 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 */ /* Add a remove-reply-to-comment Javascript function to remove the form */
reply_div.slideDown("slow"); 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 */ /* Remove already typed in text from the reply form. */
cancel_reply_button.css("display", "inline") reply_form.find(".field").find("input").attr("value", "")
} reply_form.find(".field").find("textarea").attr("value", "")
function removeReplyToCommentForm(comment_id) { /* Show the reply layer with a slide down effect */
/* reply_div.slideDown("slow");
* This function removes the reply-to-comment form of a specific comment.
*/
/* Show the reply-to-comment button again. */ /* Show the cancel button in the reply-to-comment form */
jq("#reply-to-comment-" + comment_id + "-button").css("display", "block"); 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");
});
});