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.

Browse Source 
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', '');"
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>

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

@ -1,26 +1,28 @@
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){
var comment_div = jq(this).parents().filter(".comment");
var comment_id = comment_div.attr("id");
var reply_button = comment_div.find(".reply-to-comment-button");
/* 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 reply_div = jq("#commenting").clone(true);
reply_div.appendTo(comment_div).css("display", "none");
/* Remove id="reply" attribute, since we use it to uniquely
the main reply form. */
@ -29,22 +31,22 @@ function createReplyToCommentForm(comment_id) {
/* 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");
jq(reply_button).css("display", "none");
/* Fetch the reply form inside the reply div */
reply_form = reply_div.find("form");
var reply_form = reply_div.find("form");
/* 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\"");
/* Change the form action to @@reply-to-comment */
old_action = reply_form.attr("action");
new_action = old_action.replace("@@add-comment", "@@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);
/* 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 +");")
var cancel_reply_button = reply_div.find(".cancelreplytocomment");
cancel_reply_button.attr("id", comment_id);
/* Remove already typed in text from the reply form. */
reply_form.find(".field").find("input").attr("value", "")
@ -54,18 +56,25 @@ function createReplyToCommentForm(comment_id) {
reply_div.slideDown("slow");
/* Show the cancel button in the reply-to-comment form */
cancel_reply_button.css("display", "inline")
}
cancel_reply_button.css("display", "inline");
function removeReplyToCommentForm(comment_id) {
/*
* This function removes the reply-to-comment form of a specific comment.
*/
});
/* Show the reply-to-comment button again. */
jq("#reply-to-comment-" + comment_id + "-button").css("display", "block");
/*****************************************************************
* 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("#comment-" + comment_id).find(".reply")
reply_to_comment_form.remove(reply_to_comment_form.slideUp("slow"))
}
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");
});
});