From f539a97d071bc3a348d7f97b6af5518268994228 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Tue, 7 Dec 2010 14:09:52 +1300 Subject: [PATCH] ENHANCEMENT: started to incorporate the jQuery version of comments --- javascript/CommentsInterface.js | 344 ++++++------------- templates/CommentsInterface.ss | 8 +- templates/CommentsInterface_singlecomment.ss | 10 +- 3 files changed, 123 insertions(+), 239 deletions(-) diff --git a/javascript/CommentsInterface.js b/javascript/CommentsInterface.js index 84248ef..fe1561b 100755 --- a/javascript/CommentsInterface.js +++ b/javascript/CommentsInterface.js @@ -1,246 +1,130 @@ /** - * Ajax to support the comment posting system + * @package userforms */ -PageCommentInterface = Class.create(); - -PageCommentInterface.prototype = { - initialize: function() { - Behaviour.register({ - '#PageCommentInterface_Form_PostCommentForm_action_postcomment' : { - onclick : this.postComment - }, - - '#PageComments a.deletelink' : { - onclick : this.deleteComment - }, - '#PageComments a.spamlink' : { - onclick : this.reportSpam - }, - '#PageComments a.hamlink' : { - onclick : this.reportHam - }, - '#PageComments a.approvelink' : { - onclick : this.approveComment - } - }); - }, - - loadSpamQuestion: function(response) { - var spamQuestionDiv = $('Math'); - var mathLabel = spamQuestionDiv.getElementsByTagName('label')[0]; - mathLabel.innerHTML = response.responseText; - var mathQuestion = spamQuestionDiv.getElementsByTagName('input')[0]; - mathQuestion.value = ''; - }, - - postComment: function() { - var form = $("PageCommentInterface_Form_PostCommentForm"); - var message = $("PageCommentInterface_Form_PostCommentForm_error"); +(function($) { + $(document).ready(function () { - if(form.elements.Name.value && form.elements.Comment.value) { - if(noComments = $('NoComments')) { - Element.remove(noComments); - var pageComments = document.createElement('ul'); - pageComments.id = 'PageComments'; - $('CommentHolder').appendChild(pageComments); - } - - message.style.display = 'none'; - // Create a new
  • for the post - var pageComments = $('PageComments').getElementsByTagName('li'); - var __newComment = document.createElement('li'); - - - // Add it to the list with a 'loading' message - $('PageComments').insertBefore(__newComment, pageComments[0]); - __newComment.innerHTML = '

    Loading...

    '; - - - // Submit the form via ajax - Ajax.SubmitForm(form, "action_postcomment", { - onSuccess : function(response) { - - // Create an Ajax request to regenerate the spam protection question - //need to check if there is actually a spam question to change first - if(form.elements.Math){ - new Ajax.Request(document.getElementsByTagName('base')[0].href+'PageCommentInterface_Controller/newspamquestion', { - onSuccess: loadSpamQuestion, - onFailure: Ajax.Evaluator - }); - } - - if(response.responseText != "spamprotectionfailed"){ - __newComment.className ="even"; - // Load the response into the new
  • - __newComment.innerHTML = response.responseText; - Behaviour.apply(__newComment); - - // Flash it using Scriptaculous - new Effect.Highlight(__newComment, { endcolor: '#e9e9e9' } ); - if(response.responseText.match('Spam detected!!')) { - __newComment.className = 'spam'; - } - - }else{ - __newComment.innerHTML = ""; - Behaviour.apply(__newComment); - message.style.display = ''; - message.innerHTML = "You got the spam question wrong."; - - } - - - }, - onFailure : function(response) { - alert(response.responseText); - } - }); - } else { - message.style.display = ''; - message.innerHTML = "Please enter your name and a comment to be posted to the site."; - } + // @todo finish return false; - }, - - /** - * Ajax handler of moderation removal - */ - deleteComment: function() { - var __comment = this.parentNode.parentNode.parentNode; - __comment.getElementsByTagName('span')[0].innerHTML = "Removing..."; - - new Ajax.Request(this.href + '?ajax=1', { - onSuccess : function(response) { - // Clear our wee status message - __comment.getElementsByTagName('span')[0].innerHTML = "Removing..."; + $('.comments-holder-container form').submit(function (e) { - // Remove it using Scriptaculous - new Effect.Highlight(__comment, { - startcolor: '#cc9999' , endcolor: '#e9e9e9', duration: 0.5, - afterFinish : function () { - var commentList = __comment.parentNode; - commentList.removeChild(__comment); - if(!commentList.firstChild) { - $('CommentHolder').innerHTML = "

    No one has commented on this page yet.

    "; - } - } - } ); - }, - - onFailure : function(response) { - alert(response.responseText); - } - }); - - return false; - }, - - /** - * Ajax handler of spam reporting - */ - reportSpam: function() { - var __comment = this.parentNode.parentNode.parentNode.parentNode; - - __comment.getElementsByTagName('span')[0].innerHTML = "Reporting spam..."; - - - new Ajax.Request(this.href + '?ajax=1', { - onSuccess : function(response) { - if(response.responseText != '') { - // Load the response into the
  • - __comment.innerHTML = response.responseText; - Behaviour.apply(__comment); - - // Flash it using Scriptaculous - new Effect.Highlight(__comment, { endcolor: '#cc9999' } ); + if($('.comment-holder form [name=Name]').val() && $('.comment-holder form [name=Comment]').val()) { + // remove the no comments posted text + if($('.no-comments-yet').length > 0) { + $('.no-comments-yet').remove(); - __comment.className = 'spam'; - } else { - new Effect.Highlight(__comment, { - startcolor: '#cc9999' , endcolor: '#e9e9e9', duration: 0.5, - afterFinish : function() { - var commentList = __comment.parentNode; - commentList.removeChild(__comment); - if(!commentList.firstChild) { - $('CommentHolder').innerHTML = "

    No one has commented on this page yet.

    "; - } - } - } ); + $(this).parents(".comments-holder-container") + .find(".comments-holder") + .append(""); } - }, - - onFailure : function(response) { - alert(response.responseText); - } - }); - - return false; - }, - - /** - * Ajax handler of ham reporting - */ - reportHam: function() { - var __comment = this.parentNode.parentNode.parentNode.parentNode; - - __comment.getElementsByTagName('span')[0].innerHTML = "Reporting as not spam..."; - - new Ajax.Request(this.href + '?ajax=1', { - onSuccess : function(response) { - // Load the response into the
  • - __comment.innerHTML = response.responseText; - Behaviour.apply(__comment); - // Flash it using Scriptaculous - new Effect.Highlight(__comment, { endcolor: '#e9e9e9' } ); - __comment.className = 'notspam'; - }, - - onFailure : function(response) { - alert(response.responseText); - } - }); - - return false; - }, - - /** - * Ajax handler of ham reporting - */ - approveComment: function() { - var __comment = this.parentNode.parentNode.parentNode.parentNode; - - __comment.getElementsByTagName('span')[0].innerHTML = "Marking comment as approved..."; - - new Ajax.Request(this.href + '?ajax=1', { - onSuccess : function(response) { - // Load the response into the
  • - __comment.innerHTML = response.responseText; - Behaviour.apply(__comment); + error.hide(); + $('#PageComments').prepend('

  • Loading...

    • '); + newComment = $('#PageComments').children()[0]; + newComment = $(newComment); - // Flash it using Scriptaculous - new Effect.Highlight(__comment, { endcolor: '#e9e9e9' } ); - __comment.className = 'notspam'; - }, - - onFailure : function(response) { - alert(response.responseText); + $(this).ajaxSubmit(function(response) { + if($('#PageComments_holder [name=Math]').length > 0) { + $.ajax({ + url: jQuery('base').attr('href') + 'PageCommentInterface_Controller/newspamquestion', + cache: false, + success: function(html){ + // Load spam stuff goes in here + $('#PageComments_holder #Math label').text(html); + $('#PageComments_holder #Math input').val(''); + }, + failure: function(html) { + eval(html); + } + }); + } + if(response.match('validationError')) { + newComment.remove(); + eval(response); + } else if(response != "spamprotectionfailed") { + newComment.addClass('even'); + newComment.html(response); + newComment.effects('highlight', {}, 1000); + if(response.match('Spam detected!!')) { + newComment.addClass('spam'); + } + $(this).resetForm(); + } else { + error.text('You got the spam question wrong'); + error.show(); + newComment.remove(); + $('#PageComments_holder #Math input').focus(); + } + }); + } else { + // We're missing things, alert it here + + error.show(); } + + e.preventDefault(); }); - return false; - } -} - -PageCommentInterface.applyTo("#PageComments_holder"); -function loadSpamQuestion(response) { - var spamQuestionDiv = $('Math'); - var mathLabel = spamQuestionDiv.getElementsByTagName('label')[0]; - mathLabel.innerHTML = response.responseText; - var mathQuestion = spamQuestionDiv.getElementsByTagName('input')[0]; - mathQuestion.value = ''; -} + /** + * Clicking one of the metalinks performs the operation via ajax + * this inclues the spam and approve links + */ + $(".action-links a").live('click', function(e) { + var link = $(this); + var hide = $(this).parents("li.comments"); + + $.ajax({ + url: $(this).attr('href') + '?ajax=1', + cache: false, + success: function(html){ + if(link.hasClass('ham')) { + // comment has been marked as not spam + comment.html(html); + comment.removeClass('spam'); + comment.effect("highlight", {}, 1000); + } + else if(link.hasClass('approve')) { + // comment has been approved + comment.html(html); + comment.removeClass('unmoderated'); + comment.effect("highlight", {}, 1000); + } + else if(link.hasClass('delete')) { + hide.fadeOut(1000, function() { + var comments = hide.parents("ul"); + hide.remove(); + + if(comments.children().length == 0) { + comments.html("

    No one has commented on this page yet.

    "); + } + }); + } + else if(link.hasClass('spam')) { + if(html) { + hide.html(html); + hide.effect("highlight", {}, 1000); + } else { + hide.fadeOut(1000, function() { // Fade out the comment + var comments = hide.parent(); // Grab the comments holder + hide.remove(); // remove the comment + + if(comments.children().length == 0) { + comments.html("

    No one has commented on this page yet.

    "); + } + }); + } + } + }, + failure: function(html) { + alert(html) + } + }); + + e.preventDefault(); + }) + }); +})(jQuery); diff --git a/templates/CommentsInterface.ss b/templates/CommentsInterface.ss index 3b64145..6678453 100755 --- a/templates/CommentsInterface.ss +++ b/templates/CommentsInterface.ss @@ -1,5 +1,5 @@ <% if CommentsEnabled %> -
    +

    <% _t('POSTCOM','Post your comment') %>

    @@ -21,7 +21,7 @@ <% if Comments %>
      <% control Comments %> -
    • +
    • <% include CommentsInterface_singlecomment %>
      • <% end_control %> @@ -51,12 +51,12 @@
    <% end_if %> <% else %> -

    <% _t('NOCOMMENTSYET','No one has commented on this page yet.') %>

    +

    <% _t('NOCOMMENTSYET','No one has commented on this page yet.') %>

    <% end_if %>
    <% if DeleteAllLink %> -

    +

    <% _t('PageCommentInterface.DELETEALLCOMMENTS','Delete all comments on this page') %>

    <% end_if %> diff --git a/templates/CommentsInterface_singlecomment.ss b/templates/CommentsInterface_singlecomment.ss index b32a193..44f966e 100755 --- a/templates/CommentsInterface_singlecomment.ss +++ b/templates/CommentsInterface_singlecomment.ss @@ -13,17 +13,17 @@ <% end_if %>

    -