mirror of
https://github.com/silverstripe/silverstripe-comments
synced 2024-10-22 11:05:49 +02:00
ENHANCEMENT: started to incorporate the jQuery version of comments
This commit is contained in:
Will Rossiter
parent
008e2c0143
commit
f539a97d07
@ -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 <li> 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 = '<p><img src="cms/images/network-save.gif" /> Loading...</p>';
|
||||
|
||||
|
||||
// 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 <li>
|
||||
__newComment.innerHTML = response.responseText;
|
||||
Behaviour.apply(__newComment);
|
||||
|
||||
// Flash it using Scriptaculous
|
||||
new Effect.Highlight(__newComment, { endcolor: '#e9e9e9' } );
|
||||
if(response.responseText.match('<b>Spam detected!!</b>')) {
|
||||
__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 = "<p id=\"NoComments\">No one has commented on this page yet.</p>";
|
||||
}
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
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 <li>
|
||||
__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 = "<p id=\"NoComments\">No one has commented on this page yet.</p>";
|
||||
}
|
||||
}
|
||||
} );
|
||||
$(this).parents(".comments-holder-container")
|
||||
.find(".comments-holder")
|
||||
.append("<ul class='comments-list'></ul>");
|
||||
}
|
||||
},
|
||||
|
||||
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 <li>
|
||||
__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 <li>
|
||||
__comment.innerHTML = response.responseText;
|
||||
Behaviour.apply(__comment);
|
||||
error.hide();
|
||||
$('#PageComments').prepend('<li><p><img src="cms/images/network-save.gif" /> Loading...</p></li>');
|
||||
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('<b>Spam detected!!</b>')) {
|
||||
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("<p id=\"no-comments-yet\">No one has commented on this page yet.</p>");
|
||||
}
|
||||
});
|
||||
}
|
||||
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("<p id=\"no-comments-yet\">No one has commented on this page yet.</p>");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
failure: function(html) {
|
||||
alert(html)
|
||||
}
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
})
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<% if CommentsEnabled %>
|
||||
<div id="$CommentHolderID">
|
||||
<div id="$CommentHolderID" class="comments-holder-container">
|
||||
|
||||
<h4><% _t('POSTCOM','Post your comment') %></h4>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<% if Comments %>
|
||||
<ul class="comments-list">
|
||||
<% control Comments %>
|
||||
<li class="$EvenOdd<% if FirstLast %> $FirstLast <% end_if %> $SpamClass">
|
||||
<li class="comment $EvenOdd<% if FirstLast %> $FirstLast <% end_if %> $SpamClass">
|
||||
<% include CommentsInterface_singlecomment %>
|
||||
</li>
|
||||
<% end_control %>
|
||||
@ -51,12 +51,12 @@
|
||||
</div>
|
||||
<% end_if %>
|
||||
<% else %>
|
||||
<p id="NoComments"><% _t('NOCOMMENTSYET','No one has commented on this page yet.') %></p>
|
||||
<p class="no-comments-yet"><% _t('NOCOMMENTSYET','No one has commented on this page yet.') %></p>
|
||||
<% end_if %>
|
||||
</div>
|
||||
|
||||
<% if DeleteAllLink %>
|
||||
<p id="DeleteComments">
|
||||
<p class="delete-comments">
|
||||
<a href="$DeleteAllLink"><% _t('PageCommentInterface.DELETEALLCOMMENTS','Delete all comments on this page') %></a>
|
||||
</p>
|
||||
<% end_if %>
|
||||
|
||||
@ -13,17 +13,17 @@
|
||||
<% end_if %>
|
||||
</p>
|
||||
|
||||
<ul class="actionLinks">
|
||||
<ul class="action-links">
|
||||
<% if ApproveLink %>
|
||||
<li><a href="$ApproveLink" class="approvelink"><% _t('APPROVE', 'approve this comment') %></a></li>
|
||||
<li><a href="$ApproveLink" class="approve"><% _t('APPROVE', 'approve this comment') %></a></li>
|
||||
<% end_if %>
|
||||
<% if SpamLink %>
|
||||
<li><a href="$SpamLink" class="spamlink"><% _t('ISSPAM','this comment is spam') %></a></li>
|
||||
<li><a href="$SpamLink" class="spam"><% _t('ISSPAM','this comment is spam') %></a></li>
|
||||
<% end_if %>
|
||||
<% if HamLink %>
|
||||
<li><a href="$HamLink" class="hamlink"><% _t('ISNTSPAM','this comment is not spam') %></a></li>
|
||||
<li><a href="$HamLink" class="ham"><% _t('ISNTSPAM','this comment is not spam') %></a></li>
|
||||
<% end_if %>
|
||||
<% if DeleteLink %>
|
||||
<li class="last"><a href="$DeleteLink" class="deletelink"><% _t('REMCOM','remove this comment') %></a></li>
|
||||
<li class="last"><a href="$DeleteLink" class="delete"><% _t('REMCOM','remove this comment') %></a></li>
|
||||
<% end_if %>
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user