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
parent
23d4b25218
commit
e9f24cfa74
@ -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>
|
||||
|
||||
@ -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");
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user